tor-browser

ExtensionPopups.sys.mjs (22630B)

---

/* -*- Mode: indent-tabs-mode: nil; js-indent-level: 2 -*- */
/* vim: set sts=2 sw=2 et tw=80: */
/* 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/. */

const lazy = {};

ChromeUtils.defineESModuleGetters(lazy, {
 CustomizableUI:
   "moz-src:///browser/components/customizableui/CustomizableUI.sys.mjs",
 ExtensionParent: "resource://gre/modules/ExtensionParent.sys.mjs",
 setTimeout: "resource://gre/modules/Timer.sys.mjs",
});

import { ExtensionCommon } from "resource://gre/modules/ExtensionCommon.sys.mjs";
import { ExtensionUtils } from "resource://gre/modules/ExtensionUtils.sys.mjs";

var { DefaultWeakMap, promiseEvent } = ExtensionUtils;

const { makeWidgetId } = ExtensionCommon;

const POPUP_LOAD_TIMEOUT_MS = 200;

function promisePopupShown(popup) {
 return new Promise(resolve => {
   if (popup.state == "open") {
     resolve();
   } else {
     popup.addEventListener(
       "popupshown",
       function () {
         resolve();
       },
       { once: true }
     );
   }
 });
}

const REMOTE_PANEL_ID = "webextension-remote-preload-panel";

export class BasePopup {
 constructor(
   extension,
   viewNode,
   popupURL,
   browserStyle,
   fixedWidth = false,
   blockParser = false
 ) {
   this.extension = extension;
   this.popupURL = popupURL;
   this.viewNode = viewNode;
   this.browserStyle = browserStyle;
   this.window = viewNode.ownerGlobal;
   this.destroyed = false;
   this.fixedWidth = fixedWidth;
   this.blockParser = blockParser;

   extension.callOnClose(this);

   this.contentReady = new Promise(resolve => {
     this._resolveContentReady = resolve;
   });

   this.window.addEventListener("unload", this);
   this.viewNode.addEventListener(this.DESTROY_EVENT, this);
   this.panel.addEventListener("popuppositioned", this, {
     once: true,
     capture: true,
   });

   this.browser = null;
   this.browserLoaded = new Promise((resolve, reject) => {
     this.browserLoadedDeferred = { resolve, reject };
   });
   this.browserReady = this.createBrowser(viewNode, popupURL);

   BasePopup.instances.get(this.window).set(extension, this);
 }

 static for(extension, window) {
   return BasePopup.instances.get(window).get(extension);
 }

 close() {
   this.closePopup();
 }

 destroy() {
   this.extension.forgetOnClose(this);

   this.window.removeEventListener("unload", this);

   this.destroyed = true;
   this.browserLoadedDeferred.reject(new Error("Popup destroyed"));
   // Ignore unhandled rejections if the "attach" method is not called.
   this.browserLoaded.catch(() => {});

   BasePopup.instances.get(this.window).delete(this.extension);

   return this.browserReady.then(() => {
     if (this.browser) {
       this.destroyBrowser(this.browser, true);
       this.browser.parentNode.remove();
     }
     if (this.stack) {
       this.stack.remove();
     }

     if (this.viewNode) {
       this.viewNode.removeEventListener(this.DESTROY_EVENT, this);
       delete this.viewNode.customRectGetter;
     }

     let { panel } = this;
     if (panel) {
       panel.removeEventListener("popuppositioned", this, { capture: true });
     }
     if (panel && panel.id !== REMOTE_PANEL_ID) {
       panel.style.removeProperty("--arrowpanel-background");
       panel.style.removeProperty("--arrowpanel-border-color");
       panel.removeAttribute("remote");
     }

     this.browser = null;
     this.stack = null;
     this.viewNode = null;
   });
 }

 destroyBrowser(browser, finalize = false) {
   let mm = browser.messageManager;
   // If the browser has already been removed from the document, because the
   // popup was closed externally, there will be no message manager here, so
   // just replace our receiveMessage method with a stub.
   if (mm) {
     mm.removeMessageListener("Extension:BrowserBackgroundChanged", this);
     mm.removeMessageListener("Extension:BrowserContentLoaded", this);
     mm.removeMessageListener("Extension:BrowserResized", this);
   } else if (finalize) {
     this.receiveMessage = () => {};
   }
   browser.removeEventListener("pagetitlechanged", this);
   browser.removeEventListener("DOMWindowClose", this);
   browser.removeEventListener("DoZoomEnlargeBy10", this);
   browser.removeEventListener("DoZoomReduceBy10", this);
 }

