From ca244d9bca2cc61dd3dd8284722b9206053ff55b Mon Sep 17 00:00:00 2001
From: Jonas Jenwald <jonas.jenwald@gmail.com>
Date: Sun, 22 May 2022 18:00:57 +0200
Subject: [PATCH] Introduce a viewer constant for
 `document.documentElement.style`

Over time, as we've been introducing JavaScript code to modify CSS variables, we've been adding shorthand properties to various classes to reduce unnecessary repetition when accessing the document-styles.
Rather than repeating this in multiple places, it seems overall simpler to just introduce a constant and re-use that throughout the viewer instead.
---
 web/base_viewer.js         |  6 +++---
 web/pdf_page_view.js       |  4 ++--
 web/pdf_sidebar_resizer.js |  6 ++++--
 web/toolbar.js             |  4 ++--
 web/ui_utils.js            | 14 ++++++++++----
 5 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/web/base_viewer.js b/web/base_viewer.js
index 82ad8ebff8fb5..f3e66fa353b6a 100644
--- a/web/base_viewer.js
+++ b/web/base_viewer.js
@@ -40,6 +40,7 @@ import {
   DEFAULT_SCALE,
   DEFAULT_SCALE_DELTA,
   DEFAULT_SCALE_VALUE,
+  docStyle,
   getVisibleElements,
   isPortraitOrientation,
   isValidRotation,
@@ -290,7 +291,6 @@ class BaseViewer {
     } else {
       this.renderingQueue = options.renderingQueue;
     }
-    this._doc = document.documentElement;
 
     this.scroll = watchScroll(this.container, this._scrollUpdate.bind(this));
     this.presentationModeState = PresentationModeState.UNKNOWN;
@@ -1016,7 +1016,7 @@ class BaseViewer {
       return;
     }
 
-    this._doc.style.setProperty("--zoom-factor", newScale);
+    docStyle.setProperty("--zoom-factor", newScale);
 
     const updateArgs = { scale: newScale };
     for (const pageView of this._pages) {
@@ -2067,7 +2067,7 @@ class BaseViewer {
     if (height !== this.#previousContainerHeight) {
       this.#previousContainerHeight = height;
 
-      this._doc.style.setProperty("--viewer-container-height", `${height}px`);
+      docStyle.setProperty("--viewer-container-height", `${height}px`);
     }
   }
 }
diff --git a/web/pdf_page_view.js b/web/pdf_page_view.js
index 64b06a2d6e295..a019f82cd6ceb 100644
--- a/web/pdf_page_view.js
+++ b/web/pdf_page_view.js
@@ -40,6 +40,7 @@ import {
 import {
   approximateFraction,
   DEFAULT_SCALE,
+  docStyle,
   OutputScale,
   RendererType,
   RenderingStates,
@@ -339,8 +340,7 @@ class PDFPageView {
     });
 
     if (this._isStandalone) {
-      const { style } = document.documentElement;
-      style.setProperty("--zoom-factor", this.scale);
+      docStyle.setProperty("--zoom-factor", this.scale);
     }
 
     if (this.svg) {
diff --git a/web/pdf_sidebar_resizer.js b/web/pdf_sidebar_resizer.js
index b97a1be7feac3..79e857d74db5e 100644
--- a/web/pdf_sidebar_resizer.js
+++ b/web/pdf_sidebar_resizer.js
@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+import { docStyle } from "./ui_utils.js";
+
 const SIDEBAR_WIDTH_VAR = "--sidebar-width";
 const SIDEBAR_MIN_WIDTH = 200; // pixels
 const SIDEBAR_RESIZING_CLASS = "sidebarResizing";
@@ -34,7 +36,6 @@ class PDFSidebarResizer {
   constructor(options, eventBus, l10n) {
     this.isRTL = false;
     this.sidebarOpen = false;
-    this.doc = document.documentElement;
     this._width = null;
     this._outerContainerWidth = null;
     this._boundEvents = Object.create(null);
@@ -75,7 +76,8 @@ class PDFSidebarResizer {
       return false;
     }
     this._width = width;
-    this.doc.style.setProperty(SIDEBAR_WIDTH_VAR, `${width}px`);
+
+    docStyle.setProperty(SIDEBAR_WIDTH_VAR, `${width}px`);
     return true;
   }
 
diff --git a/web/toolbar.js b/web/toolbar.js
index c0916fc766f46..ae1243ed8e8ef 100644
--- a/web/toolbar.js
+++ b/web/toolbar.js
@@ -17,6 +17,7 @@ import {
   animationStarted,
   DEFAULT_SCALE,
   DEFAULT_SCALE_VALUE,
+  docStyle,
   MAX_SCALE,
   MIN_SCALE,
   noContextMenuHandler,
@@ -274,8 +275,7 @@ class Toolbar {
     maxWidth += 2 * scaleSelectOverflow;
 
     if (maxWidth > scaleSelectContainerWidth) {
-      const doc = document.documentElement;
-      doc.style.setProperty("--scale-select-container-width", `${maxWidth}px`);
+      docStyle.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/ui_utils.js b/web/ui_utils.js
index 948f6b55289de..c7876e5bf74b8 100644
--- a/web/ui_utils.js
+++ b/web/ui_utils.js
@@ -677,6 +677,13 @@ const animationStarted = new Promise(function (resolve) {
   window.requestAnimationFrame(resolve);
 });
 
+const docStyle =
+  typeof PDFJSDev !== "undefined" &&
+  PDFJSDev.test("LIB") &&
+  typeof document === "undefined"
+    ? null
+    : document.documentElement.style;
+
 function clamp(v, min, max) {
   return Math.min(Math.max(v, min), max);
 }
@@ -709,8 +716,7 @@ class ProgressBar {
     }
     this.div.classList.remove("indeterminate");
 
-    const doc = document.documentElement;
-    doc.style.setProperty("--progressBar-percent", `${this._percent}%`);
+    docStyle.setProperty("--progressBar-percent", `${this._percent}%`);
   }
 
   get percent() {
@@ -730,8 +736,7 @@ class ProgressBar {
     const container = viewer.parentNode;
     const scrollbarWidth = container.offsetWidth - viewer.offsetWidth;
     if (scrollbarWidth > 0) {
-      const doc = document.documentElement;
-      doc.style.setProperty("--progressBar-end-offset", `${scrollbarWidth}px`);
+      docStyle.setProperty("--progressBar-end-offset", `${scrollbarWidth}px`);
     }
   }
 
@@ -843,6 +848,7 @@ export {
   DEFAULT_SCALE,
   DEFAULT_SCALE_DELTA,
   DEFAULT_SCALE_VALUE,
+  docStyle,
   getActiveOrFocusedElement,
   getPageSizeInches,
   getVisibleElements,