Add a button for unchecking all the checked thumbnails (bug 2022769)

test/integration/reorganize_pages_spec.mjs

@@ -1331,6 +1331,49 @@ describe("Reorganize Pages View", () => {
         })
       );
     });
+
+    it("should deselect all thumbnails when the deselect button is clicked", async () => {
+      await Promise.all(
+        pages.map(async ([browserName, page]) => {
+          await waitForThumbnailVisible(page, 1);
+          await page.waitForSelector("#viewsManagerStatusActionButton", {
+            visible: true,
+          });
+
+          const labelSelector = "#viewsManagerStatusActionLabel";
+          const deselectButtonSelector =
+            "#viewsManagerStatusActionDeselectButton";
+
+          // Check thumbnails 1 and 2.
+          await waitAndClick(
+            page,
+            `.thumbnail:has(${getThumbnailSelector(1)}) input`
+          );
+          await waitAndClick(
+            page,
+            `.thumbnail:has(${getThumbnailSelector(2)}) input`
+          );
+          await waitForTextToBe(page, labelSelector, `${FSI}2${PDI} selected`);
+
+          // Click the deselect button: all thumbnails should be unchecked.
+          await waitAndClick(page, deselectButtonSelector);
+
+          // Label should revert to "Select pages".
+          await waitForTextToBe(page, labelSelector, "Select pages");
+
+          // The deselect button should be hidden again.
+          await page.waitForSelector(deselectButtonSelector, { hidden: true });
+
+          // All checkboxes should be unchecked.
+          await page.waitForSelector(
+            "#thumbnailsView:not(:has(input:checked))",
+            {
+              visible: true,
+            }
+          );
+        })
+      );
+    });
   });
 
   describe("Undo label reflects number of cut/deleted pages (bug 2010832)", () => {

web/pdf_thumbnail_viewer.js

@@ -145,6 +145,8 @@ class PDFThumbnailViewer {
 
   #statusBar = null;
 
+  #deselectButton = null;
+
   #undoBar = null;
 
   #undoLabel = null;
@@ -183,6 +185,8 @@ class PDFThumbnailViewer {
     this.pageColors = pageColors || null;
     this.#enableSplitMerge = enableSplitMerge || false;
     this.#statusLabel = statusBar?.viewsManagerStatusActionLabel || null;
+    this.#deselectButton =
+      statusBar?.viewsManagerStatusActionDeselectButton || null;
     this.#statusBar = statusBar?.viewsManagerStatusAction || null;
     this.#undoBar = undoBar?.viewsManagerStatusUndo || null;
     this.#undoLabel = undoBar?.viewsManagerStatusUndoLabel || null;
@@ -260,6 +264,12 @@ class PDFThumbnailViewer {
         "click",
         this.#dismissUndo.bind(this)
       );
+      this.#deselectButton?.addEventListener("click", () => {
+        this.#clearSelection();
+        this.#toggleMenuEntries(false);
+        this.#updateStatus("select");
+      });
+      this.#deselectButton.classList.toggle("hidden", true);
     } else {
       manageMenu.button.hidden = true;
     }
@@ -910,8 +920,10 @@ class PDFThumbnailViewer {
           "data-l10n-args",
           JSON.stringify({ count })
         );
+        this.#deselectButton.classList.toggle("hidden", false);
       } else {
         this.#statusLabel.removeAttribute("data-l10n-args");
+        this.#deselectButton.classList.toggle("hidden", true);
       }
       this.#statusBar.classList.toggle("hidden", false);
       this.#undoBar.classList.toggle("hidden", true);

web/viewer.html

@@ -188,11 +188,22 @@ See https://github.com/adobe-type-tools/cmap-resources
                     </div>
                     <div id="viewsManagerStatus">
                       <div id="viewsManagerStatusAction">
-                        <span
-                          id="viewsManagerStatusActionLabel"
-                          class="viewsManagerStatusLabel"
-                          data-l10n-id="pdfjs-views-manager-pages-status-none-action-label"
-                        ></span>
+                        <span id="viewsManagerStatusActionLabelContainer" class="viewsManagerStatusLabel">
+                          <button
+                            id="viewsManagerStatusActionDeselectButton"
+                            class="hiddden"
+                            type="button"
+                            tabindex="0"
+                            role="checkbox"
+                            aria-checked="true"
+                            aria-labelledby="viewsManagerStatusActionLabel"
+                          ></button>
+                          <span
+                            id="viewsManagerStatusActionLabel"
+                            class="viewsManagerStatusLabel"
+                            data-l10n-id="pdfjs-views-manager-pages-status-none-action-label"
+                          ></span>
+                        </span>
                         <div id="actionSelector">
                           <button
                             id="viewsManagerStatusActionButton"

web/viewer.js

@@ -138,6 +138,9 @@ function getViewerConfiguration() {
         viewsManagerStatusAction: document.getElementById(
           "viewsManagerStatusAction"
         ),
+        viewsManagerStatusActionDeselectButton: document.getElementById(
+          "viewsManagerStatusActionDeselectButton"
+        ),
         viewsManagerStatusActionLabel: document.getElementById(
           "viewsManagerStatusActionLabel"
         ),

web/views_manager.css

@@ -406,15 +406,16 @@
         align-self: stretch;
         background-color: var(--status-actions-bg);
 
-        > span[data-l10n-args]::before {
-          content: "";
-          display: inline-block;
+        #viewsManagerStatusActionLabelContainer > button {
           width: var(--icon-size);
           height: var(--icon-size);
           mask-repeat: no-repeat;
           mask-position: center;
           background-color: var(--indicator-color);
           mask-image: var(--pages-selected-icon);
+          border: none;
+          padding: 0;
+          flex: 0 0 auto;
         }
 
         #actionSelector {