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

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

View file

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