[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;
         }
       }
     });