Use a CSS-only solution to set the dropdownToolbarButton width (issue 17137)

Note that CSS-features such as e.g. `flex` didn't exist, or had poor cross-browser support, back when the JavaScript-based solution was initially implemented.

web/l10n_utils.js

@@ -58,10 +58,6 @@ const DEFAULT_L10N_STRINGS = {
   "pdfjs-find-match-count-limit[other]": "More than { $limit } matches",
   "pdfjs-find-not-found": "Phrase not found",
 
-  "pdfjs-page-scale-width": "Page Width",
-  "pdfjs-page-scale-fit": "Page Fit",
-  "pdfjs-page-scale-auto": "Automatic Zoom",
-  "pdfjs-page-scale-actual": "Actual Size",
   "pdfjs-page-scale-percent": "{ $scale }%",
 
   "pdfjs-loading-error": "An error occurred while loading the PDF.",

web/toolbar.js

@@ -13,15 +13,14 @@
  * limitations under the License.
  */
 
+import { AnnotationEditorType, noContextMenu } from "pdfjs-lib";
 import {
-  animationStarted,
   DEFAULT_SCALE,
   DEFAULT_SCALE_VALUE,
   MAX_SCALE,
   MIN_SCALE,
   toggleCheckedBtn,
 } from "./ui_utils.js";
-import { AnnotationEditorType, noContextMenu } from "pdfjs-lib";
 
 const PAGE_NUMBER_LOADING_INDICATOR = "visiblePageIsLoading";
 
@@ -209,7 +208,6 @@ class Toolbar {
 
     this.eventBus._on("localized", () => {
       this.#wasLocalized = true;
-      this.#adjustScaleWidth();
       this.#updateUIState(true);
     });
 
@@ -317,52 +315,6 @@ class Toolbar {
 
     pageNumber.classList.toggle(PAGE_NUMBER_LOADING_INDICATOR, loading);
   }
-
-  /**
-   * Increase the width of the zoom dropdown DOM element if, and only if, it's
-   * too narrow to fit the *longest* of the localized strings.
-   */
-  async #adjustScaleWidth() {
-    const { items, l10n } = this;
-
-    const predefinedValuesPromise = l10n.get([
-      "pdfjs-page-scale-auto",
-      "pdfjs-page-scale-actual",
-      "pdfjs-page-scale-fit",
-      "pdfjs-page-scale-width",
-    ]);
-    await animationStarted;
-
-    const style = getComputedStyle(items.scaleSelect);
-    const scaleSelectWidth = parseFloat(
-      style.getPropertyValue("--scale-select-width")
-    );
-
-    // The temporary canvas is used to measure text length in the DOM.
-    const canvas = document.createElement("canvas");
-    const ctx = canvas.getContext("2d", { alpha: false });
-    ctx.font = `${style.fontSize} ${style.fontFamily}`;
-
-    let maxWidth = 0;
-    for (const predefinedValue of await predefinedValuesPromise) {
-      const { width } = ctx.measureText(predefinedValue);
-      if (width > maxWidth) {
-        maxWidth = width;
-      }
-    }
-    // Account for the icon width, and ensure that there's always some spacing
-    // between the text and the icon.
-    maxWidth += 0.3 * scaleSelectWidth;
-
-    if (maxWidth > scaleSelectWidth) {
-      const container = items.scaleSelect.parentNode;
-      container.style.setProperty("--scale-select-width", `${maxWidth}px`);
-    }
-    // Zeroing the width and height cause Firefox to release graphics resources
-    // immediately, which can greatly reduce memory consumption.
-    canvas.width = 0;
-    canvas.height = 0;
-  }
 }
 
 export { Toolbar };

web/viewer.css

@@ -792,11 +792,9 @@ body {
 }
 
 .dropdownToolbarButton {
-  /* Define this variable here, and not in :root, to avoid reflowing the
+  display: flex;
-     entire viewer when updating the width. */
+  width: fit-content;
-  --scale-select-width: 140px;
+  min-width: 140px;
-
-  width: var(--scale-select-width);
   padding: 0;
   background-color: var(--dropdown-btn-bg-color);
   border: var(--dropdown-btn-border);
@@ -811,12 +809,13 @@ body {
 .dropdownToolbarButton > select {
   appearance: none;
   width: inherit;
+  min-width: inherit;
   height: 28px;
   font-size: 12px;
   color: var(--main-color);
   margin: 0;
-  padding: 1px 0 2px;
+  padding-block: 1px 2px;
-  padding-inline-start: 6px;
+  padding-inline: 6px 38px;
   border: none;
   background-color: var(--dropdown-btn-bg-color);
 }