 // Returns the name of the event fired on `viewNode` when the popup is being
 // destroyed. This must be implemented by every subclass.
 get DESTROY_EVENT() {
   throw new Error("Not implemented");
 }

 get STYLESHEETS() {
   let sheets = [];

   if (this.browserStyle) {
     sheets.push("chrome://browser/content/extension.css");
   }
   if (!this.fixedWidth) {
     sheets.push("chrome://browser/content/extension-popup-panel.css");
   }

   return sheets;
 }

 get panel() {
   let panel = this.viewNode;
   while (panel && panel.localName != "panel") {
     panel = panel.parentNode;
   }
   return panel;
 }

 receiveMessage({ name, data }) {
   switch (name) {
     case "Extension:BrowserBackgroundChanged":
       this.setBackground(data.background);
       break;

     case "Extension:BrowserContentLoaded":
       this.browserLoadedDeferred.resolve();
       break;

     case "Extension:BrowserResized":
       this._resolveContentReady();
       if (this.ignoreResizes) {
         this.dimensions = data;
       } else {
         this.resizeBrowser(data);
       }
       break;
   }
 }

 handleEvent(event) {
   switch (event.type) {
     case "unload":
     case this.DESTROY_EVENT:
       if (!this.destroyed) {
         this.destroy();
       }
       break;
     case "popuppositioned":
       if (!this.destroyed) {
         this.browserLoaded
           .then(() => {
             if (this.destroyed) {
               return;
             }
             // Wait the reflow before asking the popup panel to grab the focus, otherwise
             // `nsFocusManager::SetFocus` may ignore out request because the panel view
             // visibility is still set to `ViewVisibility::Hide` (waiting the document
             // to be fully flushed makes us sure that when the popup panel grabs the focus
             // nsMenuPopupFrame::LayoutPopup has already been colled and set the frame
             // visibility to `ViewVisibility::Show`).
             this.browser.ownerGlobal.promiseDocumentFlushed(() => {
               if (this.destroyed) {
                 return;
               }
               this.browser.messageManager.sendAsyncMessage(
                 "Extension:GrabFocus",
                 {}
               );
             });
           })
           .catch(() => {
             // If the panel closes too fast an exception is raised here and tests will fail.
           });
       }
       break;

     case "pagetitlechanged":
       this.viewNode.setAttribute("aria-label", this.browser.contentTitle);
       break;

     case "DOMWindowClose":
       this.closePopup();
       break;

     case "DoZoomEnlargeBy10": {
       const browser = event.target;
       let { ZoomManager } = browser.ownerGlobal;
       let zoom = this.browser.fullZoom;
       zoom += 0.1;
       if (zoom > ZoomManager.MAX) {
         zoom = ZoomManager.MAX;
       }
       browser.fullZoom = zoom;
       break;
     }

     case "DoZoomReduceBy10": {
       const browser = event.target;
       let { ZoomManager } = browser.ownerGlobal;
       let zoom = browser.fullZoom;
       zoom -= 0.1;
       if (zoom < ZoomManager.MIN) {
         zoom = ZoomManager.MIN;
       }
       browser.fullZoom = zoom;
       break;
     }
   }
 }

