Pop open a message when user deletes an annotation

mozilla · Oct 14, 2024 · ebf8d04 · ebf8d04
1 parent 0f0ecaa
commit ebf8d04
Show file tree

Hide file tree

Showing 9 changed files with 236 additions and 126 deletions.
diff --git a/l10n/en-US/viewer.ftl b/l10n/en-US/viewer.ftl
@@ -493,3 +493,9 @@ 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-messagebar-annotation-removed-text = { $type } removed
+pdfjs-editor-messagebar-annotation-undo-button = Undo
+pdfjs-editor-messagebar-annotation-close-button = Close
diff --git a/src/display/editor/tools.js b/src/display/editor/tools.js
@@ -621,6 +621,8 @@ class AnnotationEditorUIManager {
 
   #viewer = null;
 
+  #toastManager;
+
   static TRANSLATE_SMALL = 1; // page units.
 
   static TRANSLATE_BIG = 10; // page units.
@@ -769,7 +771,8 @@ class AnnotationEditorUIManager {
     enableHighlightFloatingButton,
     enableUpdatedAddImage,
     enableNewAltTextWhenAddingImage,
-    mlManager
+    mlManager,
+    toastManager
   ) {
     const signal = (this._signal = this.#abortController.signal);
     this.#container = container;
@@ -804,6 +807,7 @@ class AnnotationEditorUIManager {
       rotation: 0,
     };
     this.isShiftKeyDown = false;
+    this.#toastManager = toastManager;
 
     if (typeof PDFJSDev !== "undefined" && PDFJSDev.test("TESTING")) {
       Object.defineProperty(this, "reset", {
@@ -2002,6 +2006,12 @@ class AnnotationEditorUIManager {
 
     const editors = [...this.#selectedEditors];
     const cmd = () => {
+      this.#toastManager.show(
+        undo,
+        editors.length > 1
+          ? `${editors.length} annotations`
+          : editors[0].constructor._type
+      );
       for (const editor of editors) {
         editor.remove();
       }

diff --git a/web/app.js b/web/app.js
@@ -87,6 +87,7 @@ import { PDFThumbnailViewer } from "web-pdf_thumbnail_viewer";
 import { PDFViewer } from "./pdf_viewer.js";
 import { Preferences } from "web-preferences";
 import { SecondaryToolbar } from "web-secondary_toolbar";
+import { ToastManager } from "./toast_manager.js";
 import { Toolbar } from "web-toolbar";
 import { ViewHistory } from "./view_history.js";
 
@@ -450,6 +451,10 @@ const PDFViewerApplication = {
           )
         : null;
     }
+    const toastManager = new ToastManager(
+      appConfig.annotationRemovedToast,
+      10000
+    );
 
     const enableHWA = AppOptions.get("enableHWA");
     const pdfViewer = new PDFViewer({
@@ -460,6 +465,7 @@ const PDFViewerApplication = {
       linkService: pdfLinkService,
       downloadManager,
       altTextManager,
+      toastManager,
       findController,
       scriptingManager:
         AppOptions.get("enableScripting") && pdfScriptingManager,

diff --git a/web/dialog.css b/web/dialog.css
@@ -273,36 +273,21 @@
       --message-bar-bg-color: #ffebcd;
       --message-bar-fg-color: #15141a;
       --message-bar-border-color: rgb(0 0 0 / 0.08);
+      --message-bar-icon: url(images/messageBar_warning.svg);
       --message-bar-icon-color: #cd411e;
-      --message-bar-close-button-border-radius: 4px;
-      --message-bar-close-button-border: none;
-      --message-bar-close-button-color: var(--text-primary-color);
-      --message-bar-close-button-hover-bg-color: rgb(21 20 26 / 0.14);
-      --message-bar-close-button-active-bg-color: rgb(21 20 26 / 0.21);
-      --message-bar-close-button-focus-bg-color: rgb(21 20 26 / 0.07);
-      --message-bar-close-button-color-hover: var(--text-primary-color);
 
       @media (prefers-color-scheme: dark) {
         --message-bar-bg-color: #5a3100;
         --message-bar-fg-color: #fbfbfe;
         --message-bar-border-color: rgb(255 255 255 / 0.08);
         --message-bar-icon-color: #e49c49;
-        --message-bar-close-button-hover-bg-color: rgb(251 251 254 / 0.14);
-        --message-bar-close-button-active-bg-color: rgb(251 251 254 / 0.21);
-        --message-bar-close-button-focus-bg-color: rgb(251 251 254 / 0.07);
       }
 
       @media screen and (forced-colors: active) {
         --message-bar-bg-color: HighlightText;
         --message-bar-fg-color: CanvasText;
         --message-bar-border-color: CanvasText;
         --message-bar-icon-color: CanvasText;
-        --message-bar-close-button-color: ButtonText;
-        --message-bar-close-button-border: 1px solid ButtonText;
-        --message-bar-close-button-hover-bg-color: ButtonText;
-        --message-bar-close-button-active-bg-color: ButtonText;
-        --message-bar-close-button-focus-bg-color: ButtonText;
-        --message-bar-close-button-color-hover: HighlightText;
       }
 
       position: relative;

diff --git a/web/message_bar.css b/web/message_bar.css
@@ -1,119 +1,153 @@
 .messageBar {
-  --message-bar-warning-icon: url(images/messageBar_warning.svg);
-  --closing-button-icon: url(images/messageBar_closingButton.svg);
-
-  display: flex;
-  position: relative;
-  padding: 12px 8px 12px 0;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  gap: 8px;
-  align-self: stretch;
-
-  border-radius: 4px;
+	--closing-button-icon: url(images/messageBar_closingButton.svg);
+	--message-bar-close-button-color: var(--text-primary-color);
+	--message-bar-close-button-color-hover: var(--text-primary-color);
+	--message-bar-close-button-border-radius: 4px;
+	--message-bar-close-button-border: none;
+	--message-bar-close-button-hover-bg-color: rgb(21 20 26 / 0.14);
+	--message-bar-close-button-active-bg-color: rgb(21 20 26 / 0.21);
+	--message-bar-close-button-focus-bg-color: rgb(21 20 26 / 0.07);
+
+	@media (prefers-color-scheme: dark) {
+		--message-bar-close-button-hover-bg-color: rgb(251 251 254 / 0.14);
+		--message-bar-close-button-active-bg-color: rgb(251 251 254 / 0.21);
+		--message-bar-close-button-focus-bg-color: rgb(251 251 254 / 0.07);
+	}
+
+	@media screen and (forced-colors: active) {
+		--message-bar-close-button-color: ButtonText;
+		--message-bar-close-button-border: 1px solid ButtonText;
+		--message-bar-close-button-hover-bg-color: ButtonText;
+		--message-bar-close-button-active-bg-color: ButtonText;
+		--message-bar-close-button-focus-bg-color: ButtonText;
+		--message-bar-close-button-color-hover: HighlightText;
+	}
+
+	display: flex;
+	position: relative;
+	padding: 12px 8px 12px 0;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	gap: 8px;
+	align-self: stretch;
+
+	border-radius: 4px;
+
+	border: 1px solid var(--message-bar-border-color);
+	background: var(--message-bar-bg-color);
+	color: var(--message-bar-fg-color);
+
+	> div {
+		display: flex;
+		padding-inline-start: 16px;
+		align-items: flex-start;
+		gap: 8px;
+		align-self: stretch;
+		padding-inline-end: 32px;
+
+		&::before {
+			content: "";
+			display: inline-block;
+			width: 16px;
+			height: 16px;
+			mask-image: var(--message-bar-icon);
+			mask-size: cover;
+			background-color: var(--message-bar-icon-color);
+		}
+
+		> div {
+			display: flex;
+			flex-direction: column;
+			align-items: flex-start;
+			gap: 8px;
+			flex: 1 0 0;
+
+			.title {
+				font-size: 13px;
+				font-weight: 590;
+			}
+
+			.description {
+				font-size: 13px;
+			}
+		}
+	}
+
+	.closeButton {
+		position: absolute;
+		width: 32px;
+		height: 32px;
+		inset-inline-end: 8px;
+		inset-block-start: 8px;
+		background: none;
+		border-radius: var(--message-bar-close-button-border-radius);
+		border: var(--message-bar-close-button-border);
+
+		&::before {
+			content: "";
+			display: inline-block;
+			width: 16px;
+			height: 16px;
+			mask-image: var(--closing-button-icon);
+			mask-size: cover;
+			background-color: var(--message-bar-close-button-color);
+		}
+
+		&:is(:hover, :active, :focus)::before {
+			background-color: var(--message-bar-close-button-color-hover);
+		}
+
+		&:hover {
+			background-color: var(--message-bar-close-button-hover-bg-color);
+		}
+
+		&:active {
+			background-color: var(--message-bar-close-button-active-bg-color);
+		}
+
+		&:focus {
+			background-color: var(--message-bar-close-button-focus-bg-color);
+		}
+
+		> span {
+			display: inline-block;
+			width: 0;
+			height: 0;
+			overflow: hidden;
+		}
+	}
+}
 
-  border: 1px solid var(--message-bar-border-color);
-  background: var(--message-bar-bg-color);
-  color: var(--message-bar-fg-color);
+#annotationRemovedToast {
+  --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);
+
+	.undoButton {
+		background: rgba(21, 20, 26, 0.14);
+		border-radius: 4px;
+		font-weight: bold;
+		color: #15141a;
+		border: none;
+    padding: 8px 16px;
+	}
 
   > div {
-    display: flex;
-    padding-inline-start: 16px;
-    align-items: flex-start;
-    gap: 8px;
-    align-self: stretch;
-
-    &::before {
-      content: "";
-      display: inline-block;
-      width: 16px;
-      height: 16px;
-      mask-image: var(--message-bar-warning-icon);
-      mask-size: cover;
-      background-color: var(--message-bar-icon-color);
-    }
-
-    > div {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 8px;
-      flex: 1 0 0;
-
-      .title {
-        font-size: 13px;
-        font-weight: 590;
-      }
-
-      .description {
-        font-size: 13px;
-      }
-    }
+    align-items: center;
   }
 
   .closeButton {
-    position: absolute;
-    width: 32px;
-    height: 32px;
-    inset-inline-end: 8px;
-    inset-block-start: 8px;
-    background: none;
-    border-radius: var(--message-bar-close-button-border-radius);
-    border: var(--message-bar-close-button-border);
-
-    &::before {
-      content: "";
-      display: inline-block;
-      width: 16px;
-      height: 16px;
-      mask-image: var(--closing-button-icon);
-      mask-size: cover;
-      background-color: var(--message-bar-close-button-color);
-    }
-
-    &:is(:hover, :active, :focus)::before {
-      background-color: var(--message-bar-close-button-color-hover);
-    }
-
-    &:hover {
-      background-color: var(--message-bar-close-button-hover-bg-color);
-    }
-
-    &:active {
-      background-color: var(--message-bar-close-button-active-bg-color);
-    }
-
-    &:focus {
-      background-color: var(--message-bar-close-button-focus-bg-color);
-    }
-
-    > span {
-      display: inline-block;
-      width: 0;
-      height: 0;
-      overflow: hidden;
-    }
+    padding-top: 12px;
   }
 }
 
-#undoAnnotationDeleteMessage {
-  --message-bar-bg-color: #DEEAFC;
-  --message-bar-fg-color: #15141a;
-  --message-bar-border-color: rgb(0 0 0 / 0.08);
-  --message-bar-icon-color: #cd411e;
-  --message-bar-close-button-border-radius: 4px;
-  --message-bar-close-button-border: none;
-  --message-bar-close-button-color: var(--text-primary-color);
-  --message-bar-close-button-hover-bg-color: rgb(21 20 26 / 0.14);
-  --message-bar-close-button-active-bg-color: rgb(21 20 26 / 0.21);
-  --message-bar-close-button-focus-bg-color: rgb(21 20 26 / 0.07);
-  --message-bar-close-button-color-hover: var(--text-primary-color);
-
-  /* hacks */
-  position: fixed;
-  bottom: 100px;
-  width: 400px;
-  left: 50%;
-  transform: translateX(-50%);
+#toastContainer {
+	position: fixed;
+	bottom: 100px;
+	left: 50%;
+	transform: translateX(-50%);
 }