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

2024-03-06 22:38:25 +01:00 · 2024-03-06 22:38:25 +01:00 · 39aeea3e94
commit 39aeea3e94
parent 6bb6ce6a5d
13 changed files with 393 additions and 6 deletions
--- a/l10n/en-US/viewer.ftl
+++ b/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
--- a/src/display/draw_layer.js
+++ b/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);
  }
--- a/src/display/editor/annotation_editor_layer.js
+++ b/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,
--- a/src/display/editor/editor.js
+++ b/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.
--- a/src/display/editor/highlight.js
+++ b/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.
--- a/src/display/editor/tools.js
+++ b/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;
--- a/src/shared/util.js
+++ b/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.
--- a/test/integration/highlight_editor_spec.mjs
+++ b/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)`);
+        })
+      );
+    });
+  });
 });
--- a/web/annotation_editor_layer_builder.css
+++ b/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;
+  }
 }
--- a/web/annotation_editor_params.js
+++ b/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;
        }
      }
    });
--- a/web/toggle_button.css
+++ b/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);
+    }
+  }
+}
--- a/web/viewer.html
+++ b/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>
--- a/web/viewer.js
+++ b/web/viewer.js
@ -173,6 +173,7 @@ function getViewerConfiguration() {
      editorFreeHighlightThickness: document.getElementById(
        "editorFreeHighlightThickness"
      ),
+      editorHighlightShowAll: document.getElementById("editorHighlightShowAll"),
    },
    printContainer: document.getElementById("printContainer"),
  };