 createBrowser(viewNode, popupURL = null) {
   let document = viewNode.ownerDocument;

   let stack = document.createXULElement("stack");
   stack.setAttribute("class", "webextension-popup-stack");

   let browser = document.createXULElement("browser");
   browser.setAttribute("type", "content");
   browser.setAttribute("disableglobalhistory", "true");
   browser.setAttribute("messagemanagergroup", "webext-browsers");
   browser.setAttribute("class", "webextension-popup-browser");
   browser.setAttribute("webextension-view-type", "popup");
   browser.setAttribute("tooltip", "aHTMLTooltip");
   browser.setAttribute("contextmenu", "contentAreaContextMenu");
   browser.setAttribute("autocompletepopup", "PopupAutoComplete");
   browser.setAttribute("constrainpopups", "false");

   // Ensure the browser will initially load in the same group as other
   // browsers from the same extension.
   browser.setAttribute(
     "initialBrowsingContextGroupId",
     this.extension.policy.browsingContextGroupId
   );

   if (this.extension.remote) {
     browser.setAttribute("remote", "true");
     browser.setAttribute("remoteType", this.extension.remoteType);
     browser.setAttribute("maychangeremoteness", "true");
   }

   // We only need flex sizing for the sake of the slide-in sub-views of the
   // main menu panel, so that the browser occupies the full width of the view,
   // and also takes up any extra height that's available to it.
   browser.setAttribute("flex", "1");
   stack.setAttribute("flex", "1");

   // Note: When using noautohide panels, the popup manager will add width and
   // height attributes to the panel, breaking our resize code, if the browser
   // starts out smaller than 30px by 10px. This isn't an issue now, but it
   // will be if and when we popup debugging.

   this.browser = browser;
   this.stack = stack;

   let readyPromise;
   if (this.extension.remote) {
     readyPromise = promiseEvent(browser, "XULFrameLoaderCreated");
   } else {
     readyPromise = promiseEvent(browser, "load");
   }

   stack.appendChild(browser);
   viewNode.appendChild(stack);

   if (!this.extension.remote) {
     // FIXME: bug 1494029 - this code used to rely on the browser binding
     // accessing browser.contentWindow. This is a stopgap to continue doing
     // that, but we should get rid of it in the long term.
     browser.contentWindow; // eslint-disable-line no-unused-expressions
   }

   let setupBrowser = browser => {
     let mm = browser.messageManager;
     mm.addMessageListener("Extension:BrowserBackgroundChanged", this);
     mm.addMessageListener("Extension:BrowserContentLoaded", this);
     mm.addMessageListener("Extension:BrowserResized", this);
     browser.addEventListener("pagetitlechanged", this);
     browser.addEventListener("DOMWindowClose", this);
     browser.addEventListener("DoZoomEnlargeBy10", this, true); // eslint-disable-line mozilla/balanced-listeners
     browser.addEventListener("DoZoomReduceBy10", this, true); // eslint-disable-line mozilla/balanced-listeners

     lazy.ExtensionParent.apiManager.emit(
       "extension-browser-inserted",
       browser
     );
     return browser;
   };

   const initBrowser = () => {
     setupBrowser(browser);
     let mm = browser.messageManager;

     mm.loadFrameScript(
       "chrome://extensions/content/ext-browser-content.js",
       false,
       true
     );

     mm.sendAsyncMessage("Extension:InitBrowser", {
       allowScriptsToClose: true,
       blockParser: this.blockParser,
       fixedWidth: this.fixedWidth,
       maxWidth: 800,
       maxHeight: 600,
       stylesheets: this.STYLESHEETS,
     });
   };

   browser.addEventListener("DidChangeBrowserRemoteness", initBrowser); // eslint-disable-line mozilla/balanced-listeners

   if (!popupURL) {
     // For remote browsers, we can't do any setup until the frame loader is
     // created. Non-remote browsers get a message manager immediately, so
     // there's no need to wait for the load event.
     if (this.extension.remote) {
       return readyPromise.then(() => setupBrowser(browser));
     }
     return setupBrowser(browser);
   }

   return readyPromise.then(() => {
     initBrowser();
     browser.fixupAndLoadURIString(popupURL, {
       triggeringPrincipal: this.extension.principal,
     });
   });
 }

 unblockParser() {
   this.browserReady.then(() => {
     if (this.destroyed) {
       return;
     }
     // Only block the parser for the preloaded browser, initBrowser will be
     // called again when the browserAction popup is navigated and we should
     // not block the parser in that case, otherwise the navigating the popup
     // to another extension page will never complete and the popup will
     // stay stuck on the previous extension page. See Bug 1747813.
     this.blockParser = false;
     this.browser.messageManager.sendAsyncMessage("Extension:UnblockParser");
   });
 }

 resizeBrowser({ width, height, detail }) {
   if (this.fixedWidth) {
     // Figure out how much extra space we have on the side of the panel
     // opposite the arrow.
     let side = this.panel.getAttribute("side") == "top" ? "bottom" : "top";
     let maxHeight = this.viewHeight + this.extraHeight[side];

     height = Math.min(height, maxHeight);
     this.browser.style.height = `${height}px`;

     // Used by the panelmultiview code to figure out sizing without reparenting
     // (which would destroy the browser and break us).
     this.lastCalculatedInViewHeight = Math.max(height, this.viewHeight);
   } else {
     this.browser.style.width = `${width}px`;
     this.browser.style.minWidth = `${width}px`;
     this.browser.style.height = `${height}px`;
     this.browser.style.minHeight = `${height}px`;
   }

   let event = new this.window.CustomEvent("WebExtPopupResized", { detail });
   this.browser.dispatchEvent(event);
 }

