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

@@ -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);

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`
+      );
     }
   }
 

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;