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.
This commit is contained in:
Jonas Jenwald
parent
b73a6cc213
commit
7023bac8d3
@ -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";
|
||||
|
||||
42
web/app.js
42
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 }) {
|
||||
|
||||
103
web/debugger.css
Normal file
103
web/debugger.css
Normal file
@ -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);
|
||||
}
|
||||
@ -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) {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user