Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Convert the existing overlays to use <dialog> elements (issue 14698)

Browse Source 
This replaces our *custom* overlays with standard `<dialog>` DOM elements, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog, thus simplifying the related CSS, HTML, and JavaScript code.

With these changes, some of the functionality of the `OverlayManager` class is now handled natively (e.g. `Esc` to close the dialog). However, since we still need to be able to prevent dialogs from overlaying one another, it still makes sense to keep this functionality (as far as I'm concerned).
This commit is contained in:
Jonas Jenwald 2022-03-25 14:10:13 +01:00
parent 0dd6bc9a85
commit f0aa08b464
9 changed files with 221 additions and 272 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
web/chromecom.js
View File

@ -147,7 +147,7 @@ function reloadIfRuntimeIsUnavailable() {
let chromeFileAccessOverlayPromise; let chromeFileAccessOverlayPromise;
function requestAccessToLocalFile(fileUrl, overlayManager, callback) { function requestAccessToLocalFile(fileUrl, overlayManager, callback) {
let onCloseOverlay = null; const dialog = document.getElementById("chromeFileAccessDialog");
if (top !== window) { if (top !== window) {
// When the extension reloads after receiving new permissions, the pages // When the extension reloads after receiving new permissions, the pages
// have to be reloaded to restore the extension runtime. Auto-reload // have to be reloaded to restore the extension runtime. Auto-reload
@ -157,18 +157,16 @@ function requestAccessToLocalFile(fileUrl, overlayManager, callback) {
// for detecting unload of the top-level frame. Should this ever change // for detecting unload of the top-level frame. Should this ever change
// (crbug.com/511670), then the user can just reload the tab. // (crbug.com/511670), then the user can just reload the tab.
window.addEventListener("focus", reloadIfRuntimeIsUnavailable); window.addEventListener("focus", reloadIfRuntimeIsUnavailable);
onCloseOverlay = function () { dialog.addEventListener("close", function () {
window.removeEventListener("focus", reloadIfRuntimeIsUnavailable); window.removeEventListener("focus", reloadIfRuntimeIsUnavailable);
reloadIfRuntimeIsUnavailable(); reloadIfRuntimeIsUnavailable();
overlayManager.close("chromeFileAccessOverlay"); });
};
} }
if (!chromeFileAccessOverlayPromise) { if (!chromeFileAccessOverlayPromise) {
chromeFileAccessOverlayPromise = overlayManager.register( chromeFileAccessOverlayPromise = overlayManager.register(
"chromeFileAccessOverlay", "chromeFileAccessDialog",
document.getElementById("chromeFileAccessOverlay"), dialog,
onCloseOverlay, /* canForceClose = */ true
true
); );
} }
chromeFileAccessOverlayPromise.then(function () { chromeFileAccessOverlayPromise.then(function () {
@ -233,7 +231,7 @@ function requestAccessToLocalFile(fileUrl, overlayManager, callback) {
} }
}; };
overlayManager.open("chromeFileAccessOverlay"); overlayManager.open("chromeFileAccessDialog");
}); });
} }

62
web/overlay_manager.js
View File

