Merge pull request #14788 from Snuffleupagus/debugger-separate-css

Move the `PDFBug`-related CSS from `viewer.css` and into its own file
This commit is contained in:
Tim van der Meij 2022-04-19 21:13:16 +02:00 committed by GitHub
commit cf320f8fa3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 140 additions and 109 deletions

View File

@ -64,7 +64,10 @@ const DIST_DIR = BUILD_DIR + "dist/";
const TYPES_DIR = BUILD_DIR + "types/"; const TYPES_DIR = BUILD_DIR + "types/";
const TMP_DIR = BUILD_DIR + "tmp/"; const TMP_DIR = BUILD_DIR + "tmp/";
const TYPESTEST_DIR = BUILD_DIR + "typestest/"; 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 MOZCENTRAL_DIFF_FILE = "mozcentral.diff";
const REPO = "git@github.com:mozilla/pdf.js.git"; const REPO = "git@github.com:mozilla/pdf.js.git";

View File

@ -330,11 +330,15 @@ const PDFViewerApplication = {
if (!hash) { if (!hash) {
return; return;
} }
const params = parseQueryString(hash), const { mainContainer, viewerContainer } = this.appConfig,
waitOn = []; params = parseQueryString(hash);
if (params.get("disableworker") === "true") { if (params.get("disableworker") === "true") {
waitOn.push(loadFakeWorker()); try {
await loadFakeWorker();
} catch (ex) {
console.error(`_parseHashParameters: "${ex.message}".`);
}
} }
if (params.has("disablerange")) { if (params.has("disablerange")) {
AppOptions.set("disableRange", params.get("disablerange") === "true"); AppOptions.set("disableRange", params.get("disablerange") === "true");
@ -368,8 +372,13 @@ const PDFViewerApplication = {
case "visible": case "visible":
case "shadow": case "shadow":
case "hover": case "hover":
const viewer = this.appConfig.viewerContainer; viewerContainer.classList.add(`textLayer-${params.get("textlayer")}`);
viewer.classList.add(`textLayer-${params.get("textlayer")}`); try {
await loadPDFBug(this);
this._PDFBug.loadCSS();
} catch (ex) {
console.error(`_parseHashParameters: "${ex.message}".`);
}
break; break;
} }
} }
@ -378,7 +387,12 @@ const PDFViewerApplication = {
AppOptions.set("fontExtraProperties", true); AppOptions.set("fontExtraProperties", true);
const enabled = params.get("pdfbug").split(","); 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. // It is not possible to change locale for the (various) extension builds.
if ( if (
@ -388,15 +402,6 @@ const PDFViewerApplication = {
) { ) {
AppOptions.set("locale", params.get("locale")); 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); await loadScript(PDFWorker.workerSrc);
} }
async function initPDFBug(enabledTabs) { async function loadPDFBug(self) {
const { debuggerScriptPath, mainContainer } = PDFViewerApplication.appConfig; const { debuggerScriptPath } = self.appConfig;
const { PDFBug } = const { PDFBug } =
typeof PDFJSDev === "undefined" || !PDFJSDev.test("PRODUCTION") typeof PDFJSDev === "undefined" || !PDFJSDev.test("PRODUCTION")
? await import(debuggerScriptPath) // eslint-disable-line no-unsanitized/method ? await import(debuggerScriptPath) // eslint-disable-line no-unsanitized/method
: await __non_webpack_import__(debuggerScriptPath); // eslint-disable-line no-undef : await __non_webpack_import__(debuggerScriptPath); // eslint-disable-line no-undef
PDFBug.init({ OPS }, mainContainer, enabledTabs);
PDFViewerApplication._PDFBug = PDFBug; self._PDFBug = PDFBug;
} }
function reportPageStatsPDFBug({ pageNumber }) { function reportPageStatsPDFBug({ pageNumber }) {

103
web/debugger.css Normal file
View 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);
}

View File

@ -531,6 +531,7 @@ const PDFBug = (function PDFBugClosure() {
} }
}, },
init(pdfjsLib, container, ids) { init(pdfjsLib, container, ids) {
this.loadCSS();
this.enable(ids); this.enable(ids);
/* /*
* Basic Layout: * Basic Layout:
@ -579,6 +580,15 @@ const PDFBug = (function PDFBugClosure() {
} }
this.selectPanel(0); 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() { cleanup() {
for (const tool of this.tools) { for (const tool of this.tools) {
if (tool.enabled) { if (tool.enabled) {

View File

@ -1346,95 +1346,6 @@ dialog :link {
clear: both; 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 { .grab-to-pan-grab {
cursor: grab !important; cursor: grab !important;
} }