From f427993c55ec88b69526dd7336bc66830a51927d Mon Sep 17 00:00:00 2001
From: Calixte Denizet <calixte.denizet@gmail.com>
Date: Tue, 17 Sep 2024 18:08:03 +0200
Subject: [PATCH] Rename the toolbar buttons in order to free their current
 names

which can then be used for their future parent container.
This patch aims to simplify a bit the patch in #18385.
---
 web/viewer.css  | 22 +++++++++++-----------
 web/viewer.html | 22 +++++++++++-----------
 web/viewer.js   | 22 +++++++++++-----------
 3 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/web/viewer.css b/web/viewer.css
index 68e777c013c505..6ed7f594f01ae1 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -778,12 +778,12 @@ body {
   background-color: var(--toolbar-icon-hover-bg-color);
 }
 
-#sidebarToggle::before {
+#sidebarToggleButton::before {
   mask-image: var(--toolbarButton-sidebarToggle-icon);
   transform: scaleX(var(--dir-factor));
 }
 
-#secondaryToolbarToggle::before {
+#secondaryToolbarToggleButton::before {
   mask-image: var(--toolbarButton-secondaryToolbarToggle-icon);
   transform: scaleX(var(--dir-factor));
 }
@@ -796,35 +796,35 @@ body {
   mask-image: var(--toolbarButton-pageDown-icon);
 }
 
-#zoomOut::before {
+#zoomOutButton::before {
   mask-image: var(--toolbarButton-zoomOut-icon);
 }
 
-#zoomIn::before {
+#zoomInButton::before {
   mask-image: var(--toolbarButton-zoomIn-icon);
 }
 
-#editorFreeText::before {
+#editorFreeTextButton::before {
   mask-image: var(--toolbarButton-editorFreeText-icon);
 }
 
-#editorHighlight::before {
+#editorHighlightButton::before {
   mask-image: var(--toolbarButton-editorHighlight-icon);
 }
 
-#editorInk::before {
+#editorInkButton::before {
   mask-image: var(--toolbarButton-editorInk-icon);
 }
 
-#editorStamp::before {
+#editorStampButton::before {
   mask-image: var(--toolbarButton-editorStamp-icon);
 }
 
-#print::before {
+#printButton::before {
   mask-image: var(--toolbarButton-print-icon);
 }
 
-#download::before {
+#downloadButton::before {
   mask-image: var(--toolbarButton-download-icon);
 }
 
@@ -850,7 +850,7 @@ body {
   transform: scaleX(var(--dir-factor));
 }
 
-#viewFind::before {
+#viewFindButton::before {
   mask-image: var(--toolbarButton-search-icon);
 }
 
diff --git a/web/viewer.html b/web/viewer.html
index 9fa087ddaac85b..6567f00e48c5e7 100644
--- a/web/viewer.html
+++ b/web/viewer.html
@@ -340,11 +340,11 @@
           <div id="toolbarContainer">
             <div id="toolbarViewer">
               <div id="toolbarViewerLeft">
-                <button id="sidebarToggle" class="toolbarButton" type="button" title="Toggle Sidebar" tabindex="11" data-l10n-id="pdfjs-toggle-sidebar-button" aria-expanded="false" aria-controls="sidebarContainer">
+                <button id="sidebarToggleButton" class="toolbarButton" type="button" title="Toggle Sidebar" tabindex="11" data-l10n-id="pdfjs-toggle-sidebar-button" aria-expanded="false" aria-controls="sidebarContainer">
                   <span data-l10n-id="pdfjs-toggle-sidebar-button-label">Toggle Sidebar</span>
                 </button>
                 <div class="toolbarButtonSpacer"></div>
-                <button id="viewFind" class="toolbarButton" type="button" title="Find in Document" tabindex="12" data-l10n-id="pdfjs-findbar-button" aria-expanded="false" aria-controls="findbar">
+                <button id="viewFindButton" class="toolbarButton" type="button" title="Find in Document" tabindex="12" data-l10n-id="pdfjs-findbar-button" aria-expanded="false" aria-controls="findbar">
                   <span data-l10n-id="pdfjs-findbar-button-label">Find</span>
                 </button>
                 <div class="splitToolbarButton hiddenSmallView">