@ -18,43 +18,29 @@ class OverlayManager {
#active = null; #active = null;
#keyDownBound = null;
get active() { get active() {
return this.#active; return this.#active;
} }
/** /**
* @param {string} name - The name of the overlay that is registered. * @param {string} name - The name of the overlay that is registered.
* @param {HTMLDivElement} element - The overlay's DOM element. * @param {HTMLDialogElement} dialog - The overlay's DOM element.
* @param {function} [callerCloseMethod] - The method that, if present, calls
* `OverlayManager.close` from the object registering the
* overlay. Access to this method is necessary in order to
* run cleanup code when e.g. the overlay is force closed.
* The default is `null`.
* @param {boolean} [canForceClose] - Indicates if opening the overlay closes * @param {boolean} [canForceClose] - Indicates if opening the overlay closes
* an active overlay. The default is `false`. * an active overlay. The default is `false`.
* @returns {Promise} A promise that is resolved when the overlay has been * @returns {Promise} A promise that is resolved when the overlay has been
* registered. * registered.
*/ */
async register( async register(name, dialog, canForceClose = false) {
name, if (!name || !dialog) {
element,
callerCloseMethod = null,
canForceClose = false
) {
let container;
if (!name || !element || !(container = element.parentNode)) {
throw new Error("Not enough parameters."); throw new Error("Not enough parameters.");
} else if (this.#overlays[name]) { } else if (this.#overlays[name]) {
throw new Error("The overlay is already registered."); throw new Error("The overlay is already registered.");
} }
this.#overlays[name] = { this.#overlays[name] = { dialog, canForceClose };
element,
container, dialog.addEventListener("cancel", evt => {
callerCloseMethod, this.#active = null;
canForceClose, });
};
} }
/** /**
@ -83,17 +69,13 @@ class OverlayManager {
if (this.#active === name) { if (this.#active === name) {
throw new Error("The overlay is already active."); throw new Error("The overlay is already active.");
} else if (this.#overlays[name].canForceClose) { } else if (this.#overlays[name].canForceClose) {
this.#closeThroughCaller(); await this.close();
} else { } else {
throw new Error("Another overlay is currently active."); throw new Error("Another overlay is currently active.");
} }
} }
this.#active = name; this.#active = name;
this.#overlays[this.#active].element.classList.remove("hidden"); this.#overlays[this.#active].dialog.showModal();
this.#overlays[this.#active].container.classList.remove("hidden");
this.#keyDownBound = this.#keyDown.bind(this);
window.addEventListener("keydown", this.#keyDownBound);
} }
/** /**
@ -101,7 +83,7 @@ class OverlayManager {
* @returns {Promise} A promise that is resolved when the overlay has been * @returns {Promise} A promise that is resolved when the overlay has been
* closed. * closed.
*/ */
async close(name) { async close(name = this.#active) {
if (!this.#overlays[name]) { if (!this.#overlays[name]) {
throw new Error("The overlay does not exist."); throw new Error("The overlay does not exist.");
} else if (!this.#active) { } else if (!this.#active) {
@ -109,28 +91,8 @@ class OverlayManager {
} else if (this.#active !== name) { } else if (this.#active !== name) {
throw new Error("Another overlay is currently active."); throw new Error("Another overlay is currently active.");
} }
this.#overlays[this.#active].container.classList.add("hidden"); this.#overlays[this.#active].dialog.close();
this.#overlays[this.#active].element.classList.add("hidden");
this.#active = null; this.#active = null;
window.removeEventListener("keydown", this.#keyDownBound);
this.#keyDownBound = null;
}
#keyDown(evt) {
if (this.#active && evt.keyCode === /* Esc = */ 27) {
this.#closeThroughCaller();
evt.preventDefault();
}
}
#closeThroughCaller() {
if (this.#overlays[this.#active].callerCloseMethod) {
this.#overlays[this.#active].callerCloseMethod();
}
if (this.#active) {
this.close(this.#active);
}
} }
} }

52
web/password_prompt.js
View File

