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

This patch contains some *much* needed clean-up of, and improvements to, this old code thus addressing a number of issues:

 - Set more reasonable *default* values for the widths, in `web/viewer.css`, since the current ones are actually too small even for the (default) `en-US` locale.
   This obviously result in a slightly larger zoom dropdown width for many locales, but the more consistent UI does look good to me.

 - Stop setting the `min-width`/`max-width` and just use `width` instead.

 - Set an explicit `height` of the zoom dropdown, in an attempt to get Google Chrome to display it with the same height as the toolbar buttons.

 - Remove additional `Element.setAttribute("style", ...)` usage.

 - Actually check *all* of the predefined l10n strings, since the old implementation (implicitly) assumed that the currently selected one was the longest (note e.g. the `ja-JP` locale where one string is considerably longer than the rest).

 - Stop invalidating the DOM multiple times when doing the measurements. This was achieved by using a temporary in-memory `canvas`, and we now only need to query the DOM once in order to get the current font properties of the zoom dropdown.

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

@@ -700,8 +700,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;
@@ -714,7 +713,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;