Pop open a message when user deletes an annotation

When a user deletes any number of annotations, they are notified of the action
by a popup message with an undo button. Besides that, this change reuses the
existing messageBar CSS class from the new alt-text dialog as much as possible.

Author: ryzokuken

l10n/en-US/viewer.ftl

@@ -493,3 +493,13 @@ pdfjs-editor-alt-text-settings-editor-title = Alt text editor
 pdfjs-editor-alt-text-settings-show-dialog-button-label = Show alt text editor right away when adding an image
 pdfjs-editor-alt-text-settings-show-dialog-description = Helps you make sure all your images have alt text.
 pdfjs-editor-alt-text-settings-close-button = Close
+
+# Variables:
+#   $type (String) - the type of annotation that was just removed with an optional quantity.
+pdfjs-editor-undo-bar-message = { $type } removed
+pdfjs-editor-undo-bar-undo-button =
+    .title = Undo
+pdfjs-editor-undo-bar-undo-button-label = Undo
+pdfjs-editor-undo-bar-close-button =
+    .title = Close
+pdfjs-editor-undo-bar-close-button-label = Close

src/display/editor/tools.js

@@ -562,6 +562,8 @@ class AnnotationEditorUIManager {
 
   #editorsToRescale = new Set();
 
+  #editorUndoBar = null;
+
   #enableHighlightFloatingButton = false;
 
   #enableUpdatedAddImage = false;
@@ -769,7 +771,8 @@ class AnnotationEditorUIManager {
     enableHighlightFloatingButton,
     enableUpdatedAddImage,
     enableNewAltTextWhenAddingImage,
-    mlManager
+    mlManager,
+    editorUndoBar
   ) {
     const signal = (this._signal = this.#abortController.signal);
     this.#container = container;
@@ -804,6 +807,7 @@ class AnnotationEditorUIManager {
       rotation: 0,
     };
     this.isShiftKeyDown = false;
+    this.#editorUndoBar = editorUndoBar;
 
     if (typeof PDFJSDev !== "undefined" && PDFJSDev.test("TESTING")) {
       Object.defineProperty(this, "reset", {
@@ -2002,6 +2006,12 @@ class AnnotationEditorUIManager {
 
     const editors = [...this.#selectedEditors];
     const cmd = () => {
+      this.#editorUndoBar?.show(
+        undo,
+        editors.length > 1
+          ? `${editors.length} annotations`
+          : editors[0].editorType
+      );
       for (const editor of editors) {
         editor.remove();
       }

web/app.js

@@ -68,6 +68,7 @@ import { AltTextManager } from "web-alt_text_manager";
 import { AnnotationEditorParams } from "web-annotation_editor_params";
 import { CaretBrowsingMode } from "./caret_browsing.js";
 import { DownloadManager } from "web-download_manager";
+import { EditorUndoBar } from "./editor_undo_bar.js";
 import { OverlayManager } from "./overlay_manager.js";
 import { PasswordPrompt } from "./password_prompt.js";
 import { PDFAttachmentViewer } from "web-pdf_attachment_viewer";
@@ -182,6 +183,7 @@ const PDFViewerApplication = {
   _isCtrlKeyDown: false,
   _caretBrowsing: null,
   _isScrolling: false,
+  editorUndoBar: null,
 
   // Called once when the document is loaded.
   async initialize(appConfig) {
@@ -450,6 +452,9 @@ const PDFViewerApplication = {
           )
         : null;
     }
+    const editorUndoBar = (this.editorUndoBar = appConfig.editorUndoBar
+      ? new EditorUndoBar(appConfig.editorUndoBar, eventBus)
+      : null);
 
     const enableHWA = AppOptions.get("enableHWA");
     const pdfViewer = new PDFViewer({
@@ -460,6 +465,7 @@ const PDFViewerApplication = {
       linkService: pdfLinkService,
       downloadManager,
       altTextManager,
+      editorUndoBar,
       findController,
       scriptingManager:
         AppOptions.get("enableScripting") && pdfScriptingManager,
@@ -2962,6 +2968,10 @@ function onKeyDown(evt) {
           this.findBar.close();
           handled = true;
         }
+        if (this.editorUndoBar?.isOpen) {
+          this.editorUndoBar.hide();
+          handled = true;
+        }
         break;
       case 40: // down arrow
         if (this.supportsCaretBrowsingMode) {

web/dialog.css

@@ -291,7 +291,8 @@
       }
 
       > div {
-        &::before, > div {
+        &::before,
+        > div {
           margin-block: 4px;
         }
 

web/editor_undo_bar.js

@@ -0,0 +1,71 @@
+/* Copyright 2024 Mozilla Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+class EditorUndoBar {
+  #container;
+
+  #controller = null;
+
+  isOpen = false;
+
+  #message;
+
+  #undoButton;
+
+  constructor({ container, message, undoButton, closeButton }, eventBus) {
+    this.#container = container;
+    this.#message = message;
+    this.#undoButton = undoButton;
+
+    // Caveat: we have to pick between registering these everytime the bar is
+    // shown and not having the ability to cleanup using AbortController.
+    const boundHide = this.hide.bind(this);
+    closeButton.addEventListener("click", boundHide);
+    eventBus._on("beforeprint", boundHide);
+    eventBus._on("download", boundHide);
+  }
+
+  show(action, type) {
+    this.hide();
+    this.#message.setAttribute("data-l10n-args", JSON.stringify({ type }));
+    this.#container.hidden = false;
+    this.isOpen = true;
+
+    this.#controller = new AbortController();
+    const opts = { signal: this.#controller.signal };
+
+    this.#undoButton.addEventListener(
+      "click",
+      () => {
+        action();
+        this.hide();
+      },
+      opts
+    );
+    this.#undoButton.focus();
+  }
+
+  hide() {
+    if (!this.isOpen) {
+      return;
+    }
+    this.isOpen = false;
+    this.#container.hidden = true;
+    this.#controller?.abort();
+    this.#controller = null;
+  }
+}
+
+export { EditorUndoBar };

web/message_bar.css

@@ -1,3 +1,18 @@
+/* Copyright 2024 Mozilla Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 .messageBar {
   --closing-button-icon: url(images/messageBar_closingButton.svg);
   --message-bar-close-button-color: var(--text-primary-color);
@@ -100,3 +115,51 @@
     }
   }
 }
+
+#editorUndoBar {
+  --message-bar-icon: url(images/secondaryToolbarButton-documentProperties.svg);
+  --message-bar-icon-color: #0060df;
+  --message-bar-bg-color: #deeafc;
+  --message-bar-fg-color: #15141a;
+  --text-primary-color: #15141a;
+  --message-bar-border-color: rgb(0 0 0 / 0.08);
+
+  position: fixed;
+  bottom: 100px;
+  left: 50%;
+  transform: translateX(-50%);
+
+  padding: 8px 8px 8px 16px;
+
+  font-family: sans-serif;
+  font-size: 15px;
+
+  #editorUndoBarUndoButton {
+    border-radius: 4px;
+    font-weight: 590;
+    line-height: 19.5px;
+    color: #15141a;
+    border: none;
+    padding: 4px 16px;
+    height: 32px;
+
+    background-color: rgba(21 20 26 / 0.07);
+
+    &:hover {
+      background-color: rgba(21 20 26 / 0.14);
+    }
+
+    &:active {
+      background-color: rgba(21 20 26 / 0.21);
+    }
+
+    &:focus {
+      outline: 2px solid #0060df;
+      outline-offset: 2px;
+    }
+  }
+
+  > div {
+    align-items: center;
+  }
+}

web/pdf_viewer.css

@@ -12,11 +12,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@import url(message_bar.css);
 @import url(dialog.css);
 @import url(text_layer_builder.css);
 @import url(annotation_layer_builder.css);
 @import url(xfa_layer_builder.css);
-@import url(message_bar.css);
 /* Ignored in GECKOVIEW builds: */
 @import url(annotation_editor_layer_builder.css);
 

web/pdf_viewer.js

@@ -213,6 +213,8 @@ class PDFViewer {
 
   #containerTopLeft = null;
 
+  #editorUndoBar = null;
+
   #enableHWA = false;
 
   #enableHighlightFloatingButton = false;
@@ -280,6 +282,7 @@ class PDFViewer {
     this.downloadManager = options.downloadManager || null;
     this.findController = options.findController || null;
     this.#altTextManager = options.altTextManager || null;
+    this.#editorUndoBar = options.editorUndoBar || null;
 
     if (this.findController) {
       this.findController.onIsPageVisible = pageNumber =>
@@ -901,7 +904,8 @@ class PDFViewer {
               this.#enableHighlightFloatingButton,
               this.#enableUpdatedAddImage,
               this.#enableNewAltTextWhenAddingImage,
-              this.#mlManager
+              this.#mlManager,
+              this.#editorUndoBar
             );
             eventBus.dispatch("annotationeditoruimanager", {
               source: this,

web/viewer.html

@@ -686,6 +686,20 @@
 <!--#endif-->
       </div>  <!-- dialogContainer -->
 
+      <div id="editorUndoBar" class="messageBar" hidden>
+        <div>
+          <div>
+            <span id="editorUndoBarMessage" class="description" data-l10n-id="pdfjs-editor-undo-bar-message" data-l10n-args='{ "type": "Annotation" }'>[Annotation] removed</span>
+          </div>
+          <button id="editorUndoBarUndoButton" class="undoButton" type="button" tabindex="0" title="Undo" data-l10n-id="pdfjs-editor-undo-bar-undo-button">
+            <span data-l10n-id="pdfjs-editor-undo-bar-undo-button-label">Undo</span>
+          </button>
+          <button id="editorUndoBarCloseButton" class="closeButton" type="button" tabindex="0" title="Close" data-l10n-id="pdfjs-editor-undo-bar-close-button">
+            <span data-l10n-id="pdfjs-editor-undo-bar-close-button-label">Close</span>
+          </button>
+        </div>
+      </div> <!-- editorUndoBar -->
+
     </div> <!-- outerContainer -->
     <div id="printContainer"></div>
   </body>

web/viewer.js

@@ -223,6 +223,12 @@ function getViewerConfiguration() {
       editorHighlightShowAll: document.getElementById("editorHighlightShowAll"),
     },
     printContainer: document.getElementById("printContainer"),
+    editorUndoBar: {
+      container: document.getElementById("editorUndoBar"),
+      message: document.getElementById("editorUndoBarMessage"),
+      undoButton: document.getElementById("editorUndoBarUndoButton"),
+      closeButton: document.getElementById("editorUndoBarCloseButton"),
+    },
   };
 }