Add an OutputScale static method to get the devicePixelRatio

Currently we lookup the `devicePixelRatio`, with fallback handling, in a number of spots in the code-base.
Rather than duplicating code we can instead add a new static method in the `OutputScale` class, since that one is now exposed in the API.

src/display/canvas.js

@@ -30,6 +30,7 @@ import {
 import {
   getCurrentTransform,
   getCurrentTransformInverse,
+  OutputScale,
   PixelsPerInch,
 } from "./display_utils.js";
 import {
@@ -811,7 +812,7 @@ function getImageSmoothingEnabled(transform, interpolate) {
   scale[0] = Math.fround(scale[0]);
   scale[1] = Math.fround(scale[1]);
   const actualScale = Math.fround(
-    (globalThis.devicePixelRatio || 1) * PixelsPerInch.PDF_TO_CSS_UNITS
+    OutputScale.pixelRatio * PixelsPerInch.PDF_TO_CSS_UNITS
   );
   return scale[0] <= actualScale && scale[1] <= actualScale;
 }

src/display/display_utils.js

@@ -620,7 +620,7 @@ function setLayerDimensions(
  */
 class OutputScale {
   constructor() {
-    const pixelRatio = window.devicePixelRatio || 1;
+    const { pixelRatio } = OutputScale;
 
     /**
      * @type {number} Horizontal scale.
@@ -673,6 +673,10 @@ class OutputScale {
     }
     return false;
   }
+
+  static get pixelRatio() {
+    return globalThis.devicePixelRatio || 1;
+  }
 }
 
 // See https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types

src/display/text_layer.js

@@ -23,7 +23,7 @@ import {
   Util,
   warn,
 } from "../shared/util.js";
-import { setLayerDimensions } from "./display_utils.js";
+import { OutputScale, setLayerDimensions } from "./display_utils.js";
 
 /**
  * @typedef {Object} TextLayerParameters
@@ -115,7 +115,7 @@ class TextLayer {
     }
     this.#container = this.#rootContainer = container;
 
-    this.#scale = viewport.scale * (globalThis.devicePixelRatio || 1);
+    this.#scale = viewport.scale * OutputScale.pixelRatio;
     this.#rotation = viewport.rotation;
     this.#layoutTextParams = {
       div: null,
@@ -205,7 +205,7 @@ class TextLayer {
    * @returns {undefined}
    */
   update({ viewport, onBefore = null }) {
-    const scale = viewport.scale * (globalThis.devicePixelRatio || 1);
+    const scale = viewport.scale * OutputScale.pixelRatio;
     const rotation = viewport.rotation;
 
     if (rotation !== this.#rotation) {

src/display/touch_manager.js

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { stopEvent } from "./display_utils.js";
+import { OutputScale, stopEvent } from "./display_utils.js";
 
 class TouchManager {
   #container;
@@ -75,7 +75,7 @@ class TouchManager {
     // The properties TouchEvent::screenX/Y are in screen CSS pixels:
     //  https://developer.mozilla.org/en-US/docs/Web/API/Touch/screenX#examples
     // MIN_TOUCH_DISTANCE_TO_PINCH is in CSS pixels.
-    return 35 / (window.devicePixelRatio || 1);
+    return 35 / OutputScale.pixelRatio;
   }
 
   #onTouchStart(evt) {

test/driver.js

@@ -20,6 +20,7 @@ const {
   DrawLayer,
   getDocument,
   GlobalWorkerOptions,
+  OutputScale,
   PixelsPerInch,
   shadow,
   TextLayer,
@@ -876,7 +877,7 @@ class Driver {
           page => {
             // Default to creating the test images at the devices pixel ratio,
             // unless the test explicitly specifies an output scale.
-            const outputScale = task.outputScale || window.devicePixelRatio;
+            const outputScale = task.outputScale || OutputScale.pixelRatio;
             let viewport = page.getViewport({
               scale: PixelsPerInch.PDF_TO_CSS_UNITS,
             });

web/app.js

@@ -50,6 +50,7 @@ import {
   InvalidPDFException,
   isDataScheme,
   isPdfFile,
+  OutputScale,
   PDFWorker,
   ResponseException,
   shadow,
@@ -2091,7 +2092,7 @@ const PDFViewerApplication = {
         pdfViewer.refresh();
       }
       const mediaQueryList = window.matchMedia(
-        `(resolution: ${window.devicePixelRatio || 1}dppx)`
+        `(resolution: ${OutputScale.pixelRatio}dppx)`
       );
       mediaQueryList.addEventListener("change", addWindowResolutionChange, {
         once: true,

web/pdf_page_detail_view.js

@@ -14,6 +14,7 @@
  */
 
 import { BasePDFPageView } from "./base_pdf_page_view.js";
+import { OutputScale } from "pdfjs-lib";
 import { RenderingStates } from "./ui_utils.js";
 
 /** @typedef {import("./interfaces").IRenderableView} IRenderableView */
@@ -153,7 +154,7 @@ class PDFPageDetailView extends BasePDFPageView {
     // but we can reduce it to make sure that we stay within the maxCanvasPixels
     // limit.
     const visiblePixels =
-      visibleWidth * visibleHeight * (window.devicePixelRatio || 1) ** 2;
+      visibleWidth * visibleHeight * OutputScale.pixelRatio ** 2;
     const maxDetailToVisibleLinearRatio = Math.sqrt(
       maxCanvasPixels / visiblePixels
     );
@@ -228,18 +229,18 @@ class PDFPageDetailView extends BasePDFPageView {
 
     const area = this.#detailArea;
 
-    const { devicePixelRatio = 1 } = window;
+    const { pixelRatio } = OutputScale;
     const transform = [
-      devicePixelRatio,
+      pixelRatio,
       0,
       0,
-      devicePixelRatio,
+      pixelRatio,
-      -area.minX * devicePixelRatio,
+      -area.minX * pixelRatio,
-      -area.minY * devicePixelRatio,
+      -area.minY * pixelRatio,
     ];
 
-    canvas.width = area.width * devicePixelRatio;
+    canvas.width = area.width * pixelRatio;
-    canvas.height = area.height * devicePixelRatio;
+    canvas.height = area.height * pixelRatio;
     const { style } = canvas;
     style.width = `${(area.width * 100) / width}%`;
     style.height = `${(area.height * 100) / height}%`;