 setBackground(background) {
   // Panels inherit the applied theme (light, dark, etc) and there is a high
   // likelihood that most extension authors will not have tested with a dark theme.
   // If they have not set a background-color, we force it to white to ensure visibility
   // of the extension content. Passing `null` should be treated the same as no argument,
   // which is why we can't use default parameters here.
   if (!background) {
     background = "#fff";
   }
   if (this.panel.id != "widget-overflow") {
     this.panel.style.setProperty("--arrowpanel-background", background);
   }
   if (background == "#fff") {
     // Set a usable default color that work with the default background-color.
     this.panel.style.setProperty(
       "--arrowpanel-border-color",
       "hsla(210,4%,10%,.15)"
     );
   }
   this.background = background;
 }
}

/**
* A map of active popups for a given browser window.
*
* WeakMap[window -> WeakMap[Extension -> BasePopup]]
*/
BasePopup.instances = new DefaultWeakMap(() => new WeakMap());

export class PanelPopup extends BasePopup {
 constructor(extension, document, popupURL, browserStyle) {
   let panel = document.createXULElement("panel");
   panel.setAttribute("id", makeWidgetId(extension.id) + "-panel");
   panel.setAttribute("class", "browser-extension-panel panel-no-padding");
   panel.setAttribute("tabspecific", "true");
   panel.setAttribute("type", "arrow");
   panel.setAttribute("role", "group");
   if (extension.remote) {
     panel.setAttribute("remote", "true");
   }
   panel.setAttribute("neverhidden", "true");

   document.getElementById("mainPopupSet").appendChild(panel);

   panel.addEventListener(
     "popupshowing",
     () => {
       let event = new this.window.CustomEvent("WebExtPopupLoaded", {
         bubbles: true,
         detail: { extension },
       });
       this.browser.dispatchEvent(event);
     },
     { once: true }
   );

   super(extension, panel, popupURL, browserStyle);
 }

 get DESTROY_EVENT() {
   return "popuphidden";
 }

 destroy() {
   super.destroy();
   this.viewNode.remove();
   this.viewNode = null;
 }

 closePopup() {
   promisePopupShown(this.viewNode).then(() => {
     // Make sure we're not already destroyed, or removed from the DOM.
     if (this.viewNode && this.viewNode.hidePopup) {
       this.viewNode.hidePopup();
     }
   });
 }
}

export class ViewPopup extends BasePopup {
 constructor(
   extension,
   window,
   popupURL,
   browserStyle,
   fixedWidth,
   blockParser
 ) {
   let document = window.document;

   let createPanel = remote => {
     let panel = document.createXULElement("panel");
     panel.setAttribute("type", "arrow");
     if (remote) {
       panel.setAttribute("remote", "true");
     }
     panel.setAttribute("neverhidden", "true");

     document.getElementById("mainPopupSet").appendChild(panel);
     return panel;
   };

   // Create a temporary panel to hold the browser while it pre-loads its
   // content. This panel will never be shown, but the browser's docShell will
   // be swapped with the browser in the real panel when it's ready. For remote
   // extensions, this popup is shared between all extensions.
   let panel;
   if (extension.remote) {
     panel = document.getElementById(REMOTE_PANEL_ID);
     if (!panel) {
       panel = createPanel(true);
       panel.id = REMOTE_PANEL_ID;
     }
   } else {
     panel = createPanel();
   }

   super(extension, panel, popupURL, browserStyle, fixedWidth, blockParser);

   this.ignoreResizes = true;

   this.attached = false;
   this.shown = false;
   this.tempPanel = panel;
   this.tempBrowser = this.browser;

   // NOTE: this class is added to the preload browser and never removed because
   // the preload browser is then switched with a new browser once we are about to
   // make the popup visible (this class is not actually used anywhere but it may
   // be useful to keep it around to be able to identify the preload buffer while
   // investigating issues).
   this.browser.classList.add("webextension-preload-browser");
 }

