Merge pull request #17778 from calixteman/highlight_show_all

[Editor] Add a toggle button to show/hide all the highlights (bug 1867740)

l10n/en-US/viewer.ftl

@@ -405,3 +405,10 @@ pdfjs-editor-colorpicker-pink =
     .title = Pink
 pdfjs-editor-colorpicker-red =
     .title = Red
+
+## Show all highlights
+## This is a toggle button to show/hide all the highlights.
+
+pdfjs-editor-highlight-show-all-button-label = Show all
+pdfjs-editor-highlight-show-all-button =
+    .title = Show all

src/display/draw_layer.js

@@ -200,6 +200,10 @@ class DrawLayer {
     DrawLayer.#setBox(this.#mapping.get(id), box);
   }
 
+  show(id, visible) {
+    this.#mapping.get(id).classList.toggle("hidden", !visible);
+  }
+
   rotate(id, angle) {
     this.#mapping.get(id).setAttribute("data-main-rotation", angle);
   }

src/display/editor/annotation_editor_layer.js

@@ -362,6 +362,11 @@ class AnnotationEditorLayer {
         // Do nothing on right click.
         return;
       }
+      this.#uiManager.showAllEditors(
+        "highlight",
+        true,
+        /* updateButton = */ true
+      );
       this.#textLayer.div.classList.add("free");
       HighlightEditor.startHighlighting(
         this,

src/display/editor/editor.js

@@ -76,6 +76,8 @@ class AnnotationEditor {
 
   _initialOptions = Object.create(null);
 
+  _isVisible = true;
+
   _uiManager = null;
 
   _focusEventsAllowed = true;
@@ -1001,6 +1003,9 @@ class AnnotationEditor {
     this.div.className = this.name;
     this.div.setAttribute("id", this.id);
     this.div.setAttribute("tabIndex", 0);
+    if (!this._isVisible) {
+      this.div.classList.add("hidden");
+    }
 
     this.setInForeground();
 
@@ -1263,6 +1268,7 @@ class AnnotationEditor {
   rebuild() {
     this.div?.addEventListener("focusin", this.#boundFocusin);
     this.div?.addEventListener("focusout", this.#boundFocusout);
+    this.show(this._isVisible);
   }
 
   /**
@@ -1665,6 +1671,15 @@ class AnnotationEditor {
       },
     });
   }
+
+  /**
+   * Show or hide this editor.
+   * @param {boolean} visible
+   */
+  show(visible) {
+    this.div.classList.toggle("hidden", !visible);
+    this._isVisible = visible;
+  }
 }
 
 // This class is used to fake an editor which has been deleted.

src/display/editor/highlight.js

@@ -453,6 +453,7 @@ class HighlightEditor extends AnnotationEditor {
         !this.parent && this.div?.classList.contains("selectedEditor");
     }
     super.setParent(parent);
+    this.show(this._isVisible);
     if (mustBeSelected) {
       // We select it after the parent has been set.
       this.select();
@@ -634,6 +635,14 @@ class HighlightEditor extends AnnotationEditor {
     return !this.#isFreeHighlight;
   }
 
+  show(visible) {
+    super.show(visible);
+    if (this.parent) {
+      this.parent.drawLayer.show(this.#id, visible);
+      this.parent.drawLayer.show(this.#outlineId, visible);
+    }
+  }
+
   #getRotation() {
     // Highlight annotations are always drawn horizontally but if
     // a free highlight annotation can be rotated.

src/display/editor/tools.js

@@ -583,6 +583,8 @@ class AnnotationEditorUIManager {
 
   #pageColors = null;
 
+  #showAllStates = null;
+
   #boundBlur = this.blur.bind(this);
 
   #boundFocus = this.focus.bind(this);
@@ -1029,6 +1031,9 @@ class AnnotationEditorUIManager {
     if (this.#mode !== AnnotationEditorType.HIGHLIGHT) {
       return;
     }
+
+    this.showAllEditors("highlight", true, /* updateButton = */ true);
+
     this.#highlightWhenShiftUp = this.isShiftKeyDown;
     if (!this.isShiftKeyDown) {
       const pointerup = e => {
@@ -1477,6 +1482,20 @@ class AnnotationEditorUIManager {
       case AnnotationEditorParamsType.HIGHLIGHT_DEFAULT_COLOR:
         this.#mainHighlightColorPicker?.updateColor(value);
         break;
+      case AnnotationEditorParamsType.HIGHLIGHT_SHOW_ALL:
+        this._eventBus.dispatch("reporttelemetry", {
+          source: this,
+          details: {
+            type: "editing",
+            data: {
+              type: "highlight",
+              action: "toggle_visibility",
+            },
+          },
+        });
+        (this.#showAllStates ||= new Map()).set(type, value);
+        this.showAllEditors("highlight", value);
+        break;
     }
 
     for (const editor of this.#selectedEditors) {
@@ -1488,6 +1507,22 @@ class AnnotationEditorUIManager {
     }
   }
 
+  showAllEditors(type, visible, updateButton = false) {
+    for (const editor of this.#allEditors.values()) {
+      if (editor.editorType === type) {
+        editor.show(visible);
+      }
+    }
+    const state =
+      this.#showAllStates?.get(AnnotationEditorParamsType.HIGHLIGHT_SHOW_ALL) ??
+      true;
+    if (state !== visible) {
+      this.#dispatchUpdateUI([
+        [AnnotationEditorParamsType.HIGHLIGHT_SHOW_ALL, visible],
+      ]);
+    }
+  }
+
   enableWaiting(mustWait = false) {
     if (this.#isWaiting === mustWait) {
       return;

src/shared/util.js

@@ -90,6 +90,7 @@ const AnnotationEditorParamsType = {
   HIGHLIGHT_DEFAULT_COLOR: 32,
   HIGHLIGHT_THICKNESS: 33,
   HIGHLIGHT_FREE: 34,
+  HIGHLIGHT_SHOW_ALL: 35,
 };
 
 // Permission flags from Table 22, Section 7.6.3.2 of the PDF specification.

test/integration/highlight_editor_spec.mjs

@@ -1441,4 +1441,73 @@ describe("Highlight Editor", () => {
       );
     });
   });
+
+  describe("Show/hide all the highlights", () => {
+    let pages;
+
+    beforeAll(async () => {
+      pages = await loadAndWait("tracemonkey.pdf", ".annotationEditorLayer");
+    });
+
+    afterAll(async () => {
+      await closePages(pages);
+    });
+
+    it("must check that the highlights are correctly hidden/shown", async () => {
+      await Promise.all(
+        pages.map(async ([browserName, page]) => {
+          await page.click("#editorHighlight");
+          await page.waitForSelector(".annotationEditorLayer.highlightEditing");
+
+          let rect = await page.$eval(".annotationEditorLayer", el => {
+            const { x, y } = el.getBoundingClientRect();
+            return { x, y };
+          });
+          const clickHandle = await waitForPointerUp(page);
+          await page.mouse.move(rect.x + 20, rect.y + 20);
+          await page.mouse.down();
+          await page.mouse.move(rect.x + 20, rect.y + 120);
+          await page.mouse.up();
+          await awaitPromise(clickHandle);
+          await page.waitForSelector(getEditorSelector(0));
+
+          rect = await getSpanRectFromText(page, 1, "Languages");
+          await page.mouse.click(
+            rect.x + rect.width / 2,
+            rect.y + rect.height / 2,
+            { count: 2, delay: 100 }
+          );
+          await page.waitForSelector(getEditorSelector(1));
+
+          await page.click("#editorHighlightShowAll");
+          await page.waitForSelector(`${getEditorSelector(0)}.hidden`);
+          await page.waitForSelector(`${getEditorSelector(1)}.hidden`);
+
+          await page.click("#editorHighlightShowAll");
+          await page.waitForSelector(`${getEditorSelector(0)}:not(.hidden)`);
+          await page.waitForSelector(`${getEditorSelector(1)}:not(.hidden)`);
+
+          await page.click("#editorHighlightShowAll");
+          await page.waitForSelector(`${getEditorSelector(0)}.hidden`);
+          await page.waitForSelector(`${getEditorSelector(1)}.hidden`);
+
+          const oneToOne = Array.from(new Array(13).keys(), n => n + 2).concat(
+            Array.from(new Array(13).keys(), n => 13 - n)
+          );
+          for (const pageNumber of oneToOne) {
+            await scrollIntoView(
+              page,
+              `.page[data-page-number = "${pageNumber}"]`
+            );
+            if (pageNumber === 14) {
+              await page.click("#editorHighlightShowAll");
+            }
+          }
+
+          await page.waitForSelector(`${getEditorSelector(0)}:not(.hidden)`);
+          await page.waitForSelector(`${getEditorSelector(1)}:not(.hidden)`);
+        })
+      );
+    });
+  });
 });

web/annotation_editor_layer_builder.css

@@ -14,6 +14,7 @@
  */
 
 @import url(draw_layer_builder.css);
+@import url(toggle_button.css);
 
 :root {
   --outline-width: 2px;
@@ -1211,4 +1212,11 @@
       }
     }
   }
+
+  #editorHighlightVisibility {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    align-self: stretch;
+  }
 }

web/annotation_editor_params.js

@@ -33,6 +33,7 @@ class AnnotationEditorParams {
     editorInkOpacity,
     editorStampAddImage,
     editorFreeHighlightThickness,
+    editorHighlightShowAll,
   }) {
     const dispatchEvent = (typeStr, value) => {
       this.eventBus.dispatch("switchannotationeditorparams", {
@@ -62,6 +63,11 @@ class AnnotationEditorParams {
     editorFreeHighlightThickness.addEventListener("input", function () {
       dispatchEvent("HIGHLIGHT_THICKNESS", this.valueAsNumber);
     });
+    editorHighlightShowAll.addEventListener("click", function () {
+      const checked = this.getAttribute("aria-pressed") === "true";
+      this.setAttribute("aria-pressed", !checked);
+      dispatchEvent("HIGHLIGHT_SHOW_ALL", !checked);
+    });
 
     this.eventBus._on("annotationeditorparamschanged", evt => {
       for (const [type, value] of evt.details) {
@@ -87,6 +93,9 @@ class AnnotationEditorParams {
           case AnnotationEditorParamsType.HIGHLIGHT_FREE:
             editorFreeHighlightThickness.disabled = !value;
             break;
+          case AnnotationEditorParamsType.HIGHLIGHT_SHOW_ALL:
+            editorHighlightShowAll.setAttribute("aria-pressed", value);
+            break;
         }
       }
     });

web/toggle_button.css

@@ -0,0 +1,220 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+.toggle-button {
+  --button-background-color: #f0f0f4;
+  --button-background-color-hover: #e0e0e6;
+  --button-background-color-active: #cfcfd8;
+  --color-accent-primary: #0060df;
+  --color-accent-primary-hover: #0250bb;
+  --color-accent-primary-active: #054096;
+  --border-interactive-color: #8f8f9d;
+  --border-radius-circle: 9999px;
+  --border-width: 1px;
+  --size-item-small: 16px;
+  --size-item-large: 32px;
+  --color-canvas: white;
+
+  @media (prefers-color-scheme: dark) {
+    --button-background-color: color-mix(in srgb, currentColor 7%, transparent);
+    --button-background-color-hover: color-mix(
+      in srgb,
+      currentColor 14%,
+      transparent
+    );
+    --button-background-color-active: color-mix(
+      in srgb,
+      currentColor 21%,
+      transparent
+    );
+    --color-accent-primary: #0df;
+    --color-accent-primary-hover: #80ebff;
+    --color-accent-primary-active: #aaf2ff;
+    --border-interactive-color: #bfbfc9;
+    --color-canvas: #1c1b22;
+  }
+
+  @media (forced-colors: active) {
+    --color-accent-primary: ButtonText;
+    --color-accent-primary-hover: SelectedItem;
+    --color-accent-primary-active: SelectedItem;
+    --border-interactive-color: ButtonText;
+    --button-background-color: ButtonFace;
+    --border-interactive-color-hover: SelectedItem;
+    --border-interactive-color-active: SelectedItem;
+    --border-interactive-color-disabled: GrayText;
+    --color-canvas: ButtonText;
+  }
+
+  /* 
+    The original file is located at:
+    https://hg.mozilla.org/mozilla-central/file/aded201f11ec90b8e11c59d1e399960785771fbd/toolkit/content/widgets/moz-toggle/moz-toggle.css
+
+    The original file is licensed under the Mozilla Public License, v. 2.0.
+    This file is a modified version of the original file.
+
+    In order to have a better reading of the code, the .toggle-button selector
+    has been removed from the original file and we put everything under a single
+    .toggle-button selector.
+    
+    TODO: check from times to times if the original file has been updated (and 
+    in such a case don't forget to change the revision in the above link).
+  */
+
+  --toggle-background-color: var(--button-background-color);
+  --toggle-background-color-hover: var(--button-background-color-hover);
+  --toggle-background-color-active: var(--button-background-color-active);
+  --toggle-background-color-pressed: var(--color-accent-primary);
+  --toggle-background-color-pressed-hover: var(--color-accent-primary-hover);
+  --toggle-background-color-pressed-active: var(--color-accent-primary-active);
+  --toggle-border-color: var(--border-interactive-color);
+  --toggle-border-color-hover: var(--toggle-border-color);
+  --toggle-border-color-active: var(--toggle-border-color);
+  --toggle-border-radius: var(--border-radius-circle);
+  --toggle-border-width: var(--border-width);
+  --toggle-height: var(--size-item-small);
+  --toggle-width: var(--size-item-large);
+  --toggle-dot-background-color: var(--toggle-border-color);
+  --toggle-dot-background-color-hover: var(--toggle-dot-background-color);
+  --toggle-dot-background-color-active: var(--toggle-dot-background-color);
+  --toggle-dot-background-color-on-pressed: var(--color-canvas);
+  --toggle-dot-margin: 1px;
+  --toggle-dot-height: calc(
+    var(--toggle-height) - 2 * var(--toggle-dot-margin) - 2 *
+      var(--toggle-border-width)
+  );
+  --toggle-dot-width: var(--toggle-dot-height);
+  --toggle-dot-transform-x: calc(
+    var(--toggle-width) - 4 * var(--toggle-dot-margin) - var(--toggle-dot-width)
+  );
+
+  appearance: none;
+  padding: 0;
+  margin: 0;
+  border: var(--toggle-border-width) solid var(--toggle-border-color);
+  height: var(--toggle-height);
+  width: var(--toggle-width);
+  border-radius: var(--toggle-border-radius);
+  background: var(--toggle-background-color);
+  box-sizing: border-box;
+  flex-shrink: 0;
+
+  &:focus-visible {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-outline-offset);
+  }
+
+  &:enabled:hover {
+    background: var(--toggle-background-color-hover);
+    border-color: var(--toggle-border-color);
+  }
+
+  &:enabled:active {
+    background: var(--toggle-background-color-active);
+    border-color: var(--toggle-border-color);
+  }
+
+  &[aria-pressed="true"] {
+    background: var(--toggle-background-color-pressed);
+    border-color: transparent;
+  }
+
+  &[aria-pressed="true"]:enabled:hover {
+    background: var(--toggle-background-color-pressed-hover);
+    border-color: transparent;
+  }
+
+  &[aria-pressed="true"]:enabled:active {
+    background: var(--toggle-background-color-pressed-active);
+    border-color: transparent;
+  }
+
+  &::before {
+    display: block;
+    content: "";
+    background-color: var(--toggle-dot-background-color);
+    height: var(--toggle-dot-height);
+    width: var(--toggle-dot-width);
+    margin: var(--toggle-dot-margin);
+    border-radius: var(--toggle-border-radius);
+    translate: 0;
+  }
+
+  &[aria-pressed="true"]::before {
+    translate: var(--toggle-dot-transform-x);
+    background-color: var(--toggle-dot-background-color-on-pressed);
+  }
+
+  &[aria-pressed="true"]:enabled:hover::before,
+  &[aria-pressed="true"]:enabled:active::before {
+    background-color: var(--toggle-dot-background-color-on-pressed);
+  }
+
+  &[aria-pressed="true"]:-moz-locale-dir(rtl)::before,
+  &[aria-pressed="true"]:dir(rtl)::before {
+    translate: calc(-1 * var(--toggle-dot-transform-x));
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    &::before {
+      transition: translate 100ms;
+    }
+  }
+
+  @media (prefers-contrast) {
+    &:enabled:hover {
+      border-color: var(--toggle-border-color-hover);
+    }
+
+    &:enabled:active {
+      border-color: var(--toggle-border-color-active);
+    }
+
+    &[aria-pressed="true"]:enabled {
+      border-color: var(--toggle-border-color);
+      position: relative;
+    }
+
+    &[aria-pressed="true"]:enabled:hover,
+    &[aria-pressed="true"]:enabled:hover:active {
+      border-color: var(--toggle-border-color-hover);
+    }
+
+    &[aria-pressed="true"]:enabled:active {
+      background-color: var(--toggle-dot-background-color-active);
+      border-color: var(--toggle-dot-background-color-hover);
+    }
+
+    &:hover::before,
+    &:active::before {
+      background-color: var(--toggle-dot-background-color-hover);
+    }
+  }
+
+  @media (forced-colors) {
+    --toggle-dot-background-color: var(--color-accent-primary);
+    --toggle-dot-background-color-hover: var(--color-accent-primary-hover);
+    --toggle-dot-background-color-active: var(--color-accent-primary-active);
+    --toggle-dot-background-color-on-pressed: var(--button-background-color);
+    --toggle-background-color-disabled: var(--button-background-color-disabled);
+    --toggle-border-color-hover: var(--border-interactive-color-hover);
+    --toggle-border-color-active: var(--border-interactive-color-active);
+    --toggle-border-color-disabled: var(--border-interactive-color-disabled);
+
+    &[aria-pressed="true"]:enabled::after {
+      border: 1px solid var(--button-background-color);
+      content: "";
+      position: absolute;
+      height: var(--toggle-height);
+      width: var(--toggle-width);
+      display: block;
+      border-radius: var(--toggle-border-radius);
+      inset: -2px;
+    }
+
+    &[aria-pressed="true"]:enabled:active::after {
+      border-color: var(--toggle-border-color-active);
+    }
+  }
+}

web/viewer.html

@@ -184,6 +184,10 @@ See https://github.com/adobe-type-tools/cmap-resources
                 <input type="range" id="editorFreeHighlightThickness" class="editorParamsSlider" data-l10n-id="pdfjs-editor-free-highlight-thickness-title" value="12" min="8" max="24" step="1" tabindex="101">
               </div>
             </div>
+            <div id="editorHighlightVisibility">
+              <label for="editorHighlightShowAll" class="editorParamsLabel" data-l10n-id="pdfjs-editor-highlight-show-all-button-label">Show all</label>
+              <button id="editorHighlightShowAll" class="toggle-button" data-l10n-id="pdfjs-editor-highlight-show-all-button" aria-pressed="true" tabindex="102"></button>
+            </div>
           </div>
         </div>
 
@@ -191,11 +195,11 @@ See https://github.com/adobe-type-tools/cmap-resources
           <div class="editorParamsToolbarContainer">
             <div class="editorParamsSetter">
               <label for="editorFreeTextColor" class="editorParamsLabel" data-l10n-id="pdfjs-editor-free-text-color-input">Color</label>
-              <input type="color" id="editorFreeTextColor" class="editorParamsColor" tabindex="102">
+              <input type="color" id="editorFreeTextColor" class="editorParamsColor" tabindex="103">
             </div>
             <div class="editorParamsSetter">
               <label for="editorFreeTextFontSize" class="editorParamsLabel" data-l10n-id="pdfjs-editor-free-text-size-input">Size</label>
-              <input type="range" id="editorFreeTextFontSize" class="editorParamsSlider" value="10" min="5" max="100" step="1" tabindex="103">
+              <input type="range" id="editorFreeTextFontSize" class="editorParamsSlider" value="10" min="5" max="100" step="1" tabindex="104">
             </div>
           </div>
         </div>
@@ -204,22 +208,22 @@ See https://github.com/adobe-type-tools/cmap-resources
           <div class="editorParamsToolbarContainer">
             <div class="editorParamsSetter">
               <label for="editorInkColor" class="editorParamsLabel" data-l10n-id="pdfjs-editor-ink-color-input">Color</label>
-              <input type="color" id="editorInkColor" class="editorParamsColor" tabindex="104">
+              <input type="color" id="editorInkColor" class="editorParamsColor" tabindex="105">
             </div>
             <div class="editorParamsSetter">
               <label for="editorInkThickness" class="editorParamsLabel" data-l10n-id="pdfjs-editor-ink-thickness-input">Thickness</label>
-              <input type="range" id="editorInkThickness" class="editorParamsSlider" value="1" min="1" max="20" step="1" tabindex="105">
+              <input type="range" id="editorInkThickness" class="editorParamsSlider" value="1" min="1" max="20" step="1" tabindex="106">
             </div>
             <div class="editorParamsSetter">
               <label for="editorInkOpacity" class="editorParamsLabel" data-l10n-id="pdfjs-editor-ink-opacity-input">Opacity</label>
-              <input type="range" id="editorInkOpacity" class="editorParamsSlider" value="100" min="1" max="100" step="1" tabindex="106">
+              <input type="range" id="editorInkOpacity" class="editorParamsSlider" value="100" min="1" max="100" step="1" tabindex="107">
             </div>
           </div>
         </div>
 
         <div class="editorParamsToolbar hidden doorHangerRight" id="editorStampParamsToolbar">
           <div class="editorParamsToolbarContainer">
-            <button id="editorStampAddImage" class="secondaryToolbarButton" title="Add image" tabindex="107" data-l10n-id="pdfjs-editor-stamp-add-image-button">
+            <button id="editorStampAddImage" class="secondaryToolbarButton" title="Add image" tabindex="108" data-l10n-id="pdfjs-editor-stamp-add-image-button">
               <span class="editorParamsLabel" data-l10n-id="pdfjs-editor-stamp-add-image-button-label">Add image</span>
             </button>
           </div>

web/viewer.js

@@ -173,6 +173,7 @@ function getViewerConfiguration() {
       editorFreeHighlightThickness: document.getElementById(
         "editorFreeHighlightThickness"
       ),
+      editorHighlightShowAll: document.getElementById("editorHighlightShowAll"),
     },
     printContainer: document.getElementById("printContainer"),
   };