@ -17,8 +17,8 @@ import { PasswordResponses } from "pdfjs-lib";
/** /**
* @typedef {Object} PasswordPromptOptions * @typedef {Object} PasswordPromptOptions
* @property {string} overlayName - Name of the overlay for the overlay manager. * @property {string} dialogName - Name/identifier for the dialog.
* @property {HTMLDivElement} container - Div container for the overlay. * @property {HTMLDialogElement} dialog - The overlay's DOM element.
* @property {HTMLParagraphElement} label - Label containing instructions for * @property {HTMLParagraphElement} label - Label containing instructions for
* entering the password. * entering the password.
* @property {HTMLInputElement} input - Input field for entering the password. * @property {HTMLInputElement} input - Input field for entering the password.
@ -29,6 +29,10 @@ import { PasswordResponses } from "pdfjs-lib";
*/ */
class PasswordPrompt { class PasswordPrompt {
#updateCallback = null;
#reason = null;
/** /**
* @param {PasswordPromptOptions} options * @param {PasswordPromptOptions} options
* @param {OverlayManager} overlayManager - Manager for the viewer overlays. * @param {OverlayManager} overlayManager - Manager for the viewer overlays.
@ -37,8 +41,8 @@ class PasswordPrompt {
* an <iframe> or an <object>. The default value is `false`. * an <iframe> or an <object>. The default value is `false`.
*/ */
constructor(options, overlayManager, l10n, isViewerEmbedded = false) { constructor(options, overlayManager, l10n, isViewerEmbedded = false) {
this.overlayName = options.overlayName; this.dialogName = options.dialogName;
this.container = options.container; this.dialog = options.dialog;
this.label = options.label; this.label = options.label;
this.input = options.input; this.input = options.input;
this.submitButton = options.submitButton; this.submitButton = options.submitButton;
@ -47,9 +51,6 @@ class PasswordPrompt {
this.l10n = l10n; this.l10n = l10n;
this._isViewerEmbedded = isViewerEmbedded; this._isViewerEmbedded = isViewerEmbedded;
this.updateCallback = null;
this.reason = null;
// Attach the event listeners. // Attach the event listeners.
this.submitButton.addEventListener("click", this.#verify.bind(this)); this.submitButton.addEventListener("click", this.#verify.bind(this));
this.cancelButton.addEventListener("click", this.#cancel.bind(this)); this.cancelButton.addEventListener("click", this.#cancel.bind(this));
@ -60,18 +61,19 @@ class PasswordPrompt {
}); });
this.overlayManager.register( this.overlayManager.register(
this.overlayName, this.dialogName,
this.container, this.dialog,
this.#cancel.bind(this), /* canForceClose = */ true
true
); );
this.dialog.addEventListener("close", this.#cancel.bind(this));
} }
async open() { async open() {
await this.overlayManager.open(this.overlayName); await this.overlayManager.open(this.dialogName);
const passwordIncorrect = const passwordIncorrect =
this.reason === PasswordResponses.INCORRECT_PASSWORD; this.#reason === PasswordResponses.INCORRECT_PASSWORD;
if (!this._isViewerEmbedded || passwordIncorrect) { if (!this._isViewerEmbedded || passwordIncorrect) {
this.input.focus(); this.input.focus();
@ -82,26 +84,36 @@ class PasswordPrompt {
} }
async close() { async close() {
await this.overlayManager.close(this.overlayName); if (this.overlayManager.active === this.dialogName) {
this.input.value = ""; this.overlayManager.close(this.dialogName);
}
} }
#verify() { #verify() {
const password = this.input.value; const password = this.input.value;
if (password?.length > 0) { if (password?.length > 0) {
this.close(); this.#invokeCallback(password);
this.updateCallback(password);
} }
} }
#cancel() { #cancel() {
this.#invokeCallback(new Error("PasswordPrompt cancelled."));
}
#invokeCallback(password) {
if (!this.#updateCallback) {
return; // Ensure that the callback is only invoked once.
}
this.close(); this.close();
this.updateCallback(new Error("PasswordPrompt cancelled.")); this.input.value = "";
this.#updateCallback(password);
this.#updateCallback = null;
} }
setUpdateCallback(updateCallback, reason) { setUpdateCallback(updateCallback, reason) {
this.updateCallback = updateCallback; this.#updateCallback = updateCallback;
this.reason = reason; this.#reason = reason;
} }
} }

24
web/pdf_document_properties.js
View File

