Skip to content

Commit 7023bac

Browse files
SnuffleupagusSnuffleupagus
committed
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.
1 parent b73a6cc commit 7023bac

File tree

5 files changed

+140
-109
lines changed

5 files changed

+140
-109
lines changed

‎gulpfile.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,10 @@ const DIST_DIR = BUILD_DIR + "dist/";
6464
const TYPES_DIR = BUILD_DIR + "types/";
6565
const TMP_DIR = BUILD_DIR + "tmp/";
6666
const TYPESTEST_DIR = BUILD_DIR + "typestest/";
67-
const COMMON_WEB_FILES = ["web/images/*.{png,svg,gif}", "web/debugger.js"];
67+
const COMMON_WEB_FILES = [
68+
"web/images/*.{png,svg,gif}",
69+
"web/debugger.{css,js}",
70+
];
6871
const MOZCENTRAL_DIFF_FILE = "mozcentral.diff";
6972

7073
const REPO = "[email protected]:mozilla/pdf.js.git";

‎web/app.js

+23-19
Original file line numberDiff line numberDiff line change
@@ -330,11 +330,15 @@ const PDFViewerApplication = {
330330
if (!hash) {
331331
return;
332332
}
333-
const params = parseQueryString(hash),
334-
waitOn = [];
333+
const { mainContainer, viewerContainer } = this.appConfig,
334+
params = parseQueryString(hash);
335335

336336
if (params.get("disableworker") === "true") {
337-
waitOn.push(loadFakeWorker());
337+
try {
338+
await loadFakeWorker();
339+
} catch (ex) {
340+
console.error(`_parseHashParameters: "${ex.message}".`);
341+
}
338342
}
339343
if (params.has("disablerange")) {
340344
AppOptions.set("disableRange", params.get("disablerange") === "true");
@@ -368,8 +372,13 @@ const PDFViewerApplication = {
368372
case "visible":
369373
case "shadow":
370374
case "hover":
371-
const viewer = this.appConfig.viewerContainer;
372-
viewer.classList.add(`textLayer-${params.get("textlayer")}`);
375+
viewerContainer.classList.add(`textLayer-${params.get("textlayer")}`);
376+
try {
377+
await loadPDFBug(this);
378+
this._PDFBug.loadCSS();
379+
} catch (ex) {
380+
console.error(`_parseHashParameters: "${ex.message}".`);
381+
}
373382
break;
374383
}
375384
}
@@ -378,7 +387,12 @@ const PDFViewerApplication = {
378387
AppOptions.set("fontExtraProperties", true);
379388

380389
const enabled = params.get("pdfbug").split(",");
381-
waitOn.push(initPDFBug(enabled));
390+
try {
391+
await loadPDFBug(this);
392+
this._PDFBug.init({ OPS }, mainContainer, enabled);
393+
} catch (ex) {
394+
console.error(`_parseHashParameters: "${ex.message}".`);
395+
}
382396
}
383397
// It is not possible to change locale for the (various) extension builds.
384398
if (
@@ -388,15 +402,6 @@ const PDFViewerApplication = {
388402
) {
389403
AppOptions.set("locale", params.get("locale"));
390404
}
391-
392-
if (waitOn.length === 0) {
393-
return;
394-
}
395-
try {
396-
await Promise.all(waitOn);
397-
} catch (reason) {
398-
console.error(`_parseHashParameters: "${reason.message}".`);
399-
}
400405
},
401406

402407
/**
@@ -2120,15 +2125,14 @@ async function loadFakeWorker() {
21202125
await loadScript(PDFWorker.workerSrc);
21212126
}
21222127

2123-
async function initPDFBug(enabledTabs) {
2124-
const { debuggerScriptPath, mainContainer } = PDFViewerApplication.appConfig;
2128+
async function loadPDFBug(self) {
2129+
const { debuggerScriptPath } = self.appConfig;
21252130
const { PDFBug } =
21262131
typeof PDFJSDev === "undefined" || !PDFJSDev.test("PRODUCTION")
21272132
? await import(debuggerScriptPath) // eslint-disable-line no-unsanitized/method
21282133
: await __non_webpack_import__(debuggerScriptPath); // eslint-disable-line no-undef
2129-
PDFBug.init({ OPS }, mainContainer, enabledTabs);
21302134

2131-
PDFViewerApplication._PDFBug = PDFBug;
2135+
self._PDFBug = PDFBug;
21322136
}
21332137

21342138
function reportPageStatsPDFBug({ pageNumber }) {

‎web/debugger.css

+103
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
/* Copyright 2014 Mozilla Foundation
2+
*
3+
* Licensed under the Apache License, Version 2.0 (the "License");
4+
* you may not use this file except in compliance with the License.
5+
* You may obtain a copy of the License at
6+
*
7+
* http://www.apache.org/licenses/LICENSE-2.0
8+
*
9+
* Unless required by applicable law or agreed to in writing, software
10+
* distributed under the License is distributed on an "AS IS" BASIS,
11+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12+
* See the License for the specific language governing permissions and
13+
* limitations under the License.
14+
*/
15+
16+
#PDFBug {
17+
background-color: rgba(255, 255, 255, 1);
18+
border: 1px solid rgba(102, 102, 102, 1);
19+
position: fixed;
20+
top: 32px;
21+
right: 0;
22+
bottom: 0;
23+
font-size: 10px;
24+
padding: 0;
25+
width: 300px;
26+
}
27+
#PDFBug .controls {
28+
background: rgba(238, 238, 238, 1);
29+
border-bottom: 1px solid rgba(102, 102, 102, 1);
30+
padding: 3px;
31+
}
32+
#PDFBug .panels {
33+
bottom: 0;
34+
left: 0;
35+
overflow: auto;
36+
position: absolute;
37+
right: 0;
38+
top: 27px;
39+
}
40+
#PDFBug .panels > div {
41+
padding: 5px;
42+
}
43+
#PDFBug button.active {
44+
font-weight: bold;
45+
}
46+
.debuggerShowText,
47+
.debuggerHideText:hover {
48+
background-color: rgba(255, 255, 0, 1);
49+
}
50+
#PDFBug .stats {
51+
font-family: courier;
52+
font-size: 10px;
53+
white-space: pre;
54+
}
55+
#PDFBug .stats .title {
56+
font-weight: bold;
57+
}
58+
#PDFBug table {
59+
font-size: 10px;
60+
white-space: pre;
61+
}
62+
#PDFBug table.showText {
63+
border-collapse: collapse;
64+
text-align: center;
65+
}
66+
#PDFBug table.showText,
67+
#PDFBug table.showText tr,
68+
#PDFBug table.showText td {
69+
border: 1px solid black;
70+
padding: 1px;
71+
}
72+
#PDFBug table.showText td.advance {
73+
color: grey;
74+
}
75+
76+
#viewer.textLayer-visible .textLayer {
77+
opacity: 1;
78+
}
79+
80+
#viewer.textLayer-visible .canvasWrapper {
81+
background-color: rgba(128, 255, 128, 1);
82+
}
83+
84+
#viewer.textLayer-visible .canvasWrapper canvas {
85+
mix-blend-mode: screen;
86+
}
87+
88+
#viewer.textLayer-visible .textLayer span {
89+
background-color: rgba(255, 255, 0, 0.1);
90+
color: rgba(0, 0, 0, 1);
91+
border: solid 1px rgba(255, 0, 0, 0.5);
92+
box-sizing: border-box;
93+
}
94+
95+
#viewer.textLayer-hover .textLayer span:hover {
96+
background-color: rgba(255, 255, 255, 1);
97+
color: rgba(0, 0, 0, 1);
98+
}
99+
100+
#viewer.textLayer-shadow .textLayer span {
101+
background-color: rgba(255, 255, 255, 0.6);
102+
color: rgba(0, 0, 0, 1);
103+
}

