From 849b492b337bdfe95658aa4e61de3ebbd593d759 Mon Sep 17 00:00:00 2001
From: Jonas Jenwald <jonas.jenwald@gmail.com>
Date: Sat, 4 Feb 2023 10:16:09 +0100
Subject: [PATCH] Move the `--scale-select-width` CSS variable to the relevant
 DOM element

The default value of the `--scale-select-width` CSS variable has been choosen such that it should be large enough for most locales. This means that in many locales we don't even update the CSS variable at all, and for those locales where we do the update happens *one time* early during the viewer initialization (i.e. before the PDF document has loaded).

*Please note:* Compared to other recent PRs, the effect of these changes ought to be really tiny and are mostly done to promote better coding patterns.
---
 web/toolbar.js | 4 ++--
 web/viewer.css | 5 ++++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/web/toolbar.js b/web/toolbar.js
index 5aa1313b1..af8bc2158 100644
--- a/web/toolbar.js
+++ b/web/toolbar.js
@@ -17,7 +17,6 @@ import {
   animationStarted,
   DEFAULT_SCALE,
   DEFAULT_SCALE_VALUE,
-  docStyle,
   MAX_SCALE,
   MIN_SCALE,
   noContextMenuHandler,
@@ -342,7 +341,8 @@ class Toolbar {
     maxWidth += 0.3 * scaleSelectWidth;
 
     if (maxWidth > scaleSelectWidth) {
-      docStyle.setProperty("--scale-select-width", `${maxWidth}px`);
+      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.
diff --git a/web/viewer.css b/web/viewer.css
index 3a79aa4f2..68842a724 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -20,7 +20,6 @@
   --sidebar-width: 200px;
   --sidebar-transition-duration: 200ms;
   --sidebar-transition-timing-function: ease;
-  --scale-select-width: 140px;
 
   --toolbar-icon-opacity: 0.7;
   --doorhanger-icon-opacity: 0.9;
@@ -799,6 +798,10 @@ body {
 }
 
 .dropdownToolbarButton {
+  /* Define this variable here, and not in :root, to avoid reflowing the
+     entire viewer when updating the width. */
+  --scale-select-width: 140px;
+
   width: var(--scale-select-width);
   padding: 0;
   background-color: var(--dropdown-btn-bg-color);