@ -45,9 +45,9 @@ function getPageName(size, isPortrait, pageNames) {
/** /**
* @typedef {Object} PDFDocumentPropertiesOptions * @typedef {Object} PDFDocumentPropertiesOptions
* @property {string} overlayName - Name/identifier for the overlay. * @property {string} dialogName - Name/identifier for the dialog.
* @property {HTMLDialogElement} dialog - The overlay's DOM element.
* @property {Object} fields - Names and elements of the overlay's fields. * @property {Object} fields - Names and elements of the overlay's fields.
* @property {HTMLDivElement} container - Div container for the overlay.
* @property {HTMLButtonElement} closeButton - Button for closing the overlay. * @property {HTMLButtonElement} closeButton - Button for closing the overlay.
*/ */
@ -61,14 +61,14 @@ class PDFDocumentProperties {
* @param {IL10n} l10n - Localization service. * @param {IL10n} l10n - Localization service.
*/ */
constructor( constructor(
{ overlayName, fields, container, closeButton }, { dialogName, dialog, fields, closeButton },
overlayManager, overlayManager,
eventBus, eventBus,
l10n l10n
) { ) {
this.overlayName = overlayName; this.dialogName = dialogName;
this.dialog = dialog;
this.fields = fields; this.fields = fields;
this.container = container;
this.overlayManager = overlayManager; this.overlayManager = overlayManager;
this.l10n = l10n; this.l10n = l10n;
@ -76,11 +76,7 @@ class PDFDocumentProperties {
// Bind the event listener for the Close button. // Bind the event listener for the Close button.
closeButton.addEventListener("click", this.close.bind(this)); closeButton.addEventListener("click", this.close.bind(this));
this.overlayManager.register( this.overlayManager.register(this.dialogName, this.dialog);
this.overlayName,
this.container,
this.close.bind(this)
);
eventBus._on("pagechanging", evt => { eventBus._on("pagechanging", evt => {
this._currentPageNumber = evt.pageNumber; this._currentPageNumber = evt.pageNumber;
@ -100,7 +96,7 @@ class PDFDocumentProperties {
*/ */
async open() { async open() {
await Promise.all([ await Promise.all([
this.overlayManager.open(this.overlayName), this.overlayManager.open(this.dialogName),
this._dataAvailableCapability.promise, this._dataAvailableCapability.promise,
]); ]);
const currentPageNumber = this._currentPageNumber; const currentPageNumber = this._currentPageNumber;
@ -179,8 +175,8 @@ class PDFDocumentProperties {
/** /**
* Close the document properties overlay. * Close the document properties overlay.
*/ */
close() { async close() {
this.overlayManager.close(this.overlayName); this.overlayManager.close(this.dialogName);
} }
/** /**
@ -228,7 +224,7 @@ class PDFDocumentProperties {
} }
return; return;
} }
if (this.overlayManager.active !== this.overlayName) { if (this.overlayManager.active !== this.dialogName) {
// Don't bother updating the dialog if has already been closed, // Don't bother updating the dialog if has already been closed,
// since it will be updated the next time `this.open` is called. // since it will be updated the next time `this.open` is called.
return; return;

30
web/pdf_print_service.js
View File

@ -115,8 +115,7 @@ PDFPrintService.prototype = {
destroy() { destroy() {
if (activeService !== this) { if (activeService !== this) {
// |activeService| cannot be replaced without calling destroy() first, // |activeService| cannot be replaced without calling destroy() first,
// so if it differs then an external consumer has a stale reference to // so if it differs then an external consumer has a stale reference to us.
// us.
return; return;
} }
this.printContainer.textContent = ""; this.printContainer.textContent = "";
@ -132,10 +131,9 @@ PDFPrintService.prototype = {
this.scratchCanvas = null; this.scratchCanvas = null;
activeService = null; activeService = null;
ensureOverlay().then(function () { ensureOverlay().then(function () {
if (overlayManager.active !== "printServiceOverlay") { if (overlayManager.active === "printServiceDialog") {
return; // overlay was already closed overlayManager.close("printServiceDialog");
} }
overlayManager.close("printServiceOverlay");
}); });
}, },
@ -231,7 +229,7 @@ window.print = function () {
} }
ensureOverlay().then(function () { ensureOverlay().then(function () {
if (activeService) { if (activeService) {
overlayManager.open("printServiceOverlay"); overlayManager.open("printServiceDialog");
} }
}); });
@ -241,8 +239,8 @@ window.print = function () {
if (!activeService) { if (!activeService) {
console.error("Expected print service to be initialized."); console.error("Expected print service to be initialized.");
ensureOverlay().then(function () { ensureOverlay().then(function () {
if (overlayManager.active === "printServiceOverlay") { if (overlayManager.active === "printServiceDialog") {
overlayManager.close("printServiceOverlay"); overlayManager.close("printServiceDialog");
} }
}); });
return; // eslint-disable-line no-unsafe-finally return; // eslint-disable-line no-unsafe-finally
@ -283,10 +281,10 @@ function abort() {
} }
function renderProgress(index, total, l10n) { function renderProgress(index, total, l10n) {
const progressContainer = document.getElementById("printServiceOverlay"); const progressDialog = document.getElementById("printServiceDialog");
const progress = Math.round((100 * index) / total); const progress = Math.round((100 * index) / total);
const progressBar = progressContainer.querySelector("progress"); const progressBar = progressDialog.querySelector("progress");
const progressPerc = progressContainer.querySelector(".relative-progress"); const progressPerc = progressDialog.querySelector(".relative-progress");
progressBar.value = progress; progressBar.value = progress;
l10n.get("print_progress_percent", { progress }).then(msg => { l10n.get("print_progress_percent", { progress }).then(msg => {
progressPerc.textContent = msg; progressPerc.textContent = msg;
@ -338,14 +336,16 @@ function ensureOverlay() {
if (!overlayManager) { if (!overlayManager) {
throw new Error("The overlay manager has not yet been initialized."); throw new Error("The overlay manager has not yet been initialized.");
} }
const dialog = document.getElementById("printServiceDialog");
overlayPromise = overlayManager.register( overlayPromise = overlayManager.register(
"printServiceOverlay", "printServiceDialog",
document.getElementById("printServiceOverlay"), dialog,
abort, /* canForceClose = */ true
true
); );
document.getElementById("printCancel").onclick = abort; document.getElementById("printCancel").onclick = abort;
dialog.addEventListener("close", abort);
} }
return overlayPromise; return overlayPromise;
} }

60
web/viewer-snippet-chrome-overlays.html
View File

@ -1,32 +1,30 @@
<div id="chromeFileAccessOverlay" class="container hidden"> <dialog id="chromeFileAccessDialog">
<div class="dialog"> <div class="row">
<div class="row"> <!-- The extension icon (PDF.js logo) will be shown at the left, to help
<!-- The extension icon (PDF.js logo) will be shown at the left, to help users with recognizing which checkbox they have to click when they
users with recognizing which checkbox they have to click when they visit chrome://extensions.
visit chrome://extensions. -->
--> <p id="chrome-pdfjs-logo-bg" style="
<p id="chrome-pdfjs-logo-bg" style=" display: block;
display: block; padding-left: 60px;
padding-left: 60px; min-height: 48px;
min-height: 48px; background-size: 48px;
background-size: 48px; background-repeat: no-repeat;
background-repeat: no-repeat; font-size: 14px;
font-size: 14px; line-height: 1.8em;
line-height: 1.8em; word-break: break-all;">
word-break: break-all;"> Click on
Click on "<span id="chrome-file-access-label">Allow access to file URLs</span>"
"<span id="chrome-file-access-label">Allow access to file URLs</span>" at
at <a id="chrome-link-to-extensions-page">chrome://extensions</a>
<a id="chrome-link-to-extensions-page">chrome://extensions</a> <br>
<br> to view <span id="chrome-url-of-local-file">this PDF file.</span>
to view <span id="chrome-url-of-local-file">this PDF file.</span> </p>
</p>
</div>
<div class="row">
<p>
or select the file again:
<input type="file" id="chrome-file-fallback" accept=".pdf">
</p>
</div>
</div> </div>
</div> <div class="row">
<p>
or select the file again:
<input type="file" id="chrome-file-fallback" accept=".pdf">
</p>
</div>
</dialog>

89
web/viewer.css
View File

@ -62,9 +62,9 @@
--doorhanger-hover-color: rgba(12, 12, 13, 1); --doorhanger-hover-color: rgba(12, 12, 13, 1);
--doorhanger-hover-bg-color: rgba(237, 237, 237, 1); --doorhanger-hover-bg-color: rgba(237, 237, 237, 1);
--doorhanger-separator-color: rgba(222, 222, 222, 1); --doorhanger-separator-color: rgba(222, 222, 222, 1);
--overlay-button-border: 0 none; --dialog-button-border: 0 none;
--overlay-button-bg-color: rgba(12, 12, 13, 0.1); --dialog-button-bg-color: rgba(12, 12, 13, 0.1);
--overlay-button-hover-bg-color: rgba(12, 12, 13, 0.3); --dialog-button-hover-bg-color: rgba(12, 12, 13, 0.3);
--loading-icon: url(images/loading.svg); --loading-icon: url(images/loading.svg);
--treeitem-expanded-icon: url(images/treeitem-expanded.svg); --treeitem-expanded-icon: url(images/treeitem-expanded.svg);
@ -146,8 +146,8 @@
--doorhanger-hover-color: rgba(249, 249, 250, 1); --doorhanger-hover-color: rgba(249, 249, 250, 1);
--doorhanger-hover-bg-color: rgba(93, 94, 98, 1); --doorhanger-hover-bg-color: rgba(93, 94, 98, 1);
--doorhanger-separator-color: rgba(92, 92, 97, 1); --doorhanger-separator-color: rgba(92, 92, 97, 1);
--overlay-button-bg-color: rgba(92, 92, 97, 1); --dialog-button-bg-color: rgba(92, 92, 97, 1);
--overlay-button-hover-bg-color: rgba(115, 115, 115, 1); --dialog-button-hover-bg-color: rgba(115, 115, 115, 1);
/* This image is used in <input> elements, which unfortunately means that /* This image is used in <input> elements, which unfortunately means that
* the `mask-image` approach used with all of the other images doesn't work * the `mask-image` approach used with all of the other images doesn't work
@ -168,9 +168,9 @@
--doorhanger-hover-color: ButtonFace; --doorhanger-hover-color: ButtonFace;
--doorhanger-border-color-whcm: 1px solid ButtonText; --doorhanger-border-color-whcm: 1px solid ButtonText;
--doorhanger-triangle-opacity-whcm: 0; --doorhanger-triangle-opacity-whcm: 0;
--overlay-button-border: 1px solid Highlight; --dialog-button-border: 1px solid Highlight;
--overlay-button-hover-bg-color: Highlight; --dialog-button-hover-bg-color: Highlight;
--overlay-button-hover-color: ButtonFace; --dialog-button-hover-color: ButtonFace;
--field-border-color: ButtonText; --field-border-color: ButtonText;
} }
} }
@ -628,21 +628,21 @@ select {
.toolbarButton, .toolbarButton,
.secondaryToolbarButton, .secondaryToolbarButton,
.overlayButton { .dialogButton {
border: 0 none; border: 0 none;
background: none; background: none;
width: 28px; width: 28px;
height: 28px; height: 28px;
} }
.overlayButton:hover, .dialogButton:hover,
.overlayButton:focus-visible { .dialogButton:focus-visible {
background-color: var(--overlay-button-hover-bg-color); background-color: var(--dialog-button-hover-bg-color);
} }
.overlayButton:hover > span, .dialogButton:hover > span,
.overlayButton:focus-visible > span { .dialogButton:focus-visible > span {
color: var(--overlay-button-hover-color); color: var(--dialog-button-hover-color);
} }
.toolbarButton > span { .toolbarButton > span {
@ -654,7 +654,7 @@ select {
.toolbarButton[disabled], .toolbarButton[disabled],
.secondaryToolbarButton[disabled], .secondaryToolbarButton[disabled],
.overlayButton[disabled] { .dialogButton[disabled] {
opacity: 0.5; opacity: 0.5;
} }
@ -697,7 +697,7 @@ select {
.toolbarButton, .toolbarButton,
.dropdownToolbarButton, .dropdownToolbarButton,
.secondaryToolbarButton, .secondaryToolbarButton,
.overlayButton { .dialogButton {
min-width: 16px; min-width: 16px;
margin: 2px 1px; margin: 2px 1px;
padding: 2px 6px 0; padding: 2px 6px 0;
@ -1278,32 +1278,17 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
width: 98%; width: 98%;
} }
.overlayButton { .dialogButton {
width: auto; width: auto;
margin: 3px 4px 2px !important; margin: 3px 4px 2px !important;
padding: 2px 11px; padding: 2px 11px;
color: var(--main-color); color: var(--main-color);
background-color: var(--overlay-button-bg-color); background-color: var(--dialog-button-bg-color);
border: var(--overlay-button-border) !important; border: var(--dialog-button-border) !important;
} }
#overlayContainer { dialog {
display: table; margin: auto;
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
z-index: 40000;
}
#overlayContainer > .container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
#overlayContainer > .container > .dialog {
display: inline-block;
padding: 15px; padding: 15px;
border-spacing: 4px; border-spacing: 4px;
color: var(--main-color); color: var(--main-color);
@ -1314,20 +1299,24 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
border-radius: 4px; border-radius: 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
} }
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.2);
user-select: none;
}
.dialog > .row { dialog > .row {
display: table-row; display: table-row;
} }
.dialog > .row > * { dialog > .row > * {
display: table-cell; display: table-cell;
} }
.dialog .toolbarField { dialog .toolbarField {
margin: 5px 0; margin: 5px 0;
} }
.dialog .separator { dialog .separator {
display: block; display: block;
margin: 4px 0; margin: 4px 0;
height: 1px; height: 1px;
@ -1335,38 +1324,38 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
background-color: var(--separator-color); background-color: var(--separator-color);
} }
.dialog .buttonRow { dialog .buttonRow {
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
} }
.dialog :link { dialog :link {
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
} }
#passwordOverlay > .dialog { #passwordDialog {
text-align: center; text-align: center;
} }
#passwordOverlay .toolbarField { #passwordDialog .toolbarField {
width: 200px; width: 200px;
} }
#documentPropertiesOverlay > .dialog { #documentPropertiesDialog {
text-align: left; text-align: left;
} }
#documentPropertiesOverlay .row > * { #documentPropertiesDialog .row > * {
min-width: 100px; min-width: 100px;
text-align: start; text-align: start;
} }
#documentPropertiesOverlay .row > span { #documentPropertiesDialog .row > span {
width: 125px; width: 125px;
word-wrap: break-word; word-wrap: break-word;
} }
#documentPropertiesOverlay .row > p { #documentPropertiesDialog .row > p {
max-width: 225px; max-width: 225px;
word-wrap: break-word; word-wrap: break-word;
} }
#documentPropertiesOverlay .buttonRow { #documentPropertiesDialog .buttonRow {
margin-top: 10px; margin-top: 10px;
} }

152
web/viewer.html
View File

@ -352,93 +352,87 @@ See https://github.com/adobe-type-tools/cmap-resources
<!--#endif--> <!--#endif-->
</div> <!-- mainContainer --> </div> <!-- mainContainer -->
<div id="overlayContainer" class="hidden"> <div id="dialogContainer">
<div id="passwordOverlay" class="container hidden"> <dialog id="passwordDialog">
<div class="dialog"> <div class="row">
<div class="row"> <p id="passwordText" data-l10n-id="password_label">Enter the password to open this PDF file:</p>
<p id="passwordText" data-l10n-id="password_label">Enter the password to open this PDF file:</p>
</div>
<div class="row">
<input type="password" id="password" class="toolbarField">
</div>
<div class="buttonRow">
<button id="passwordCancel" class="overlayButton"><span data-l10n-id="password_cancel">Cancel</span></button>
<button id="passwordSubmit" class="overlayButton"><span data-l10n-id="password_ok">OK</span></button>
</div>
</div> </div>
</div> <div class="row">
<div id="documentPropertiesOverlay" class="container hidden"> <input type="password" id="password" class="toolbarField">
<div class="dialog">
<div class="row">
<span data-l10n-id="document_properties_file_name">File name:</span> <p id="fileNameField">-</p>
</div>
<div class="row">
<span data-l10n-id="document_properties_file_size">File size:</span> <p id="fileSizeField">-</p>
</div>
<div class="separator"></div>
<div class="row">
<span data-l10n-id="document_properties_title">Title:</span> <p id="titleField">-</p>
</div>
<div class="row">
<span data-l10n-id="document_properties_author">Author:</span> <p id="authorField">-</p>
</div>
<div class="row">
<span data-l10n-id="document_properties_subject">Subject:</span> <p id="subjectField">-</p>
</div>
<div class="row">
<span data-l10n-id="document_properties_keywords">Keywords:</span> <p id="keywordsField">-</p>
</div>
<div class="row">
<span data-l10n-id="document_properties_creation_date">Creation Date:</span> <p id="creationDateField">-</p>
</div>
<div class="row">
<span data-l10n-id="document_properties_modification_date">Modification Date:</span> <p id="modificationDateField">-</p>
</div>
<div class="row">
<span data-l10n-id="document_properties_creator">Creator:</span> <p id="creatorField">-</p>
</div>
<div class="separator"></div>
<div class="row">
<span data-l10n-id="document_properties_producer">PDF Producer:</span> <p id="producerField">-</p>
</div>
<div class="row">
<span data-l10n-id="document_properties_version">PDF Version:</span> <p id="versionField">-</p>
</div>
<div class="row">
<span data-l10n-id="document_properties_page_count">Page Count:</span> <p id="pageCountField">-</p>
</div>
<div class="row">
<span data-l10n-id="document_properties_page_size">Page Size:</span> <p id="pageSizeField">-</p>
</div>
<div class="separator"></div>
<div class="row">
<span data-l10n-id="document_properties_linearized">Fast Web View:</span> <p id="linearizedField">-</p>
</div>
<div class="buttonRow">
<button id="documentPropertiesClose" class="overlayButton"><span data-l10n-id="document_properties_close">Close</span></button>
</div>
</div> </div>
</div> <div class="buttonRow">
<button id="passwordCancel" class="dialogButton"><span data-l10n-id="password_cancel">Cancel</span></button>
<button id="passwordSubmit" class="dialogButton"><span data-l10n-id="password_ok">OK</span></button>
</div>
</dialog>
<dialog id="documentPropertiesDialog">
<div class="row">
<span data-l10n-id="document_properties_file_name">File name:</span> <p id="fileNameField">-</p>
</div>
<div class="row">
<span data-l10n-id="document_properties_file_size">File size:</span> <p id="fileSizeField">-</p>
</div>
<div class="separator"></div>
<div class="row">
<span data-l10n-id="document_properties_title">Title:</span> <p id="titleField">-</p>
</div>
<div class="row">
<span data-l10n-id="document_properties_author">Author:</span> <p id="authorField">-</p>
</div>
<div class="row">
<span data-l10n-id="document_properties_subject">Subject:</span> <p id="subjectField">-</p>
</div>
<div class="row">
<span data-l10n-id="document_properties_keywords">Keywords:</span> <p id="keywordsField">-</p>
</div>
<div class="row">
<span data-l10n-id="document_properties_creation_date">Creation Date:</span> <p id="creationDateField">-</p>
</div>
<div class="row">
<span data-l10n-id="document_properties_modification_date">Modification Date:</span> <p id="modificationDateField">-</p>
</div>
<div class="row">
<span data-l10n-id="document_properties_creator">Creator:</span> <p id="creatorField">-</p>
</div>
<div class="separator"></div>
<div class="row">
<span data-l10n-id="document_properties_producer">PDF Producer:</span> <p id="producerField">-</p>
</div>
<div class="row">
<span data-l10n-id="document_properties_version">PDF Version:</span> <p id="versionField">-</p>
</div>
<div class="row">
<span data-l10n-id="document_properties_page_count">Page Count:</span> <p id="pageCountField">-</p>
</div>
<div class="row">
<span data-l10n-id="document_properties_page_size">Page Size:</span> <p id="pageSizeField">-</p>
</div>
<div class="separator"></div>
<div class="row">
<span data-l10n-id="document_properties_linearized">Fast Web View:</span> <p id="linearizedField">-</p>
</div>
<div class="buttonRow">
<button id="documentPropertiesClose" class="dialogButton"><span data-l10n-id="document_properties_close">Close</span></button>
</div>
</dialog>
<!--#if !MOZCENTRAL--> <!--#if !MOZCENTRAL-->
<div id="printServiceOverlay" class="container hidden"> <dialog id="printServiceDialog">
<div class="dialog"> <div class="row">
<div class="row"> <span data-l10n-id="print_progress_message">Preparing document for printing…</span>
<span data-l10n-id="print_progress_message">Preparing document for printing…</span>
</div>
<div class="row">
<progress value="0" max="100"></progress>
<span data-l10n-id="print_progress_percent" data-l10n-args='{ "progress": 0 }' class="relative-progress">0%</span>
</div>
<div class="buttonRow">
<button id="printCancel" class="overlayButton"><span data-l10n-id="print_progress_close">Cancel</span></button>
</div>
</div> </div>
</div> <div class="row">
<progress value="0" max="100"></progress>
<span data-l10n-id="print_progress_percent" data-l10n-args='{ "progress": 0 }' class="relative-progress">0%</span>
</div>
<div class="buttonRow">
<button id="printCancel" class="dialogButton"><span data-l10n-id="print_progress_close">Cancel</span></button>
</div>
</dialog>
<!--#endif--> <!--#endif-->
<!--#if CHROME--> <!--#if CHROME-->
<!--#include viewer-snippet-chrome-overlays.html--> <!--#include viewer-snippet-chrome-overlays.html-->
<!--#endif--> <!--#endif-->
</div> <!-- overlayContainer --> </div> <!-- dialogContainer -->
</div> <!-- outerContainer --> </div> <!-- outerContainer -->
<div id="printContainer"></div> <div id="printContainer"></div>

8
web/viewer.js
View File

@ -161,16 +161,16 @@ function getViewerConfiguration() {
findNextButton: document.getElementById("findNext"), findNextButton: document.getElementById("findNext"),
}, },
passwordOverlay: { passwordOverlay: {
overlayName: "passwordOverlay", dialogName: "passwordDialog",
container: document.getElementById("passwordOverlay"), dialog: document.getElementById("passwordDialog"),
label: document.getElementById("passwordText"), label: document.getElementById("passwordText"),
input: document.getElementById("password"), input: document.getElementById("password"),
submitButton: document.getElementById("passwordSubmit"), submitButton: document.getElementById("passwordSubmit"),
cancelButton: document.getElementById("passwordCancel"), cancelButton: document.getElementById("passwordCancel"),
}, },
documentProperties: { documentProperties: {
overlayName: "documentPropertiesOverlay", dialogName: "documentPropertiesDialog",
container: document.getElementById("documentPropertiesOverlay"), dialog: document.getElementById("documentPropertiesDialog"),
closeButton: document.getElementById("documentPropertiesClose"), closeButton: document.getElementById("documentPropertiesClose"),
fields: { fields: {
fileName: document.getElementById("fileNameField"), fileName: document.getElementById("fileNameField"),