@@ -363,43 +363,43 @@
               </div>
               <div id="toolbarViewerRight">
                 <div id="editorModeButtons" class="splitToolbarButton toggled" role="radiogroup">
-                  <button id="editorHighlight" class="toolbarButton" type="button" disabled="disabled" title="Highlight" role="radio" aria-checked="false" aria-controls="editorHighlightParamsToolbar" tabindex="31" data-l10n-id="pdfjs-editor-highlight-button">
+                  <button id="editorHighlightButton" class="toolbarButton" type="button" disabled="disabled" title="Highlight" role="radio" aria-checked="false" aria-controls="editorHighlightParamsToolbar" tabindex="31" data-l10n-id="pdfjs-editor-highlight-button">
                     <span data-l10n-id="pdfjs-editor-highlight-button-label">Highlight</span>
                   </button>
-                  <button id="editorFreeText" class="toolbarButton" type="button" disabled="disabled" title="Text" role="radio" aria-checked="false" aria-controls="editorFreeTextParamsToolbar" tabindex="32" data-l10n-id="pdfjs-editor-free-text-button">
+                  <button id="editorFreeTextButton" class="toolbarButton" type="button" disabled="disabled" title="Text" role="radio" aria-checked="false" aria-controls="editorFreeTextParamsToolbar" tabindex="32" data-l10n-id="pdfjs-editor-free-text-button">
                     <span data-l10n-id="pdfjs-editor-free-text-button-label">Text</span>
                   </button>
-                  <button id="editorInk" class="toolbarButton" type="button" disabled="disabled" title="Draw" role="radio" aria-checked="false" aria-controls="editorInkParamsToolbar" tabindex="33" data-l10n-id="pdfjs-editor-ink-button">
+                  <button id="editorInkButton" class="toolbarButton" type="button" disabled="disabled" title="Draw" role="radio" aria-checked="false" aria-controls="editorInkParamsToolbar" tabindex="33" data-l10n-id="pdfjs-editor-ink-button">
                     <span data-l10n-id="pdfjs-editor-ink-button-label">Draw</span>
                   </button>
-                  <button id="editorStamp" class="toolbarButton" type="button" disabled="disabled" title="Add or edit images" role="radio" aria-checked="false" aria-controls="editorStampParamsToolbar" tabindex="34" data-l10n-id="pdfjs-editor-stamp-button">
+                  <button id="editorStampButton" class="toolbarButton" type="button" disabled="disabled" title="Add or edit images" role="radio" aria-checked="false" aria-controls="editorStampParamsToolbar" tabindex="34" data-l10n-id="pdfjs-editor-stamp-button">
                     <span data-l10n-id="pdfjs-editor-stamp-button-label">Add or edit images</span>
                   </button>
                 </div>
 
                 <div id="editorModeSeparator" class="verticalToolbarSeparator"></div>
 
-                <button id="print" class="toolbarButton hiddenMediumView" type="button" title="Print" tabindex="41" data-l10n-id="pdfjs-print-button">
+                <button id="printButton" class="toolbarButton hiddenMediumView" type="button" title="Print" tabindex="41" data-l10n-id="pdfjs-print-button">
                   <span data-l10n-id="pdfjs-print-button-label">Print</span>
                 </button>
 
-                <button id="download" class="toolbarButton hiddenMediumView" type="button" title="Save" tabindex="42" data-l10n-id="pdfjs-save-button">
+                <button id="downloadButton" class="toolbarButton hiddenMediumView" type="button" title="Save" tabindex="42" data-l10n-id="pdfjs-save-button">
                   <span data-l10n-id="pdfjs-save-button-label">Save</span>
                 </button>
 
                 <div class="verticalToolbarSeparator hiddenMediumView"></div>
 
-                <button id="secondaryToolbarToggle" class="toolbarButton" type="button" title="Tools" tabindex="43" data-l10n-id="pdfjs-tools-button" aria-expanded="false" aria-controls="secondaryToolbar">
+                <button id="secondaryToolbarToggleButton" class="toolbarButton" type="button" title="Tools" tabindex="43" data-l10n-id="pdfjs-tools-button" aria-expanded="false" aria-controls="secondaryToolbar">
                   <span data-l10n-id="pdfjs-tools-button-label">Tools</span>
                 </button>
               </div>
               <div id="toolbarViewerMiddle">
                 <div class="splitToolbarButton">
