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;
}