From 4a7976f097f0858986d06e653c6d2eadf68b9a3a Mon Sep 17 00:00:00 2001
From: Jonas Jenwald <jonas.jenwald@gmail.com>
Date: Wed, 15 Sep 2021 15:00:56 +0200
Subject: [PATCH] Use CSS variables for setting the width of the zoom dropdown
 (PR 11570 follow-up)

By using CSS variables to set the width of the zoom dropdown, we can simplify both the relevant CSS and JS code. This will not only improve overall maintainability of this code, but should also make it (slightly) easier for third-party users that want to customize the width.

Note in particular that by having the code in `Toolbar._adjustScaleWidth` lookup the values of the CSS variables, we no longer need to worry about keeping hard-coded values up-to-date with the CSS rules.
---
 web/toolbar.js | 29 ++++++++++++++++-------------
 web/viewer.css |  8 ++++++--
 web/viewer.js  |  1 -
 3 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/web/toolbar.js b/web/toolbar.js
index 102834442..a9995d0a1 100644
--- a/web/toolbar.js
+++ b/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.
diff --git a/web/viewer.css b/web/viewer.css
index 59716bbf9..d9f3a08e3 100644
--- a/web/viewer.css
+++ b/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);
diff --git a/web/viewer.js b/web/viewer.js
index 8c8435660..1cc45837f 100644
--- a/web/viewer.js
+++ b/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"),