-                  <button id="zoomOut" class="toolbarButton" type="button" title="Zoom Out" tabindex="21" data-l10n-id="pdfjs-zoom-out-button">
+                  <button id="zoomOutButton" class="toolbarButton" type="button" title="Zoom Out" tabindex="21" data-l10n-id="pdfjs-zoom-out-button">
                     <span data-l10n-id="pdfjs-zoom-out-button-label">Zoom Out</span>
                   </button>
                   <div class="splitToolbarButtonSeparator"></div>
-                  <button id="zoomIn" class="toolbarButton" type="button" title="Zoom In" tabindex="22" data-l10n-id="pdfjs-zoom-in-button">
+                  <button id="zoomInButton" class="toolbarButton" type="button" title="Zoom In" tabindex="22" data-l10n-id="pdfjs-zoom-in-button">
                     <span data-l10n-id="pdfjs-zoom-in-button-label">Zoom In</span>
                    </button>
                 </div>
diff --git a/web/viewer.js b/web/viewer.js
index 5f93fa321c489e..ca96bebd7e5a36 100644
--- a/web/viewer.js
+++ b/web/viewer.js
@@ -47,31 +47,31 @@ function getViewerConfiguration() {
       customScaleOption: document.getElementById("customScaleOption"),
       previous: document.getElementById("previous"),
       next: document.getElementById("next"),
-      zoomIn: document.getElementById("zoomIn"),
-      zoomOut: document.getElementById("zoomOut"),
-      print: document.getElementById("print"),
-      editorFreeTextButton: document.getElementById("editorFreeText"),
+      zoomIn: document.getElementById("zoomInButton"),
+      zoomOut: document.getElementById("zoomOutButton"),
+      print: document.getElementById("printButton"),
+      editorFreeTextButton: document.getElementById("editorFreeTextButton"),
       editorFreeTextParamsToolbar: document.getElementById(
         "editorFreeTextParamsToolbar"
       ),
-      editorHighlightButton: document.getElementById("editorHighlight"),
+      editorHighlightButton: document.getElementById("editorHighlightButton"),
       editorHighlightParamsToolbar: document.getElementById(
         "editorHighlightParamsToolbar"
       ),
       editorHighlightColorPicker: document.getElementById(
         "editorHighlightColorPicker"
       ),
-      editorInkButton: document.getElementById("editorInk"),
+      editorInkButton: document.getElementById("editorInkButton"),
       editorInkParamsToolbar: document.getElementById("editorInkParamsToolbar"),
-      editorStampButton: document.getElementById("editorStamp"),
+      editorStampButton: document.getElementById("editorStampButton"),
       editorStampParamsToolbar: document.getElementById(
         "editorStampParamsToolbar"
       ),
-      download: document.getElementById("download"),
+      download: document.getElementById("downloadButton"),
     },
     secondaryToolbar: {
       toolbar: document.getElementById("secondaryToolbar"),
-      toggleButton: document.getElementById("secondaryToolbarToggle"),
+      toggleButton: document.getElementById("secondaryToolbarToggleButton"),
       presentationModeButton: document.getElementById("presentationMode"),
       openFileButton:
         typeof PDFJSDev === "undefined" || PDFJSDev.test("GENERIC")
@@ -105,7 +105,7 @@ function getViewerConfiguration() {
       // Divs (and sidebar button)
       outerContainer: document.getElementById("outerContainer"),
       sidebarContainer: document.getElementById("sidebarContainer"),
-      toggleButton: document.getElementById("sidebarToggle"),
+      toggleButton: document.getElementById("sidebarToggleButton"),
       resizer: document.getElementById("sidebarResizer"),
       // Buttons
       thumbnailButton: document.getElementById("viewThumbnail"),
@@ -122,7 +122,7 @@ function getViewerConfiguration() {
     },
     findBar: {
       bar: document.getElementById("findbar"),
-      toggleButton: document.getElementById("viewFind"),
+      toggleButton: document.getElementById("viewFindButton"),
       findField: document.getElementById("findInput"),
       highlightAllCheckbox: document.getElementById("findHighlightAll"),
       caseSensitiveCheckbox: document.getElementById("findMatchCase"),