 /**
  * Attaches the pre-loaded browser to the given view node, and reserves a
  * promise which resolves when the browser is ready.
  *
  * @param {Element} viewNode
  *        The node to attach the browser to.
  * @returns {Promise<boolean>}
  *        Resolves when the browser is ready. Resolves to `false` if the
  *        browser was destroyed before it was fully loaded, and the popup
  *        should be closed, or `true` otherwise.
  */
 async attach(viewNode) {
   if (this.destroyed) {
     return false;
   }
   this.viewNode.removeEventListener(this.DESTROY_EVENT, this);
   this.panel.removeEventListener("popuppositioned", this, {
     once: true,
     capture: true,
   });

   this.viewNode = viewNode;
   this.viewNode.addEventListener(this.DESTROY_EVENT, this);
   this.viewNode.setAttribute("closemenu", "none");

   this.panel.addEventListener("popuppositioned", this, {
     once: true,
     capture: true,
   });
   if (this.extension.remote) {
     this.panel.setAttribute("remote", "true");
   }

   // Wait until the browser element is fully initialized, and give it at least
   // a short grace period to finish loading its initial content, if necessary.
   //
   // In practice, the browser that was created by the mousdown handler should
   // nearly always be ready by this point.
   await Promise.all([
     this.browserReady,
     Promise.race([
       // This promise may be rejected if the popup calls window.close()
       // before it has fully loaded.
       this.browserLoaded.catch(() => {}),
       new Promise(resolve => lazy.setTimeout(resolve, POPUP_LOAD_TIMEOUT_MS)),
     ]),
   ]);

   const { panel } = this;

   if (!this.destroyed && !panel) {
     this.destroy();
   }

   if (this.destroyed) {
     lazy.CustomizableUI.hidePanelForNode(viewNode);
     return false;
   }

   this.attached = true;

   this.setBackground(this.background);

   let flushPromise = this.window.promiseDocumentFlushed(() => {
     let win = this.window;

     // Calculate the extra height available on the screen above and below the
     // menu panel. Use that to calculate the how much the sub-view may grow.
     let popupRect = panel.getBoundingClientRect();
     let screenBottom = win.screen.availTop + win.screen.availHeight;
     let popupBottom = win.mozInnerScreenY + popupRect.bottom;
     let popupTop = win.mozInnerScreenY + popupRect.top;

     // Store the initial height of the view, so that we never resize menu panel
     // sub-views smaller than the initial height of the menu.
     this.viewHeight = viewNode.getBoundingClientRect().height;

     this.extraHeight = {
       bottom: Math.max(0, screenBottom - popupBottom),
       top: Math.max(0, popupTop - win.screen.availTop),
     };
   });

   // Create a new browser in the real popup.
   let browser = this.browser;
   await this.createBrowser(this.viewNode);

   this.browser.swapDocShells(browser);
   this.destroyBrowser(browser);

   await flushPromise;

   // Check if the popup has been destroyed while we were waiting for the
   // document flush promise to be resolve.
   if (this.destroyed) {
     this.closePopup();
     this.destroy();
     return false;
   }

   if (this.dimensions) {
     if (this.fixedWidth) {
       delete this.dimensions.width;
     }
     this.resizeBrowser(this.dimensions);
   }

   this.ignoreResizes = false;

   this.viewNode.customRectGetter = () => {
     return { height: this.lastCalculatedInViewHeight || this.viewHeight };
   };

   this.removeTempPanel();

   this.shown = true;

   if (this.destroyed) {
     this.closePopup();
     this.destroy();
     return false;
   }

   let event = new this.window.CustomEvent("WebExtPopupLoaded", {
     bubbles: true,
     detail: { extension: this.extension },
   });
   this.browser.dispatchEvent(event);

   return true;
 }

 removeTempPanel() {
   if (this.tempPanel) {
     if (this.tempPanel.id !== REMOTE_PANEL_ID) {
       this.tempPanel.remove();
     }
     this.tempPanel = null;
   }
   if (this.tempBrowser) {
     this.tempBrowser.parentNode.remove();
     this.tempBrowser = null;
   }
 }

 destroy() {
   return super.destroy().then(() => {
     this.removeTempPanel();
   });
 }

 get DESTROY_EVENT() {
   return "ViewHiding";
 }

 closePopup() {
   if (this.shown) {
     lazy.CustomizableUI.hidePanelForNode(this.viewNode);
   } else if (this.attached) {
     this.destroyed = true;
   } else {
     this.destroy();
   }
 }
}