Merge pull request #11570 from Snuffleupagus/zoom_adjustScaleWidth

Re-factor `Toolbar._adjustScaleWidth` to improve/simplify how the zoom dropdown width is calculated

web/toolbar.js

@@ -24,8 +24,9 @@ import {
 } from "./ui_utils.js";
 
 const PAGE_NUMBER_LOADING_INDICATOR = "visiblePageIsLoading";
-const SCALE_SELECT_CONTAINER_PADDING = 8;
+// Keep the two values below up-to-date with the values in `web/viewer.css`:
-const SCALE_SELECT_PADDING = 22;
+const SCALE_SELECT_CONTAINER_WIDTH = 140; // px
+const SCALE_SELECT_WIDTH = 162; // px
 
 /**
  * @typedef {Object} ToolbarOptions
@@ -233,30 +234,54 @@ class Toolbar {
     pageNumberInput.classList.toggle(PAGE_NUMBER_LOADING_INDICATOR, loading);
   }
 
-  _adjustScaleWidth() {
+  /**
-    const container = this.items.scaleSelectContainer;
+   * Increase the width of the zoom dropdown DOM element if, and only if, it's
-    const select = this.items.scaleSelect;
+   * too narrow to fit the *longest* of the localized strings.
+   * @private
+   */
+  async _adjustScaleWidth() {
+    const { items, l10n } = this;
 
-    animationStarted.then(function() {
+    const predefinedValuesPromise = Promise.all([
-      // Adjust the width of the zoom box to fit the content.
+      l10n.get("page_scale_auto", null, "Automatic Zoom"),
-      // Note: If the window is narrow enough that the zoom box is not
+      l10n.get("page_scale_actual", null, "Actual Size"),
-      //       visible, we temporarily show it to be able to adjust its width.
+      l10n.get("page_scale_fit", null, "Page Fit"),
-      if (container.clientWidth === 0) {
+      l10n.get("page_scale_width", null, "Page Width"),
-        container.setAttribute("style", "display: inherit;");
+    ]);
+
+    // The temporary canvas is used to measure text length in the DOM.
+    let canvas = document.createElement("canvas");
+    if (
+      typeof PDFJSDev === "undefined" ||
+      PDFJSDev.test("MOZCENTRAL || GENERIC")
+    ) {
+      canvas.mozOpaque = true;
+    }
+    let ctx = canvas.getContext("2d", { alpha: false });
+
+    await animationStarted;
+    const { fontSize, fontFamily } = getComputedStyle(items.scaleSelect);
+    ctx.font = `${fontSize} ${fontFamily}`;
+
+    let maxWidth = 0;
+    for (const predefinedValue of await predefinedValuesPromise) {
+      const { width } = ctx.measureText(predefinedValue);
+      if (width > maxWidth) {
+        maxWidth = width;
       }
-      if (container.clientWidth > 0) {
+    }
-        select.setAttribute("style", "min-width: inherit;");
+    const overflow = SCALE_SELECT_WIDTH - SCALE_SELECT_CONTAINER_WIDTH;
-        const width = select.clientWidth + SCALE_SELECT_CONTAINER_PADDING;
+    maxWidth += 1.5 * overflow;
-        select.setAttribute(
+
-          "style",
+    if (maxWidth > SCALE_SELECT_CONTAINER_WIDTH) {
-          `min-width: ${width + SCALE_SELECT_PADDING}px;`
+      items.scaleSelect.style.width = `${maxWidth + overflow}px`;
-        );
+      items.scaleSelectContainer.style.width = `${maxWidth}px`;
-        container.setAttribute(
+    }
-          "style",
+    // Zeroing the width and height cause Firefox to release graphics resources
-          `min-width: ${width}px; max-width: ${width}px;`
+    // immediately, which can greatly reduce memory consumption.
-        );
+    canvas.width = 0;
-      }
+    canvas.height = 0;
-    });
+    canvas = ctx = null;
   }
 }
 

web/viewer.css

@@ -696,8 +696,7 @@ html[dir='rtl'] .dropdownToolbarButton {
 }
 
 .dropdownToolbarButton {
-  width: 120px;
+  width: 140px;
-  max-width: 120px;
   padding: 0;
   overflow: hidden;
   background: url(images/toolbarButton-menuArrows.png) no-repeat;
@@ -710,7 +709,8 @@ html[dir='rtl'] .dropdownToolbarButton {
 }
 
 .dropdownToolbarButton > select {
-  min-width: 140px;
+  width: 162px;
+  height: 23px;
   font-size: 12px;
   color: rgba(242, 242, 242, 1);
   margin: 0;