From 9d5085347af995d2bb5a690e8b8362302983f0ff Mon Sep 17 00:00:00 2001
From: Jonas Jenwald <jonas.jenwald@gmail.com>
Date: Wed, 25 Jan 2023 11:09:28 +0100
Subject: [PATCH] Move `ProgressBar`-related CSS variables into the
 `loadingBar` DOM-element (issue 15958)

This way we avoid reflowing the entire viewer when e.g. updating the loading progress.
---
 examples/mobile-viewer/viewer.css |  8 ++++----
 web/ui_utils.js                   | 10 ++++++++--
 web/viewer.css                    |  7 +++++--
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/examples/mobile-viewer/viewer.css b/examples/mobile-viewer/viewer.css
index 0c86e18d5..300eed0aa 100644
--- a/examples/mobile-viewer/viewer.css
+++ b/examples/mobile-viewer/viewer.css
@@ -13,10 +13,6 @@
  * limitations under the License.
  */
 
-:root {
-  --progressBar-percent: 0%;
-}
-
 * {
   padding: 0;
   margin: 0;
@@ -191,6 +187,10 @@ canvas {
 }
 
 #loadingBar {
+  /* Define this variable here, and not in :root, to avoid reflowing the
+     entire viewer when updating progress (see issue 15958). */
+  --progressBar-percent: 0%;
+
   position: relative;
   height: 0.6rem;
   background-color: rgba(51, 51, 51, 1);
diff --git a/web/ui_utils.js b/web/ui_utils.js
index 45e0d3579..30879c27b 100644
--- a/web/ui_utils.js
+++ b/web/ui_utils.js
@@ -697,10 +697,13 @@ class ProgressBar {
 
   #percent = 0;
 
+  #style = null;
+
   #visible = true;
 
   constructor(bar) {
     this.#classList = bar.classList;
+    this.#style = bar.style;
   }
 
   get percent() {
@@ -716,7 +719,7 @@ class ProgressBar {
     }
     this.#classList.remove("indeterminate");
 
-    docStyle.setProperty("--progressBar-percent", `${this.#percent}%`);
+    this.#style.setProperty("--progressBar-percent", `${this.#percent}%`);
   }
 
   setWidth(viewer) {
@@ -726,7 +729,10 @@ class ProgressBar {
     const container = viewer.parentNode;
     const scrollbarWidth = container.offsetWidth - viewer.offsetWidth;
     if (scrollbarWidth > 0) {
-      docStyle.setProperty("--progressBar-end-offset", `${scrollbarWidth}px`);
+      this.#style.setProperty(
+        "--progressBar-end-offset",
+        `${scrollbarWidth}px`
+      );
     }
   }
 
diff --git a/web/viewer.css b/web/viewer.css
index dd29d626d..b23f1850a 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -27,8 +27,6 @@
 
   --main-color: rgba(12, 12, 13, 1);
   --body-bg-color: rgba(212, 212, 215, 1);
-  --progressBar-percent: 0%;
-  --progressBar-end-offset: 0;
   --progressBar-color: rgba(10, 132, 255, 1);
   --progressBar-bg-color: rgba(221, 221, 222, 1);
   --progressBar-blend-color: rgba(116, 177, 239, 1);
@@ -370,6 +368,11 @@ body {
 }
 
 #loadingBar {
+  /* Define these variables here, and not in :root, to avoid reflowing the
+     entire viewer when updating progress (see issue 15958). */
+  --progressBar-percent: 0%;
+  --progressBar-end-offset: 0;
+
   position: absolute;
   inset-inline: 0 var(--progressBar-end-offset);
   height: 4px;