Merge pull request #14957 from Snuffleupagus/docStyle

Introduce a viewer constant for `document.documentElement.style`

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

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;
+      docStyle.setProperty("--zoom-factor", this.scale);
-      style.setProperty("--zoom-factor", this.scale);
     }
 
     if (this.svg) {

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;
   }
 

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;
+      docStyle.setProperty("--scale-select-container-width", `${maxWidth}px`);
-      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.

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;
+    docStyle.setProperty("--progressBar-percent", `${this._percent}%`);
-    doc.style.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;
+      docStyle.setProperty("--progressBar-end-offset", `${scrollbarWidth}px`);
-      doc.style.setProperty("--progressBar-end-offset", `${scrollbarWidth}px`);
     }
   }
 
@@ -843,6 +848,7 @@ export {
   DEFAULT_SCALE,
   DEFAULT_SCALE_DELTA,
   DEFAULT_SCALE_VALUE,
+  docStyle,
   getActiveOrFocusedElement,
   getPageSizeInches,
   getVisibleElements,