‎web/debugger.js

+10
Original file line numberDiff line numberDiff line change
@@ -531,6 +531,7 @@ const PDFBug = (function PDFBugClosure() {
531531
}
532532
},
533533
init(pdfjsLib, container, ids) {
534+
this.loadCSS();
534535
this.enable(ids);
535536
/*
536537
* Basic Layout:
@@ -579,6 +580,15 @@ const PDFBug = (function PDFBugClosure() {
579580
}
580581
this.selectPanel(0);
581582
},
583+
loadCSS() {
584+
const { url } = import.meta;
585+
586+
const link = document.createElement("link");
587+
link.rel = "stylesheet";
588+
link.href = url.replace(/.js$/, ".css");
589+
590+
document.head.appendChild(link);
591+
},
582592
cleanup() {
583593
for (const tool of this.tools) {
584594
if (tool.enabled) {

‎web/viewer.css

-89
Original file line numberDiff line numberDiff line change
@@ -1346,95 +1346,6 @@ dialog :link {
13461346
clear: both;
13471347
}
13481348

1349-
#PDFBug {
1350-
background-color: rgba(255, 255, 255, 1);
1351-
border: 1px solid rgba(102, 102, 102, 1);
1352-
position: fixed;
1353-
top: 32px;
1354-
right: 0;
1355-
bottom: 0;
1356-
font-size: 10px;
1357-
padding: 0;
1358-
width: 300px;
1359-
}
1360-
#PDFBug .controls {
1361-
background: rgba(238, 238, 238, 1);
1362-
border-bottom: 1px solid rgba(102, 102, 102, 1);
1363-
padding: 3px;
1364-
}
1365-
#PDFBug .panels {
1366-
bottom: 0;
1367-
left: 0;
1368-
overflow: auto;
1369-
position: absolute;
1370-
right: 0;
1371-
top: 27px;
1372-
}
1373-
#PDFBug .panels > div {
1374-
padding: 5px;
1375-
}
1376-
#PDFBug button.active {
1377-
font-weight: bold;
1378-
}
1379-
.debuggerShowText,
1380-
.debuggerHideText:hover {
1381-
background-color: rgba(255, 255, 0, 1);
1382-
}
1383-
#PDFBug .stats {
1384-
font-family: courier;
1385-
font-size: 10px;
1386-
white-space: pre;
1387-
}
1388-
#PDFBug .stats .title {
1389-
font-weight: bold;
1390-
}
1391-
#PDFBug table {
1392-
font-size: 10px;
1393-
white-space: pre;
1394-
}
1395-
#PDFBug table.showText {
1396-
border-collapse: collapse;
1397-
text-align: center;
1398-
}
1399-
#PDFBug table.showText,
1400-
#PDFBug table.showText tr,
1401-
#PDFBug table.showText td {
1402-
border: 1px solid black;
1403-
padding: 1px;
1404-
}
1405-
#PDFBug table.showText td.advance {
1406-
color: grey;
1407-
}
1408-
1409-
#viewer.textLayer-visible .textLayer {
1410-
opacity: 1;
1411-
}
1412-
1413-
#viewer.textLayer-visible .canvasWrapper {
1414-
background-color: rgba(128, 255, 128, 1);
1415-
}
1416-
1417-
#viewer.textLayer-visible .canvasWrapper canvas {
1418-
mix-blend-mode: screen;
1419-
}
1420-
1421-
#viewer.textLayer-visible .textLayer span {
1422-
background-color: rgba(255, 255, 0, 0.1);
1423-
color: rgba(0, 0, 0, 1);
1424-
border: solid 1px rgba(255, 0, 0, 0.5);
1425-
box-sizing: border-box;
1426-
}
1427-
1428-
#viewer.textLayer-hover .textLayer span:hover {
1429-
background-color: rgba(255, 255, 255, 1);
1430-
color: rgba(0, 0, 0, 1);
1431-
}
1432-
1433-
#viewer.textLayer-shadow .textLayer span {
1434-
background-color: rgba(255, 255, 255, 0.6);
1435-
color: rgba(0, 0, 0, 1);
1436-
}
1437-
14381349
.grab-to-pan-grab {
14391350
cursor: grab !important;
14401351
}

0 commit comments

Comments
 (0)