Skip to content

Commit cf320f8

Browse files
timvandermeijtimvandermeij
authored
Merge pull request #14788 from Snuffleupagus/debugger-separate-css
Move the `PDFBug`-related CSS from `viewer.css` and into its own file
2 parents 32ae0e4 + 7023bac commit cf320f8

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)