Support custom pageColors in the thumbnails (PR 14874)

Currently, when non-standard `pageColors` are specified, the thumbnails will look inconsistent depending on how they're created.
The thumbnails that are created by downsizing the *page* canvases will obviously use the `pageColors` as intended, however the thumbnails which are rendered *directly* will always use the default colors.

web/app.js

@@ -504,8 +504,13 @@ const PDFViewerApplication = {
     });
     this.pdfScriptingManager = pdfScriptingManager;
 
-    const container = appConfig.mainContainer;
+    const container = appConfig.mainContainer,
-    const viewer = appConfig.viewerContainer;
+      viewer = appConfig.viewerContainer;
+    const pageColors = {
+      background: AppOptions.get("pageColorsBackground"),
+      foreground: AppOptions.get("pageColorsForeground"),
+    };
+
     this.pdfViewer = new PDFViewer({
       container,
       viewer,
@@ -525,10 +530,7 @@ const PDFViewerApplication = {
       useOnlyCssZoom: AppOptions.get("useOnlyCssZoom"),
       maxCanvasPixels: AppOptions.get("maxCanvasPixels"),
       enablePermissions: AppOptions.get("enablePermissions"),
-      pageColors: {
+      pageColors,
-        background: AppOptions.get("pageColorsBackground"),
-        foreground: AppOptions.get("pageColorsForeground"),
-      },
     });
     pdfRenderingQueue.setViewer(this.pdfViewer);
     pdfLinkService.setViewer(this.pdfViewer);
@@ -540,6 +542,7 @@ const PDFViewerApplication = {
       renderingQueue: pdfRenderingQueue,
       linkService: pdfLinkService,
       l10n: this.l10n,
+      pageColors,
     });
     pdfRenderingQueue.setThumbnailViewer(this.pdfThumbnailViewer);
 

web/base_viewer.js

@@ -269,13 +269,15 @@ class BaseViewer {
 
     if (typeof PDFJSDev === "undefined" || !PDFJSDev.test("MOZCENTRAL")) {
       if (
-        options.pageColors &&
+        this.pageColors &&
-        (!CSS.supports("color", options.pageColors.background) ||
+        !(
-          !CSS.supports("color", options.pageColors.foreground))
+          CSS.supports("color", this.pageColors.background) &&
+          CSS.supports("color", this.pageColors.foreground)
+        )
       ) {
-        if (options.pageColors.background || options.pageColors.foreground) {
+        if (this.pageColors.background || this.pageColors.foreground) {
           console.warn(
-            "Ignoring `pageColors`-option, since the browser doesn't support the values used."
+            "BaseViewer: Ignoring `pageColors`-option, since the browser doesn't support the values used."
           );
         }
         this.pageColors = null;

web/pdf_thumbnail_view.js

@@ -39,6 +39,9 @@ const THUMBNAIL_WIDTH = 98; // px
  * @property {PDFRenderingQueue} renderingQueue - The rendering queue object.
  * @property {function} checkSetImageDisabled
  * @property {IL10n} l10n - Localization service.
+ * @property {Object} [pageColors] - Overwrites background and foreground colors
+ *   with user defined ones in order to improve readability in high contrast
+ *   mode.
  */
 
 class TempImageFactory {
@@ -87,6 +90,7 @@ class PDFThumbnailView {
     renderingQueue,
     checkSetImageDisabled,
     l10n,
+    pageColors,
   }) {
     this.id = id;
     this.renderingId = "thumbnail" + id;
@@ -97,6 +101,7 @@ class PDFThumbnailView {
     this.viewport = defaultViewport;
     this.pdfPageRotate = defaultViewport.rotation;
     this._optionalContentConfigPromise = optionalContentConfigPromise || null;
+    this.pageColors = pageColors || null;
 
     this.linkService = linkService;
     this.renderingQueue = renderingQueue;
@@ -320,6 +325,7 @@ class PDFThumbnailView {
       transform,
       viewport: drawViewport,
       optionalContentConfigPromise: this._optionalContentConfigPromise,
+      pageColors: this.pageColors,
     };
     const renderTask = (this.renderTask = pdfPage.render(renderContext));
     renderTask.onContinue = renderContinueCallback;

web/pdf_thumbnail_viewer.js

@@ -40,6 +40,9 @@ const THUMBNAIL_SELECTED_CLASS = "selected";
  * @property {IPDFLinkService} linkService - The navigation/linking service.
  * @property {PDFRenderingQueue} renderingQueue - The rendering queue object.
  * @property {IL10n} l10n - Localization service.
+ * @property {Object} [pageColors] - Overwrites background and foreground colors
+ *   with user defined ones in order to improve readability in high contrast
+ *   mode.
  */
 
 /**
@@ -49,11 +52,36 @@ class PDFThumbnailViewer {
   /**
    * @param {PDFThumbnailViewerOptions} options
    */
-  constructor({ container, eventBus, linkService, renderingQueue, l10n }) {
+  constructor({
+    container,
+    eventBus,
+    linkService,
+    renderingQueue,
+    l10n,
+    pageColors,
+  }) {
     this.container = container;
     this.linkService = linkService;
     this.renderingQueue = renderingQueue;
     this.l10n = l10n;
+    this.pageColors = pageColors || null;
+
+    if (typeof PDFJSDev === "undefined" || !PDFJSDev.test("MOZCENTRAL")) {
+      if (
+        this.pageColors &&
+        !(
+          CSS.supports("color", this.pageColors.background) &&
+          CSS.supports("color", this.pageColors.foreground)
+        )
+      ) {
+        if (this.pageColors.background || this.pageColors.foreground) {
+          console.warn(
+            "PDFThumbnailViewer: Ignoring `pageColors`-option, since the browser doesn't support the values used."
+          );
+        }
+        this.pageColors = null;
+      }
+    }
 
     this.scroll = watchScroll(this.container, this._scrollUpdated.bind(this));
     this._resetView();
@@ -210,6 +238,7 @@ class PDFThumbnailViewer {
             renderingQueue: this.renderingQueue,
             checkSetImageDisabled,
             l10n: this.l10n,
+            pageColors: this.pageColors,
           });
           this._thumbnails.push(thumbnail);
         }