summaryrefslogtreecommitdiffstats
path: root/toolkit/modules/SubDialog.sys.mjs
diff options
context:
space:
mode:
Diffstat (limited to 'toolkit/modules/SubDialog.sys.mjs')
-rw-r--r--toolkit/modules/SubDialog.sys.mjs1183
1 files changed, 1183 insertions, 0 deletions
diff --git a/toolkit/modules/SubDialog.sys.mjs b/toolkit/modules/SubDialog.sys.mjs
new file mode 100644
index 0000000000..6cb8d3127e
--- /dev/null
+++ b/toolkit/modules/SubDialog.sys.mjs
@@ -0,0 +1,1183 @@
+/* - This Source Code Form is subject to the terms of the Mozilla Public
+ - License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ - You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { XPCOMUtils } from "resource://gre/modules/XPCOMUtils.sys.mjs";
+
+let lazy = {};
+
+XPCOMUtils.defineLazyServiceGetter(
+ lazy,
+ "dragService",
+ "@mozilla.org/widget/dragservice;1",
+ "nsIDragService"
+);
+
+const HTML_NS = "http://www.w3.org/1999/xhtml";
+
+/**
+ * The SubDialog resize callback.
+ * @callback SubDialog~resizeCallback
+ * @param {DOMNode} title - The title element of the dialog.
+ * @param {xul:browser} frame - The browser frame of the dialog.
+ */
+
+/**
+ * SubDialog constructor creates a new subdialog from a template and appends
+ * it to the parentElement.
+ * @param {DOMNode} template - The template is copied to create a new dialog.
+ * @param {DOMNode} parentElement - New dialog is appended onto parentElement.
+ * @param {String} id - A unique identifier for the dialog.
+ * @param {Object} dialogOptions - Dialog options object.
+ * @param {String[]} [dialogOptions.styleSheets] - An array of URLs to additional
+ * stylesheets to inject into the frame.
+ * @param {Boolean} [consumeOutsideClicks] - Whether to close the dialog when
+ * its background overlay is clicked.
+ * @param {SubDialog~resizeCallback} [resizeCallback] - Function to be called on
+ * dialog resize.
+ */
+export function SubDialog({
+ template,
+ parentElement,
+ id,
+ dialogOptions: {
+ styleSheets = [],
+ consumeOutsideClicks = true,
+ resizeCallback,
+ } = {},
+}) {
+ this._id = id;
+
+ this._injectedStyleSheets = this._injectedStyleSheets.concat(styleSheets);
+ this._consumeOutsideClicks = consumeOutsideClicks;
+ this._resizeCallback = resizeCallback;
+ this._overlay = template.cloneNode(true);
+ this._box = this._overlay.querySelector(".dialogBox");
+ this._titleBar = this._overlay.querySelector(".dialogTitleBar");
+ this._titleElement = this._overlay.querySelector(".dialogTitle");
+ this._closeButton = this._overlay.querySelector(".dialogClose");
+ this._frame = this._overlay.querySelector(".dialogFrame");
+
+ this._overlay.classList.add(`dialogOverlay-${id}`);
+ this._frame.setAttribute("name", `dialogFrame-${id}`);
+ this._frameCreated = new Promise(resolve => {
+ this._frame.addEventListener(
+ "load",
+ () => {
+ // We intentionally avoid handling or passing the event to the
+ // resolve method to avoid shutdown window leaks. See bug 1686743.
+ resolve();
+ },
+ {
+ once: true,
+ capture: true,
+ }
+ );
+ });
+
+ parentElement.appendChild(this._overlay);
+ this._overlay.hidden = false;
+}
+
+SubDialog.prototype = {
+ _closingCallback: null,
+ _closingEvent: null,
+ _isClosing: false,
+ _frame: null,
+ _frameCreated: null,
+ _overlay: null,
+ _box: null,
+ _openedURL: null,
+ _injectedStyleSheets: ["chrome://global/skin/in-content/common.css"],
+ _resizeObserver: null,
+ _template: null,
+ _id: null,
+ _titleElement: null,
+ _closeButton: null,
+
+ get frameContentWindow() {
+ return this._frame?.contentWindow;
+ },
+
+ get _window() {
+ return this._overlay?.ownerGlobal;
+ },
+
+ updateTitle(aEvent) {
+ if (aEvent.target != this._frame.contentDocument) {
+ return;
+ }
+ this._titleElement.textContent = this._frame.contentDocument.title;
+ },
+
+ injectStylesheet(aStylesheetURL) {
+ const doc = this._frame.contentDocument;
+ if ([...doc.styleSheets].find(s => s.href === aStylesheetURL)) {
+ return;
+ }
+
+ // Attempt to insert the stylesheet as a link element into the same place in
+ // the document as other link elements. It is almost certain that any
+ // document will already have a localization or other stylesheet link
+ // present.
+ let links = doc.getElementsByTagNameNS(HTML_NS, "link");
+ if (links.length) {
+ let stylesheetLink = doc.createElementNS(HTML_NS, "link");
+ stylesheetLink.setAttribute("rel", "stylesheet");
+ stylesheetLink.setAttribute("href", aStylesheetURL);
+
+ // Insert after the last found link element.
+ links[links.length - 1].after(stylesheetLink);
+
+ return;
+ }
+
+ // In the odd case just insert at the top as a processing instruction.
+ let contentStylesheet = doc.createProcessingInstruction(
+ "xml-stylesheet",
+ 'href="' + aStylesheetURL + '" type="text/css"'
+ );
+ doc.insertBefore(contentStylesheet, doc.documentElement);
+ },
+
+ async open(
+ aURL,
+ { features, closingCallback, closedCallback, sizeTo } = {},
+ ...aParams
+ ) {
+ if (["available", "limitheight"].includes(sizeTo)) {
+ this._box.setAttribute("sizeto", sizeTo);
+ }
+
+ // Create a promise so consumers can tell when we're done setting up.
+ this._dialogReady = new Promise(resolve => {
+ this._resolveDialogReady = resolve;
+ });
+ this._frame._dialogReady = this._dialogReady;
+
+ // Assign close callbacks sync to ensure we can always callback even if the
+ // SubDialog is closed directly after opening.
+ let dialog = null;
+
+ if (closingCallback) {
+ this._closingCallback = (...args) => {
+ closingCallback.apply(dialog, args);
+ };
+ }
+ if (closedCallback) {
+ this._closedCallback = (...args) => {
+ closedCallback.apply(dialog, args);
+ };
+ }
+
+ // Wait until frame is ready to prevent browser crash in tests
+ await this._frameCreated;
+
+ // If we're closing now that we've waited for the dialog to load, abort.
+ if (this._isClosing) {
+ return;
+ }
+ this._addDialogEventListeners();
+
+ // Ensure we end any pending drag sessions:
+ try {
+ // The drag service getService call fails in puppeteer tests on Linux,
+ // so this is in a try...catch as it shouldn't stop us from opening the
+ // dialog. Bug 1806870 tracks fixing this.
+ if (lazy.dragService.getCurrentSession()) {
+ lazy.dragService.endDragSession(true);
+ }
+ } catch (ex) {
+ console.error(ex);
+ }
+
+ // If the parent is chrome we also need open the dialog as chrome, otherwise
+ // the openDialog call will fail.
+ let dialogFeatures = `resizable,dialog=no,centerscreen,chrome=${
+ this._window?.isChromeWindow ? "yes" : "no"
+ }`;
+ if (features) {
+ dialogFeatures = `${features},${dialogFeatures}`;
+ }
+
+ dialog = this._window.openDialog(
+ aURL,
+ `dialogFrame-${this._id}`,
+ dialogFeatures,
+ ...aParams
+ );
+
+ this._closingEvent = null;
+ this._isClosing = false;
+ this._openedURL = aURL;
+
+ dialogFeatures = dialogFeatures.replace(/,/g, "&");
+ let featureParams = new URLSearchParams(dialogFeatures.toLowerCase());
+ this._box.setAttribute(
+ "resizable",
+ featureParams.has("resizable") &&
+ featureParams.get("resizable") != "no" &&
+ featureParams.get("resizable") != "0"
+ );
+ },
+
+ /**
+ * Close the dialog and mark it as aborted.
+ */
+ abort() {
+ this._closingEvent = new CustomEvent("dialogclosing", {
+ bubbles: true,
+ detail: { dialog: this, abort: true },
+ });
+ this._frame.contentWindow.close();
+ // It's possible that we're aborting this dialog before we've had a
+ // chance to set up the contentWindow.close function override in
+ // _onContentLoaded. If so, call this.close() directly to clean things
+ // up. That'll be a no-op if the contentWindow.close override had been
+ // set up, since this.close is idempotent.
+ this.close(this._closingEvent);
+ },
+
+ close(aEvent = null) {
+ if (this._isClosing) {
+ return;
+ }
+ this._isClosing = true;
+ this._closingPromise = new Promise(resolve => {
+ this._resolveClosePromise = resolve;
+ });
+
+ if (this._closingCallback) {
+ try {
+ this._closingCallback.call(null, aEvent);
+ } catch (ex) {
+ console.error(ex);
+ }
+ this._closingCallback = null;
+ }
+
+ this._removeDialogEventListeners();
+
+ this._overlay.style.visibility = "";
+ // Clear the sizing inline styles.
+ this._frame.removeAttribute("style");
+ // Clear the sizing attributes
+ this._box.removeAttribute("width");
+ this._box.removeAttribute("height");
+ this._box.style.removeProperty("--box-max-height-requested");
+ this._box.style.removeProperty("--box-max-width-requested");
+ this._box.style.removeProperty("min-height");
+ this._box.style.removeProperty("min-width");
+ this._overlay.style.removeProperty("--subdialog-inner-height");
+
+ let onClosed = () => {
+ this._openedURL = null;
+
+ this._resolveClosePromise();
+
+ if (this._closedCallback) {
+ try {
+ this._closedCallback.call(null, aEvent);
+ } catch (ex) {
+ console.error(ex);
+ }
+ this._closedCallback = null;
+ }
+ };
+
+ // Wait for the frame to unload before running the closed callback.
+ if (this._frame.contentWindow) {
+ this._frame.contentWindow.addEventListener("unload", onClosed, {
+ once: true,
+ });
+ } else {
+ onClosed();
+ }
+
+ this._overlay.dispatchEvent(
+ new CustomEvent("dialogclose", {
+ bubbles: true,
+ detail: { dialog: this },
+ })
+ );
+
+ // Defer removing the overlay so the frame content window can unload.
+ Services.tm.dispatchToMainThread(() => {
+ this._overlay.remove();
+ });
+ },
+
+ handleEvent(aEvent) {
+ switch (aEvent.type) {
+ case "click":
+ // Close the dialog if the user clicked the overlay background, just
+ // like when the user presses the ESC key (case "command" below).
+ if (aEvent.target !== this._overlay) {
+ break;
+ }
+ if (this._consumeOutsideClicks) {
+ this._frame.contentWindow.close();
+ break;
+ }
+ this._frame.focus();
+ break;
+ case "command":
+ this._frame.contentWindow.close();
+ break;
+ case "dialogclosing":
+ this._onDialogClosing(aEvent);
+ break;
+ case "DOMTitleChanged":
+ this.updateTitle(aEvent);
+ break;
+ case "DOMFrameContentLoaded":
+ this._onContentLoaded(aEvent);
+ break;
+ case "load":
+ this._onLoad(aEvent);
+ break;
+ case "unload":
+ this._onUnload(aEvent);
+ break;
+ case "keydown":
+ this._onKeyDown(aEvent);
+ break;
+ case "focus":
+ this._onParentWinFocus(aEvent);
+ break;
+ }
+ },
+
+ /* Private methods */
+
+ _onUnload(aEvent) {
+ if (
+ aEvent.target !== this._frame?.contentDocument ||
+ aEvent.target.location.href !== this._openedURL
+ ) {
+ return;
+ }
+ this.abort();
+ },
+
+ _onContentLoaded(aEvent) {
+ if (
+ aEvent.target != this._frame ||
+ aEvent.target.contentWindow.location == "about:blank"
+ ) {
+ return;
+ }
+
+ for (let styleSheetURL of this._injectedStyleSheets) {
+ this.injectStylesheet(styleSheetURL);
+ }
+
+ let { contentDocument } = this._frame;
+ // Provide the ability for the dialog to know that it is loaded in a frame
+ // rather than as a top-level window.
+ for (let dialog of contentDocument.querySelectorAll("dialog")) {
+ dialog.setAttribute("subdialog", "true");
+ }
+ // Sub-dialogs loaded in a chrome window should use the system font size so
+ // that the user has a way to increase or decrease it via system settings.
+ // Sub-dialogs loaded in the content area, on the other hand, can be zoomed
+ // like web content.
+ if (this._window.isChromeWindow) {
+ contentDocument.documentElement.classList.add("system-font-size");
+ }
+ // Used by CSS to give the appropriate background colour in dark mode.
+ contentDocument.documentElement.setAttribute("dialogroot", "true");
+
+ this._frame.contentWindow.addEventListener("dialogclosing", this);
+
+ let oldResizeBy = this._frame.contentWindow.resizeBy;
+ this._frame.contentWindow.resizeBy = (resizeByWidth, resizeByHeight) => {
+ // Only handle resizeByHeight currently.
+ let frameHeight = this._overlay.style.getPropertyValue(
+ "--subdialog-inner-height"
+ );
+ if (frameHeight) {
+ frameHeight = parseFloat(frameHeight);
+ } else {
+ frameHeight = this._frame.clientHeight;
+ }
+ let boxMinHeight = parseFloat(
+ this._window.getComputedStyle(this._box).minHeight
+ );
+
+ this._box.style.minHeight = boxMinHeight + resizeByHeight + "px";
+
+ this._overlay.style.setProperty(
+ "--subdialog-inner-height",
+ frameHeight + resizeByHeight + "px"
+ );
+
+ oldResizeBy.call(
+ this._frame.contentWindow,
+ resizeByWidth,
+ resizeByHeight
+ );
+ };
+
+ // Make window.close calls work like dialog closing.
+ let oldClose = this._frame.contentWindow.close;
+ this._frame.contentWindow.close = () => {
+ var closingEvent = this._closingEvent;
+ // If this._closingEvent is set, the dialog is closed externally
+ // (dialog.js) and "dialogclosing" has already been dispatched.
+ if (!closingEvent) {
+ // If called without closing event, we need to create and dispatch it.
+ // This is the case for any external close calls not going through
+ // dialog.js.
+ closingEvent = new CustomEvent("dialogclosing", {
+ bubbles: true,
+ detail: { button: null },
+ });
+
+ this._frame.contentWindow.dispatchEvent(closingEvent);
+ } else if (this._closingEvent.detail?.abort) {
+ // If the dialog is aborted (SubDialog#abort) we need to dispatch the
+ // "dialogclosing" event ourselves.
+ this._frame.contentWindow.dispatchEvent(closingEvent);
+ }
+
+ this.close(closingEvent);
+ oldClose.call(this._frame.contentWindow);
+ };
+
+ // XXX: Hack to make focus during the dialog's load functions work. Make the element visible
+ // sooner in DOMContentLoaded but mostly invisible instead of changing visibility just before
+ // the dialog's load event.
+ // Note that this needs to inherit so that hideDialog() works as expected.
+ this._overlay.style.visibility = "inherit";
+ this._overlay.style.opacity = "0.01";
+
+ // Ensure the document gets an a11y role of dialog.
+ const a11yDoc = contentDocument.body || contentDocument.documentElement;
+ a11yDoc.setAttribute("role", "dialog");
+
+ Services.obs.notifyObservers(this._frame.contentWindow, "subdialog-loaded");
+ },
+
+ async _onLoad(aEvent) {
+ let target = aEvent.currentTarget;
+ if (target.contentWindow.location == "about:blank") {
+ return;
+ }
+
+ // In order to properly calculate the sizing of the subdialog, we need to
+ // ensure that all of the l10n is done.
+ if (target.contentDocument.l10n) {
+ await target.contentDocument.l10n.ready;
+ }
+
+ // Some subdialogs may want to perform additional, asynchronous steps during initializations.
+ //
+ // In that case, we expect them to define a Promise which will delay measuring
+ // until the promise is fulfilled.
+ if (target.contentDocument.mozSubdialogReady) {
+ await target.contentDocument.mozSubdialogReady;
+ }
+
+ await this.resizeDialog();
+ this._resolveDialogReady();
+ },
+
+ async resizeDialog() {
+ // Do this on load to wait for the CSS to load and apply before calculating the size.
+ let docEl = this._frame.contentDocument.documentElement;
+
+ // These are deduced from styles which we don't change, so it's safe to get them now:
+ let boxHorizontalBorder =
+ 2 * parseFloat(this._window.getComputedStyle(this._box).borderLeftWidth);
+ let frameHorizontalMargin =
+ 2 * parseFloat(this._window.getComputedStyle(this._frame).marginLeft);
+
+ // Then determine and set a bunch of width stuff:
+ let { scrollWidth } = docEl.ownerDocument.body || docEl;
+ // We need to convert em to px because an em value from the dialog window could
+ // translate to something else in the host window, as font sizes may vary.
+ let frameMinWidth =
+ this._emToPx(docEl.style.minWidth) ||
+ this._emToPx(docEl.style.width) ||
+ scrollWidth + "px";
+ let frameWidth = docEl.getAttribute("width")
+ ? docEl.getAttribute("width") + "px"
+ : scrollWidth + "px";
+ if (
+ this._box.getAttribute("sizeto") == "available" &&
+ docEl.style.maxWidth
+ ) {
+ this._box.style.setProperty(
+ "--box-max-width-requested",
+ this._emToPx(docEl.style.maxWidth)
+ );
+ }
+
+ if (this._box.getAttribute("sizeto") != "available") {
+ this._frame.style.width = frameWidth;
+ this._frame.style.minWidth = frameMinWidth;
+ }
+
+ let boxMinWidth = `calc(${
+ boxHorizontalBorder + frameHorizontalMargin
+ }px + ${frameMinWidth})`;
+
+ // Temporary fix to allow parent chrome to collapse properly to min width.
+ // See Bug 1658722.
+ if (this._window.isChromeWindow) {
+ boxMinWidth = `min(80vw, ${boxMinWidth})`;
+ }
+ this._box.style.minWidth = boxMinWidth;
+
+ this.resizeVertically();
+
+ this._overlay.dispatchEvent(
+ new CustomEvent("dialogopen", {
+ bubbles: true,
+ detail: { dialog: this },
+ })
+ );
+ this._overlay.style.visibility = "inherit";
+ this._overlay.style.opacity = ""; // XXX: focus hack continued from _onContentLoaded
+
+ if (this._box.getAttribute("resizable") == "true") {
+ this._onResize = this._onResize.bind(this);
+ this._resizeObserver = new this._window.MutationObserver(this._onResize);
+ this._resizeObserver.observe(this._box, { attributes: true });
+ }
+
+ this._trapFocus();
+
+ this._resizeCallback?.({
+ title: this._titleElement,
+ frame: this._frame,
+ });
+ },
+
+ resizeVertically() {
+ let docEl = this._frame.contentDocument.documentElement;
+ let getDocHeight = () => {
+ let { scrollHeight } = docEl.ownerDocument.body || docEl;
+ // We need to convert em to px because an em value from the dialog window could
+ // translate to something else in the host window, as font sizes may vary.
+ return this._emToPx(docEl.style.height) || scrollHeight + "px";
+ };
+
+ // If the title bar is disabled (not in the template),
+ // set its height to 0 for the calculation.
+ let titleBarHeight = 0;
+ if (this._titleBar) {
+ titleBarHeight =
+ this._titleBar.clientHeight +
+ parseFloat(
+ this._window.getComputedStyle(this._titleBar).borderBottomWidth
+ );
+ }
+
+ let boxVerticalBorder =
+ 2 * parseFloat(this._window.getComputedStyle(this._box).borderTopWidth);
+ let frameVerticalMargin =
+ 2 * parseFloat(this._window.getComputedStyle(this._frame).marginTop);
+
+ // The difference between the frame and box shouldn't change, either:
+ let boxRect = this._box.getBoundingClientRect();
+ let frameRect = this._frame.getBoundingClientRect();
+ let frameSizeDifference =
+ frameRect.top - boxRect.top + (boxRect.bottom - frameRect.bottom);
+
+ let contentPane =
+ this._frame.contentDocument.querySelector(".contentPane") ||
+ this._frame.contentDocument.querySelector("dialog");
+
+ let sizeTo = this._box.getAttribute("sizeto");
+ if (["available", "limitheight"].includes(sizeTo)) {
+ if (sizeTo == "limitheight") {
+ this._overlay.style.setProperty("--doc-height-px", getDocHeight());
+ contentPane?.classList.add("sizeDetermined");
+ } else {
+ if (docEl.style.maxHeight) {
+ this._box.style.setProperty(
+ "--box-max-height-requested",
+ this._emToPx(docEl.style.maxHeight)
+ );
+ }
+ // Inform the CSS of the toolbar height so the bottom padding can be
+ // correctly calculated.
+ this._box.style.setProperty("--box-top-px", `${boxRect.top}px`);
+ }
+ return;
+ }
+
+ // Now do the same but for the height. We need to do this afterwards because otherwise
+ // XUL assumes we'll optimize for height and gives us "wrong" values which then are no
+ // longer correct after we set the width:
+ let frameMinHeight = getDocHeight();
+ let frameHeight = docEl.getAttribute("height")
+ ? docEl.getAttribute("height") + "px"
+ : frameMinHeight;
+
+ // Now check if the frame height we calculated is possible at this window size,
+ // accounting for titlebar, padding/border and some spacing.
+ let frameOverhead = frameSizeDifference + titleBarHeight;
+ let maxHeight = this._window.innerHeight - frameOverhead;
+ // Do this with a frame height in pixels...
+ if (!frameHeight.endsWith("px")) {
+ console.error(
+ "This dialog (",
+ this._frame.contentWindow.location.href,
+ ") set a height in non-px-non-em units ('",
+ frameHeight,
+ "'), " +
+ "which is likely to lead to bad sizing in in-content preferences. " +
+ "Please consider changing this."
+ );
+ }
+
+ if (
+ parseFloat(frameMinHeight) > maxHeight ||
+ parseFloat(frameHeight) > maxHeight
+ ) {
+ // If the height is bigger than that of the window, we should let the
+ // contents scroll. The class is set on the "dialog" element, unless a
+ // content pane exists, which is usually the case when the "window"
+ // element is used to implement the subdialog instead.
+ frameMinHeight = maxHeight + "px";
+ // There also instances where the subdialog is neither implemented using
+ // a content pane, nor a <dialog> (such as manageAddresses.xhtml)
+ // so make sure to check that we actually got a contentPane before we
+ // use it.
+ contentPane?.classList.add("doScroll");
+ }
+
+ this._overlay.style.setProperty("--subdialog-inner-height", frameHeight);
+ this._frame.style.height = `min(
+ calc(100vh - ${frameOverhead}px),
+ var(--subdialog-inner-height, ${frameHeight})
+ )`;
+ this._box.style.minHeight = `calc(
+ ${boxVerticalBorder + titleBarHeight + frameVerticalMargin}px +
+ ${frameMinHeight}
+ )`;
+ },
+
+ /**
+ * Helper for converting em to px because an em value from the dialog window could
+ * translate to something else in the host window, as font sizes may vary.
+ *
+ * @param {String} val
+ * A CSS length value.
+ * @return {String} The converted CSS length value, or the original value if
+ * no conversion took place.
+ */
+ _emToPx(val) {
+ if (val && val.endsWith("em")) {
+ let { fontSize } = this.frameContentWindow.getComputedStyle(
+ this._frame.contentDocument.documentElement
+ );
+ return parseFloat(val) * parseFloat(fontSize) + "px";
+ }
+ return val;
+ },
+
+ _onResize(mutations) {
+ let frame = this._frame;
+ // The width and height styles are needed for the initial
+ // layout of the frame, but afterward they need to be removed
+ // or their presence will restrict the contents of the <browser>
+ // from resizing to a smaller size.
+ frame.style.removeProperty("width");
+ frame.style.removeProperty("height");
+
+ let docEl = frame.contentDocument.documentElement;
+ let persistedAttributes = docEl.getAttribute("persist");
+ if (
+ !persistedAttributes ||
+ (!persistedAttributes.includes("width") &&
+ !persistedAttributes.includes("height"))
+ ) {
+ return;
+ }
+
+ for (let mutation of mutations) {
+ if (mutation.attributeName == "width") {
+ docEl.setAttribute("width", docEl.scrollWidth);
+ } else if (mutation.attributeName == "height") {
+ docEl.setAttribute("height", docEl.scrollHeight);
+ }
+ }
+ },
+
+ _onDialogClosing(aEvent) {
+ this._frame.contentWindow.removeEventListener("dialogclosing", this);
+ this._closingEvent = aEvent;
+ },
+
+ _onKeyDown(aEvent) {
+ // Close on ESC key if target is SubDialog
+ // If we're in the parent window, we need to check if the SubDialogs
+ // frame is targeted, so we don't close the wrong dialog.
+ if (aEvent.keyCode == aEvent.DOM_VK_ESCAPE && !aEvent.defaultPrevented) {
+ if (
+ (this._window.isChromeWindow && aEvent.currentTarget == this._box) ||
+ (!this._window.isChromeWindow && aEvent.currentTarget == this._window)
+ ) {
+ // Prevent ESC on SubDialog from cancelling page load (Bug 1665339).
+ aEvent.preventDefault();
+ this._frame.contentWindow.close();
+ return;
+ }
+ }
+
+ if (
+ this._window.isChromeWindow ||
+ aEvent.keyCode != aEvent.DOM_VK_TAB ||
+ aEvent.ctrlKey ||
+ aEvent.altKey ||
+ aEvent.metaKey
+ ) {
+ return;
+ }
+
+ let fm = Services.focus;
+
+ let isLastFocusableElement = el => {
+ // XXXgijs unfortunately there is no way to get the last focusable element without asking
+ // the focus manager to move focus to it.
+ let rv =
+ el ==
+ fm.moveFocus(this._frame.contentWindow, null, fm.MOVEFOCUS_LAST, 0);
+ fm.setFocus(el, 0);
+ return rv;
+ };
+
+ let forward = !aEvent.shiftKey;
+ // check if focus is leaving the frame (incl. the close button):
+ if (
+ (aEvent.target == this._closeButton && !forward) ||
+ (isLastFocusableElement(aEvent.originalTarget) && forward)
+ ) {
+ aEvent.preventDefault();
+ aEvent.stopImmediatePropagation();
+
+ let parentWin = this._window.docShell.chromeEventHandler.ownerGlobal;
+ if (forward) {
+ fm.moveFocus(parentWin, null, fm.MOVEFOCUS_FIRST, fm.FLAG_BYKEY);
+ } else {
+ // Somehow, moving back 'past' the opening doc is not trivial. Cheat by doing it in 2 steps:
+ fm.moveFocus(this._window, null, fm.MOVEFOCUS_ROOT, fm.FLAG_BYKEY);
+ fm.moveFocus(parentWin, null, fm.MOVEFOCUS_BACKWARD, fm.FLAG_BYKEY);
+ }
+ }
+ },
+
+ _onParentWinFocus(aEvent) {
+ // Explicitly check for the focus target of |window| to avoid triggering this when the window
+ // is refocused
+ if (
+ this._closeButton &&
+ aEvent.target != this._closeButton &&
+ aEvent.target != this._window
+ ) {
+ this._closeButton.focus();
+ }
+ },
+
+ /**
+ * Setup dialog event listeners.
+ * @param {Boolean} [includeLoad] - Whether to register load/unload listeners.
+ */
+ _addDialogEventListeners(includeLoad = true) {
+ if (this._window.isChromeWindow) {
+ // Only register an event listener if we have a title to show.
+ if (this._titleBar) {
+ this._frame.addEventListener("DOMTitleChanged", this, true);
+ }
+
+ if (includeLoad) {
+ this._window.addEventListener("unload", this, true);
+ }
+ } else {
+ let chromeBrowser = this._window.docShell.chromeEventHandler;
+
+ if (includeLoad) {
+ // For content windows we listen for unload of the browser
+ chromeBrowser.addEventListener("unload", this, true);
+ }
+
+ if (this._titleBar) {
+ chromeBrowser.addEventListener("DOMTitleChanged", this, true);
+ }
+ }
+
+ // Make the close button work.
+ this._closeButton?.addEventListener("command", this);
+
+ if (includeLoad) {
+ // DOMFrameContentLoaded only fires on the top window
+ this._window.addEventListener("DOMFrameContentLoaded", this, true);
+
+ // Wait for the stylesheets injected during DOMContentLoaded to load before showing the dialog
+ // otherwise there is a flicker of the stylesheet applying.
+ this._frame.addEventListener("load", this, true);
+ }
+
+ // Ensure we get <esc> keypresses even if nothing in the subdialog is focusable
+ // (happens on OS X when only text inputs and lists are focusable, and
+ // the subdialog only has checkboxes/radiobuttons/buttons)
+ if (!this._window.isChromeWindow) {
+ this._window.addEventListener("keydown", this, true);
+ }
+
+ this._overlay.addEventListener("click", this, true);
+ },
+
+ /**
+ * Remove dialog event listeners.
+ * @param {Boolean} [includeLoad] - Whether to remove load/unload listeners.
+ */
+ _removeDialogEventListeners(includeLoad = true) {
+ if (this._window.isChromeWindow) {
+ this._frame.removeEventListener("DOMTitleChanged", this, true);
+
+ if (includeLoad) {
+ this._window.removeEventListener("unload", this, true);
+ }
+ } else {
+ let chromeBrowser = this._window.docShell.chromeEventHandler;
+ if (includeLoad) {
+ chromeBrowser.removeEventListener("unload", this, true);
+ }
+
+ chromeBrowser.removeEventListener("DOMTitleChanged", this, true);
+ }
+
+ this._closeButton?.removeEventListener("command", this);
+
+ if (includeLoad) {
+ this._window.removeEventListener("DOMFrameContentLoaded", this, true);
+ this._frame.removeEventListener("load", this, true);
+ this._frame.contentWindow.removeEventListener("dialogclosing", this);
+ }
+
+ this._window.removeEventListener("keydown", this, true);
+
+ this._overlay.removeEventListener("click", this, true);
+
+ if (this._resizeObserver) {
+ this._resizeObserver.disconnect();
+ this._resizeObserver = null;
+ }
+
+ this._untrapFocus();
+ },
+
+ /**
+ * Focus the dialog content.
+ * If the embedded document defines a custom focus handler it will be called.
+ * Otherwise we will focus the first focusable element in the content window.
+ * @param {boolean} [isInitialFocus] - Whether the dialog is focused for the
+ * first time after opening.
+ */
+ focus(isInitialFocus = false) {
+ // If the content window has its own focus logic, hand off the focus call.
+ let focusHandler = this._frame?.contentDocument?.subDialogSetDefaultFocus;
+ if (focusHandler) {
+ focusHandler(isInitialFocus);
+ return;
+ }
+ // Handle focus ourselves. Try to move the focus to the first element in
+ // the content window.
+ let fm = Services.focus;
+
+ // We're intentionally hiding the focus ring here for now per bug 1704882,
+ // but we aim to have a better fix that retains the focus ring for users
+ // that had brought up the dialog by keyboard in bug 1708261.
+ let focusedElement = fm.moveFocus(
+ this._frame.contentWindow,
+ null,
+ fm.MOVEFOCUS_FIRST,
+ fm.FLAG_NOSHOWRING
+ );
+ if (!focusedElement) {
+ // Ensure the focus is pulled out of the content document even if there's
+ // nothing focusable in the dialog.
+ this._frame.focus();
+ }
+ },
+
+ _trapFocus() {
+ // Attach a system event listener so the dialog can cancel keydown events.
+ // See Bug 1669990.
+ this._box.addEventListener("keydown", this, { mozSystemGroup: true });
+ this._closeButton?.addEventListener("keydown", this);
+
+ if (!this._window.isChromeWindow) {
+ this._window.addEventListener("focus", this, true);
+ }
+ },
+
+ _untrapFocus() {
+ this._box.removeEventListener("keydown", this, { mozSystemGroup: true });
+ this._closeButton?.removeEventListener("keydown", this);
+ this._window.removeEventListener("focus", this, true);
+ },
+};
+
+/**
+ * Manages multiple SubDialogs in a dialog stack element.
+ */
+export class SubDialogManager {
+ /**
+ * @param {Object} options - Dialog manager options.
+ * @param {DOMNode} options.dialogStack - Container element for all dialogs
+ * this instance manages.
+ * @param {DOMNode} options.dialogTemplate - Element to use as template for
+ * constructing new dialogs.
+ * @param {Number} [options.orderType] - Whether dialogs should be ordered as
+ * a stack or a queue.
+ * @param {Boolean} [options.allowDuplicateDialogs] - Whether to allow opening
+ * duplicate dialogs (same URI) at the same time. If disabled, opening a
+ * dialog with the same URI as an existing dialog will be a no-op.
+ * @param {Object} options.dialogOptions - Options passed to every
+ * SubDialog instance.
+ * @see {@link SubDialog} for a list of dialog options.
+ */
+ constructor({
+ dialogStack,
+ dialogTemplate,
+ orderType = SubDialogManager.ORDER_STACK,
+ allowDuplicateDialogs = false,
+ dialogOptions,
+ }) {
+ /**
+ * New dialogs are pushed to the end of the _dialogs array.
+ * Depending on the orderType either the last element (stack) or the first
+ * element (queue) in the array will be the top and visible.
+ * @type {SubDialog[]}
+ */
+ this._dialogs = [];
+ this._dialogStack = dialogStack;
+ this._dialogTemplate = dialogTemplate;
+ this._topLevelPrevActiveElement = null;
+ this._orderType = orderType;
+ this._allowDuplicateDialogs = allowDuplicateDialogs;
+ this._dialogOptions = dialogOptions;
+
+ this._preloadDialog = new SubDialog({
+ template: this._dialogTemplate,
+ parentElement: this._dialogStack,
+ id: SubDialogManager._nextDialogID++,
+ dialogOptions: this._dialogOptions,
+ });
+ }
+
+ /**
+ * Get the dialog which is currently on top. This depends on whether the
+ * dialogs are in a stack or a queue.
+ */
+ get _topDialog() {
+ if (!this._dialogs.length) {
+ return undefined;
+ }
+ if (this._orderType === SubDialogManager.ORDER_STACK) {
+ return this._dialogs[this._dialogs.length - 1];
+ }
+ return this._dialogs[0];
+ }
+
+ open(
+ aURL,
+ {
+ features,
+ closingCallback,
+ closedCallback,
+ allowDuplicateDialogs,
+ sizeTo,
+ hideContent,
+ } = {},
+ ...aParams
+ ) {
+ let allowDuplicates =
+ allowDuplicateDialogs != null
+ ? allowDuplicateDialogs
+ : this._allowDuplicateDialogs;
+ // If we're already open/opening on this URL, do nothing.
+ if (
+ !allowDuplicates &&
+ this._dialogs.some(dialog => dialog._openedURL == aURL)
+ ) {
+ return undefined;
+ }
+
+ let doc = this._dialogStack.ownerDocument;
+
+ // For dialog stacks, remember the last active element before opening the
+ // next dialog. This allows us to restore focus on dialog close.
+ if (
+ this._orderType === SubDialogManager.ORDER_STACK &&
+ this._dialogs.length
+ ) {
+ this._topDialog._prevActiveElement = doc.activeElement;
+ }
+
+ if (!this._dialogs.length) {
+ // When opening the first dialog, show the dialog stack.
+ this._dialogStack.hidden = false;
+ this._dialogStack.classList.remove("temporarilyHidden");
+ this._topLevelPrevActiveElement = doc.activeElement;
+ }
+
+ // Consumers may pass this flag to make the dialog overlay background opaque,
+ // effectively hiding the content behind it. For example,
+ // this is used by the prompt code to prevent certain http authentication spoofing scenarios.
+ if (hideContent) {
+ this._preloadDialog._overlay.setAttribute("hideContent", true);
+ }
+ this._dialogs.push(this._preloadDialog);
+ this._preloadDialog.open(
+ aURL,
+ {
+ features,
+ closingCallback,
+ closedCallback,
+ sizeTo,
+ },
+ ...aParams
+ );
+
+ let openedDialog = this._preloadDialog;
+
+ this._preloadDialog = new SubDialog({
+ template: this._dialogTemplate,
+ parentElement: this._dialogStack,
+ id: SubDialogManager._nextDialogID++,
+ dialogOptions: this._dialogOptions,
+ });
+
+ if (this._dialogs.length == 1) {
+ this._ensureStackEventListeners();
+ }
+
+ return openedDialog;
+ }
+
+ close() {
+ this._topDialog.close();
+ }
+
+ /**
+ * Hides the dialog stack for a specific browser, without actually destroying
+ * frames for stuff within it.
+ *
+ * @param aBrowser - The browser associated with the tab dialog.
+ */
+ hideDialog(aBrowser) {
+ aBrowser.removeAttribute("tabDialogShowing");
+ this._dialogStack.classList.add("temporarilyHidden");
+ }
+
+ /**
+ * Abort open dialogs.
+ * @param {function} [filterFn] - Function which should return true for
+ * dialogs that should be aborted and false for dialogs that should remain
+ * open. Defaults to aborting all dialogs.
+ */
+ abortDialogs(filterFn = () => true) {
+ this._dialogs.filter(filterFn).forEach(dialog => dialog.abort());
+ }
+
+ get hasDialogs() {
+ if (!this._dialogs.length) {
+ return false;
+ }
+ return this._dialogs.some(dialog => !dialog._isClosing);
+ }
+
+ get dialogs() {
+ return [...this._dialogs];
+ }
+
+ focusTopDialog() {
+ this._topDialog?.focus();
+ }
+
+ handleEvent(aEvent) {
+ switch (aEvent.type) {
+ case "dialogopen": {
+ this._onDialogOpen(aEvent.detail.dialog);
+ break;
+ }
+ case "dialogclose": {
+ this._onDialogClose(aEvent.detail.dialog);
+ break;
+ }
+ }
+ }
+
+ _onDialogOpen(dialog) {
+ let lowerDialogs = [];
+ if (dialog == this._topDialog) {
+ dialog.focus(true);
+ } else {
+ // Opening dialog is not on top, hide it
+ lowerDialogs.push(dialog);
+ }
+
+ // For stack order, hide the previous top
+ if (
+ this._dialogs.length &&
+ this._orderType === SubDialogManager.ORDER_STACK
+ ) {
+ let index = this._dialogs.indexOf(dialog);
+ if (index > 0) {
+ lowerDialogs.push(this._dialogs[index - 1]);
+ }
+ }
+
+ lowerDialogs.forEach(d => {
+ if (d._overlay.hasAttribute("topmost")) {
+ d._overlay.removeAttribute("topmost");
+ d._removeDialogEventListeners(false);
+ }
+ });
+ }
+
+ _onDialogClose(dialog) {
+ this._dialogs.splice(this._dialogs.indexOf(dialog), 1);
+
+ if (this._topDialog) {
+ // The prevActiveElement is only set for stacked dialogs
+ if (this._topDialog._prevActiveElement) {
+ this._topDialog._prevActiveElement.focus();
+ } else {
+ this._topDialog.focus(true);
+ }
+ this._topDialog._overlay.setAttribute("topmost", true);
+ this._topDialog._addDialogEventListeners(false);
+ this._dialogStack.hidden = false;
+ this._dialogStack.classList.remove("temporarilyHidden");
+ } else {
+ // We have closed the last dialog, do cleanup.
+ this._topLevelPrevActiveElement.focus();
+ this._dialogStack.hidden = true;
+ this._removeStackEventListeners();
+ }
+ }
+
+ _ensureStackEventListeners() {
+ this._dialogStack.addEventListener("dialogopen", this);
+ this._dialogStack.addEventListener("dialogclose", this);
+ }
+
+ _removeStackEventListeners() {
+ this._dialogStack.removeEventListener("dialogopen", this);
+ this._dialogStack.removeEventListener("dialogclose", this);
+ }
+}
+
+// Used for the SubDialogManager orderType option.
+SubDialogManager.ORDER_STACK = 0;
+SubDialogManager.ORDER_QUEUE = 1;
+
+SubDialogManager._nextDialogID = 0;