Merge pull request #20913 from calixteman/new_badge

Add a new badge close to the Manage button in the sidebar.

Author: calixteman

l10n/en-US/viewer.ftl

@@ -779,3 +779,7 @@ pdfjs-views-manager-paste-button-before =
 #   $page (Number) - the page number after which the paste button is.
 pdfjs-views-manager-paste-button-after =
     .title = Paste after page { $page }
+
+# Badge used to promote a new feature in the UI, keep it as short as possible.
+# It's spelled uppercase for English, but it can be translated as usual.
+pdfjs-new-badge-content = NEW

web/app.js

@@ -600,6 +600,7 @@ const PDFViewerApplication = {
         pageColors,
         abortSignal,
         enableSplitMerge,
+        enableNewBadge: AppOptions.get("enableNewBadge"),
         statusBar: viewsManager.viewsManagerStatusBar,
         undoBar: viewsManager.viewsManagerUndoBar,
         manageMenu: viewsManager.manageMenu,

web/app_options.js

@@ -250,6 +250,11 @@ const defaultOptions = {
     value: true,
     kind: OptionKind.VIEWER + OptionKind.PREFERENCE,
   },
+  enableNewBadge: {
+    /** @type {boolean} */
+    value: typeof PDFJSDev === "undefined" || PDFJSDev.test("MOZCENTRAL"),
+    kind: OptionKind.VIEWER + OptionKind.PREFERENCE,
+  },
   enableOptimizedPartialRendering: {
     /** @type {boolean} */
     value: false,

web/pdf_thumbnail_viewer.js

@@ -64,6 +64,8 @@ const SPACE_FOR_DRAG_MARKER_WHEN_NO_NEXT_ELEMENT = 15;
  *   mode.
  * @property {AbortSignal} [abortSignal] - The AbortSignal for the window
  *   events.
+ * @property {boolean} [enableNewBadge] - Enables the "new" badge for the split
+ *   and merge features.
  * @property {boolean} [enableSplitMerge] - Enables split and merge features.
  *   The default value is `false`.
  * @property {Object} [statusBar] - The status bar elements to manage the status
@@ -172,6 +174,7 @@ class PDFThumbnailViewer {
     pageColors,
     abortSignal,
     enableSplitMerge,
+    enableNewBadge,
     statusBar,
     undoBar,
     manageMenu,
@@ -207,6 +210,14 @@ class PDFThumbnailViewer {
         delete: del,
         exportSelected,
       } = manageMenu;
+
+      if (enableNewBadge) {
+        const newSpan = document.createElement("span");
+        newSpan.setAttribute("data-l10n-id", "pdfjs-new-badge-content");
+        newSpan.classList.add("newBadge");
+        button.parentElement.before(newSpan);
+      }
+
       this.eventBus.on(
         "pagesloaded",
         () => {

web/pdf_viewer.css

@@ -36,16 +36,38 @@
   --loading-icon-delay: 400ms;
   --focus-ring-color: light-dark(#0060df, #0df);
   --focus-ring-outline: 2px solid var(--focus-ring-color);
+  --new-badge-bg: light-dark(#070, #37b847);
+  --new-badge-color: light-dark(#fff, #15141a);
+  --new-badge-border-color: light-dark(#fbfbfe / 40%, #15141a / 40%);
 
   @media screen and (forced-colors: active) {
     --pdfViewer-padding-bottom: 9px;
     --page-margin: 8px auto -1px;
     --page-border: 1px solid CanvasText;
     --spreadHorizontalWrapped-margin-LR: 3.5px;
     --focus-ring-color: CanvasText;
+    --new-badge-bg: AccentColor;
+    --new-badge-color: ButtonFace;
+    --new-badge-border-color: CanvasText;
   }
 }
 
+.newBadge {
+  background-color: var(--new-badge-bg);
+  color: var(--new-badge-color);
+  border-radius: 4px;
+  border: 1px solid var(--new-badge-border-color);
+  padding-inline: 4px;
+  margin-inline: 4px;
+  font: menu;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  flex: 0 0 fit-content;
+  user-select: none;
+}
+
 [data-main-rotation="90"] {
   transform: rotate(90deg) translateY(-100%);
 }