Add an option to enable/disable hardware acceleration (bug 1902012)

extensions/chromium/preferences_schema.json

@@ -45,6 +45,11 @@
       "type": "boolean",
       "default": false
     },
+    "enableHWA": {
+      "description": "Whether to enable hardware acceleration.",
+      "type": "boolean",
+      "default": false
+    },
     "enableML": {
       "type": "boolean",
       "default": false

src/core/default_appearance.js

@@ -242,7 +242,7 @@ class FakeUnicodeFont {
     this.fontFamily = fontFamily;
 
     const canvas = new OffscreenCanvas(1, 1);
-    this.ctxMeasure = canvas.getContext("2d");
+    this.ctxMeasure = canvas.getContext("2d", { willReadFrequently: true });
 
     if (!FakeUnicodeFont._fontNameId) {
       FakeUnicodeFont._fontNameId = 1;

src/display/api.js

@@ -213,6 +213,8 @@ const DefaultStandardFontDataFactory =
  *   when creating canvases. The default value is {new DOMCanvasFactory()}.
  * @property {Object} [filterFactory] - A factory instance that will be used
  *   to create SVG filters when rendering some images on the main canvas.
+ * @property {boolean} [enableHWA] - Enables hardware
+ *   acceleration for rendering. The default value is `false`.
  */
 
 /**
@@ -314,8 +316,9 @@ function getDocument(src) {
           standardFontDataUrl &&
           isValidFetchUrl(cMapUrl, document.baseURI) &&
           isValidFetchUrl(standardFontDataUrl, document.baseURI));
+  const enableHWA = src.enableHWA === true;
   const canvasFactory =
-    src.canvasFactory || new DefaultCanvasFactory({ ownerDocument });
+    src.canvasFactory || new DefaultCanvasFactory({ ownerDocument, enableHWA });
   const filterFactory =
     src.filterFactory || new DefaultFilterFactory({ docId, ownerDocument });
 

src/display/base_factory.js

@@ -46,10 +46,13 @@ class BaseFilterFactory {
 }
 
 class BaseCanvasFactory {
-  constructor() {
+  #enableHWA = false;
+
+  constructor({ enableHWA = false }) {
     if (this.constructor === BaseCanvasFactory) {
       unreachable("Cannot initialize BaseCanvasFactory.");
     }
+    this.#enableHWA = enableHWA;
   }
 
   create(width, height) {
@@ -59,7 +62,9 @@ class BaseCanvasFactory {
     const canvas = this._createCanvas(width, height);
     return {
       canvas,
-      context: canvas.getContext("2d"),
+      context: canvas.getContext("2d", {
+        willReadFrequently: !this.#enableHWA,
+      }),
     };
   }
 

src/display/display_utils.js

@@ -477,8 +477,8 @@ class DOMFilterFactory extends BaseFilterFactory {
 }
 
 class DOMCanvasFactory extends BaseCanvasFactory {
-  constructor({ ownerDocument = globalThis.document } = {}) {
-    super();
+  constructor({ ownerDocument = globalThis.document, enableHWA = false } = {}) {
+    super({ enableHWA });
     this._document = ownerDocument;
   }
 

src/display/editor/tools.js

@@ -98,7 +98,7 @@ class ImageManager {
     // behavior in Safari.
     const svg = `data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 1 1" width="1" height="1" xmlns="http://www.w3.org/2000/svg"><rect width="1" height="1" style="fill:red;"/></svg>`;
     const canvas = new OffscreenCanvas(1, 3);
-    const ctx = canvas.getContext("2d");
+    const ctx = canvas.getContext("2d", { willReadFrequently: true });
     const image = new Image();
     image.src = svg;
     const promise = image.decode().then(() => {

src/display/node_utils.js

@@ -117,6 +117,10 @@ const fetchData = function (url) {
 class NodeFilterFactory extends BaseFilterFactory {}
 
 class NodeCanvasFactory extends BaseCanvasFactory {
+  constructor(options = {}) {
+    super(options);
+  }
+
   /**
    * @ignore
    */

src/display/text_layer.js

@@ -447,7 +447,10 @@ class TextLayer {
       canvas.className = "hiddenCanvasElement";
       canvas.lang = lang;
       document.body.append(canvas);
-      canvasContext = canvas.getContext("2d", { alpha: false });
+      canvasContext = canvas.getContext("2d", {
+        alpha: false,
+        willReadFrequently: true,
+      });
       this.#canvasContexts.set(lang, canvasContext);
     }
     return canvasContext;

web/app.js

@@ -465,6 +465,7 @@ const PDFViewerApplication = {
       pageColors,
       mlManager: this.mlManager,
       abortSignal: this._globalAbortController.signal,
+      enableHWA: AppOptions.get("enableHWA"),
     });
     this.pdfViewer = pdfViewer;
 

web/app_options.js

@@ -310,6 +310,11 @@ const defaultOptions = {
     value: "",
     kind: OptionKind.API,
   },
+  enableHWA: {
+    /** @type {boolean} */
+    value: false,
+    kind: OptionKind.API + OptionKind.PREFERENCE + OptionKind.VIEWER,
+  },
   enableXfa: {
     /** @type {boolean} */
     value: true,

web/pdf_page_view.js

@@ -81,6 +81,8 @@ import { XfaLayerBuilder } from "./xfa_layer_builder.js";
  * @property {IL10n} [l10n] - Localization service.
  * @property {Object} [layerProperties] - The object that is used to lookup
  *   the necessary layer-properties.
+ * @property {boolean} [enableHWA] - Enables hardware
+ *   acceleration for rendering. The default value is `false`.
  */
 
 const DEFAULT_LAYER_PROPERTIES =
@@ -113,6 +115,8 @@ const LAYERS_ORDER = new Map([
 class PDFPageView {
   #annotationMode = AnnotationMode.ENABLE_FORMS;
 
+  #enableHWA = false;
+
   #hasRestrictedScaling = false;
 
   #layerProperties = null;
@@ -163,6 +167,7 @@ class PDFPageView {
     this.maxCanvasPixels =
       options.maxCanvasPixels ?? AppOptions.get("maxCanvasPixels");
     this.pageColors = options.pageColors || null;
+    this.#enableHWA = !!options.enableHWA;
 
     this.eventBus = options.eventBus;
     this.renderingQueue = options.renderingQueue;
@@ -981,7 +986,10 @@ class PDFPageView {
     canvasWrapper.append(canvas);
     this.canvas = canvas;
 
-    const ctx = canvas.getContext("2d", { alpha: false });
+    const ctx = canvas.getContext("2d", {
+      alpha: false,
+      willReadFrequently: !this.#enableHWA,
+    });
     const outputScale = (this.outputScale = new OutputScale());
 
     if (

web/pdf_viewer.js

@@ -123,6 +123,8 @@ function isValidAnnotationEditorMode(mode) {
  * @property {Object} [pageColors] - Overwrites background and foreground colors
  *   with user defined ones in order to improve readability in high contrast
  *   mode.
+ * @property {boolean} [enableHWA] - Enables hardware
+ *   acceleration for rendering. The default value is `false`.
  */
 
 class PDFPageViewBuffer {
@@ -211,6 +213,8 @@ class PDFViewer {
 
   #containerTopLeft = null;
 
+  #enableHWA = false;
+
   #enableHighlightFloatingButton = false;
 
   #enablePermissions = false;
@@ -296,6 +300,7 @@ class PDFViewer {
     this.#enablePermissions = options.enablePermissions || false;
     this.pageColors = options.pageColors || null;
     this.#mlManager = options.mlManager || null;
+    this.#enableHWA = options.enableHWA || false;
 
     this.defaultRenderingQueue = !options.renderingQueue;
     if (
@@ -943,6 +948,7 @@ class PDFViewer {
             pageColors,
             l10n: this.l10n,
             layerProperties: this._layerProperties,
+            enableHWA: this.#enableHWA,
           });
           this._pages.push(pageView);
         }