From f0aa08b46454494f4a0936d2291214d2db206758 Mon Sep 17 00:00:00 2001
From: Jonas Jenwald <jonas.jenwald@gmail.com>
Date: Fri, 25 Mar 2022 14:10:13 +0100
Subject: [PATCH] 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).
---
 web/chromecom.js                        |  16 ++-
 web/overlay_manager.js                  |  62 ++--------
 web/password_prompt.js                  |  52 ++++----
 web/pdf_document_properties.js          |  24 ++--
 web/pdf_print_service.js                |  30 ++---
 web/viewer-snippet-chrome-overlays.html |  60 +++++-----
 web/viewer.css                          |  89 ++++++--------
 web/viewer.html                         | 152 ++++++++++++------------
 web/viewer.js                           |   8 +-
 9 files changed, 221 insertions(+), 272 deletions(-)

diff --git a/web/chromecom.js b/web/chromecom.js
index 823251221..61c2cb636 100644
--- a/web/chromecom.js
+++ b/web/chromecom.js
@@ -147,7 +147,7 @@ function reloadIfRuntimeIsUnavailable() {
 
 let chromeFileAccessOverlayPromise;
 function requestAccessToLocalFile(fileUrl, overlayManager, callback) {
-  let onCloseOverlay = null;
+  const dialog = document.getElementById("chromeFileAccessDialog");
   if (top !== window) {
     // When the extension reloads after receiving new permissions, the pages
     // 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
     // (crbug.com/511670), then the user can just reload the tab.
     window.addEventListener("focus", reloadIfRuntimeIsUnavailable);
-    onCloseOverlay = function () {
+    dialog.addEventListener("close", function () {
       window.removeEventListener("focus", reloadIfRuntimeIsUnavailable);
       reloadIfRuntimeIsUnavailable();
-      overlayManager.close("chromeFileAccessOverlay");
-    };
+    });
   }
   if (!chromeFileAccessOverlayPromise) {
     chromeFileAccessOverlayPromise = overlayManager.register(
-      "chromeFileAccessOverlay",
-      document.getElementById("chromeFileAccessOverlay"),
-      onCloseOverlay,
-      true
+      "chromeFileAccessDialog",
+      dialog,
+      /* canForceClose = */ true
     );
   }
   chromeFileAccessOverlayPromise.then(function () {
@@ -233,7 +231,7 @@ function requestAccessToLocalFile(fileUrl, overlayManager, callback) {
       }
     };
 
-    overlayManager.open("chromeFileAccessOverlay");
+    overlayManager.open("chromeFileAccessDialog");
   });
 }
 
