Merge pull request #14028 from Snuffleupagus/_adjustScaleWidth-CSS-variables

Use CSS variables for setting the width of the zoom dropdown (PR 11570 follow-up)

web/toolbar.js

@@ -23,9 +23,6 @@ import {
 } from "./ui_utils.js";
 
 const PAGE_NUMBER_LOADING_INDICATOR = "visiblePageIsLoading";
-// Keep the two values below up-to-date with the values in `web/viewer.css`:
-const SCALE_SELECT_CONTAINER_WIDTH = 140; // px
-const SCALE_SELECT_WIDTH = 162; // px
 
 /**
  * @typedef {Object} ToolbarOptions
@@ -33,9 +30,8 @@ const SCALE_SELECT_WIDTH = 162; // px
  * @property {HTMLSpanElement} numPages - Label that contains number of pages.
  * @property {HTMLInputElement} pageNumber - Control for display and user input
  *   of the current page number.
- * @property {HTMLSpanElement} scaleSelectContainer - Container where scale
- *   controls are placed. The width is adjusted on UI initialization.
  * @property {HTMLSelectElement} scaleSelect - Scale selection control.
+ *   Its width is adjusted, when necessary, on UI localization.
  * @property {HTMLOptionElement} customScaleOption - The item used to display
  *   a non-predefined scale.
  * @property {HTMLButtonElement} previous - Button to go to the previous page.
@@ -78,7 +74,6 @@ class Toolbar {
     this.items = {
       numPages: options.numPages,
       pageNumber: options.pageNumber,
-      scaleSelectContainer: options.scaleSelectContainer,
       scaleSelect: options.scaleSelect,
       customScaleOption: options.customScaleOption,
       previous: options.previous,
@@ -252,6 +247,16 @@ class Toolbar {
       l10n.get("page_scale_width"),
     ]);
 
+    const style = getComputedStyle(items.scaleSelect),
+      scaleSelectContainerWidth = parseInt(
+        style.getPropertyValue("--scale-select-container-width"),
+        10
+      ),
+      scaleSelectOverflow = parseInt(
+        style.getPropertyValue("--scale-select-overflow"),
+        10
+      );
+
     // The temporary canvas is used to measure text length in the DOM.
     let canvas = document.createElement("canvas");
     if (
@@ -263,8 +268,7 @@ class Toolbar {
     let ctx = canvas.getContext("2d", { alpha: false });
 
     await animationStarted;
-    const { fontSize, fontFamily } = getComputedStyle(items.scaleSelect);
-    ctx.font = `${fontSize} ${fontFamily}`;
+    ctx.font = `${style.fontSize} ${style.fontFamily}`;
 
     let maxWidth = 0;
     for (const predefinedValue of await predefinedValuesPromise) {
@@ -273,12 +277,11 @@ class Toolbar {
         maxWidth = width;
       }
     }
-    const overflow = SCALE_SELECT_WIDTH - SCALE_SELECT_CONTAINER_WIDTH;
-    maxWidth += 2 * overflow;
+    maxWidth += 2 * scaleSelectOverflow;
 
-    if (maxWidth > SCALE_SELECT_CONTAINER_WIDTH) {
-      items.scaleSelect.style.width = `${maxWidth + overflow}px`;
-      items.scaleSelectContainer.style.width = `${maxWidth}px`;
+    if (maxWidth > scaleSelectContainerWidth) {
+      const doc = document.documentElement;
+      doc.style.setProperty("--scale-select-container-width", `${maxWidth}px`);
     }
     // Zeroing the width and height cause Firefox to release graphics resources
     // immediately, which can greatly reduce memory consumption.

web/viewer.css

@@ -19,6 +19,8 @@
   --sidebar-width: 200px;
   --sidebar-transition-duration: 200ms;
   --sidebar-transition-timing-function: ease;
+  --scale-select-container-width: 140px;
+  --scale-select-overflow: 22px;
   --loadingBar-end-offset: 0;
 
   --toolbar-icon-opacity: 0.7;
@@ -887,7 +889,7 @@ html[dir="rtl"] #toolbarViewerLeft > .toolbarButton:first-child {
 }
 
 .dropdownToolbarButton {
-  width: 140px;
+  width: var(--scale-select-container-width);
   padding: 0;
   overflow: hidden;
   background-color: var(--dropdown-btn-bg-color);
@@ -908,7 +910,9 @@ html[dir="rtl"] .dropdownToolbarButton::after {
 }
 
 .dropdownToolbarButton > select {
-  width: 162px;
+  width: calc(
+    var(--scale-select-container-width) + var(--scale-select-overflow)
+  );
   height: 28px;
   font-size: 12px;
   color: var(--main-color);

web/viewer.js

@@ -82,7 +82,6 @@ function getViewerConfiguration() {
       container: document.getElementById("toolbarViewer"),
       numPages: document.getElementById("numPages"),
       pageNumber: document.getElementById("pageNumber"),
-      scaleSelectContainer: document.getElementById("scaleSelectContainer"),
       scaleSelect: document.getElementById("scaleSelect"),
       customScaleOption: document.getElementById("customScaleOption"),
       previous: document.getElementById("previous"),