From 7023bac8d3357e958249a10f562f03ad1f2199eb Mon Sep 17 00:00:00 2001 From: Jonas Jenwald Date: Tue, 5 Apr 2022 18:14:17 +0200 Subject: [PATCH] Move the `PDFBug`-related CSS from `viewer.css` and into its own file Given that none of these CSS rules are used at all, unless debugging is enabled, it seems completely unnecessary to load them *unconditionally* for all users.[1] Note that if *both* the `textLayer` and `pdfBug` debugging hash-parameters are specified simultaneously, we'll now load the `PDFBug`-file *twice* (since the code is simpler that way). However, given first of all that none of this is enabled by default and secondly that using those parameters together isn't helpful[2], potentially loading that file twice is hopefully not an issue. For the `gulp mozcentral` target, the size of the *built* `viewer.css` file is reduced `> 3%` with this patch. --- [1] For the Firefox built-in PDF Viewer, in order to even be able to access the `PDFBug` functionality, you need to first of all set `pdfjs.pdfBugEnabled = true` manually in `about:config`. Secondly, you then also need to append the `pdfBug=...` hash-parameter to the URL when *initially* loading the document. [2] Note how the `textLayer`-settings are already, since essentially forever, overriding the highlighting-features of the "FontInspector"-tab. --- gulpfile.js | 5 ++- web/app.js | 42 ++++++++++--------- web/debugger.css | 103 +++++++++++++++++++++++++++++++++++++++++++++++ web/debugger.js | 10 +++++ web/viewer.css | 89 ---------------------------------------- 5 files changed, 140 insertions(+), 109 deletions(-) create mode 100644 web/debugger.css diff --git a/gulpfile.js b/gulpfile.js index b09069667..93f21b6d4 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -64,7 +64,10 @@ const DIST_DIR = BUILD_DIR + "dist/"; const TYPES_DIR = BUILD_DIR + "types/"; const TMP_DIR = BUILD_DIR + "tmp/"; const TYPESTEST_DIR = BUILD_DIR + "typestest/"; -const COMMON_WEB_FILES = ["web/images/*.{png,svg,gif}", "web/debugger.js"]; +const COMMON_WEB_FILES = [ + "web/images/*.{png,svg,gif}", + "web/debugger.{css,js}", +]; const MOZCENTRAL_DIFF_FILE = "mozcentral.diff"; const REPO = "git@github.com:mozilla/pdf.js.git"; diff --git a/web/app.js b/web/app.js index 8134c6817..9b2217fba 100644 --- a/web/app.js +++ b/web/app.js @@ -330,11 +330,15 @@ const PDFViewerApplication = { if (!hash) { return; } - const params = parseQueryString(hash), - waitOn = []; + const { mainContainer, viewerContainer } = this.appConfig, + params = parseQueryString(hash); if (params.get("disableworker") === "true") { - waitOn.push(loadFakeWorker()); + try { + await loadFakeWorker(); + } catch (ex) { + console.error(`_parseHashParameters: "${ex.message}".`); + } } if (params.has("disablerange")) { AppOptions.set("disableRange", params.get("disablerange") === "true"); @@ -368,8 +372,13 @@ const PDFViewerApplication = { case "visible": case "shadow": case "hover": - const viewer = this.appConfig.viewerContainer; - viewer.classList.add(`textLayer-${params.get("textlayer")}`); + viewerContainer.classList.add(`textLayer-${params.get("textlayer")}`); + try { + await loadPDFBug(this); + this._PDFBug.loadCSS(); + } catch (ex) { + console.error(`_parseHashParameters: "${ex.message}".`); + } break; } } @@ -378,7 +387,12 @@ const PDFViewerApplication = { AppOptions.set("fontExtraProperties", true); const enabled = params.get("pdfbug").split(","); - waitOn.push(initPDFBug(enabled)); + try { + await loadPDFBug(this); + this._PDFBug.init({ OPS }, mainContainer, enabled); + } catch (ex) { + console.error(`_parseHashParameters: "${ex.message}".`); + } } // It is not possible to change locale for the (various) extension builds. if ( @@ -388,15 +402,6 @@ const PDFViewerApplication = { ) { AppOptions.set("locale", params.get("locale")); } - - if (waitOn.length === 0) { - return; - } - try { - await Promise.all(waitOn); - } catch (reason) { - console.error(`_parseHashParameters: "${reason.message}".`); - } }, /** @@ -2120,15 +2125,14 @@ async function loadFakeWorker() { await loadScript(PDFWorker.workerSrc); } -async function initPDFBug(enabledTabs) { - const { debuggerScriptPath, mainContainer } = PDFViewerApplication.appConfig; +async function loadPDFBug(self) { + const { debuggerScriptPath } = self.appConfig; const { PDFBug } = typeof PDFJSDev === "undefined" || !PDFJSDev.test("PRODUCTION") ? await import(debuggerScriptPath) // eslint-disable-line no-unsanitized/method : await __non_webpack_import__(debuggerScriptPath); // eslint-disable-line no-undef - PDFBug.init({ OPS }, mainContainer, enabledTabs); - PDFViewerApplication._PDFBug = PDFBug; + self._PDFBug = PDFBug; } function reportPageStatsPDFBug({ pageNumber }) { diff --git a/web/debugger.css b/web/debugger.css new file mode 100644 index 000000000..426342807 --- /dev/null +++ b/web/debugger.css @@ -0,0 +1,103 @@ +/* Copyright 2014 Mozilla Foundation + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +#PDFBug { + background-color: rgba(255, 255, 255, 1); + border: 1px solid rgba(102, 102, 102, 1); + position: fixed; + top: 32px; + right: 0; + bottom: 0; + font-size: 10px; + padding: 0; + width: 300px; +} +#PDFBug .controls { + background: rgba(238, 238, 238, 1); + border-bottom: 1px solid rgba(102, 102, 102, 1); + padding: 3px; +} +#PDFBug .panels { + bottom: 0; + left: 0; + overflow: auto; + position: absolute; + right: 0; + top: 27px; +} +#PDFBug .panels > div { + padding: 5px; +} +#PDFBug button.active { + font-weight: bold; +} +.debuggerShowText, +.debuggerHideText:hover { + background-color: rgba(255, 255, 0, 1); +} +#PDFBug .stats { + font-family: courier; + font-size: 10px; + white-space: pre; +} +#PDFBug .stats .title { + font-weight: bold; +} +#PDFBug table { + font-size: 10px; + white-space: pre; +} +#PDFBug table.showText { + border-collapse: collapse; + text-align: center; +} +#PDFBug table.showText, +#PDFBug table.showText tr, +#PDFBug table.showText td { + border: 1px solid black; + padding: 1px; +} +#PDFBug table.showText td.advance { + color: grey; +} + +#viewer.textLayer-visible .textLayer { + opacity: 1; +} + +#viewer.textLayer-visible .canvasWrapper { + background-color: rgba(128, 255, 128, 1); +} + +#viewer.textLayer-visible .canvasWrapper canvas { + mix-blend-mode: screen; +} + +#viewer.textLayer-visible .textLayer span { + background-color: rgba(255, 255, 0, 0.1); + color: rgba(0, 0, 0, 1); + border: solid 1px rgba(255, 0, 0, 0.5); + box-sizing: border-box; +} + +#viewer.textLayer-hover .textLayer span:hover { + background-color: rgba(255, 255, 255, 1); + color: rgba(0, 0, 0, 1); +} + +#viewer.textLayer-shadow .textLayer span { + background-color: rgba(255, 255, 255, 0.6); + color: rgba(0, 0, 0, 1); +} diff --git a/web/debugger.js b/web/debugger.js index 696d98c77..1d5571007 100644 --- a/web/debugger.js +++ b/web/debugger.js @@ -531,6 +531,7 @@ const PDFBug = (function PDFBugClosure() { } }, init(pdfjsLib, container, ids) { + this.loadCSS(); this.enable(ids); /* * Basic Layout: @@ -579,6 +580,15 @@ const PDFBug = (function PDFBugClosure() { } this.selectPanel(0); }, + loadCSS() { + const { url } = import.meta; + + const link = document.createElement("link"); + link.rel = "stylesheet"; + link.href = url.replace(/.js$/, ".css"); + + document.head.appendChild(link); + }, cleanup() { for (const tool of this.tools) { if (tool.enabled) { diff --git a/web/viewer.css b/web/viewer.css index f667f5b98..f440e7a0e 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -1346,95 +1346,6 @@ dialog :link { clear: both; } -#PDFBug { - background-color: rgba(255, 255, 255, 1); - border: 1px solid rgba(102, 102, 102, 1); - position: fixed; - top: 32px; - right: 0; - bottom: 0; - font-size: 10px; - padding: 0; - width: 300px; -} -#PDFBug .controls { - background: rgba(238, 238, 238, 1); - border-bottom: 1px solid rgba(102, 102, 102, 1); - padding: 3px; -} -#PDFBug .panels { - bottom: 0; - left: 0; - overflow: auto; - position: absolute; - right: 0; - top: 27px; -} -#PDFBug .panels > div { - padding: 5px; -} -#PDFBug button.active { - font-weight: bold; -} -.debuggerShowText, -.debuggerHideText:hover { - background-color: rgba(255, 255, 0, 1); -} -#PDFBug .stats { - font-family: courier; - font-size: 10px; - white-space: pre; -} -#PDFBug .stats .title { - font-weight: bold; -} -#PDFBug table { - font-size: 10px; - white-space: pre; -} -#PDFBug table.showText { - border-collapse: collapse; - text-align: center; -} -#PDFBug table.showText, -#PDFBug table.showText tr, -#PDFBug table.showText td { - border: 1px solid black; - padding: 1px; -} -#PDFBug table.showText td.advance { - color: grey; -} - -#viewer.textLayer-visible .textLayer { - opacity: 1; -} - -#viewer.textLayer-visible .canvasWrapper { - background-color: rgba(128, 255, 128, 1); -} - -#viewer.textLayer-visible .canvasWrapper canvas { - mix-blend-mode: screen; -} - -#viewer.textLayer-visible .textLayer span { - background-color: rgba(255, 255, 0, 0.1); - color: rgba(0, 0, 0, 1); - border: solid 1px rgba(255, 0, 0, 0.5); - box-sizing: border-box; -} - -#viewer.textLayer-hover .textLayer span:hover { - background-color: rgba(255, 255, 255, 1); - color: rgba(0, 0, 0, 1); -} - -#viewer.textLayer-shadow .textLayer span { - background-color: rgba(255, 255, 255, 0.6); - color: rgba(0, 0, 0, 1); -} - .grab-to-pan-grab { cursor: grab !important; }