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

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.