diff --git a/web/overlay_manager.js b/web/overlay_manager.js
index b77f4a61a..d7d8ee2c8 100644
--- a/web/overlay_manager.js
+++ b/web/overlay_manager.js
@@ -18,43 +18,29 @@ class OverlayManager {
 
   #active = null;
 
-  #keyDownBound = null;
-
   get active() {
     return this.#active;
   }
 
   /**
    * @param {string} name - The name of the overlay that is registered.
-   * @param {HTMLDivElement} element - 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 {HTMLDialogElement} dialog - The overlay's DOM element.
    * @param {boolean} [canForceClose] - Indicates if opening the overlay closes
    *                  an active overlay. The default is `false`.
    * @returns {Promise} A promise that is resolved when the overlay has been
    *                    registered.
    */
-  async register(
-    name,
-    element,
-    callerCloseMethod = null,
-    canForceClose = false
-  ) {
-    let container;
-    if (!name || !element || !(container = element.parentNode)) {
+  async register(name, dialog, canForceClose = false) {
+    if (!name || !dialog) {
       throw new Error("Not enough parameters.");
     } else if (this.#overlays[name]) {
       throw new Error("The overlay is already registered.");
     }
-    this.#overlays[name] = {
-      element,
-      container,
-      callerCloseMethod,
-      canForceClose,
-    };
+    this.#overlays[name] = { dialog, canForceClose };
+
+    dialog.addEventListener("cancel", evt => {
+      this.#active = null;
+    });
   }
 
   /**
@@ -83,17 +69,13 @@ class OverlayManager {
       if (this.#active === name) {
         throw new Error("The overlay is already active.");
       } else if (this.#overlays[name].canForceClose) {
-        this.#closeThroughCaller();
+        await this.close();
       } else {
         throw new Error("Another overlay is currently active.");
       }
     }
     this.#active = name;
-    this.#overlays[this.#active].element.classList.remove("hidden");
-    this.#overlays[this.#active].container.classList.remove("hidden");
-
-    this.#keyDownBound = this.#keyDown.bind(this);
-    window.addEventListener("keydown", this.#keyDownBound);
+    this.#overlays[this.#active].dialog.showModal();
   }
 
   /**
@@ -101,7 +83,7 @@ class OverlayManager {
    * @returns {Promise} A promise that is resolved when the overlay has been
    *                    closed.
    */
-  async close(name) {
+  async close(name = this.#active) {
     if (!this.#overlays[name]) {
       throw new Error("The overlay does not exist.");
     } else if (!this.#active) {
@@ -109,28 +91,8 @@ class OverlayManager {
     } else if (this.#active !== name) {
       throw new Error("Another overlay is currently active.");
     }
-    this.#overlays[this.#active].container.classList.add("hidden");
-    this.#overlays[this.#active].element.classList.add("hidden");
+    this.#overlays[this.#active].dialog.close();
     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);
-    }
   }
 }
 
diff --git a/web/password_prompt.js b/web/password_prompt.js
index 6631783c7..1a8728553 100644
--- a/web/password_prompt.js
+++ b/web/password_prompt.js
@@ -17,8 +17,8 @@ import { PasswordResponses } from "pdfjs-lib";
 
 /**
  * @typedef {Object} PasswordPromptOptions
- * @property {string} overlayName - Name of the overlay for the overlay manager.
- * @property {HTMLDivElement} container - Div container for the overlay.
+ * @property {string} dialogName - Name/identifier for the dialog.
+ * @property {HTMLDialogElement} dialog - The overlay's DOM element.
  * @property {HTMLParagraphElement} label - Label containing instructions for
  *                                          entering the password.
  * @property {HTMLInputElement} input - Input field for entering the password.
@@ -29,6 +29,10 @@ import { PasswordResponses } from "pdfjs-lib";
  */
 
 class PasswordPrompt {
+  #updateCallback = null;
+
+  #reason = null;
+
   /**
    * @param {PasswordPromptOptions} options
    * @param {OverlayManager} overlayManager - Manager for the viewer overlays.
@@ -37,8 +41,8 @@ class PasswordPrompt {
    *   an <iframe> or an <object>. The default value is `false`.
    */
   constructor(options, overlayManager, l10n, isViewerEmbedded = false) {
-    this.overlayName = options.overlayName;
-    this.container = options.container;
+    this.dialogName = options.dialogName;
+    this.dialog = options.dialog;
     this.label = options.label;
     this.input = options.input;
     this.submitButton = options.submitButton;
@@ -47,9 +51,6 @@ class PasswordPrompt {
     this.l10n = l10n;
     this._isViewerEmbedded = isViewerEmbedded;
 
-    this.updateCallback = null;
-    this.reason = null;
-
     // Attach the event listeners.
     this.submitButton.addEventListener("click", this.#verify.bind(this));
     this.cancelButton.addEventListener("click", this.#cancel.bind(this));
@@ -60,18 +61,19 @@ class PasswordPrompt {
     });
 
     this.overlayManager.register(
-      this.overlayName,
-      this.container,
-      this.#cancel.bind(this),
-      true
+      this.dialogName,
+      this.dialog,
+      /* canForceClose = */ true
     );
+
+    this.dialog.addEventListener("close", this.#cancel.bind(this));
   }
 
   async open() {
-    await this.overlayManager.open(this.overlayName);
+    await this.overlayManager.open(this.dialogName);
 
     const passwordIncorrect =
-      this.reason === PasswordResponses.INCORRECT_PASSWORD;
+      this.#reason === PasswordResponses.INCORRECT_PASSWORD;
 
     if (!this._isViewerEmbedded || passwordIncorrect) {
       this.input.focus();
@@ -82,26 +84,36 @@ class PasswordPrompt {
   }
 
   async close() {
-    await this.overlayManager.close(this.overlayName);
-    this.input.value = "";
+    if (this.overlayManager.active === this.dialogName) {
+      this.overlayManager.close(this.dialogName);
+    }
   }
 
   #verify() {
     const password = this.input.value;
     if (password?.length > 0) {
-      this.close();
-      this.updateCallback(password);
+      this.#invokeCallback(password);
     }
   }
 
   #cancel() {
+    this.#invokeCallback(new Error("PasswordPrompt cancelled."));
+  }
+
+  #invokeCallback(password) {
+    if (!this.#updateCallback) {
+      return; // Ensure that the callback is only invoked once.
+    }
     this.close();
-    this.updateCallback(new Error("PasswordPrompt cancelled."));
+    this.input.value = "";
+
+    this.#updateCallback(password);
+    this.#updateCallback = null;
   }
 
   setUpdateCallback(updateCallback, reason) {
-    this.updateCallback = updateCallback;
-    this.reason = reason;
+    this.#updateCallback = updateCallback;
+    this.#reason = reason;
   }
 }
 
diff --git a/web/pdf_document_properties.js b/web/pdf_document_properties.js
index 3e7b5227e..1b4f6804e 100644
--- a/web/pdf_document_properties.js
+++ b/web/pdf_document_properties.js
@@ -45,9 +45,9 @@ function getPageName(size, isPortrait, pageNames) {
 
 /**
  * @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 {HTMLDivElement} container - Div container for the overlay.
  * @property {HTMLButtonElement} closeButton - Button for closing the overlay.
  */
 
@@ -61,14 +61,14 @@ class PDFDocumentProperties {
    * @param {IL10n} l10n - Localization service.
    */
   constructor(
-    { overlayName, fields, container, closeButton },
+    { dialogName, dialog, fields, closeButton },
     overlayManager,
     eventBus,
     l10n
   ) {
-    this.overlayName = overlayName;
+    this.dialogName = dialogName;
+    this.dialog = dialog;
     this.fields = fields;
-    this.container = container;
     this.overlayManager = overlayManager;
     this.l10n = l10n;
 
@@ -76,11 +76,7 @@ class PDFDocumentProperties {
     // Bind the event listener for the Close button.
     closeButton.addEventListener("click", this.close.bind(this));
 
-    this.overlayManager.register(
-      this.overlayName,
-      this.container,
-      this.close.bind(this)
-    );
+    this.overlayManager.register(this.dialogName, this.dialog);
 
     eventBus._on("pagechanging", evt => {
       this._currentPageNumber = evt.pageNumber;
@@ -100,7 +96,7 @@ class PDFDocumentProperties {
    */
   async open() {
     await Promise.all([
-      this.overlayManager.open(this.overlayName),
+      this.overlayManager.open(this.dialogName),
       this._dataAvailableCapability.promise,
     ]);
     const currentPageNumber = this._currentPageNumber;
@@ -179,8 +175,8 @@ class PDFDocumentProperties {
   /**
    * Close the document properties overlay.
    */
-  close() {
-    this.overlayManager.close(this.overlayName);
+  async close() {
+    this.overlayManager.close(this.dialogName);
   }
 
   /**
@@ -228,7 +224,7 @@ class PDFDocumentProperties {
       }
       return;
     }
-    if (this.overlayManager.active !== this.overlayName) {
+    if (this.overlayManager.active !== this.dialogName) {
       // Don't bother updating the dialog if has already been closed,
       // since it will be updated the next time `this.open` is called.
       return;
diff --git a/web/pdf_print_service.js b/web/pdf_print_service.js
index 08490960f..050608ea4 100644
--- a/web/pdf_print_service.js
+++ b/web/pdf_print_service.js
@@ -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;
 }
diff --git a/web/viewer-snippet-chrome-overlays.html b/web/viewer-snippet-chrome-overlays.html
index 7f8e03f55..1089963d1 100644
--- a/web/viewer-snippet-chrome-overlays.html
+++ b/web/viewer-snippet-chrome-overlays.html
@@ -1,32 +1,30 @@
-<div id="chromeFileAccessOverlay" class="container hidden">
-  <div class="dialog">
-    <div class="row">
-      <!-- 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
-           visit chrome://extensions.
-      -->
-      <p id="chrome-pdfjs-logo-bg" style="
-          display: block;
-          padding-left: 60px;
-          min-height: 48px;
-          background-size: 48px;
-          background-repeat: no-repeat;
-          font-size: 14px;
-          line-height: 1.8em;
-          word-break: break-all;">
-        Click on
-        "<span id="chrome-file-access-label">Allow access to file URLs</span>"
-        at
-        <a id="chrome-link-to-extensions-page">chrome://extensions</a>
-        <br>
-        to view <span id="chrome-url-of-local-file">this PDF file.</span>
-      </p>
-    </div>
-    <div class="row">
-      <p>
-        or select the file again:
-        <input type="file" id="chrome-file-fallback" accept=".pdf">
-      </p>
-    </div>
+<dialog id="chromeFileAccessDialog">
+  <div class="row">
+    <!-- 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
+         visit chrome://extensions.
+    -->
+    <p id="chrome-pdfjs-logo-bg" style="
+        display: block;
+        padding-left: 60px;
+        min-height: 48px;
+        background-size: 48px;
+        background-repeat: no-repeat;
+        font-size: 14px;
+        line-height: 1.8em;
+        word-break: break-all;">
+      Click on
+      "<span id="chrome-file-access-label">Allow access to file URLs</span>"
+      at
+      <a id="chrome-link-to-extensions-page">chrome://extensions</a>
+      <br>
+      to view <span id="chrome-url-of-local-file">this PDF file.</span>
+    </p>
   </div>
-</div>
+  <div class="row">
+    <p>
+      or select the file again:
+      <input type="file" id="chrome-file-fallback" accept=".pdf">
+    </p>
+  </div>
+</dialog>
diff --git a/web/viewer.css b/web/viewer.css
index 097aef97a..2e4bebc78 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -62,9 +62,9 @@
   --doorhanger-hover-color: rgba(12, 12, 13, 1);
   --doorhanger-hover-bg-color: rgba(237, 237, 237, 1);
   --doorhanger-separator-color: rgba(222, 222, 222, 1);
-  --overlay-button-border: 0 none;
-  --overlay-button-bg-color: rgba(12, 12, 13, 0.1);
-  --overlay-button-hover-bg-color: rgba(12, 12, 13, 0.3);
+  --dialog-button-border: 0 none;
+  --dialog-button-bg-color: rgba(12, 12, 13, 0.1);
+  --dialog-button-hover-bg-color: rgba(12, 12, 13, 0.3);
 
   --loading-icon: url(images/loading.svg);
   --treeitem-expanded-icon: url(images/treeitem-expanded.svg);
@@ -146,8 +146,8 @@
     --doorhanger-hover-color: rgba(249, 249, 250, 1);
     --doorhanger-hover-bg-color: rgba(93, 94, 98, 1);
     --doorhanger-separator-color: rgba(92, 92, 97, 1);
-    --overlay-button-bg-color: rgba(92, 92, 97, 1);
-    --overlay-button-hover-bg-color: rgba(115, 115, 115, 1);
+    --dialog-button-bg-color: rgba(92, 92, 97, 1);
+    --dialog-button-hover-bg-color: rgba(115, 115, 115, 1);
 
     /* 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
@@ -168,9 +168,9 @@
     --doorhanger-hover-color: ButtonFace;
     --doorhanger-border-color-whcm: 1px solid ButtonText;
     --doorhanger-triangle-opacity-whcm: 0;
-    --overlay-button-border: 1px solid Highlight;
-    --overlay-button-hover-bg-color: Highlight;
-    --overlay-button-hover-color: ButtonFace;
+    --dialog-button-border: 1px solid Highlight;
+    --dialog-button-hover-bg-color: Highlight;
+    --dialog-button-hover-color: ButtonFace;
     --field-border-color: ButtonText;
   }
 }
@@ -628,21 +628,21 @@ select {
 
 .toolbarButton,
 .secondaryToolbarButton,
-.overlayButton {
+.dialogButton {
   border: 0 none;
   background: none;
   width: 28px;
   height: 28px;
 }
 
-.overlayButton:hover,
-.overlayButton:focus-visible {
-  background-color: var(--overlay-button-hover-bg-color);
+.dialogButton:hover,
+.dialogButton:focus-visible {
+  background-color: var(--dialog-button-hover-bg-color);
 }
 
-.overlayButton:hover > span,
-.overlayButton:focus-visible > span {
-  color: var(--overlay-button-hover-color);
+.dialogButton:hover > span,
+.dialogButton:focus-visible > span {
+  color: var(--dialog-button-hover-color);
 }
 
 .toolbarButton > span {
@@ -654,7 +654,7 @@ select {
 
 .toolbarButton[disabled],
 .secondaryToolbarButton[disabled],
-.overlayButton[disabled] {
+.dialogButton[disabled] {
   opacity: 0.5;
 }
 
@@ -697,7 +697,7 @@ select {
 .toolbarButton,
 .dropdownToolbarButton,
 .secondaryToolbarButton,
-.overlayButton {
+.dialogButton {
   min-width: 16px;
   margin: 2px 1px;
   padding: 2px 6px 0;
@@ -1278,32 +1278,17 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
   width: 98%;
 }
 
-.overlayButton {
+.dialogButton {
   width: auto;
   margin: 3px 4px 2px !important;
   padding: 2px 11px;
   color: var(--main-color);
-  background-color: var(--overlay-button-bg-color);
-  border: var(--overlay-button-border) !important;
+  background-color: var(--dialog-button-bg-color);
+  border: var(--dialog-button-border) !important;
 }
 
-#overlayContainer {
-  display: table;
-  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;
+dialog {
+  margin: auto;
   padding: 15px;
   border-spacing: 4px;
   color: var(--main-color);
@@ -1314,20 +1299,24 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
   border-radius: 4px;
   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;
 }
 
-.dialog > .row > * {
+dialog > .row > * {
   display: table-cell;
 }
 
-.dialog .toolbarField {
+dialog .toolbarField {
   margin: 5px 0;
 }
 
-.dialog .separator {
+dialog .separator {
   display: block;
   margin: 4px 0;
   height: 1px;
@@ -1335,38 +1324,38 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
   background-color: var(--separator-color);
 }
 
-.dialog .buttonRow {
+dialog .buttonRow {
   text-align: center;
   vertical-align: middle;
 }
 
-.dialog :link {
+dialog :link {
   color: rgba(255, 255, 255, 1);
 }
 
-#passwordOverlay > .dialog {
+#passwordDialog {
   text-align: center;
 }
-#passwordOverlay .toolbarField {
+#passwordDialog .toolbarField {
   width: 200px;
 }
 
-#documentPropertiesOverlay > .dialog {
+#documentPropertiesDialog {
   text-align: left;
 }
-#documentPropertiesOverlay .row > * {
+#documentPropertiesDialog .row > * {
   min-width: 100px;
   text-align: start;
 }
-#documentPropertiesOverlay .row > span {
+#documentPropertiesDialog .row > span {
   width: 125px;
   word-wrap: break-word;
 }
-#documentPropertiesOverlay .row > p {
+#documentPropertiesDialog .row > p {
   max-width: 225px;
   word-wrap: break-word;
 }
-#documentPropertiesOverlay .buttonRow {
+#documentPropertiesDialog .buttonRow {
   margin-top: 10px;
 }
 
diff --git a/web/viewer.html b/web/viewer.html
index 26c208d34..d3664c4a1 100644
--- a/web/viewer.html
+++ b/web/viewer.html
@@ -352,93 +352,87 @@ See https://github.com/adobe-type-tools/cmap-resources
 <!--#endif-->
       </div> <!-- mainContainer -->
 
-      <div id="overlayContainer" class="hidden">
-        <div id="passwordOverlay" class="container hidden">
-          <div class="dialog">
-            <div class="row">
-              <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 id="dialogContainer">
+        <dialog id="passwordDialog">
+          <div class="row">
+            <p id="passwordText" data-l10n-id="password_label">Enter the password to open this PDF file:</p>
           </div>
-        </div>
-        <div id="documentPropertiesOverlay" class="container hidden">
-          <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 class="row">
+            <input type="password" id="password" class="toolbarField">
           </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-->
-        <div id="printServiceOverlay" class="container hidden">
-          <div class="dialog">
-            <div class="row">
-              <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>
+        <dialog id="printServiceDialog">
+          <div class="row">
+            <span data-l10n-id="print_progress_message">Preparing document for printing…</span>
           </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-->
 <!--#if CHROME-->
 <!--#include viewer-snippet-chrome-overlays.html-->
 <!--#endif-->
-      </div>  <!-- overlayContainer -->
+      </div>  <!-- dialogContainer -->
 
     </div> <!-- outerContainer -->
     <div id="printContainer"></div>
diff --git a/web/viewer.js b/web/viewer.js
index ffa5b8d2c..b6b5b9b4c 100644
--- a/web/viewer.js
+++ b/web/viewer.js
@@ -161,16 +161,16 @@ function getViewerConfiguration() {
       findNextButton: document.getElementById("findNext"),
     },
     passwordOverlay: {
-      overlayName: "passwordOverlay",
-      container: document.getElementById("passwordOverlay"),
+      dialogName: "passwordDialog",
+      dialog: document.getElementById("passwordDialog"),
       label: document.getElementById("passwordText"),
       input: document.getElementById("password"),
       submitButton: document.getElementById("passwordSubmit"),
       cancelButton: document.getElementById("passwordCancel"),
     },
     documentProperties: {
-      overlayName: "documentPropertiesOverlay",
-      container: document.getElementById("documentPropertiesOverlay"),
+      dialogName: "documentPropertiesDialog",
+      dialog: document.getElementById("documentPropertiesDialog"),
       closeButton: document.getElementById("documentPropertiesClose"),
       fields: {
         fileName: document.getElementById("fileNameField"),