From 987176194902c08dfdd1d103b31001fb595bf84e Mon Sep 17 00:00:00 2001 From: Jonas Jenwald Date: Thu, 26 May 2022 09:45:05 +0200 Subject: [PATCH] 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 | 15 +++++++++------ web/base_viewer.js | 12 +++++++----- web/pdf_thumbnail_view.js | 6 ++++++ web/pdf_thumbnail_viewer.js | 31 ++++++++++++++++++++++++++++++- 4 files changed, 52 insertions(+), 12 deletions(-) diff --git a/web/app.js b/web/app.js index 90c492dfdd31d..c9c0f9bb8aa3c 100644 --- a/web/app.js +++ b/web/app.js @@ -504,8 +504,13 @@ const PDFViewerApplication = { }); this.pdfScriptingManager = pdfScriptingManager; - const container = appConfig.mainContainer; - const viewer = appConfig.viewerContainer; + const container = appConfig.mainContainer, + 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: { - background: AppOptions.get("pageColorsBackground"), - foreground: AppOptions.get("pageColorsForeground"), - }, + pageColors, }); 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); diff --git a/web/base_viewer.js b/web/base_viewer.js index 82ad8ebff8fb5..c7ff5f608f593 100644 --- a/web/base_viewer.js +++ b/web/base_viewer.js @@ -269,13 +269,15 @@ class BaseViewer { if (typeof PDFJSDev === "undefined" || !PDFJSDev.test("MOZCENTRAL")) { if ( - options.pageColors && - (!CSS.supports("color", options.pageColors.background) || - !CSS.supports("color", options.pageColors.foreground)) + this.pageColors && + !( + 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; diff --git a/web/pdf_thumbnail_view.js b/web/pdf_thumbnail_view.js index fa392bf5d90c7..fcd7889f17199 100644 --- a/web/pdf_thumbnail_view.js +++ b/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; diff --git a/web/pdf_thumbnail_viewer.js b/web/pdf_thumbnail_viewer.js index f0ffd3c7ab01d..58244825309b0 100644 --- a/web/pdf_thumbnail_viewer.js +++ b/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); }