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

View File

@ -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
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) {
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) {

View File

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