Adding upstream version 1:115.7.0.upstream/1%115.7.0upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

8 files changed, 3702 insertions, 0 deletions

diff --git a/comm/mail/components/customizableui/CustomizableUI.sys.mjs b/comm/mail/components/customizableui/CustomizableUI.sys.mjs
new file mode 100644
index 0000000000..2628bd6109
--- /dev/null
+++ b/comm/mail/components/customizableui/CustomizableUI.sys.mjs
@@ -0,0 +1,360 @@
+/* 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/. */
+
+// This file is a copy of a file with the same name in Firefox. Only the
+// pieces we're using, and a few pieces the devtools rely on such as the
+// constants, remain.
+
+const lazy = {};
+
+ChromeUtils.defineESModuleGetters(lazy, {
+  PanelMultiView: "resource:///modules/PanelMultiView.sys.mjs",
+});
+
+/**
+ * gPanelsForWindow is a list of known panels in a window which we may need to close
+ * should command events fire which target them.
+ */
+var gPanelsForWindow = new WeakMap();
+
+var CustomizableUIInternal = {
+  addPanelCloseListeners(aPanel) {
+    Services.els.addSystemEventListener(aPanel, "click", this, false);
+    Services.els.addSystemEventListener(aPanel, "keypress", this, false);
+    let win = aPanel.ownerGlobal;
+    if (!gPanelsForWindow.has(win)) {
+      gPanelsForWindow.set(win, new Set());
+    }
+    gPanelsForWindow.get(win).add(this._getPanelForNode(aPanel));
+  },
+
+  removePanelCloseListeners(aPanel) {
+    Services.els.removeSystemEventListener(aPanel, "click", this, false);
+    Services.els.removeSystemEventListener(aPanel, "keypress", this, false);
+    let win = aPanel.ownerGlobal;
+    let panels = gPanelsForWindow.get(win);
+    if (panels) {
+      panels.delete(this._getPanelForNode(aPanel));
+    }
+  },
+
+  handleEvent(aEvent) {
+    switch (aEvent.type) {
+      case "click":
+      case "keypress":
+        this.maybeAutoHidePanel(aEvent);
+        break;
+    }
+  },
+
+  _getPanelForNode(aNode) {
+    return aNode.closest("panel");
+  },
+
+  /*
+   * If people put things in the panel which need more than single-click interaction,
+   * we don't want to close it. Right now we check for text inputs and menu buttons.
+   * We also check for being outside of any toolbaritem/toolbarbutton, ie on a blank
+   * part of the menu.
+   */
+  _isOnInteractiveElement(aEvent) {
+    function getMenuPopupForDescendant(aNode) {
+      let lastPopup = null;
+      while (
+        aNode &&
+        aNode.parentNode &&
+        aNode.parentNode.localName.startsWith("menu")
+      ) {
+        lastPopup = aNode.localName == "menupopup" ? aNode : lastPopup;
+        aNode = aNode.parentNode;
+      }
+      return lastPopup;
+    }
+
+    let target = aEvent.target;
+    let panel = this._getPanelForNode(aEvent.currentTarget);
+    // This can happen in e.g. customize mode. If there's no panel,
+    // there's clearly nothing for us to close; pretend we're interactive.
+    if (!panel) {
+      return true;
+    }
+    // We keep track of:
+    // whether we're in an input container (text field)
+    let inInput = false;
+    // whether we're in a popup/context menu
+    let inMenu = false;
+    // whether we're in a toolbarbutton/toolbaritem
+    let inItem = false;
+    // whether the current menuitem has a valid closemenu attribute
+    let menuitemCloseMenu = "auto";
+
+    // While keeping track of that, we go from the original target back up,
+    // to the panel if we have to. We bail as soon as we find an input,
+    // a toolbarbutton/item, or the panel:
+    while (target) {
+      // Skip out of iframes etc:
+      if (target.nodeType == target.DOCUMENT_NODE) {
+        if (!target.defaultView) {
+          // Err, we're done.
+          break;
+        }
+        // Find containing browser or iframe element in the parent doc.
+        target = target.defaultView.docShell.chromeEventHandler;
+        if (!target) {
+          break;
+        }
+      }
+      let tagName = target.localName;
+      inInput = tagName == "input";
+      inItem = tagName == "toolbaritem" || tagName == "toolbarbutton";
+      let isMenuItem = tagName == "menuitem";
+      inMenu = inMenu || isMenuItem;
+
+      if (isMenuItem && target.hasAttribute("closemenu")) {
+        let closemenuVal = target.getAttribute("closemenu");
+        menuitemCloseMenu =
+          closemenuVal == "single" || closemenuVal == "none"
+            ? closemenuVal
+            : "auto";
+      }
+
+      // Keep the menu open and break out of the loop if the click happened on
+      // the ShadowRoot or a disabled menu item.
+      if (
+        target.nodeType == target.DOCUMENT_FRAGMENT_NODE ||
+        target.getAttribute("disabled") == "true"
+      ) {
+        return true;
+      }
+
+      // This isn't in the loop condition because we want to break before
+      // changing |target| if any of these conditions are true
+      if (inInput || inItem || target == panel) {
+        break;
+      }
+      // We need specific code for popups: the item on which they were invoked
+      // isn't necessarily in their parentNode chain:
+      if (isMenuItem) {
+        let topmostMenuPopup = getMenuPopupForDescendant(target);
+        target =
+          (topmostMenuPopup && topmostMenuPopup.triggerNode) ||
+          target.parentNode;
+      } else {
+        target = target.parentNode;
+      }
+    }
+
+    // If the user clicked a menu item...
+    if (inMenu) {
+      // We care if we're in an input also,
+      // or if the user specified closemenu!="auto":
+      if (inInput || menuitemCloseMenu != "auto") {
+        return true;
+      }
+      // Otherwise, we're probably fine to close the panel
+      return false;
+    }
+    // If we're not in a menu, and we *are* in a type="menu" toolbarbutton,
+    // we'll now interact with the menu
+    if (inItem && target.getAttribute("type") == "menu") {
+      return true;
+    }
+    return inInput || !inItem;
+  },
+
+  hidePanelForNode(aNode) {
+    let panel = this._getPanelForNode(aNode);
+    if (panel) {
+      lazy.PanelMultiView.hidePopup(panel);
+    }
+  },
+
+  maybeAutoHidePanel(aEvent) {
+    let eventType = aEvent.type;
+    if (eventType == "keypress" && aEvent.keyCode != aEvent.DOM_VK_RETURN) {
+      return;
+    }
+
+    if (eventType == "click" && aEvent.button != 0) {
+      return;
+    }
+
+    // We don't check preventDefault - it makes sense that this was prevented,
+    // but we probably still want to close the panel. If consumers don't want
+    // this to happen, they should specify the closemenu attribute.
+    if (eventType != "command" && this._isOnInteractiveElement(aEvent)) {
+      return;
+    }
+
+    // We can't use event.target because we might have passed an anonymous
+    // content boundary as well, and so target points to the outer element in
+    // that case. Unfortunately, this means we get anonymous child nodes instead
+    // of the real ones, so looking for the 'stoooop, don't close me' attributes
+    // is more involved.
+    let target = aEvent.originalTarget;
+    while (target.parentNode && target.localName != "panel") {
+      if (
+        target.getAttribute("closemenu") == "none" ||
+        target.getAttribute("widget-type") == "view" ||
+        target.getAttribute("widget-type") == "button-and-view"
+      ) {
+        return;
+      }
+      target = target.parentNode;
+    }
+
+    // If we get here, we can actually hide the popup:
+    this.hidePanelForNode(aEvent.target);
+  },
+};
+Object.freeze(CustomizableUIInternal);
+
+export var CustomizableUI = {
+  /**
+   * Constant reference to the ID of the navigation toolbar.
+   */
+  AREA_NAVBAR: "nav-bar",
+  /**
+   * Constant reference to the ID of the menubar's toolbar.
+   */
+  AREA_MENUBAR: "toolbar-menubar",
+  /**
+   * Constant reference to the ID of the tabstrip toolbar.
+   */
+  AREA_TABSTRIP: "TabsToolbar",
+  /**
+   * Constant reference to the ID of the bookmarks toolbar.
+   */
+  AREA_BOOKMARKS: "PersonalToolbar",
+  /**
+   * Constant reference to the ID of the non-dymanic (fixed) list in the overflow panel.
+   */
+  AREA_FIXED_OVERFLOW_PANEL: "widget-overflow-fixed-list",
+
+  /**
+   * Constant indicating the area is a menu panel.
+   */
+  TYPE_MENU_PANEL: "menu-panel",
+  /**
+   * Constant indicating the area is a toolbar.
+   */
+  TYPE_TOOLBAR: "toolbar",
+
+  /**
+   * Constant indicating a XUL-type provider.
+   */
+  PROVIDER_XUL: "xul",
+  /**
+   * Constant indicating an API-type provider.
+   */
+  PROVIDER_API: "api",
+  /**
+   * Constant indicating dynamic (special) widgets: spring, spacer, and separator.
+   */
+  PROVIDER_SPECIAL: "special",
+
+  /**
+   * Constant indicating the widget is built-in
+   */
+  SOURCE_BUILTIN: "builtin",
+  /**
+   * Constant indicating the widget is externally provided
+   * (e.g. by add-ons or other items not part of the builtin widget set).
+   */
+  SOURCE_EXTERNAL: "external",
+
+  /**
+   * Constant indicating the reason the event was fired was a window closing
+   */
+  REASON_WINDOW_CLOSED: "window-closed",
+  /**
+   * Constant indicating the reason the event was fired was an area being
+   * unregistered separately from window closing mechanics.
+   */
+  REASON_AREA_UNREGISTERED: "area-unregistered",
+
+  /**
+   * Add a widget to an area.
+   * If the area to which you try to add is not known to CustomizableUI,
+   * this will throw.
+   * If the area to which you try to add is the same as the area in which
+   * the widget is currently placed, this will do the same as
+   * moveWidgetWithinArea.
+   * If the widget cannot be removed from its original location, this will
+   * no-op.
+   *
+   * This will fire an onWidgetAdded notification,
+   * and an onWidgetBeforeDOMChange and onWidgetAfterDOMChange notification
+   * for each window CustomizableUI knows about.
+   *
+   * @param aWidgetId the ID of the widget to add
+   * @param aArea     the ID of the area to add the widget to
+   * @param aPosition the position at which to add the widget. If you do not
+   *                  pass a position, the widget will be added to the end
+   *                  of the area.
+   */
+  addWidgetToArea(aWidgetId, aArea, aPosition) {},
+  /**
+   * Remove a widget from its area. If the widget cannot be removed from its
+   * area, or is not in any area, this will no-op. Otherwise, this will fire an
+   * onWidgetRemoved notification, and an onWidgetBeforeDOMChange and
+   * onWidgetAfterDOMChange notification for each window CustomizableUI knows
+   * about.
+   *
+   * @param aWidgetId the ID of the widget to remove
+   */
+  removeWidgetFromArea(aWidgetId) {},
+  /**
+   * Get the placement of a widget. This is by far the best way to obtain
+   * information about what the state of your widget is. The internals of
+   * this call are cheap (no DOM necessary) and you will know where the user
+   * has put your widget.
+   *
+   * @param aWidgetId the ID of the widget whose placement you want to know
+   * @returns
+   *   {
+   *     area: "somearea", // The ID of the area where the widget is placed
+   *     position: 42 // the index in the placements array corresponding to
+   *                  // your widget.
+   *   }
+   *
+   *   OR
+   *
+   *   null // if the widget is not placed anywhere (ie in the palette)
+   */
+  getPlacementOfWidget(aWidgetId, aOnlyRegistered = true, aDeadAreas = false) {
+    return null;
+  },
+  /**
+   * Add listeners to a panel that will close it. For use from the menu panel
+   * and overflowable toolbar implementations, unlikely to be useful for
+   * consumers.
+   *
+   * @param aPanel the panel to which listeners should be attached.
+   */
+  addPanelCloseListeners(aPanel) {
+    CustomizableUIInternal.addPanelCloseListeners(aPanel);
+  },
+  /**
+   * Remove close listeners that have been added to a panel with
+   * addPanelCloseListeners. For use from the menu panel and overflowable
+   * toolbar implementations, unlikely to be useful for consumers.
+   *
+   * @param aPanel the panel from which listeners should be removed.
+   */
+  removePanelCloseListeners(aPanel) {
+    CustomizableUIInternal.removePanelCloseListeners(aPanel);
+  },
+  /**
+   * Notify toolbox(es) of a particular event. If you don't pass aWindow,
+   * all toolboxes will be notified. For use from Customize Mode only,
+   * do not use otherwise.
+   *
+   * @param aEvent the name of the event to send.
+   * @param aDetails optional, the details of the event.
+   * @param aWindow optional, the window in which to send the event.
+   */
+  dispatchToolboxEvent(aEvent, aDetails = {}, aWindow = null) {},
+};
+Object.freeze(CustomizableUI);
diff --git a/comm/mail/components/customizableui/PanelMultiView.sys.mjs b/comm/mail/components/customizableui/PanelMultiView.sys.mjs
new file mode 100644
index 0000000000..c68f88c586
--- /dev/null
+++ b/comm/mail/components/customizableui/PanelMultiView.sys.mjs
@@ -0,0 +1,1699 @@
+/* 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/. */
+
+/**
+ * Allows a popup panel to host multiple subviews. The main view shown when the
+ * panel is opened may slide out to display a subview, which in turn may lead to
+ * other subviews in a cascade menu pattern.
+ *
+ * The <panel> element should contain a <panelmultiview> element. Views are
+ * declared using <panelview> elements that are usually children of the main
+ * <panelmultiview> element, although they don't need to be, as views can also
+ * be imported into the panel from other panels or popup sets.
+ *
+ * The panel should be opened asynchronously using the openPopup static method
+ * on the PanelMultiView object. This will display the view specified using the
+ * mainViewId attribute on the contained <panelmultiview> element.
+ *
+ * Specific subviews can slide in using the showSubView method, and backwards
+ * navigation can be done using the goBack method or through a button in the
+ * subview headers.
+ *
+ * The process of displaying the main view or a new subview requires multiple
+ * steps to be completed, hence at any given time the <panelview> element may
+ * be in different states:
+ *
+ * -- Open or closed
+ *
+ *    All the <panelview> elements start "closed", meaning that they are not
+ *    associated to a <panelmultiview> element and can be located anywhere in
+ *    the document. When the openPopup or showSubView methods are called, the
+ *    relevant view becomes "open" and the <panelview> element may be moved to
+ *    ensure it is a descendant of the <panelmultiview> element.
+ *
+ *    The "ViewShowing" event is fired at this point, when the view is not
+ *    visible yet. The event is allowed to cancel the operation, in which case
+ *    the view is closed immediately.
+ *
+ *    Closing the view does not move the node back to its original position.
+ *
+ * -- Visible or invisible
+ *
+ *    This indicates whether the view is visible in the document from a layout
+ *    perspective, regardless of whether it is currently scrolled into view. In
+ *    fact, all subviews are already visible before they start sliding in.
+ *
+ *    Before scrolling into view, a view may become visible but be placed in a
+ *    special off-screen area of the document where layout and measurements can
+ *    take place asynchronously.
+ *
+ *    When navigating forward, an open view may become invisible but stay open
+ *    after sliding out of view. The last known size of these views is still
+ *    taken into account for determining the overall panel size.
+ *
+ *    When navigating backwards, an open subview will first become invisible and
+ *    then will be closed.
+ *
+ * -- Active or inactive
+ *
+ *    This indicates whether the view is fully scrolled into the visible area
+ *    and ready to receive mouse and keyboard events. An active view is always
+ *    visible, but a visible view may be inactive. For example, during a scroll
+ *    transition, both views will be inactive.
+ *
+ *    When a view becomes active, the ViewShown event is fired synchronously,
+ *    and the showSubView and goBack methods can be called for navigation.
+ *
+ *    For the main view of the panel, the ViewShown event is dispatched during
+ *    the "popupshown" event, which means that other "popupshown" handlers may
+ *    be called before the view is active. Thus, code that needs to perform
+ *    further navigation automatically should either use the ViewShown event or
+ *    wait for an event loop tick, like BrowserTestUtils.waitForEvent does.
+ *
+ * -- Navigating with the keyboard
+ *
+ *    An open view may keep state related to keyboard navigation, even if it is
+ *    invisible. When a view is closed, keyboard navigation state is cleared.
+ *
+ * This diagram shows how <panelview> nodes move during navigation:
+ *
+ *   In this <panelmultiview>     In other panels    Action
+ *             ┌───┬───┬───┐        ┌───┬───┐
+ *             │(A)│ B │ C │        │ D │ E │          Open panel
+ *             └───┴───┴───┘        └───┴───┘
+ *         ┌───┬───┬───┐            ┌───┬───┐
+ *         │{A}│(C)│ B │            │ D │ E │          Show subview C
+ *         └───┴───┴───┘            └───┴───┘
+ *     ┌───┬───┬───┬───┐            ┌───┐
+ *     │{A}│{C}│(D)│ B │            │ E │              Show subview D
+ *     └───┴───┴───┴───┘            └───┘
+ *       │ ┌───┬───┬───┬───┐        ┌───┐
+ *       │ │{A}│(C)│ D │ B │        │ E │              Go back
+ *       │ └───┴───┴───┴───┘        └───┘
+ *       │   │   │
+ *       │   │   └── Currently visible view
+ *       │   │   │
+ *       └───┴───┴── Open views
+ */
+
+import { XPCOMUtils } from "resource://gre/modules/XPCOMUtils.sys.mjs";
+
+const lazy = {};
+
+XPCOMUtils.defineLazyGetter(lazy, "gBundle", function () {
+  return Services.strings.createBundle(
+    "chrome://messenger/locale/messenger.properties"
+  );
+});
+
+/**
+ * Safety timeout after which asynchronous events will be canceled if any of the
+ * registered blockers does not return.
+ */
+const BLOCKERS_TIMEOUT_MS = 10000;
+
+const TRANSITION_PHASES = Object.freeze({
+  START: 1,
+  PREPARE: 2,
+  TRANSITION: 3,
+});
+
+let gNodeToObjectMap = new WeakMap();
+let gWindowsWithUnloadHandler = new WeakSet();
+
+/**
+ * Allows associating an object to a node lazily using a weak map.
+ *
+ * Classes deriving from this one may be easily converted to Custom Elements,
+ * although they would lose the ability of being associated lazily.
+ */
+var AssociatedToNode = class {
+  constructor(node) {
+    /**
+     * Node associated to this object.
+     */
+    this.node = node;
+
+    /**
+     * This promise is resolved when the current set of blockers set by event
+     * handlers have all been processed.
+     */
+    this._blockersPromise = Promise.resolve();
+  }
+
+  /**
+   * Retrieves the instance associated with the given node, constructing a new
+   * one if necessary. When the last reference to the node is released, the
+   * object instance will be garbage collected as well.
+   */
+  static forNode(node) {
+    let associatedToNode = gNodeToObjectMap.get(node);
+    if (!associatedToNode) {
+      associatedToNode = new this(node);
+      gNodeToObjectMap.set(node, associatedToNode);
+    }
+    return associatedToNode;
+  }
+
+  get document() {
+    return this.node.ownerDocument;
+  }
+
+  get window() {
+    return this.node.ownerGlobal;
+  }
+
+  _getBoundsWithoutFlushing(element) {
+    return this.window.windowUtils.getBoundsWithoutFlushing(element);
+  }
+
+  /**
+   * Dispatches a custom event on this element.
+   *
+   * @param  {string}    eventName Name of the event to dispatch.
+   * @param  {object}    [detail]  Event detail object. Optional.
+   * @param  {boolean}   cancelable If the event can be canceled.
+   * @returns {boolean} `true` if the event was canceled by an event handler, `false`
+   *                   otherwise.
+   */
+  dispatchCustomEvent(eventName, detail, cancelable = false) {
+    let event = new this.window.CustomEvent(eventName, {
+      detail,
+      bubbles: true,
+      cancelable,
+    });
+    this.node.dispatchEvent(event);
+    return event.defaultPrevented;
+  }
+
+  /**
+   * Dispatches a custom event on this element and waits for any blocking
+   * promises registered using the "addBlocker" function on the details object.
+   * If this function is called again, the event is only dispatched after all
+   * the previously registered blockers have returned.
+   *
+   * The event can be canceled either by resolving any blocking promise to the
+   * boolean value "false" or by calling preventDefault on the event. Rejections
+   * and exceptions will be reported and will cancel the event.
+   *
+   * Blocking should be used sporadically because it slows down the interface.
+   * Also, non-reentrancy is not strictly guaranteed because a safety timeout of
+   * BLOCKERS_TIMEOUT_MS is implemented, after which the event will be canceled.
+   * This helps to prevent deadlocks if any of the event handlers does not
+   * resolve a blocker promise.
+   *
+   * @note Since there is no use case for dispatching different asynchronous
+   *       events in parallel for the same element, this function will also wait
+   *       for previous blockers when the event name is different.
+   *
+   * @param eventName
+   *        Name of the custom event to dispatch.
+   *
+   * @resolves True if the event was canceled by a handler, false otherwise.
+   */
+  async dispatchAsyncEvent(eventName) {
+    // Wait for all the previous blockers before dispatching the event.
+    let blockersPromise = this._blockersPromise.catch(() => {});
+    return (this._blockersPromise = blockersPromise.then(async () => {
+      let blockers = new Set();
+      let cancel = this.dispatchCustomEvent(
+        eventName,
+        {
+          addBlocker(promise) {
+            // Any exception in the blocker will cancel the operation.
+            blockers.add(
+              promise.catch(ex => {
+                console.error(ex);
+                return true;
+              })
+            );
+          },
+        },
+        true
+      );
+      if (blockers.size) {
+        let timeoutPromise = new Promise((resolve, reject) => {
+          this.window.setTimeout(reject, BLOCKERS_TIMEOUT_MS);
+        });
+        try {
+          let results = await Promise.race([
+            Promise.all(blockers),
+            timeoutPromise,
+          ]);
+          cancel = cancel || results.some(result => result === false);
+        } catch (ex) {
+          console.error(
+            new Error(`One of the blockers for ${eventName} timed out.`)
+          );
+          return true;
+        }
+      }
+      return cancel;
+    }));
+  }
+};
+
+/**
+ * This is associated to <panelmultiview> elements.
+ */
+export class PanelMultiView extends AssociatedToNode {
+  /**
+   * Tries to open the specified <panel> and displays the main view specified
+   * with the "mainViewId" attribute on the <panelmultiview> node it contains.
+   *
+   * If the panel does not contain a <panelmultiview>, it is opened directly.
+   * This allows consumers like page actions to accept different panel types.
+   *
+   * @see The non-static openPopup method for details.
+   */
+  static async openPopup(panelNode, ...args) {
+    let panelMultiViewNode = panelNode.querySelector("panelmultiview");
+    if (panelMultiViewNode) {
+      return this.forNode(panelMultiViewNode).openPopup(...args);
+    }
+    panelNode.openPopup(...args);
+    return true;
+  }
+
+  /**
+   * Closes the specified <panel> which contains a <panelmultiview> node.
+   *
+   * If the panel does not contain a <panelmultiview>, it is closed directly.
+   * This allows consumers like page actions to accept different panel types.
+   *
+   * @see The non-static hidePopup method for details.
+   */
+  static hidePopup(panelNode) {
+    let panelMultiViewNode = panelNode.querySelector("panelmultiview");
+    if (panelMultiViewNode) {
+      this.forNode(panelMultiViewNode).hidePopup();
+    } else {
+      panelNode.hidePopup();
+    }
+  }
+
+  /**
+   * Removes the specified <panel> from the document, ensuring that any
+   * <panelmultiview> node it contains is destroyed properly.
+   *
+   * If the viewCacheId attribute is present on the <panelmultiview> element,
+   * imported subviews will be moved out again to the element it specifies, so
+   * that the panel element can be removed safely.
+   *
+   * If the panel does not contain a <panelmultiview>, it is removed directly.
+   * This allows consumers like page actions to accept different panel types.
+   */
+  static removePopup(panelNode) {
+    try {
+      let panelMultiViewNode = panelNode.querySelector("panelmultiview");
+      if (panelMultiViewNode) {
+        let panelMultiView = this.forNode(panelMultiViewNode);
+        panelMultiView._moveOutKids();
+        panelMultiView.disconnect();
+      }
+    } finally {
+      // Make sure to remove the panel element even if disconnecting fails.
+      panelNode.remove();
+    }
+  }
+
+  /**
+   * Ensures that when the specified window is closed all the <panelmultiview>
+   * node it contains are destroyed properly.
+   */
+  static ensureUnloadHandlerRegistered(window) {
+    if (gWindowsWithUnloadHandler.has(window)) {
+      return;
+    }
+
+    window.addEventListener(
+      "unload",
+      () => {
+        for (let panelMultiViewNode of window.document.querySelectorAll(
+          "panelmultiview"
+        )) {
+          this.forNode(panelMultiViewNode).disconnect();
+        }
+      },
+      { once: true }
+    );
+
+    gWindowsWithUnloadHandler.add(window);
+  }
+
+  get _panel() {
+    return this.node.parentNode;
+  }
+
+  set _transitioning(val) {
+    if (val) {
+      this.node.setAttribute("transitioning", "true");
+    } else {
+      this.node.removeAttribute("transitioning");
+    }
+  }
+
+  get _screenManager() {
+    if (this.__screenManager) {
+      return this.__screenManager;
+    }
+    return (this.__screenManager = Cc[
+      "@mozilla.org/gfx/screenmanager;1"
+    ].getService(Ci.nsIScreenManager));
+  }
+
+  constructor(node) {
+    super(node);
+    this._openPopupPromise = Promise.resolve(false);
+    this._openPopupCancelCallback = () => {};
+  }
+
+  connect() {
+    this.connected = true;
+
+    PanelMultiView.ensureUnloadHandlerRegistered(this.window);
+
+    let viewContainer = (this._viewContainer =
+      this.document.createXULElement("box"));
+    viewContainer.classList.add("panel-viewcontainer");
+
+    let viewStack = (this._viewStack = this.document.createXULElement("box"));
+    viewStack.classList.add("panel-viewstack");
+    viewContainer.append(viewStack);
+
+    let offscreenViewContainer = this.document.createXULElement("box");
+    offscreenViewContainer.classList.add("panel-viewcontainer", "offscreen");
+
+    let offscreenViewStack = (this._offscreenViewStack =
+      this.document.createXULElement("box"));
+    offscreenViewStack.classList.add("panel-viewstack");
+    offscreenViewContainer.append(offscreenViewStack);
+
+    this.node.prepend(offscreenViewContainer);
+    this.node.prepend(viewContainer);
+
+    this.openViews = [];
+
+    this._panel.addEventListener("popupshowing", this);
+    this._panel.addEventListener("popuppositioned", this);
+    this._panel.addEventListener("popuphidden", this);
+    this._panel.addEventListener("popupshown", this);
+
+    // Proxy these public properties and methods, as used elsewhere by various
+    // parts of the browser, to this instance.
+    ["goBack", "showSubView"].forEach(method => {
+      Object.defineProperty(this.node, method, {
+        enumerable: true,
+        value: (...args) => this[method](...args),
+      });
+    });
+  }
+
+  disconnect() {
+    // Guard against re-entrancy.
+    if (!this.node || !this.connected) {
+      return;
+    }
+
+    this._panel.removeEventListener("mousemove", this);
+    this._panel.removeEventListener("popupshowing", this);
+    this._panel.removeEventListener("popuppositioned", this);
+    this._panel.removeEventListener("popupshown", this);
+    this._panel.removeEventListener("popuphidden", this);
+    this.window.removeEventListener("keydown", this, true);
+    this.node =
+      this._openPopupPromise =
+      this._openPopupCancelCallback =
+      this._viewContainer =
+      this._viewStack =
+      this._transitionDetails =
+        null;
+  }
+
+  /**
+   * Tries to open the panel associated with this PanelMultiView, and displays
+   * the main view specified with the "mainViewId" attribute.
+   *
+   * The hidePopup method can be called while the operation is in progress to
+   * prevent the panel from being displayed. View events may also cancel the
+   * operation, so there is no guarantee that the panel will become visible.
+   *
+   * The "popuphidden" event will be fired either when the operation is canceled
+   * or when the popup is closed later. This event can be used for example to
+   * reset the "open" state of the anchor or tear down temporary panels.
+   *
+   * If this method is called again before the panel is shown, the result
+   * depends on the operation currently in progress. If the operation was not
+   * canceled, the panel is opened using the arguments from the previous call,
+   * and this call is ignored. If the operation was canceled, it will be
+   * retried again using the arguments from this call.
+   *
+   * It's not necessary for the <panelmultiview> binding to be connected when
+   * this method is called, but the containing panel must have its display
+   * turned on, for example it shouldn't have the "hidden" attribute.
+   *
+   * @param anchor
+   *        The node to anchor the popup to.
+   * @param options
+   *        Either options to use or a string position. This is forwarded to
+   *        the openPopup method of the panel.
+   * @param args
+   *        Additional arguments to be forwarded to the openPopup method of the
+   *        panel.
+   *
+   * @resolves With true as soon as the request to display the panel has been
+   *           sent, or with false if the operation was canceled. The state of
+   *           the panel at this point is not guaranteed. It may be still
+   *           showing, completely shown, or completely hidden.
+   * @rejects If an exception is thrown at any point in the process before the
+   *          request to display the panel is sent.
+   */
+  async openPopup(anchor, options, ...args) {
+    // Set up the function that allows hidePopup or a second call to showPopup
+    // to cancel the specific panel opening operation that we're starting below.
+    // This function must be synchronous, meaning we can't use Promise.race,
+    // because hidePopup wants to dispatch the "popuphidden" event synchronously
+    // even if the panel has not been opened yet.
+    let canCancel = true;
+    let cancelCallback = (this._openPopupCancelCallback = () => {
+      // If the cancel callback is called and the panel hasn't been prepared
+      // yet, cancel showing it. Setting canCancel to false will prevent the
+      // popup from opening. If the panel has opened by the time the cancel
+      // callback is called, canCancel will be false already, and we will not
+      // fire the "popuphidden" event.
+      if (canCancel && this.node) {
+        canCancel = false;
+        this.dispatchCustomEvent("popuphidden");
+      }
+    });
+
+    // Create a promise that is resolved with the result of the last call to
+    // this method, where errors indicate that the panel was not opened.
+    let openPopupPromise = this._openPopupPromise.catch(() => {
+      return false;
+    });
+
+    // Make the preparation done before showing the panel non-reentrant. The
+    // promise created here will be resolved only after the panel preparation is
+    // completed, even if a cancellation request is received in the meantime.
+    return (this._openPopupPromise = openPopupPromise.then(async wasShown => {
+      // The panel may have been destroyed in the meantime.
+      if (!this.node) {
+        return false;
+      }
+      // If the panel has been already opened there is nothing more to do. We
+      // check the actual state of the panel rather than setting some state in
+      // our handler of the "popuphidden" event because this has a lower chance
+      // of locking indefinitely if events aren't raised in the expected order.
+      if (wasShown && ["open", "showing"].includes(this._panel.state)) {
+        return true;
+      }
+      try {
+        if (!this.connected) {
+          this.connect();
+        }
+        // Allow any of the ViewShowing handlers to prevent showing the main view.
+        if (!(await this._showMainView())) {
+          cancelCallback();
+        }
+      } catch (ex) {
+        cancelCallback();
+        throw ex;
+      }
+      // If a cancellation request was received there is nothing more to do.
+      if (!canCancel || !this.node) {
+        return false;
+      }
+      // We have to set canCancel to false before opening the popup because the
+      // hidePopup method of PanelMultiView can be re-entered by event handlers.
+      // If the openPopup call fails, however, we still have to dispatch the
+      // "popuphidden" event even if canCancel was set to false.
+      try {
+        canCancel = false;
+        this._panel.openPopup(anchor, options, ...args);
+
+        // On Windows, if another popup is hiding while we call openPopup, the
+        // call won't fail but the popup won't open. In this case, we have to
+        // dispatch an artificial "popuphidden" event to reset our state.
+        if (this._panel.state == "closed" && this.openViews.length) {
+          this.dispatchCustomEvent("popuphidden");
+          return false;
+        }
+
+        if (
+          options &&
+          typeof options == "object" &&
+          options.triggerEvent &&
+          options.triggerEvent.type == "keypress" &&
+          this.openViews.length
+        ) {
+          // This was opened via the keyboard, so focus the first item.
+          this.openViews[0].focusWhenActive = true;
+        }
+
+        return true;
+      } catch (ex) {
+        this.dispatchCustomEvent("popuphidden");
+        throw ex;
+      }
+    }));
+  }
+
+  /**
+   * Closes the panel associated with this PanelMultiView.
+   *
+   * If the openPopup method was called but the panel has not been displayed
+   * yet, the operation is canceled and the panel will not be displayed, but the
+   * "popuphidden" event is fired synchronously anyways.
+   *
+   * This means that by the time this method returns all the operations handled
+   * by the "popuphidden" event are completed, for example resetting the "open"
+   * state of the anchor, and the panel is already invisible.
+   */
+  hidePopup() {
+    if (!this.node || !this.connected) {
+      return;
+    }
+
+    // If we have already reached the _panel.openPopup call in the openPopup
+    // method, we can call hidePopup. Otherwise, we have to cancel the latest
+    // request to open the panel, which will have no effect if the request has
+    // been canceled already.
+    if (["open", "showing"].includes(this._panel.state)) {
+      this._panel.hidePopup();
+    } else {
+      this._openPopupCancelCallback();
+    }
+
+    // We close all the views synchronously, so that they are ready to be opened
+    // in other PanelMultiView instances. The "popuphidden" handler may also
+    // call this function, but the second time openViews will be empty.
+    this.closeAllViews();
+  }
+
+  /**
+   * Move any child subviews into the element defined by "viewCacheId" to make
+   * sure they will not be removed together with the <panelmultiview> element.
+   */
+  _moveOutKids() {
+    let viewCacheId = this.node.getAttribute("viewCacheId");
+    if (!viewCacheId) {
+      return;
+    }
+
+    // Node.children and Node.children is live to DOM changes like the
+    // ones we're about to do, so iterate over a static copy:
+    let subviews = Array.from(this._viewStack.children);
+    let viewCache = this.document.getElementById(viewCacheId);
+    for (let subview of subviews) {
+      viewCache.appendChild(subview);
+    }
+  }
+
+  /**
+   * Slides in the specified view as a subview.
+   *
+   * @param viewIdOrNode
+   *        DOM element or string ID of the <panelview> to display.
+   * @param anchor
+   *        DOM element that triggered the subview, which will be highlighted
+   *        and whose "label" attribute will be used for the title of the
+   *        subview when a "title" attribute is not specified.
+   */
+  showSubView(viewIdOrNode, anchor) {
+    this._showSubView(viewIdOrNode, anchor).catch(console.error);
+  }
+  async _showSubView(viewIdOrNode, anchor) {
+    let viewNode =
+      typeof viewIdOrNode == "string"
+        ? this.document.getElementById(viewIdOrNode)
+        : viewIdOrNode;
+    if (!viewNode) {
+      console.error(new Error(`Subview ${viewIdOrNode} doesn't exist.`));
+      return;
+    }
+
+    if (!this.openViews.length) {
+      console.error(new Error(`Cannot show a subview in a closed panel.`));
+      return;
+    }
+
+    let prevPanelView = this.openViews[this.openViews.length - 1];
+    let nextPanelView = PanelView.forNode(viewNode);
+    if (this.openViews.includes(nextPanelView)) {
+      console.error(new Error(`Subview ${viewNode.id} is already open.`));
+      return;
+    }
+
+    // Do not re-enter the process if navigation is already in progress. Since
+    // there is only one active view at any given time, we can do this check
+    // safely, even considering that during the navigation process the actual
+    // view to which prevPanelView refers will change.
+    if (!prevPanelView.active) {
+      return;
+    }
+    // If prevPanelView._doingKeyboardActivation is true, it will be reset to
+    // false synchronously. Therefore, we must capture it before we use any
+    // "await" statements.
+    let doingKeyboardActivation = prevPanelView._doingKeyboardActivation;
+    // Marking the view that is about to scrolled out of the visible area as
+    // inactive will prevent re-entrancy and also disable keyboard navigation.
+    // From this point onwards, "await" statements can be used safely.
+    prevPanelView.active = false;
+
+    // Provide visual feedback while navigation is in progress, starting before
+    // the transition starts and ending when the previous view is invisible.
+    if (anchor) {
+      anchor.setAttribute("open", "true");
+    }
+    try {
+      // If the ViewShowing event cancels the operation we have to re-enable
+      // keyboard navigation, but this must be avoided if the panel was closed.
+      if (!(await this._openView(nextPanelView))) {
+        if (prevPanelView.isOpenIn(this)) {
+          // We don't raise a ViewShown event because nothing actually changed.
+          // Technically we should use a different state flag just because there
+          // is code that could check the "active" property to determine whether
+          // to wait for a ViewShown event later, but this only happens in
+          // regression tests and is less likely to be a technique used in
+          // production code, where use of ViewShown is less common.
+          prevPanelView.active = true;
+        }
+        return;
+      }
+
+      prevPanelView.captureKnownSize();
+
+      // The main view of a panel can be a subview in another one. Make sure to
+      // reset all the properties that may be set on a subview.
+      nextPanelView.mainview = false;
+      // The header may change based on how the subview was opened.
+      nextPanelView.headerText =
+        viewNode.getAttribute("title") ||
+        (anchor && anchor.getAttribute("label"));
+      // The constrained width of subviews may also vary between panels.
+      nextPanelView.minMaxWidth = prevPanelView.knownWidth;
+
+      if (anchor) {
+        viewNode.classList.add("PanelUI-subView");
+      }
+
+      await this._transitionViews(prevPanelView.node, viewNode, false, anchor);
+    } finally {
+      if (anchor) {
+        anchor.removeAttribute("open");
+      }
+    }
+
+    nextPanelView.focusWhenActive = doingKeyboardActivation;
+    this._activateView(nextPanelView);
+  }
+
+  /**
+   * Navigates backwards by sliding out the most recent subview.
+   */
+  goBack() {
+    this._goBack().catch(console.error);
+  }
+  async _goBack() {
+    if (this.openViews.length < 2) {
+      // This may be called by keyboard navigation or external code when only
+      // the main view is open.
+      return;
+    }
+
+    let prevPanelView = this.openViews[this.openViews.length - 1];
+    let nextPanelView = this.openViews[this.openViews.length - 2];
+
+    // Like in the showSubView method, do not re-enter navigation while it is
+    // in progress, and make the view inactive immediately. From this point
+    // onwards, "await" statements can be used safely.
+    if (!prevPanelView.active) {
+      return;
+    }
+
+    prevPanelView.active = false;
+
+    prevPanelView.captureKnownSize();
+
+    await this._transitionViews(prevPanelView.node, nextPanelView.node, true);
+
+    this._closeLatestView();
+
+    this._activateView(nextPanelView);
+  }
+
+  /**
+   * Prepares the main view before showing the panel.
+   */
+  async _showMainView() {
+    let nextPanelView = PanelView.forNode(
+      this.document.getElementById(this.node.getAttribute("mainViewId"))
+    );
+
+    // If the view is already open in another panel, close the panel first.
+    let oldPanelMultiViewNode = nextPanelView.node.panelMultiView;
+    if (oldPanelMultiViewNode) {
+      PanelMultiView.forNode(oldPanelMultiViewNode).hidePopup();
+      // Wait for a layout flush after hiding the popup, otherwise the view may
+      // not be displayed correctly for some time after the new panel is opened.
+      // This is filed as bug 1441015.
+      await this.window.promiseDocumentFlushed(() => {});
+    }
+
+    if (!(await this._openView(nextPanelView))) {
+      return false;
+    }
+
+    // The main view of a panel can be a subview in another one. Make sure to
+    // reset all the properties that may be set on a subview.
+    nextPanelView.mainview = true;
+    nextPanelView.headerText = "";
+    nextPanelView.minMaxWidth = 0;
+
+    // Ensure the view will be visible once the panel is opened.
+    nextPanelView.visible = true;
+
+    return true;
+  }
+
+  /**
+   * Opens the specified PanelView and dispatches the ViewShowing event, which
+   * can be used to populate the subview or cancel the operation.
+   *
+   * This also clears all the attributes and styles that may be left by a
+   * transition that was interrupted.
+   *
+   * @resolves With true if the view was opened, false otherwise.
+   */
+  async _openView(panelView) {
+    if (panelView.node.parentNode != this._viewStack) {
+      this._viewStack.appendChild(panelView.node);
+    }
+
+    panelView.node.panelMultiView = this.node;
+    this.openViews.push(panelView);
+
+    let canceled = await panelView.dispatchAsyncEvent("ViewShowing");
+
+    // The panel can be hidden while we are processing the ViewShowing event.
+    // This results in all the views being closed synchronously, and at this
+    // point the ViewHiding event has already been dispatched for all of them.
+    if (!this.openViews.length) {
+      return false;
+    }
+
+    // Check if the event requested cancellation but the panel is still open.
+    if (canceled) {
+      // Handlers for ViewShowing can't know if a different handler requested
+      // cancellation, so this will dispatch a ViewHiding event to give a chance
+      // to clean up.
+      this._closeLatestView();
+      return false;
+    }
+
+    // Clean up all the attributes and styles related to transitions. We do this
+    // here rather than when the view is closed because we are likely to make
+    // other DOM modifications soon, which isn't the case when closing.
+    let { style } = panelView.node;
+    style.removeProperty("outline");
+    style.removeProperty("width");
+
+    return true;
+  }
+
+  /**
+   * Activates the specified view and raises the ViewShown event, unless the
+   * view was closed in the meantime.
+   */
+  _activateView(panelView) {
+    if (panelView.isOpenIn(this)) {
+      panelView.active = true;
+      if (panelView.focusWhenActive) {
+        panelView.focusFirstNavigableElement(false, true);
+        panelView.focusWhenActive = false;
+      }
+      panelView.dispatchCustomEvent("ViewShown");
+    }
+  }
+
+  /**
+   * Closes the most recent PanelView and raises the ViewHiding event.
+   *
+   * @note The ViewHiding event is not cancelable and should probably be renamed
+   *       to ViewHidden or ViewClosed instead, see bug 1438507.
+   */
+  _closeLatestView() {
+    let panelView = this.openViews.pop();
+    panelView.clearNavigation();
+    panelView.dispatchCustomEvent("ViewHiding");
+    panelView.node.panelMultiView = null;
+    // Views become invisible synchronously when they are closed, and they won't
+    // become visible again until they are opened. When this is called at the
+    // end of backwards navigation, the view is already invisible.
+    panelView.visible = false;
+  }
+
+  /**
+   * Closes all the views that are currently open.
+   */
+  closeAllViews() {
+    // Raise ViewHiding events for open views in reverse order.
+    while (this.openViews.length) {
+      this._closeLatestView();
+    }
+  }
+
+  /**
+   * Apply a transition to 'slide' from the currently active view to the next
+   * one.
+   * Sliding the next subview in means that the previous panelview stays where it
+   * is and the active panelview slides in from the left in LTR mode, right in
+   * RTL mode.
+   *
+   * @param {panelview} previousViewNode Node that is currently displayed, but
+   *                                     is about to be transitioned away. This
+   *                                     must be already inactive at this point.
+   * @param {panelview} viewNode - Node that will becode the active view,
+   *                                     after the transition has finished.
+   * @param {boolean}   reverse          Whether we're navigation back to a
+   *                                     previous view or forward to a next view.
+   */
+  async _transitionViews(previousViewNode, viewNode, reverse) {
+    const { window } = this;
+
+    let nextPanelView = PanelView.forNode(viewNode);
+    let prevPanelView = PanelView.forNode(previousViewNode);
+
+    let details = (this._transitionDetails = {
+      phase: TRANSITION_PHASES.START,
+    });
+
+    // Set the viewContainer dimensions to make sure only the current view is
+    // visible.
+    let olderView = reverse ? nextPanelView : prevPanelView;
+    this._viewContainer.style.minHeight = olderView.knownHeight + "px";
+    this._viewContainer.style.height = prevPanelView.knownHeight + "px";
+    this._viewContainer.style.width = prevPanelView.knownWidth + "px";
+    // Lock the dimensions of the window that hosts the popup panel.
+    let rect = this._getBoundsWithoutFlushing(this._panel);
+    this._panel.style.width = rect.width + "px";
+    this._panel.style.height = rect.height + "px";
+
+    let viewRect;
+    if (reverse) {
+      // Use the cached size when going back to a previous view, but not when
+      // reopening a subview, because its contents may have changed.
+      viewRect = {
+        width: nextPanelView.knownWidth,
+        height: nextPanelView.knownHeight,
+      };
+      nextPanelView.visible = true;
+    } else if (viewNode.customRectGetter) {
+      // We use a customRectGetter for WebExtensions panels, because they need
+      // to query the size from an embedded browser. The presence of this
+      // getter also provides an indication that the view node shouldn't be
+      // moved around, otherwise the state of the browser would get disrupted.
+      let width = prevPanelView.knownWidth;
+      let height = prevPanelView.knownHeight;
+      viewRect = Object.assign({ height, width }, viewNode.customRectGetter());
+      nextPanelView.visible = true;
+      // Until the header is visible, it has 0 height.
+      // Wait for layout before measuring it
+      let header = viewNode.firstElementChild;
+      if (header && header.classList.contains("panel-header")) {
+        viewRect.height += await window.promiseDocumentFlushed(() => {
+          return this._getBoundsWithoutFlushing(header).height;
+        });
+      }
+    } else {
+      this._offscreenViewStack.style.minHeight = olderView.knownHeight + "px";
+      this._offscreenViewStack.appendChild(viewNode);
+      nextPanelView.visible = true;
+
+      viewRect = await window.promiseDocumentFlushed(() => {
+        return this._getBoundsWithoutFlushing(viewNode);
+      });
+      // Bail out if the panel was closed in the meantime.
+      if (!nextPanelView.isOpenIn(this)) {
+        return;
+      }
+
+      // Place back the view after all the other views that are already open in
+      // order for the transition to work as expected.
+      this._viewStack.appendChild(viewNode);
+
+      this._offscreenViewStack.style.removeProperty("min-height");
+    }
+
+    this._transitioning = true;
+    details.phase = TRANSITION_PHASES.PREPARE;
+
+    // The 'magic' part: build up the amount of pixels to move right or left.
+    let moveToLeft =
+      (this.window.RTL_UI && !reverse) || (!this.window.RTL_UI && reverse);
+    let deltaX = prevPanelView.knownWidth;
+    let deepestNode = reverse ? previousViewNode : viewNode;
+
+    // With a transition when navigating backwards - user hits the 'back'
+    // button - we need to make sure that the views are positioned in a way
+    // that a translateX() unveils the previous view from the right direction.
+    if (reverse) {
+      this._viewStack.style.marginInlineStart = "-" + deltaX + "px";
+    }
+
+    // Set the transition style and listen for its end to clean up and make sure
+    // the box sizing becomes dynamic again.
+    // Somehow, putting these properties in PanelUI.css doesn't work for newly
+    // shown nodes in a XUL parent node.
+    this._viewStack.style.transition =
+      "transform var(--animation-easing-function)" +
+      " var(--panelui-subview-transition-duration)";
+    this._viewStack.style.willChange = "transform";
+    // Use an outline instead of a border so that the size is not affected.
+    deepestNode.style.outline = "1px solid var(--panel-separator-color)";
+
+    // Now that all the elements are in place for the start of the transition,
+    // give the layout code a chance to set the initial values.
+    await window.promiseDocumentFlushed(() => {});
+    // Bail out if the panel was closed in the meantime.
+    if (!nextPanelView.isOpenIn(this)) {
+      return;
+    }
+
+    // Now set the viewContainer dimensions to that of the new view, which
+    // kicks of the height animation.
+    this._viewContainer.style.height = viewRect.height + "px";
+    this._viewContainer.style.width = viewRect.width + "px";
+    this._panel.style.removeProperty("width");
+    this._panel.style.removeProperty("height");
+
+    // We're setting the width property to prevent flickering during the
+    // sliding animation with smaller views.
+    viewNode.style.width = viewRect.width + "px";
+
+    // Kick off the transition!
+    details.phase = TRANSITION_PHASES.TRANSITION;
+
+    // If we're going to show the main view, we can remove the
+    // min-height property on the view container.
+    if (viewNode.getAttribute("mainview")) {
+      this._viewContainer.style.removeProperty("min-height");
+    }
+
+    this._viewStack.style.transform =
+      "translateX(" + (moveToLeft ? "" : "-") + deltaX + "px)";
+
+    await new Promise(resolve => {
+      details.resolve = resolve;
+      this._viewContainer.addEventListener(
+        "transitionend",
+        (details.listener = ev => {
+          // It's quite common that `height` on the view container doesn't need
+          // to transition, so we make sure to do all the work on the transform
+          // transition-end, because that is guaranteed to happen.
+          if (ev.target != this._viewStack || ev.propertyName != "transform") {
+            return;
+          }
+          this._viewContainer.removeEventListener(
+            "transitionend",
+            details.listener
+          );
+          delete details.listener;
+          resolve();
+        })
+      );
+      this._viewContainer.addEventListener(
+        "transitioncancel",
+        (details.cancelListener = ev => {
+          if (ev.target != this._viewStack) {
+            return;
+          }
+          this._viewContainer.removeEventListener(
+            "transitioncancel",
+            details.cancelListener
+          );
+          delete details.cancelListener;
+          resolve();
+        })
+      );
+    });
+
+    // Bail out if the panel was closed during the transition.
+    if (!nextPanelView.isOpenIn(this)) {
+      return;
+    }
+    prevPanelView.visible = false;
+
+    // This will complete the operation by removing any transition properties.
+    nextPanelView.node.style.removeProperty("width");
+    deepestNode.style.removeProperty("outline");
+    this._cleanupTransitionPhase();
+
+    nextPanelView.focusSelectedElement();
+  }
+
+  /**
+   * Attempt to clean up the attributes and properties set by `_transitionViews`
+   * above. Which attributes and properties depends on the phase the transition
+   * was left from.
+   */
+  _cleanupTransitionPhase() {
+    if (!this._transitionDetails) {
+      return;
+    }
+
+    let { phase, resolve, listener, cancelListener } = this._transitionDetails;
+    this._transitionDetails = null;
+
+    if (phase >= TRANSITION_PHASES.START) {
+      this._panel.style.removeProperty("width");
+      this._panel.style.removeProperty("height");
+      this._viewContainer.style.removeProperty("height");
+      this._viewContainer.style.removeProperty("width");
+    }
+    if (phase >= TRANSITION_PHASES.PREPARE) {
+      this._transitioning = false;
+      this._viewStack.style.removeProperty("margin-inline-start");
+      this._viewStack.style.removeProperty("transition");
+    }
+    if (phase >= TRANSITION_PHASES.TRANSITION) {
+      this._viewStack.style.removeProperty("transform");
+      if (listener) {
+        this._viewContainer.removeEventListener("transitionend", listener);
+      }
+      if (cancelListener) {
+        this._viewContainer.removeEventListener(
+          "transitioncancel",
+          cancelListener
+        );
+      }
+      if (resolve) {
+        resolve();
+      }
+    }
+  }
+
+  _calculateMaxHeight(aEvent) {
+    // While opening the panel, we have to limit the maximum height of any
+    // view based on the space that will be available. We cannot just use
+    // window.screen.availTop and availHeight because these may return an
+    // incorrect value when the window spans multiple screens.
+    let anchor = this._panel.anchorNode;
+    let anchorRect = anchor.getBoundingClientRect();
+
+    let screen = this._screenManager.screenForRect(
+      anchor.screenX,
+      anchor.screenY,
+      anchorRect.width,
+      anchorRect.height
+    );
+    let availTop = {},
+      availHeight = {};
+    screen.GetAvailRect({}, availTop, {}, availHeight);
+    let cssAvailTop = availTop.value / screen.defaultCSSScaleFactor;
+
+    // The distance from the anchor to the available margin of the screen is
+    // based on whether the panel will open towards the top or the bottom.
+    let maxHeight;
+    if (aEvent.alignmentPosition.startsWith("before_")) {
+      maxHeight = anchor.screenY - cssAvailTop;
+    } else {
+      let anchorScreenBottom = anchor.screenY + anchorRect.height;
+      let cssAvailHeight = availHeight.value / screen.defaultCSSScaleFactor;
+      maxHeight = cssAvailTop + cssAvailHeight - anchorScreenBottom;
+    }
+
+    // To go from the maximum height of the panel to the maximum height of
+    // the view stack, we need to subtract the height of the arrow and the
+    // height of the opposite margin, but we cannot get their actual values
+    // because the panel is not visible yet. However, we know that this is
+    // currently 11px on Mac, 13px on Windows, and 13px on Linux. We also
+    // want an extra margin, both for visual reasons and to prevent glitches
+    // due to small rounding errors. So, we just use a value that makes
+    // sense for all platforms. If the arrow visuals change significantly,
+    // this value will be easy to adjust.
+    const EXTRA_MARGIN_PX = 20;
+    maxHeight -= EXTRA_MARGIN_PX;
+    return maxHeight;
+  }
+
+  handleEvent(aEvent) {
+    // Only process actual popup events from the panel or events we generate
+    // ourselves, but not from menus being shown from within the panel.
+    if (
+      aEvent.type.startsWith("popup") &&
+      aEvent.target != this._panel &&
+      aEvent.target != this.node
+    ) {
+      return;
+    }
+    switch (aEvent.type) {
+      case "keydown":
+        // Since we start listening for the "keydown" event when the popup is
+        // already showing and stop listening when the panel is hidden, we
+        // always have at least one view open.
+        let currentView = this.openViews[this.openViews.length - 1];
+        currentView.keyNavigation(aEvent);
+        break;
+      case "mousemove":
+        this.openViews.forEach(panelView => panelView.clearNavigation());
+        break;
+      case "popupshowing": {
+        this._viewContainer.setAttribute("panelopen", "true");
+        if (!this.node.hasAttribute("disablekeynav")) {
+          // We add the keydown handler on the window so that it handles key
+          // presses when a panel appears but doesn't get focus, as happens
+          // when a button to open a panel is clicked with the mouse.
+          // However, this means the listener is on an ancestor of the panel,
+          // which means that handlers such as ToolbarKeyboardNavigator are
+          // deeper in the tree. Therefore, this must be a capturing listener
+          // so we get the event first.
+          this.window.addEventListener("keydown", this, true);
+          this._panel.addEventListener("mousemove", this);
+        }
+        break;
+      }
+      case "popuppositioned": {
+        if (this._panel.state == "showing") {
+          let maxHeight = this._calculateMaxHeight(aEvent);
+          this._viewStack.style.maxHeight = maxHeight + "px";
+          this._offscreenViewStack.style.maxHeight = maxHeight + "px";
+        }
+        break;
+      }
+      case "popupshown":
+        // The main view is always open and visible when the panel is first
+        // shown, so we can check the height of the description elements it
+        // contains and notify consumers using the ViewShown event. In order to
+        // minimize flicker we need to allow synchronous reflows, and we still
+        // make sure the ViewShown event is dispatched synchronously.
+        let mainPanelView = this.openViews[0];
+        this._activateView(mainPanelView);
+        break;
+      case "popuphidden": {
+        // WebExtensions consumers can hide the popup from viewshowing, or
+        // mid-transition, which disrupts our state:
+        this._transitioning = false;
+        this._viewContainer.removeAttribute("panelopen");
+        this._cleanupTransitionPhase();
+        this.window.removeEventListener("keydown", this, true);
+        this._panel.removeEventListener("mousemove", this);
+        this.closeAllViews();
+
+        // Clear the main view size caches. The dimensions could be different
+        // when the popup is opened again, e.g. through touch mode sizing.
+        this._viewContainer.style.removeProperty("min-height");
+        this._viewStack.style.removeProperty("max-height");
+        this._viewContainer.style.removeProperty("width");
+        this._viewContainer.style.removeProperty("height");
+
+        this.dispatchCustomEvent("PanelMultiViewHidden");
+        break;
+      }
+    }
+  }
+}
+
+/**
+ * This is associated to <panelview> elements.
+ */
+export class PanelView extends AssociatedToNode {
+  constructor(node) {
+    super(node);
+
+    /**
+     * Indicates whether the view is active. When this is false, consumers can
+     * wait for the ViewShown event to know when the view becomes active.
+     */
+    this.active = false;
+
+    /**
+     * Specifies whether the view should be focused when active. When this
+     * is true, the first navigable element in the view will be focused
+     * when the view becomes active. This should be set to true when the view
+     * is activated from the keyboard. It will be set to false once the view
+     * is active.
+     */
+    this.focusWhenActive = false;
+  }
+
+  /**
+   * Indicates whether the view is open in the specified PanelMultiView object.
+   */
+  isOpenIn(panelMultiView) {
+    return this.node.panelMultiView == panelMultiView.node;
+  }
+
+  /**
+   * The "mainview" attribute is set before the panel is opened when this view
+   * is displayed as the main view, and is removed before the <panelview> is
+   * displayed as a subview. The same view element can be displayed as a main
+   * view and as a subview at different times.
+   */
+  set mainview(value) {
+    if (value) {
+      this.node.setAttribute("mainview", true);
+    } else {
+      this.node.removeAttribute("mainview");
+    }
+  }
+
+  /**
+   * Determines whether the view is visible. Setting this to false also resets
+   * the "active" property.
+   */
+  set visible(value) {
+    if (value) {
+      this.node.setAttribute("visible", true);
+    } else {
+      this.node.removeAttribute("visible");
+      this.active = false;
+      this.focusWhenActive = false;
+    }
+  }
+
+  /**
+   * Constrains the width of this view using the "min-width" and "max-width"
+   * styles. Setting this to zero removes the constraints.
+   */
+  set minMaxWidth(value) {
+    let style = this.node.style;
+    if (value) {
+      style.minWidth = style.maxWidth = value + "px";
+    } else {
+      style.removeProperty("min-width");
+      style.removeProperty("max-width");
+    }
+  }
+
+  /**
+   * Adds a header with the given title, or removes it if the title is empty.
+   */
+  set headerText(value) {
+    // If the header already exists, update or remove it as requested.
+    let header = this.node.firstElementChild;
+    if (header && header.classList.contains("panel-header")) {
+      if (value) {
+        header.querySelector(".panel-header > h1 > span").textContent = value;
+      } else {
+        header.remove();
+      }
+      return;
+    }
+
+    // The header doesn't exist, only create it if needed.
+    if (!value) {
+      return;
+    }
+
+    header = this.document.createXULElement("box");
+    header.classList.add("panel-header");
+
+    let backButton = this.document.createXULElement("toolbarbutton");
+    backButton.className =
+      "subviewbutton subviewbutton-iconic subviewbutton-back";
+    backButton.setAttribute("closemenu", "none");
+    backButton.setAttribute("tabindex", "0");
+
+    backButton.setAttribute(
+      "aria-label",
+      lazy.gBundle.GetStringFromName("panel.back")
+    );
+
+    backButton.addEventListener("command", () => {
+      // The panelmultiview element may change if the view is reused.
+      this.node.panelMultiView.goBack();
+      backButton.blur();
+    });
+
+    let h1 = this.document.createElement("h1");
+    let span = this.document.createElement("span");
+    span.textContent = value;
+    h1.appendChild(span);
+
+    header.append(backButton, h1);
+    this.node.prepend(header);
+  }
+
+  /**
+   * Populates the "knownWidth" and "knownHeight" properties with the current
+   * dimensions of the view. These may be zero if the view is invisible.
+   *
+   * These values are relevant during transitions and are retained for backwards
+   * navigation if the view is still open but is invisible.
+   */
+  captureKnownSize() {
+    let rect = this._getBoundsWithoutFlushing(this.node);
+    this.knownWidth = rect.width;
+    this.knownHeight = rect.height;
+  }
+
+  /**
+   * Determine whether an element can only be navigated to with tab/shift+tab,
+   * not the arrow keys.
+   */
+  _isNavigableWithTabOnly(element) {
+    let tag = element.localName;
+    return (
+      tag == "menulist" ||
+      tag == "input" ||
+      tag == "textarea" ||
+      // Allow tab to reach embedded documents in extension panels.
+      tag == "browser"
+    );
+  }
+
+  /**
+   * Make a TreeWalker for keyboard navigation.
+   *
+   * @param {boolean} arrowKey If `true`, elements only navigable with tab are
+   *        excluded.
+   */
+  _makeNavigableTreeWalker(arrowKey) {
+    let filter = node => {
+      if (node.disabled) {
+        return NodeFilter.FILTER_REJECT;
+      }
+      let bounds = this._getBoundsWithoutFlushing(node);
+      if (bounds.width == 0 || bounds.height == 0) {
+        return NodeFilter.FILTER_REJECT;
+      }
+      if (
+        node.tagName == "button" ||
+        node.tagName == "toolbarbutton" ||
+        node.classList.contains("text-link") ||
+        (!arrowKey && this._isNavigableWithTabOnly(node))
+      ) {
+        // Set the tabindex attribute to make sure the node is focusable.
+        if (!node.hasAttribute("tabindex")) {
+          node.setAttribute("tabindex", "-1");
+        }
+        return NodeFilter.FILTER_ACCEPT;
+      }
+      return NodeFilter.FILTER_SKIP;
+    };
+    return this.document.createTreeWalker(
+      this.node,
+      NodeFilter.SHOW_ELEMENT,
+      filter
+    );
+  }
+
+  /**
+   * Get a TreeWalker which finds elements navigable with tab/shift+tab.
+   */
+  get _tabNavigableWalker() {
+    if (!this.__tabNavigableWalker) {
+      this.__tabNavigableWalker = this._makeNavigableTreeWalker(false);
+    }
+    return this.__tabNavigableWalker;
+  }
+
+  /**
+   * Get a TreeWalker which finds elements navigable with up/down arrow keys.
+   */
+  get _arrowNavigableWalker() {
+    if (!this.__arrowNavigableWalker) {
+      this.__arrowNavigableWalker = this._makeNavigableTreeWalker(true);
+    }
+    return this.__arrowNavigableWalker;
+  }
+
+  /**
+   * Element that is currently selected with the keyboard, or null if no element
+   * is selected. Since the reference is held weakly, it can become null or
+   * undefined at any time.
+   */
+  get selectedElement() {
+    return this._selectedElement && this._selectedElement.get();
+  }
+  set selectedElement(value) {
+    if (!value) {
+      delete this._selectedElement;
+    } else {
+      this._selectedElement = Cu.getWeakReference(value);
+    }
+  }
+
+  /**
+   * Focuses and moves keyboard selection to the first navigable element.
+   * This is a no-op if there are no navigable elements.
+   *
+   * @param {boolean} homeKey - `true` if this is for the home key.
+   * @param {boolean} skipBack - `true` if the Back button should be skipped.
+   */
+  focusFirstNavigableElement(homeKey = false, skipBack = false) {
+    // The home key is conceptually similar to the up/down arrow keys.
+    let walker = homeKey
+      ? this._arrowNavigableWalker
+      : this._tabNavigableWalker;
+    walker.currentNode = walker.root;
+    this.selectedElement = walker.firstChild();
+    if (
+      skipBack &&
+      walker.currentNode &&
+      walker.currentNode.classList.contains("subviewbutton-back") &&
+      walker.nextNode()
+    ) {
+      this.selectedElement = walker.currentNode;
+    }
+    this.focusSelectedElement(/* byKey */ true);
+  }
+
+  /**
+   * Focuses and moves keyboard selection to the last navigable element.
+   * This is a no-op if there are no navigable elements.
+   *
+   * @param {boolean} endKey - `true` if this is for the end key.
+   */
+  focusLastNavigableElement(endKey = false) {
+    // The end key is conceptually similar to the up/down arrow keys.
+    let walker = endKey ? this._arrowNavigableWalker : this._tabNavigableWalker;
+    walker.currentNode = walker.root;
+    this.selectedElement = walker.lastChild();
+    this.focusSelectedElement(/* byKey */ true);
+  }
+
+  /**
+   * Based on going up or down, select the previous or next focusable element.
+   *
+   * @param {boolean} isDown - whether we're going down (true) or up (false).
+   * @param {boolean} arrowKey - `true` if this is for the up/down arrow keys.
+   *
+   * @returns {DOMNode} the element we selected.
+   */
+  moveSelection(isDown, arrowKey = false) {
+    let walker = arrowKey
+      ? this._arrowNavigableWalker
+      : this._tabNavigableWalker;
+    let oldSel = this.selectedElement;
+    let newSel;
+    if (oldSel) {
+      walker.currentNode = oldSel;
+      newSel = isDown ? walker.nextNode() : walker.previousNode();
+    }
+    // If we couldn't find something, select the first or last item:
+    if (!newSel) {
+      walker.currentNode = walker.root;
+      newSel = isDown ? walker.firstChild() : walker.lastChild();
+    }
+    this.selectedElement = newSel;
+    return newSel;
+  }
+
+  /**
+   * Allow for navigating subview buttons using the arrow keys and the Enter key.
+   * The Up and Down keys can be used to navigate the list up and down and the
+   * Enter, Right or Left - depending on the text direction - key can be used to
+   * simulate a click on the currently selected button.
+   * The Right or Left key - depending on the text direction - can be used to
+   * navigate to the previous view, functioning as a shortcut for the view's
+   * back button.
+   * Thus, in LTR mode:
+   *  - The Right key functions the same as the Enter key, simulating a click
+   *  - The Left key triggers a navigation back to the previous view.
+   *
+   * Key navigation is only enabled while the view is active, meaning that this
+   * method will return early if it is invoked during a sliding transition.
+   *
+   * @param {KeyEvent} event
+   */
+  /* eslint-disable-next-line complexity */
+  keyNavigation(event) {
+    if (!this.active) {
+      return;
+    }
+
+    let focus = this.document.activeElement;
+    // Make sure the focus is actually inside the panel. (It might not be if
+    // the panel was opened with the mouse.) If it isn't, we don't care
+    // about it for our purposes.
+    // We use Node.compareDocumentPosition because Node.contains doesn't
+    // behave as expected for anonymous content; e.g. the input inside a
+    // textbox.
+    if (
+      focus &&
+      !(
+        this.node.compareDocumentPosition(focus) &
+        Node.DOCUMENT_POSITION_CONTAINED_BY
+      )
+    ) {
+      focus = null;
+    }
+
+    // Extension panels contain embedded documents. We can't manage
+    // keyboard navigation within those.
+    if (focus && focus.tagName == "browser") {
+      return;
+    }
+
+    let stop = () => {
+      event.stopPropagation();
+      event.preventDefault();
+    };
+
+    // If the focused element is only navigable with tab, it wants the arrow
+    // keys, etc. We shouldn't handle any keys except tab and shift+tab.
+    // We make a function for this for performance reasons: we only want to
+    // check this for keys we potentially care about, not *all* keys.
+    let tabOnly = () => {
+      // We use the real focus rather than this.selectedElement because focus
+      // might have been moved without keyboard navigation (e.g. mouse click)
+      // and this.selectedElement is only updated for keyboard navigation.
+      return focus && this._isNavigableWithTabOnly(focus);
+    };
+
+    // If a context menu is open, we must let it handle all keys.
+    // Normally, this just happens, but because we have a capturing window
+    // keydown listener, our listener takes precedence.
+    // Again, we only want to do this check on demand for performance.
+    let isContextMenuOpen = () => {
+      if (!focus) {
+        return false;
+      }
+      let contextNode = focus.closest("[context]");
+      if (!contextNode) {
+        return false;
+      }
+      let context = contextNode.getAttribute("context");
+      let popup = this.document.getElementById(context);
+      return popup && popup.state == "open";
+    };
+
+    let keyCode = event.code;
+    switch (keyCode) {
+      case "ArrowDown":
+      case "ArrowUp":
+        if (tabOnly()) {
+          break;
+        }
+      // Fall-through...
+      case "Tab": {
+        if (isContextMenuOpen()) {
+          break;
+        }
+        stop();
+        let isDown =
+          keyCode == "ArrowDown" || (keyCode == "Tab" && !event.shiftKey);
+        let button = this.moveSelection(isDown, keyCode != "Tab");
+        Services.focus.setFocus(button, Services.focus.FLAG_BYKEY);
+        break;
+      }
+      case "Home":
+        if (tabOnly() || isContextMenuOpen()) {
+          break;
+        }
+        stop();
+        this.focusFirstNavigableElement(true);
+        break;
+      case "End":
+        if (tabOnly() || isContextMenuOpen()) {
+          break;
+        }
+        stop();
+        this.focusLastNavigableElement(true);
+        break;
+      case "ArrowLeft":
+      case "ArrowRight": {
+        if (tabOnly() || isContextMenuOpen()) {
+          break;
+        }
+        stop();
+        if (
+          (!this.window.RTL_UI && keyCode == "ArrowLeft") ||
+          (this.window.RTL_UI && keyCode == "ArrowRight")
+        ) {
+          this.node.panelMultiView.goBack();
+          break;
+        }
+        // If the current button is _not_ one that points to a subview, pressing
+        // the arrow key shouldn't do anything.
+        let button = this.selectedElement;
+        if (!button || !button.classList.contains("subviewbutton-nav")) {
+          break;
+        }
+      }
+      // Fall-through...
+      case "Space":
+      case "NumpadEnter":
+      case "Enter": {
+        if (tabOnly() || isContextMenuOpen()) {
+          break;
+        }
+        let button = this.selectedElement;
+        if (!button) {
+          break;
+        }
+        stop();
+
+        this._doingKeyboardActivation = true;
+        // Unfortunately, 'tabindex' doesn't execute the default action, so
+        // we explicitly do this here.
+        // We are sending a command event, a mousedown event and then a click
+        // event. This is done in order to mimic a "real" mouse click event.
+        // Normally, the command event executes the action, then the click event
+        // closes the menu. However, in some cases (e.g. the Library button),
+        // there is no command event handler and the mousedown event executes the
+        // action instead.
+        button.doCommand();
+        let dispEvent = new event.target.ownerGlobal.MouseEvent("mousedown", {
+          bubbles: true,
+        });
+        button.dispatchEvent(dispEvent);
+        dispEvent = new event.target.ownerGlobal.MouseEvent("click", {
+          bubbles: true,
+        });
+        button.dispatchEvent(dispEvent);
+        this._doingKeyboardActivation = false;
+        break;
+      }
+    }
+  }
+
+  /**
+   * Focus the last selected element in the view, if any.
+   *
+   * @param byKey {Boolean} whether focus was moved by the user pressing a key.
+   *                        Needed to ensure we show focus styles in the right cases.
+   */
+  focusSelectedElement(byKey = false) {
+    let selected = this.selectedElement;
+    if (selected) {
+      let flag = byKey ? "FLAG_BYKEY" : "FLAG_BYELEMENTFOCUS";
+      Services.focus.setFocus(selected, Services.focus[flag]);
+    }
+  }
+
+  /**
+   * Clear all traces of keyboard navigation happening right now.
+   */
+  clearNavigation() {
+    let selected = this.selectedElement;
+    if (selected) {
+      selected.blur();
+      this.selectedElement = null;
+    }
+  }
+}
diff --git a/comm/mail/components/customizableui/content/customizeMode.inc.xhtml b/comm/mail/components/customizableui/content/customizeMode.inc.xhtml
new file mode 100644
index 0000000000..fc7eb0595b
--- /dev/null
+++ b/comm/mail/components/customizableui/content/customizeMode.inc.xhtml
@@ -0,0 +1,128 @@
+<!-- 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/. -->
+
+<box id="customization-content-container">
+<box flex="1" id="customization-palette-container">
+  <label id="customization-header" data-l10n-id="customize-mode-menu-and-toolbars-header"></label>
+  <vbox id="customization-palette" class="customization-palette" hidden="true"/>
+  <vbox id="customization-pong-arena" hidden="true"/>
+  <spacer id="customization-spacer"/>
+</box>
+<vbox id="customization-panel-container">
+  <vbox id="customization-panelWrapper">
+    <box class="panel-arrowbox">
+      <image class="panel-arrow" side="top"/>
+    </box>
+    <box class="panel-arrowcontent" side="top" flex="1">
+      <vbox id="customization-panelHolder">
+        <description id="customization-panelHeader" data-l10n-id="customize-mode-overflow-list-title"></description>
+        <description id="customization-panelDescription" data-l10n-id="customize-mode-overflow-list-description"></description>
+      </vbox>
+      <box class="panel-inner-arrowcontentfooter" hidden="true"/>
+    </box>
+  </vbox>
+</vbox>
+</box>
+<hbox id="customization-footer">
+<checkbox id="customization-titlebar-visibility-checkbox" class="customizationmode-checkbox"
+# NB: because oncommand fires after click, by the time we've fired, the checkbox binding
+#    will already have switched the button's state, so this is correct:
+          oncommand="gCustomizeMode.toggleTitlebar(this.checked)" data-l10n-id="customize-mode-titlebar"/>
+<checkbox id="customization-extra-drag-space-checkbox" class="customizationmode-checkbox"
+          data-l10n-id="customize-mode-extra-drag-space"
+          oncommand="gCustomizeMode.toggleDragSpace(this.checked)"/>
+<button id="customization-toolbar-visibility-button" class="customizationmode-button" type="menu" data-l10n-id="customize-mode-toolbars">
+  <menupopup id="customization-toolbar-menu" onpopupshowing="onViewToolbarsPopupShowing(event)"/>
+</button>
+<button id="customization-lwtheme-button" data-l10n-id="customize-mode-lwthemes" class="customizationmode-button" type="menu">
+  <panel type="arrow" id="customization-lwtheme-menu"
+         orient="vertical"
+         onpopupshowing="gCustomizeMode.onThemesMenuShowing(event);"
+         position="topcenter bottomleft"
+         flip="none"
+         role="menu">
+    <label id="customization-lwtheme-menu-header" data-l10n-id="customize-mode-lwthemes-my-themes"/>
+    <hbox id="customization-lwtheme-menu-footer">
+      <toolbarbutton class="customization-lwtheme-menu-footeritem"
+                     data-l10n-id="customize-mode-lwthemes-menu-manage"
+                     tabindex="0"
+                     oncommand="gCustomizeMode.openAddonsManagerThemes(event);"/>
+      <toolbarbutton class="customization-lwtheme-menu-footeritem"
+                     data-l10n-id="customize-mode-lwthemes-menu-get-more"
+                     tabindex="0"
+                     oncommand="gCustomizeMode.getMoreThemes(event);"/>
+    </hbox>
+  </panel>
+</button>
+<button id="customization-uidensity-button"
+        data-l10n-id="customize-mode-uidensity"
+        class="customizationmode-button"
+        type="menu">
+  <panel type="arrow" id="customization-uidensity-menu"
+         onpopupshowing="gCustomizeMode.onUIDensityMenuShowing();"
+         position="topcenter bottomleft"
+         flip="none"
+         role="menu">
+    <menuitem id="customization-uidensity-menuitem-compact"
+              class="menuitem-iconic customization-uidensity-menuitem"
+              role="menuitemradio"
+              data-l10n-id="customize-mode-uidensity-menu-compact"
+              tabindex="0"
+              onfocus="gCustomizeMode.updateUIDensity(this.mode);"
+              onmouseover="gCustomizeMode.updateUIDensity(this.mode);"
+              onblur="gCustomizeMode.resetUIDensity();"
+              onmouseout="gCustomizeMode.resetUIDensity();"
+              oncommand="gCustomizeMode.setUIDensity(this.mode);"/>
+    <menuitem id="customization-uidensity-menuitem-normal"
+              class="menuitem-iconic customization-uidensity-menuitem"
+              role="menuitemradio"
+              data-l10n-id="customize-mode-uidensity-menu-normal"
+              tabindex="0"
+              onfocus="gCustomizeMode.updateUIDensity(this.mode);"
+              onmouseover="gCustomizeMode.updateUIDensity(this.mode);"
+              onblur="gCustomizeMode.resetUIDensity();"
+              onmouseout="gCustomizeMode.resetUIDensity();"
+              oncommand="gCustomizeMode.setUIDensity(this.mode);"/>
+#ifndef XP_MACOSX
+    <menuitem id="customization-uidensity-menuitem-touch"
+              class="menuitem-iconic customization-uidensity-menuitem"
+              role="menuitemradio"
+              data-l10n-id="customize-mode-uidensity-menu-touch"
+              tabindex="0"
+              onfocus="gCustomizeMode.updateUIDensity(this.mode);"
+              onmouseover="gCustomizeMode.updateUIDensity(this.mode);"
+              onblur="gCustomizeMode.resetUIDensity();"
+              onmouseout="gCustomizeMode.resetUIDensity();"
+              oncommand="gCustomizeMode.setUIDensity(this.mode);">
+    </menuitem>
+    <spacer hidden="true" id="customization-uidensity-touch-spacer"/>
+    <checkbox id="customization-uidensity-autotouchmode-checkbox"
+              hidden="true"
+              data-l10n-id="customize-mode-uidensity-auto-touch-mode-checkbox"
+              oncommand="gCustomizeMode.updateAutoTouchMode(this.checked)"/>
+#endif
+  </panel>
+</button>
+
+<button id="whimsy-button"
+        type="checkbox"
+        class="customizationmode-button"
+        oncommand="gCustomizeMode.togglePong(this.checked);"
+        hidden="true"/>
+
+<spacer id="customization-footer-spacer"/>
+<button id="customization-undo-reset-button"
+        class="customizationmode-button"
+        hidden="true"
+        oncommand="gCustomizeMode.undoReset();"
+        data-l10n-id="customize-mode-undo-cmd"/>
+<button id="customization-reset-button"
+        oncommand="gCustomizeMode.reset();"
+        data-l10n-id="customize-mode-restore-defaults"
+        class="customizationmode-button"/>
+<button id="customization-done-button"
+        oncommand="gCustomizeMode.exit();"
+        data-l10n-id="customize-mode-done"
+        class="customizationmode-button"/>
+</hbox>
diff --git a/comm/mail/components/customizableui/content/jar.mn b/comm/mail/components/customizableui/content/jar.mn
new file mode 100644
index 0000000000..db1978fdb0
--- /dev/null
+++ b/comm/mail/components/customizableui/content/jar.mn
@@ -0,0 +1,6 @@
+# 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/.
+
+messenger.jar:
+  content/messenger/panelUI.js
diff --git a/comm/mail/components/customizableui/content/moz.build b/comm/mail/components/customizableui/content/moz.build
new file mode 100644
index 0000000000..d988c0ff9b
--- /dev/null
+++ b/comm/mail/components/customizableui/content/moz.build
@@ -0,0 +1,7 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# 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/.
+
+JAR_MANIFESTS += ["jar.mn"]
diff --git a/comm/mail/components/customizableui/content/panelUI.inc.xhtml b/comm/mail/components/customizableui/content/panelUI.inc.xhtml
new file mode 100644
index 0000000000..3b965da756
--- /dev/null
+++ b/comm/mail/components/customizableui/content/panelUI.inc.xhtml
@@ -0,0 +1,606 @@
+<!-- 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/. -->
+
+<panel id="appMenu-popup"
+       class="cui-widget-panel panel-no-padding"
+       role="group"
+       type="arrow"
+       hidden="true"
+       flip="slide"
+       position="bottomright topright"
+       noautofocus="true">
+  <panelmultiview id="appMenu-multiView"
+                  mainViewId="appMenu-mainView"
+                  viewCacheId="appMenu-viewCache">
+
+    <!-- Main Appmenu View -->
+    <panelview id="appMenu-mainView" class="PanelUI-subView">
+      <vbox id="appMenu-mainViewItems"
+            class="panel-subview-body">
+        <vbox id="appMenu-addon-banners"/>
+        <toolbarbutton class="panel-banner-item"
+                       oncommand="PanelUI._onBannerItemSelected(event)"
+                       hidden="true"/>
+#ifdef NIGHTLY_BUILD
+        <toolbarbutton id="appmenu_signin"
+                       data-l10n-id="appmenu-signin-panel"
+                       class="subviewbutton subviewbutton-iconic"
+                       hidden="true"
+                       oncommand="gSync.initFxA();"/>
+        <toolbarbutton id="appmenu_sync"
+                       class="subviewbutton subviewbutton-iconic subviewbutton-nav"
+                       hidden="true"
+                       align="center"
+                       closemenu="none"
+                       oncommand="PanelUI.showSubView('appMenu-syncView', this)">
+          <hbox flex="1">
+            <html:img id="appmenu-sync-icon"
+                      class="toolbarbutton-icon"
+                      alt=""/>
+            <vbox flex="1">
+              <label id="appmenu-sync-sync"
+                     crop="end"
+                     data-l10n-id="appmenu-sync-sync"/>
+              <label id="appmenu-sync-account"
+                     class="appmenu-sync-account-email"
+                     crop="end"
+                     data-l10n-id="appmenu-sync-account"/>
+            </vbox>
+          </hbox>
+        </toolbarbutton>
+        <toolbarseparator id="syncSeparator" hidden="true"/>
+#endif
+        <toolbarbutton id="appmenu_new"
+                       data-l10n-id="appmenu-new-account-panel"
+                       class="subviewbutton subviewbutton-iconic subviewbutton-nav"
+                       closemenu="none"
+                       oncommand="PanelUI.showSubView('appMenu-newView', this)"/>
+        <toolbarbutton id="appmenu_create"
+                       data-l10n-id="appmenu-create-panel"
+                       class="subviewbutton subviewbutton-iconic subviewbutton-nav"
+                       closemenu="none"
+                       oncommand="PanelUI.showSubView('appMenu-createView', this)"/>
+        <toolbarseparator id="appmenu_createPopupMenuSeparator"/>
+        <toolbarbutton id="appmenu_open"
+                       class="subviewbutton subviewbutton-iconic subviewbutton-nav"
+                       data-l10n-id="appmenu-open-file-panel"
+                       closemenu="none"
+                       oncommand="PanelUI.showSubView('appMenu-openView', this)"/>
+        <toolbarseparator/>
+        <toolbarbutton id="appmenu_View"
+                       class="subviewbutton subviewbutton-iconic subviewbutton-nav"
+                       data-l10n-id="appmenu-view-panel"
+                       closemenu="none"
+                       oncommand="PanelUI.showSubView('appMenu-viewView', this)"/>
+        <toolbaritem id="appMenu-uiDensity-controls"
+                     class="subviewbutton subviewbutton-iconic toolbaritem-combined-buttons"
+                     closemenu="none">
+          <html:img class="toolbarbutton-icon" src="" alt=""/>
+          <label class="toolbarbutton-text" data-l10n-id="appmenu-mail-uidensity-value"/>
+          <toolbarbutton id="appmenu_uiDensityCompact"
+                         class="subviewbutton subviewbutton-iconic subviewbutton"
+                         data-l10n-id="appmenu-uidensity-compact"
+                         type="radio"
+                         oncommand="PanelUI.setUIDensity(event);"/>
+          <toolbarbutton id="appmenu_uiDensityNormal"
+                         class="subviewbutton subviewbutton-iconic subviewbutton"
+                         data-l10n-id="appmenu-uidensity-default"
+                         type="radio"
+                         oncommand="PanelUI.setUIDensity(event);"/>
+          <toolbarbutton id="appmenu_uiDensityTouch"
+                         class="subviewbutton subviewbutton-iconic subviewbutton"
+                         data-l10n-id="appmenu-uidensity-relaxed"
+                         type="radio"
+                         oncommand="PanelUI.setUIDensity(event);"/>
+        </toolbaritem>
+        <toolbaritem id="appMenu-fontSize-controls"
+                     class="subviewbutton subviewbutton-iconic toolbaritem-combined-buttons"
+                     closemenu="none">
+          <html:img class="toolbarbutton-icon" src="" alt=""/>
+          <label class="toolbarbutton-text" data-l10n-id="appmenu-font-size-value"/>
+          <toolbarbutton id="appMenu-fontSizeReduce-button"
+                         class="subviewbutton subviewbutton-iconic"
+                         oncommand="UIFontSize.reduceSize();"
+                         data-l10n-id="appmenuitem-font-size-reduce"/>
+          <toolbarbutton id="appMenu-fontSizeReset-button"
+                         class="subviewbutton"
+                         oncommand="UIFontSize.resetSize();"
+                         tooltip="fontSizeReset"/>
+          <toolbarbutton id="appMenu-fontSizeEnlarge-button"
+                         class="subviewbutton subviewbutton-iconic"
+                         oncommand="UIFontSize.increaseSize();"
+                         data-l10n-id="appmenuitem-font-size-enlarge"/>
+        </toolbaritem>
+        <toolbarseparator/>
+        <toolbarbutton id="appmenu_preferences"
+                       class="subviewbutton subviewbutton-iconic"
+                       data-l10n-id="appmenu-settings"
+                       oncommand="openOptionsDialog();"/>
+        <toolbarbutton id="appmenu_accountmgr"
+                       class="subviewbutton subviewbutton-iconic"
+                       label="&accountManagerCmd2.label;"
+                       oncommand="MsgAccountManager(null);"/>
+        <toolbarbutton id="appmenu_addons"
+                       class="subviewbutton subviewbutton-iconic"
+                       data-l10n-id="appmenu-addons-and-themes"
+                       oncommand="openAddonsMgr();"/>
+        <toolbarseparator/>
+        <toolbarbutton id="appmenu_toolsMenu"
+                       class="subviewbutton subviewbutton-iconic subviewbutton-nav"
+                       data-l10n-id="appmenu-tools-panel"
+                       closemenu="none"
+                       oncommand="PanelUI.showSubView('appMenu-toolsView', this)"/>
+        <toolbarbutton id="appmenu_help"
+                       class="subviewbutton subviewbutton-iconic subviewbutton-nav"
+                       data-l10n-id="menu-help-help-title"
+                       closemenu="none"
+                       oncommand="buildHelpMenu(); PanelUI.showSubView('appMenu-helpView', this)"/>
+        <toolbarseparator/>
+        <toolbarbutton id="appmenu-quit"
+                       class="subviewbutton subviewbutton-iconic"
+                       data-l10n-id="menu-quit"
+                       key="key_quitApplication"
+                       command="cmd_quitApplication"/>
+      </vbox>
+    </panelview>
+#ifdef NIGHTLY_BUILD
+    <!-- Sync -->
+    <panelview id="appMenu-syncView"
+               data-l10n-id="appmenu-sync-panel-title"
+               class="PanelUI-subView">
+      <vbox id="appMenu-syncViewItems"
+            class="panel-subview-body">
+        <toolbarbutton id="appmenu_manageSyncAccountMenuItem"
+                       class="subviewbutton subviewbutton-iconic"
+                       align="center"
+                       oncommand="gSync.openFxAManagePage();">
+          <hbox flex="1">
+            <html:img id="appmenu-manage-sync-icon"
+                      class="toolbarbutton-icon"
+                      alt=""/>
+            <vbox flex="1">
+              <label id="appmenu-sync-menu-manage"
+                     crop="end"
+                     data-l10n-id="appmenu-sync-manage"/>
+              <label id="appmenu-sync-menu-account"
+                     class="appmenu-sync-account-email"
+                     crop="end"
+                     data-l10n-id="appmenu-sync-account"/>
+            </vbox>
+          </hbox>
+        </toolbarbutton>
+
+        <toolbarbutton id="appmenu-submenu-sync-now"
+                       class="subviewbutton subviewbutton-iconic"
+                       data-l10n-id="appmenu-sync-now"
+                       closemenu="none"
+                       oncommand="Weave.Service.sync({});"/>
+        <toolbarbutton id="appmenu-submenu-sync-settings"
+                       class="subviewbutton subviewbutton-iconic"
+                       data-l10n-id="appmenu-sync-settings"
+                       oncommand="openPreferencesTab('sync');"/>
+        <toolbarseparator/>
+        <toolbarbutton id="appmenu-submenu-sync-sign-out"
+                       class="subviewbutton subviewbutton-iconic"
+                       data-l10n-id="appmenu-sync-sign-out"
+                       oncommand="gSync.disconnect({ confirm: true });"/>
+      </vbox>
+    </panelview>
+#endif
+    <!-- New -->
+    <panelview id="appMenu-newView"
+               data-l10n-id="appmenu-new-account-panel-title"
+               class="PanelUI-subView">
+      <vbox id="appMenu-newViewItems"
+            class="panel-subview-body">
+        <toolbarbutton id="appmenu_newCreateEmailAccountMenuItem"
+                       class="subviewbutton subviewbutton-iconic"
+                       data-l10n-id="appmenu-create-new-mail-account"
+                       oncommand="openAccountProvisionerTab();"/>
+        <toolbarbutton id="appmenu_newMailAccountMenuItem"
+                       class="subviewbutton subviewbutton-iconic"
+                       data-l10n-id="appmenu-new-mail-account"
+                       oncommand="openAccountSetupTab();"/>
+#ifdef MAIN_WINDOW
+        <toolbarbutton id="appmenu_calendar-new-calendar-menu-item"
+                       class="subviewbutton subviewbutton-iconic"
+                       data-l10n-id="appmenu-new-calendar"
+                       command="calendar_new_calendar_command"/>
+#endif
+        <toolbarbutton id="appmenu_newAB"
+                       class="subviewbutton subviewbutton-iconic subviewbutton-nav"
+                       data-l10n-id="appmenu-newab-panel"
+                       closemenu="none"
+                       oncommand="PanelUI.showSubView('appMenu-newabView', this)"/>
+        <toolbarbutton id="appmenu_newIMAccountMenuItem"
+                       class="subviewbutton subviewbutton-iconic"
+                       data-l10n-id="appmenu-new-chat-account"
+                       oncommand="openIMAccountWizard();"/>
+        <toolbarbutton id="appmenu_newFeedAccountMenuItem"
+                       class="subviewbutton subviewbutton-iconic"
+                       data-l10n-id="appmenu-new-feed"
+                       oncommand="AddFeedAccount();"/>
+        <toolbarbutton id="appmenu_newNewsgroupAccountMenuItem"
+                       class="subviewbutton subviewbutton-iconic"
+                       data-l10n-id="appmenu-new-newsgroup"
+                       oncommand="openNewsgroupAccountWizard();"/>
+      </vbox>
+    </panelview>
+
+    <!-- New AB -->
+    <panelview id="appMenu-newabView"
+               data-l10n-id="appmenu-newab-panel-title"
+               class="PanelUI-subView">
+      <vbox id="appMenu-newABItems"
+            class="panel-subview-body">
+        <toolbarbutton id="appmenu_newABMenuItem"
+                       class="subviewbutton subviewbutton-iconic"
+                       data-l10n-id="appmenu-new-addressbook"
+                       oncommand="openNewABDialog();"/>
+        <toolbarbutton id="appmenu_newCardDAVMenuItem"
+                       class="subviewbutton subviewbutton-iconic"
+                       data-l10n-id="appmenu-new-carddav"
+                       oncommand="openNewABDialog('CARDDAV');"/>
+        <toolbarbutton id="appmenu_newLdapMenuItem"
+                       class="subviewbutton subviewbutton-iconic"
+                       data-l10n-id="appmenu-new-ldap"
+                       oncommand="openNewABDialog('LDAP');"/>
+      </vbox>
+    </panelview>
+
+    <!-- Create -->
+    <panelview id="appMenu-createView"
+               data-l10n-id="appmenu-create-panel-title"
+               class="PanelUI-subView">
+      <vbox id="appMenu-createViewItems"
+            class="panel-subview-body">
+        <toolbarbutton id="appmenu_newNewMsgCmd"
+                       class="subviewbutton subviewbutton-iconic"
+                       data-l10n-id="appmenu-create-message"
+                       key = "key_newMessage2"
+                       command="cmd_newMessage"/>
+#ifdef MAIN_WINDOW
+        <toolbarbutton id="appmenu_calendar-new-event-menu-item"
+                       class="subviewbutton subviewbutton-iconic hide-when-calendar-deactivated"
+                       data-l10n-id="appmenu-create-event"
+                       command="calendar_new_event_command"/>
+        <toolbarbutton id="appmenu_calendar-new-task-menu-item"
+                       class="subviewbutton subviewbutton-iconic hide-when-calendar-deactivated"
+                       data-l10n-id="appmenu-create-task"
+                       command="calendar_new_todo_command"/>
+#endif
+        <toolbarbutton id="appmenu_newCard"
+                       class="subviewbutton subviewbutton-iconic"
+                       data-l10n-id="appmenu-create-contact"
+                       command="cmd_newCard"/>
+      </vbox>
+    </panelview>
+
+    <!-- Open -->
+    <panelview id="appMenu-openView"
+               data-l10n-id="appmenu-open-file-panel-title"
+               class="PanelUI-subView">
+      <vbox id="appMenu-openViewItems"
+            class="panel-subview-body">
+        <toolbarbutton id="appmenu_OpenMessageFileMenuitem"
+                       class="subviewbutton subviewbutton-iconic"
+                       data-l10n-id="appmenu-open-message"
+                       oncommand="MsgOpenFromFile();"/>
+        <toolbarbutton id="appmenu_OpenCalendarFileMenuitem"
+                       class="subviewbutton subviewbutton-iconic"
+                       data-l10n-id="appmenu-open-calendar"
+                       oncommand="openLocalCalendar();"/>
+      </vbox>
+    </panelview>
+
+    <!-- View / Toolbars -->
+    <panelview id="appMenu-toolbarsView"
+               title="&viewToolbarsMenu.label;"
+               class="PanelUI-subView">
+      <vbox class="panel-subview-body">
+#ifdef MAIN_WINDOW
+        <toolbarbutton id="appmenu_quickFilterBar"
+                       class="subviewbutton subviewbutton-iconic"
+                       type="checkbox"
+                       closemenu="none"
+                       data-l10n-id="quick-filter-bar-toggle"
+                       command="cmd_toggleQuickFilterBar"/>
+        <toolbarbutton id="appmenu_spacesToolbar"
+                       class="subviewbutton subviewbutton-iconic"
+                       type="checkbox"
+                       data-l10n-id="menu-spaces-toolbar-button"
+                       closemenu="none"
+                       oncommand="gSpacesToolbar.toggleToolbarFromMenu();"/>
+#endif
+        <toolbarbutton id="appmenu_showStatusbar"
+                       class="subviewbutton subviewbutton-iconic"
+                       type="checkbox"
+                       label="&showTaskbarCmd.label;"
+                       oncommand="goToggleToolbar('status-bar', 'menu_showTaskbar')"
+                       closemenu="none"
+                       checked="true"
+                       observes="menu_showTaskbar"/>
+        <toolbarseparator id="appmenu_toggleToolbarsSeparator"/>
+        <toolbarbutton id="appmenu_toolbarLayout"
+                       class="subviewbutton subviewbutton-iconic"
+                       label="&appmenuToolbarLayout.label;"
+                       command="cmd_CustomizeMailToolbar"/>
+      </vbox>
+    </panelview>
+
+    <!-- View / Layout -->
+    <panelview id="appMenu-preferencesLayoutView"
+               title="&messagePaneLayoutStyle.label;"
+               class="PanelUI-subView">
+      <vbox class="panel-subview-body">
+        <toolbarbutton id="appmenu_messagePaneClassic"
+                       class="subviewbutton subviewbutton-iconic"
+                       type="radio"
+                       label="&messagePaneClassic.label;"
+                       name="viewlayoutgroup"
+                       command="cmd_viewClassicMailLayout"/>
+        <toolbarbutton id="appmenu_messagePaneWide"
+                       class="subviewbutton subviewbutton-iconic"
+                       type="radio"
+                       label="&messagePaneWide.label;"
+                       name="viewlayoutgroup"
+                       command="cmd_viewWideMailLayout"/>
+        <toolbarbutton id="appmenu_messagePaneVertical"
+                       class="subviewbutton subviewbutton-iconic"
+                       type="radio"
+                       label="&messagePaneVertical.label;"
+                       name="viewlayoutgroup"
+                       command="cmd_viewVerticalMailLayout"/>
+        <toolbarseparator id="appmenu_viewMenuAfterPaneVerticalSeparator"/>
+        <toolbarbutton id="appmenu_showFolderPane"
+                       class="subviewbutton subviewbutton-iconic"
+                       type="checkbox"
+                       closemenu="none"
+                       label="&showFolderPaneCmd.label;"
+                       command="cmd_toggleFolderPane"/>
+        <toolbarbutton id="appmenu_toggleThreadPaneHeader"
+                       class="subviewbutton subviewbutton-iconic"
+                       type="checkbox"
+                       name="threadheader"
+                       closemenu="none"
+                       data-l10n-id="appmenuitem-toggle-thread-pane-header"
+                       command="cmd_toggleThreadPaneHeader"/>
+        <toolbarbutton id="appmenu_showMessage"
+                       class="subviewbutton subviewbutton-iconic"
+                       type="checkbox"
+                       closemenu="none"
+                       label="&showMessageCmd.label;"
+                       key="key_toggleMessagePane"
+                       command="cmd_toggleMessagePane"/>
+        <toolbarseparator/>
+        <toolbarbutton id="appmenu_calShowTodayPane-2"
+                       class="subviewbutton subviewbutton-iconic"
+                       label="&todaypane.showTodayPane.label;"
+                       type="checkbox"
+                       command="calendar_toggle_todaypane_command"/>
+      </vbox>
+    </panelview>
+
+    <!-- View -->
+    <panelview id="appMenu-viewView"
+               class="PanelUI-subView"
+               data-l10n-id="appmenu-view-panel-title">
+      <vbox id="appMenu-viewViewItems"
+            class="panel-subview-body">
+        <toolbarbutton id="appmenu_Toolbars"
+                       class="subviewbutton subviewbutton-iconic subviewbutton-nav"
+                       label="&viewToolbarsMenu.label;"
+                       accesskey="&viewToolbarsMenu.accesskey;"
+                       closemenu="none"
+                       oncommand="PanelUI.showSubView('appMenu-toolbarsView', this)"/>
+        <toolbarbutton id="appmenu_MessagePaneLayout"
+                       class="subviewbutton subviewbutton-iconic subviewbutton-nav"
+                       label="&messagePaneLayoutStyle.label;"
+                       closemenu="none"
+                       oncommand="PanelUI.showSubView('appMenu-preferencesLayoutView', this)"/>
+        <toolbarbutton id="appmenu_FolderViews"
+                       class="subviewbutton subviewbutton-iconic subviewbutton-nav"
+                       label="&folderView.label;"
+                       closemenu="none"
+                       oncommand="PanelUI.showSubView('appMenu-foldersView', this)"/>
+      </vbox>
+    </panelview>
+
+    <!-- View / Folders -->
+    <panelview id="appMenu-foldersView"
+               title="&folderView.label;"
+               class="PanelUI-subView">
+      <vbox class="panel-subview-body">
+        <toolbarbutton id="appmenu_toggleFolderHeader"
+                       class="subviewbutton subviewbutton-iconic"
+                       name="paneheader"
+                       value="toggle-header"
+                       data-l10n-id="menu-view-folders-toggle-header"
+                       type="checkbox"
+                       closemenu="none"
+                       oncommand="PanelUI.folderViewMenuOnCommand(event);"/>
+        <toolbarseparator id="appmenu_folderModesSeparator"/>
+        <toolbarbutton id="appmenu_allFolders"
+                       class="subviewbutton subviewbutton-iconic"
+                       value="all"
+                       data-l10n-id="show-all-folders-label"
+                       type="checkbox"
+                       name="viewmessages"
+                       closemenu="none"
+                       oncommand="PanelUI.folderViewMenuOnCommand(event);"/>
+        <toolbarbutton id="appmenu_smartFolders"
+                       class="subviewbutton subviewbutton-iconic"
+                       value="smart"
+                       data-l10n-id="show-smart-folders-label"
+                       type="checkbox"
+                       name="viewmessages"
+                       closemenu="none"
+                       oncommand="PanelUI.folderViewMenuOnCommand(event);"/>
+        <toolbarbutton id="appmenu_unreadFolders"
+                       class="subviewbutton subviewbutton-iconic"
+                       value="unread"
+                       data-l10n-id="show-unread-folders-label"
+                       type="checkbox"
+                       name="viewmessages"
+                       closemenu="none"
+                       oncommand="PanelUI.folderViewMenuOnCommand(event);"/>
+        <toolbarbutton id="appmenu_favoriteFolders"
+                       class="subviewbutton subviewbutton-iconic"
+                       value="favorite"
+                       data-l10n-id="show-favorite-folders-label"
+                       type="checkbox"
+                       name="viewmessages"
+                       closemenu="none"
+                       oncommand="PanelUI.folderViewMenuOnCommand(event);"/>
+        <toolbarbutton id="appmenu_recentFolders"
+                       class="subviewbutton subviewbutton-iconic"
+                       value="recent"
+                       data-l10n-id="show-recent-folders-label"
+                       type="checkbox"
+                       name="viewmessages"
+                       closemenu="none"
+                       oncommand="PanelUI.folderViewMenuOnCommand(event);"/>
+        <toolbarseparator/>
+        <toolbarbutton id="appmenu_tagsFolders"
+                       class="subviewbutton subviewbutton-iconic"
+                       value="tags"
+                       data-l10n-id="show-tags-folders-label"
+                       type="checkbox"
+                       name="viewmessages"
+                       closemenu="none"
+                       oncommand="PanelUI.folderViewMenuOnCommand(event);"/>
+        <toolbarseparator id="appmenu_compactPropertiesSeparator"/>
+        <toolbarbutton id="appmenu_compactMode"
+                       class="subviewbutton subviewbutton-iconic"
+                       value="compact"
+                       data-l10n-id="folder-toolbar-toggle-folder-compact-view"
+                       type="checkbox"
+                       name="viewmessages"
+                       closemenu="none"
+                       oncommand="PanelUI.folderCompactMenuOnCommand(event)"/>
+        <toolbarseparator id="appmenu_favoritePropertiesSeparator"/>
+        <toolbarbutton id="appmenu_favoriteFolder"
+                       class="subviewbutton subviewbutton-iconic"
+                       type="checkbox"
+                       label="&menuFavoriteFolder.label;"
+                       checked="false"
+                       command="cmd_toggleFavoriteFolder"/>
+        <toolbarbutton id="appmenu_properties"
+                       class="subviewbutton subviewbutton-iconic"
+                       command="cmd_properties"/>
+      </vbox>
+    </panelview>
+
+    <!-- View / Messages / Tags -->
+    <!-- Dynamically populated when shown. -->
+    <panelview id="appMenu-viewMessagesTagsView"
+               title="&viewTags.label;"
+               class="PanelUI-subView"
+               oncommand="ViewChangeByMenuitem(event.target);">
+      <vbox class="panel-subview-body"/>
+    </panelview>
+
+    <!-- View / Messages / Custom Views -->
+    <!-- Dynamically populated when shown. -->
+    <panelview id="appMenu-viewMessagesCustomViewsView"
+               title="&viewCustomViews.label;"
+               class="PanelUI-subView"
+               oncommand="ViewChangeByMenuitem(event.target);">
+      <vbox class="panel-subview-body"/>
+    </panelview>
+
+    <!-- Tools -->
+    <panelview id="appMenu-toolsView"
+               data-l10n-id="appmenu-tools-panel-title"
+               class="PanelUI-subView">
+      <vbox class="panel-subview-body">
+        <toolbarbutton id="appmenu_import"
+                       class="subviewbutton subviewbutton-iconic"
+                       data-l10n-id="appmenu-tools-import"
+                       oncommand="toImport();"/>
+        <toolbarbutton id="appmenu_export"
+                       class="subviewbutton subviewbutton-iconic"
+                       data-l10n-id="appmenu-tools-export"
+                       oncommand="toExport();"/>
+        <toolbarseparator id="importExportSeparator"/>
+        <toolbarbutton id="appmenu_searchCmd"
+                       class="subviewbutton subviewbutton-iconic"
+                       data-l10n-id="appmenu-tools-message-search"
+                       key="key_searchMail"
+                       command="cmd_searchMessages"/>
+        <toolbarbutton id="appmenu_filtersCmd"
+                       class="subviewbutton subviewbutton-iconic"
+                       data-l10n-id="appmenu-tools-message-filters"
+                       oncommand="MsgFilters();"/>
+        <toolbarbutton id="appmenu_manageKeysOpenPGP"
+                       class="subviewbutton subviewbutton-iconic"
+                       data-l10n-id="openpgp-manage-keys-openpgp-cmd"
+                       oncommand="openKeyManager()"/>
+        <toolbarbutton id="appmenu_openSavedFilesWnd"
+                       class="subviewbutton subviewbutton-iconic"
+                       data-l10n-id="appmenu-tools-download-manager"
+                       key="key_savedFiles"
+                       oncommand="openSavedFilesWnd();"/>
+        <toolbarbutton id="appmenu_activityManager"
+                       class="subviewbutton subviewbutton-iconic"
+                       data-l10n-id="appmenu-tools-activity-manager"
+                       oncommand="openActivityMgr();"/>
+        <toolbarseparator id="devToolsSeparator"/>
+        <toolbarbutton id="appmenu_devtoolsToolbox"
+                       class="subviewbutton subviewbutton-iconic"
+                       data-l10n-id="appmenu-tools-dev-tools"
+                       key="key_devtoolsToolbox"
+                       oncommand="BrowserToolboxLauncher.init();"/>
+      </vbox>
+    </panelview>
+
+    <!-- Help -->
+    <panelview id="appMenu-helpView"
+               data-l10n-id="appmenu-help-panel-title"
+               class="PanelUI-subView">
+      <vbox class="panel-subview-body">
+        <toolbarbutton id="appmenu_openHelp"
+                       class="subviewbutton subviewbutton-iconic"
+                       data-l10n-id="appmenu-help-get-help"
+                       key="key_openHelp"
+                       oncommand="openSupportURL();"/>
+        <toolbarbutton id="appmenu_openTour"
+                       class="subviewbutton subviewbutton-iconic"
+                       data-l10n-id="appmenu-help-explore-features"
+                       oncommand="openLinkText(event, 'tourURL');"/>
+        <toolbarbutton id="appmenu_keyboardShortcuts"
+                       class="subviewbutton subviewbutton-iconic"
+                       data-l10n-id="appmenu-help-shortcuts"
+                       oncommand="openLinkText(event, 'keyboardShortcutsURL');"/>
+        <toolbarseparator/>
+        <toolbarbutton id="appmenu_getInvolved"
+                       class="subviewbutton subviewbutton-iconic"
+                       data-l10n-id="appmenu-help-get-involved"
+                       oncommand="openLinkText(event, 'getInvolvedURL');"/>
+        <toolbarbutton id="appmenu_makeDonation"
+                       class="subviewbutton subviewbutton-iconic"
+                       data-l10n-id="appmenu-help-donation"
+                       oncommand="openLinkText(event, 'donateURL');"/>
+        <toolbarbutton id="appmenu_submitFeedback"
+                       class="subviewbutton subviewbutton-iconic"
+                       data-l10n-id="appmenu-help-share-feedback"
+                       oncommand="openLinkText(event, 'feedbackURL');"/>
+        <toolbarseparator/>
+        <toolbarbutton id="appmenu_troubleshootMode"
+                       class="subviewbutton subviewbutton-iconic"
+                       data-l10n-id="appmenu-help-enter-troubleshoot-mode2"
+                       oncommand="safeModeRestart();"/>
+        <toolbarbutton id="appmenu_troubleshootingInfo"
+                       class="subviewbutton subviewbutton-iconic"
+                       data-l10n-id="appmenu-help-troubleshooting-info"
+                       oncommand="openAboutSupport();"/>
+        <toolbarseparator/>
+        <toolbarbutton id="appmenu_about"
+                       class="subviewbutton subviewbutton-iconic"
+                       data-l10n-id="appmenu-help-about-product"
+                       oncommand="openAboutDialog();"/>
+      </vbox>
+    </panelview>
+  </panelmultiview>
+</panel>
diff --git a/comm/mail/components/customizableui/content/panelUI.js b/comm/mail/components/customizableui/content/panelUI.js
new file mode 100644
index 0000000000..bad418abb4
--- /dev/null
+++ b/comm/mail/components/customizableui/content/panelUI.js
@@ -0,0 +1,882 @@
+/* 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-globals-from ../../../base/content/globalOverlay.js */
+/* import-globals-from ../../../base/content/mailCore.js */
+/* import-globals-from ../../../base/content/mailWindowOverlay.js */
+/* import-globals-from ../../../base/content/messenger.js */
+/* import-globals-from ../../../extensions/mailviews/content/msgViewPickerOverlay.js */
+
+var { ExtensionParent } = ChromeUtils.importESModule(
+  "resource://gre/modules/ExtensionParent.sys.mjs"
+);
+var { ExtensionSupport } = ChromeUtils.import(
+  "resource:///modules/ExtensionSupport.jsm"
+);
+var { ShortcutUtils } = ChromeUtils.importESModule(
+  "resource://gre/modules/ShortcutUtils.sys.mjs"
+);
+var { AppConstants } = ChromeUtils.importESModule(
+  "resource://gre/modules/AppConstants.sys.mjs"
+);
+var { UIDensity } = ChromeUtils.import("resource:///modules/UIDensity.jsm");
+var { XPCOMUtils } = ChromeUtils.importESModule(
+  "resource://gre/modules/XPCOMUtils.sys.mjs"
+);
+
+ChromeUtils.defineESModuleGetters(this, {
+  AppMenuNotifications: "resource://gre/modules/AppMenuNotifications.sys.mjs",
+  CustomizableUI: "resource:///modules/CustomizableUI.sys.mjs",
+  PanelMultiView: "resource:///modules/PanelMultiView.sys.mjs",
+});
+ChromeUtils.defineModuleGetter(
+  this,
+  "ExtensionsUI",
+  "resource:///modules/ExtensionsUI.jsm"
+);
+
+/**
+ * Maintains the state and dispatches events for the main menu panel.
+ */
+const PanelUI = {
+  /** Panel events that we listen for. */
+  get kEvents() {
+    return [
+      "popupshowing",
+      "popupshown",
+      "popuphiding",
+      "popuphidden",
+      "ViewShowing",
+    ];
+  },
+  /**
+   * Used for lazily getting and memoizing elements from the document. Lazy
+   * getters are set in init, and memoizing happens after the first retrieval.
+   */
+  get kElements() {
+    return {
+      mainView: "appMenu-mainView",
+      multiView: "appMenu-multiView",
+      menuButton: "button-appmenu",
+      panel: "appMenu-popup",
+      addonNotificationContainer: "appMenu-addon-banners",
+      navbar: "mail-bar3",
+    };
+  },
+
+  kAppMenuButtons: new Set(),
+
+  _initialized: false,
+  _notifications: null,
+
+  init() {
+    this._initElements();
+    this.initAppMenuButton("button-appmenu", "mail-toolbox");
+
+    this.menuButton = this.menuButtonMail;
+
+    Services.obs.addObserver(this, "fullscreen-nav-toolbox");
+    Services.obs.addObserver(this, "appMenu-notifications");
+
+    XPCOMUtils.defineLazyPreferenceGetter(
+      this,
+      "autoHideToolbarInFullScreen",
+      "browser.fullscreen.autohide",
+      false,
+      (pref, previousValue, newValue) => {
+        // On OSX, or with autohide preffed off, MozDOMFullscreen is the only
+        // event we care about, since fullscreen should behave just like non
+        // fullscreen. Otherwise, we don't want to listen to these because
+        // we'd just be spamming ourselves with both of them whenever a user
+        // opened a video.
+        if (newValue) {
+          window.removeEventListener("MozDOMFullscreen:Entered", this);
+          window.removeEventListener("MozDOMFullscreen:Exited", this);
+          window.addEventListener("fullscreen", this);
+        } else {
+          window.addEventListener("MozDOMFullscreen:Entered", this);
+          window.addEventListener("MozDOMFullscreen:Exited", this);
+          window.removeEventListener("fullscreen", this);
+        }
+
+        this._updateNotifications(false);
+      },
+      autoHidePref => autoHidePref && Services.appinfo.OS !== "Darwin"
+    );
+
+    if (this.autoHideToolbarInFullScreen) {
+      window.addEventListener("fullscreen", this);
+    } else {
+      window.addEventListener("MozDOMFullscreen:Entered", this);
+      window.addEventListener("MozDOMFullscreen:Exited", this);
+    }
+
+    window.addEventListener("activate", this);
+
+    Services.obs.notifyObservers(
+      null,
+      "appMenu-notifications-request",
+      "refresh"
+    );
+
+    this._initialized = true;
+  },
+
+  _initElements() {
+    for (let [k, v] of Object.entries(this.kElements)) {
+      // Need to do fresh let-bindings per iteration
+      let getKey = k;
+      let id = v;
+      this.__defineGetter__(getKey, function () {
+        delete this[getKey];
+        // eslint-disable-next-line consistent-return
+        return (this[getKey] = document.getElementById(id));
+      });
+    }
+  },
+
+  initAppMenuButton(id, toolboxId) {
+    let button = document.getElementById(id);
+    if (!button) {
+      // If not in the document, the button should be in the toolbox palette,
+      // which isn't part of the document.
+      let toolbox = document.getElementById(toolboxId);
+      if (toolbox) {
+        button = toolbox.palette.querySelector(`#${id}`);
+      }
+    }
+
+    if (button) {
+      button.addEventListener("mousedown", PanelUI);
+      button.addEventListener("keypress", PanelUI);
+
+      this.kAppMenuButtons.add(button);
+    }
+  },
+
+  _eventListenersAdded: false,
+  _ensureEventListenersAdded() {
+    if (this._eventListenersAdded) {
+      return;
+    }
+    this._addEventListeners();
+  },
+
+  _addEventListeners() {
+    for (let event of this.kEvents) {
+      this.panel.addEventListener(event, this);
+    }
+    this._eventListenersAdded = true;
+  },
+
+  _removeEventListeners() {
+    for (let event of this.kEvents) {
+      this.panel.removeEventListener(event, this);
+    }
+    this._eventListenersAdded = false;
+  },
+
+  uninit() {
+    this._removeEventListeners();
+
+    Services.obs.removeObserver(this, "fullscreen-nav-toolbox");
+    Services.obs.removeObserver(this, "appMenu-notifications");
+
+    window.removeEventListener("MozDOMFullscreen:Entered", this);
+    window.removeEventListener("MozDOMFullscreen:Exited", this);
+    window.removeEventListener("fullscreen", this);
+    window.removeEventListener("activate", this);
+
+    [this.menuButtonMail, this.menuButtonChat].forEach(button => {
+      // There's no chat button in the messageWindow.xhtml context.
+      if (button) {
+        button.removeEventListener("mousedown", this);
+        button.removeEventListener("keypress", this);
+      }
+    });
+  },
+
+  /**
+   * Opens the menu panel if it's closed, or closes it if it's open.
+   *
+   * @param event the event that triggers the toggle.
+   */
+  toggle(event) {
+    // Don't show the panel if the window is in customization mode,
+    // since this button doubles as an exit path for the user in this case.
+    if (document.documentElement.hasAttribute("customizing")) {
+      return;
+    }
+
+    // Since we have several menu buttons, make sure the current one is used.
+    // This works for now, but in the long run, if we're showing badges etc.
+    // then the current menuButton needs to be set when the app's view/tab
+    // changes, not just when the menu is toggled.
+    this.menuButton = event.target;
+
+    this._ensureEventListenersAdded();
+    if (this.panel.state == "open") {
+      this.hide();
+    } else if (this.panel.state == "closed") {
+      this.show(event);
+    }
+  },
+
+  /**
+   * Opens the menu panel. If the event target has a child with the
+   * toolbarbutton-icon attribute, the panel will be anchored on that child.
+   * Otherwise, the panel is anchored on the event target itself.
+   *
+   * @param aEvent the event (if any) that triggers showing the menu.
+   */
+  show(aEvent) {
+    this._ensureShortcutsShown();
+    (async () => {
+      await this.ensureReady();
+
+      if (
+        this.panel.state == "open" ||
+        document.documentElement.hasAttribute("customizing")
+      ) {
+        return;
+      }
+
+      let domEvent = null;
+      if (aEvent && aEvent.type != "command") {
+        domEvent = aEvent;
+      }
+
+      // We try to use the event.target to account for clicks triggered
+      // from the #button-chat-appmenu. In case the opening of the menu isn't
+      // triggered by a click event, fallback to the main menu button as anchor.
+      let anchor = this._getPanelAnchor(
+        aEvent ? aEvent.target : this.menuButton
+      );
+      await PanelMultiView.openPopup(this.panel, anchor, {
+        triggerEvent: domEvent,
+      });
+    })().catch(console.error);
+  },
+
+  /**
+   * If the menu panel is being shown, hide it.
+   */
+  hide() {
+    if (document.documentElement.hasAttribute("customizing")) {
+      return;
+    }
+
+    PanelMultiView.hidePopup(this.panel);
+  },
+
+  observe(subject, topic, status) {
+    switch (topic) {
+      case "fullscreen-nav-toolbox":
+        if (this._notifications) {
+          this._updateNotifications(false);
+        }
+        break;
+      case "appMenu-notifications":
+        // Don't initialize twice.
+        if (status == "init" && this._notifications) {
+          break;
+        }
+        this._notifications = AppMenuNotifications.notifications;
+        this._updateNotifications(true);
+        break;
+    }
+  },
+
+  handleEvent(event) {
+    // Ignore context menus and menu button menus showing and hiding:
+    if (event.type.startsWith("popup") && event.target != this.panel) {
+      return;
+    }
+    switch (event.type) {
+      case "popupshowing":
+        initAppMenuPopup();
+      // Fall through
+      case "popupshown":
+        if (event.type == "popupshown") {
+          CustomizableUI.addPanelCloseListeners(this.panel);
+        }
+      // Fall through
+      case "popuphiding":
+      // Fall through
+      case "popuphidden":
+        this._updateNotifications();
+        this._updatePanelButton(event.target);
+        if (event.type == "popuphidden") {
+          CustomizableUI.removePanelCloseListeners(this.panel);
+        }
+        break;
+      case "mousedown":
+        if (event.button == 0) {
+          this.toggle(event);
+        }
+        break;
+      case "keypress":
+        if (event.key == " " || event.key == "Enter") {
+          this.toggle(event);
+          event.stopPropagation();
+        }
+        break;
+      case "MozDOMFullscreen:Entered":
+      case "MozDOMFullscreen:Exited":
+      case "fullscreen":
+      case "activate":
+        this._updateNotifications();
+        break;
+      case "ViewShowing":
+        PanelUI._handleViewShowingEvent(event);
+        break;
+    }
+  },
+
+  /**
+   * When a ViewShowing event happens when a <panelview> element is shown,
+   * do any required set up for that particular view.
+   *
+   * @param {ViewShowingEvent} event - ViewShowing event.
+   */
+  _handleViewShowingEvent(event) {
+    // Typically event.target for "ViewShowing" is a <panelview> element.
+    PanelUI._ensureShortcutsShown(event.target);
+
+    switch (event.target.id) {
+      case "appMenu-foldersView":
+        this._onFoldersViewShow(event);
+        break;
+      case "appMenu-addonsView":
+        initAddonPrefsMenu(
+          event.target.querySelector(".panel-subview-body"),
+          "toolbarbutton",
+          "subviewbutton subviewbutton-iconic",
+          "subviewbutton subviewbutton-iconic"
+        );
+        break;
+      case "appMenu-toolbarsView":
+        onViewToolbarsPopupShowing(
+          event,
+          "mail-toolbox",
+          document.getElementById("appmenu_quickFilterBar"),
+          "toolbarbutton",
+          "subviewbutton subviewbutton-iconic",
+          true
+        );
+        break;
+      case "appMenu-preferencesLayoutView":
+        PanelUI._onPreferencesLayoutViewShow(event);
+        break;
+      // View
+      case "appMenu-viewMessagesTagsView":
+        PanelUI._refreshDynamicView(event, RefreshTagsPopup);
+        break;
+      case "appMenu-viewMessagesCustomViewsView":
+        PanelUI._refreshDynamicView(event, RefreshCustomViewsPopup);
+        break;
+    }
+  },
+
+  /**
+   * Refreshes some views that are dynamically populated. Typically called by
+   * event listeners responding to a ViewShowing event. It calls a given refresh
+   * function (that populates the view), passing appmenu-specific arguments.
+   *
+   * @param {ViewShowingEvent} event - ViewShowing event.
+   * @param {Function} refreshFunction - Function that refreshes a particular view.
+   */
+  _refreshDynamicView(event, refreshFunction) {
+    refreshFunction(
+      event.target.querySelector(".panel-subview-body"),
+      "toolbarbutton",
+      "subviewbutton subviewbutton-iconic",
+      "toolbarseparator"
+    );
+  },
+
+  get isReady() {
+    return !!this._isReady;
+  },
+
+  /**
+   * Registering the menu panel is done lazily for performance reasons. This
+   * method is exposed so that CustomizationMode can force panel-readyness in the
+   * event that customization mode is started before the panel has been opened
+   * by the user.
+   *
+   * @param aCustomizing (optional) set to true if this was called while entering
+   *        customization mode. If that's the case, we trust that customization
+   *        mode will handle calling beginBatchUpdate and endBatchUpdate.
+   *
+   * @returns a Promise that resolves once the panel is ready to roll.
+   */
+  async ensureReady() {
+    if (this._isReady) {
+      return;
+    }
+
+    await window.delayedStartupPromise;
+    this._ensureEventListenersAdded();
+    this.panel.hidden = false;
+    this._isReady = true;
+  },
+
+  /**
+   * Shows a subview in the panel with a given ID.
+   *
+   * @param aViewId the ID of the subview to show.
+   * @param aAnchor the element that spawned the subview.
+   */
+  async showSubView(aViewId, aAnchor) {
+    this._ensureEventListenersAdded();
+    let viewNode = document.getElementById(aViewId);
+    if (!viewNode) {
+      console.error("Could not show panel subview with id: " + aViewId);
+      return;
+    }
+
+    if (!aAnchor) {
+      console.error(
+        "Expected an anchor when opening subview with id: " + aViewId
+      );
+      return;
+    }
+
+    let container = aAnchor.closest("panelmultiview");
+    if (container) {
+      container.showSubView(aViewId, aAnchor);
+    }
+  },
+
+  /**
+   * NB: The enable- and disableSingleSubviewPanelAnimations methods only
+   * affect the hiding/showing animations of single-subview panels (tempPanel
+   * in the showSubView method).
+   */
+  disableSingleSubviewPanelAnimations() {
+    this._disableAnimations = true;
+  },
+
+  enableSingleSubviewPanelAnimations() {
+    this._disableAnimations = false;
+  },
+
+  /**
+   * Sets the anchor node into the open or closed state, depending
+   * on the state of the panel.
+   */
+  _updatePanelButton() {
+    this.menuButton.open =
+      this.panel.state == "open" || this.panel.state == "showing";
+  },
+
+  /**
+   * Event handler for showing the Preferences/Layout view. Removes "checked"
+   * from all layout menu items and then checks the current layout menu item.
+   *
+   * @param {ViewShowingEvent} event - ViewShowing event.
+   */
+  _onPreferencesLayoutViewShow(event) {
+    event.target
+      .querySelectorAll("[name='viewlayoutgroup']")
+      .forEach(item => item.removeAttribute("checked"));
+
+    InitViewLayoutStyleMenu(event, true);
+  },
+
+  /**
+   * Event listener for showing the Folders view.
+   *
+   * @param {ViewShowingEvent} event - ViewShowing event.
+   */
+  _onFoldersViewShow(event) {
+    let about3Pane = document.getElementById("tabmail").currentAbout3Pane;
+    let folder = about3Pane.gFolder;
+
+    const paneHeaderMenuitem = event.target.querySelector(
+      '[name="paneheader"]'
+    );
+    if (about3Pane.folderPane.isFolderPaneHeaderHidden()) {
+      paneHeaderMenuitem.removeAttribute("checked");
+    } else {
+      paneHeaderMenuitem.setAttribute("checked", "true");
+    }
+
+    let { activeModes, canBeCompact, isCompact } = about3Pane.folderPane;
+    if (isCompact) {
+      activeModes.push("compact");
+    }
+
+    for (let item of event.target.querySelectorAll('[name="viewmessages"]')) {
+      let mode = item.getAttribute("value");
+      if (activeModes.includes(mode)) {
+        item.setAttribute("checked", "true");
+        if (mode == "all") {
+          item.disabled = activeModes.length == 1;
+        }
+      } else {
+        item.removeAttribute("checked");
+      }
+      if (mode == "compact") {
+        item.disabled = !canBeCompact;
+      }
+    }
+
+    goUpdateCommand("cmd_properties");
+    let propertiesMenuItem = document.getElementById("appmenu_properties");
+    if (folder?.server.type == "nntp") {
+      document.l10n.setAttributes(
+        propertiesMenuItem,
+        "menu-edit-newsgroup-properties"
+      );
+    } else {
+      document.l10n.setAttributes(
+        propertiesMenuItem,
+        "menu-edit-folder-properties"
+      );
+    }
+
+    let favoriteFolderMenu = document.getElementById("appmenu_favoriteFolder");
+    if (folder?.getFlag(Ci.nsMsgFolderFlags.Favorite)) {
+      favoriteFolderMenu.setAttribute("checked", "true");
+    } else {
+      favoriteFolderMenu.removeAttribute("checked");
+    }
+  },
+
+  _onToolsMenuShown(event) {
+    let noAccounts = MailServices.accounts.accounts.length == 0;
+    event.target.querySelector("#appmenu_searchCmd").disabled = noAccounts;
+    event.target.querySelector("#appmenu_filtersCmd").disabled = noAccounts;
+  },
+
+  _updateNotifications(notificationsChanged) {
+    let notifications = this._notifications;
+    if (!notifications || !notifications.length) {
+      if (notificationsChanged) {
+        this._clearAllNotifications();
+      }
+      return;
+    }
+
+    let doorhangers = notifications.filter(
+      n => !n.dismissed && !n.options.badgeOnly
+    );
+
+    if (this.panel.state == "showing" || this.panel.state == "open") {
+      // If the menu is already showing, then we need to dismiss all notifications
+      // since we don't want their doorhangers competing for attention
+      doorhangers.forEach(n => {
+        n.dismissed = true;
+        if (n.options.onDismissed) {
+          n.options.onDismissed(window);
+        }
+      });
+      this._clearBadge();
+      if (!notifications[0].options.badgeOnly) {
+        this._showBannerItem(notifications[0]);
+      }
+    } else if (doorhangers.length > 0) {
+      // Only show the doorhanger if the window is focused and not fullscreen
+      if (
+        (window.fullScreen && this.autoHideToolbarInFullScreen) ||
+        Services.focus.activeWindow !== window
+      ) {
+        this._showBadge(doorhangers[0]);
+        this._showBannerItem(doorhangers[0]);
+      } else {
+        this._clearBadge();
+      }
+    } else {
+      this._showBadge(notifications[0]);
+      this._showBannerItem(notifications[0]);
+    }
+  },
+
+  _clearAllNotifications() {
+    this._clearBadge();
+    this._clearBannerItem();
+  },
+
+  _formatDescriptionMessage(n) {
+    let text = {};
+    let array = n.options.message.split("<>");
+    text.start = array[0] || "";
+    text.name = n.options.name || "";
+    text.end = array[1] || "";
+    return text;
+  },
+
+  _showBadge(notification) {
+    let badgeStatus = this._getBadgeStatus(notification);
+    for (let menuButton of this.kAppMenuButtons) {
+      menuButton.setAttribute("badge-status", badgeStatus);
+    }
+  },
+
+  // "Banner item" here refers to an item in the hamburger panel menu. They will
+  // typically show up as a colored row in the panel.
+  _showBannerItem(notification) {
+    const supportedIds = [
+      "update-downloading",
+      "update-available",
+      "update-manual",
+      "update-unsupported",
+      "update-restart",
+    ];
+    if (!supportedIds.includes(notification.id)) {
+      return;
+    }
+
+    if (!this._panelBannerItem) {
+      this._panelBannerItem = this.mainView.querySelector(".panel-banner-item");
+    }
+
+    let l10nId = "appmenuitem-banner-" + notification.id;
+    document.l10n.setAttributes(this._panelBannerItem, l10nId);
+
+    this._panelBannerItem.setAttribute("notificationid", notification.id);
+    this._panelBannerItem.hidden = false;
+    this._panelBannerItem.notification = notification;
+  },
+
+  _clearBadge() {
+    for (let menuButton of this.kAppMenuButtons) {
+      menuButton.removeAttribute("badge-status");
+    }
+  },
+
+  _clearBannerItem() {
+    if (this._panelBannerItem) {
+      this._panelBannerItem.notification = null;
+      this._panelBannerItem.hidden = true;
+    }
+  },
+
+  _onNotificationButtonEvent(event, type) {
+    let notificationEl = getNotificationFromElement(event.target);
+
+    if (!notificationEl) {
+      throw new Error(
+        "PanelUI._onNotificationButtonEvent: couldn't find notification element"
+      );
+    }
+
+    if (!notificationEl.notification) {
+      throw new Error(
+        "PanelUI._onNotificationButtonEvent: couldn't find notification"
+      );
+    }
+
+    let notification = notificationEl.notification;
+
+    if (type == "secondarybuttoncommand") {
+      AppMenuNotifications.callSecondaryAction(window, notification);
+    } else {
+      AppMenuNotifications.callMainAction(window, notification, true);
+    }
+  },
+
+  _onBannerItemSelected(event) {
+    let target = event.target;
+    if (!target.notification) {
+      throw new Error(
+        "menucommand target has no associated action/notification"
+      );
+    }
+
+    event.stopPropagation();
+    AppMenuNotifications.callMainAction(window, target.notification, false);
+  },
+
+  _getPopupId(notification) {
+    return "appMenu-" + notification.id + "-notification";
+  },
+
+  _getBadgeStatus(notification) {
+    return notification.id;
+  },
+
+  _getPanelAnchor(candidate) {
+    let iconAnchor = candidate.badgeStack || candidate.icon;
+    return iconAnchor || candidate;
+  },
+
+  _ensureShortcutsShown(view = this.mainView) {
+    if (view.hasAttribute("added-shortcuts")) {
+      return;
+    }
+    view.setAttribute("added-shortcuts", "true");
+    for (let button of view.querySelectorAll("toolbarbutton[key]")) {
+      let keyId = button.getAttribute("key");
+      let key = document.getElementById(keyId);
+      if (!key) {
+        continue;
+      }
+      button.setAttribute("shortcut", ShortcutUtils.prettifyShortcut(key));
+    }
+  },
+
+  folderViewMenuOnCommand(event) {
+    let about3Pane = document.getElementById("tabmail").currentAbout3Pane;
+    if (!about3Pane) {
+      return;
+    }
+
+    let mode = event.target.getAttribute("value");
+    if (mode == "toggle-header") {
+      about3Pane.folderPane.toggleHeader(event.target.hasAttribute("checked"));
+      return;
+    }
+
+    let activeModes = about3Pane.folderPane.activeModes;
+    let index = activeModes.indexOf(mode);
+    if (event.target.hasAttribute("checked")) {
+      if (index == -1) {
+        activeModes.push(mode);
+      }
+    } else if (index >= 0) {
+      activeModes.splice(index, 1);
+    }
+    about3Pane.folderPane.activeModes = activeModes;
+
+    this._onFoldersViewShow({ target: event.target.parentNode });
+  },
+
+  folderCompactMenuOnCommand(event) {
+    let about3Pane = document.getElementById("tabmail").currentAbout3Pane;
+    if (!about3Pane) {
+      return;
+    }
+
+    about3Pane.folderPane.isCompact = event.target.hasAttribute("checked");
+  },
+
+  setUIDensity(event) {
+    // Loops through all available options and uncheck them. This is necessary
+    // since the toolbarbuttons don't uncheck themselves even if they're radio.
+    for (let item of event.originalTarget
+      .closest(".panel-subview-body")
+      .querySelectorAll("toolbarbutton")) {
+      // Skip this item if it's the one clicked.
+      if (item == event.originalTarget) {
+        continue;
+      }
+
+      item.removeAttribute("checked");
+    }
+    // Update the UI density.
+    UIDensity.setMode(event.originalTarget.mode);
+  },
+};
+
+XPCOMUtils.defineConstant(this, "PanelUI", PanelUI);
+
+/**
+ * Gets the currently selected locale for display.
+ *
+ * @returns the selected locale
+ */
+function getLocale() {
+  return Services.locale.appLocaleAsBCP47;
+}
+
+/**
+ * Given a DOM node inside a <popupnotification>, return the parent <popupnotification>.
+ */
+function getNotificationFromElement(aElement) {
+  return aElement.closest("popupnotification");
+}
+
+/**
+ * This object is Thunderbird's version of the same object in
+ * browser/base/content/browser-addons.js.
+ */
+var gExtensionsNotifications = {
+  initialized: false,
+  init() {
+    this.updateAlerts();
+    this.boundUpdate = this.updateAlerts.bind(this);
+    ExtensionsUI.on("change", this.boundUpdate);
+    this.initialized = true;
+  },
+
+  uninit() {
+    // uninit() can race ahead of init() in some cases, if that happens,
+    // we have no handler to remove.
+    if (!this.initialized) {
+      return;
+    }
+    ExtensionsUI.off("change", this.boundUpdate);
+  },
+
+  get l10n() {
+    if (this._l10n) {
+      return this._l10n;
+    }
+    return (this._l10n = new Localization(
+      ["messenger/addonNotifications.ftl", "branding/brand.ftl"],
+      true
+    ));
+  },
+
+  _createAddonButton(l10nId, addon, callback) {
+    let text = this.l10n.formatValueSync(l10nId, { addonName: addon.name });
+    let button = document.createXULElement("toolbarbutton");
+    button.setAttribute("wrap", "true");
+    button.setAttribute("label", text);
+    button.setAttribute("tooltiptext", text);
+    const DEFAULT_EXTENSION_ICON =
+      "chrome://messenger/skin/icons/new/compact/extension.svg";
+    button.setAttribute("image", addon.iconURL || DEFAULT_EXTENSION_ICON);
+    button.className = "addon-banner-item subviewbutton";
+
+    button.addEventListener("command", callback);
+    PanelUI.addonNotificationContainer.appendChild(button);
+  },
+
+  updateAlerts() {
+    let gBrowser = document.getElementById("tabmail");
+    let sideloaded = ExtensionsUI.sideloaded;
+    let updates = ExtensionsUI.updates;
+
+    let container = PanelUI.addonNotificationContainer;
+
+    while (container.firstChild) {
+      container.firstChild.remove();
+    }
+
+    let items = 0;
+    for (let update of updates) {
+      if (++items > 4) {
+        break;
+      }
+      this._createAddonButton(
+        "webext-perms-update-menu-item",
+        update.addon,
+        evt => {
+          ExtensionsUI.showUpdate(gBrowser, update);
+        }
+      );
+    }
+
+    for (let addon of sideloaded) {
+      if (++items > 4) {
+        break;
+      }
+      this._createAddonButton("webext-perms-sideload-menu-item", addon, evt => {
+        // We need to hide the main menu manually because the toolbarbutton is
+        // removed immediately while processing this event, and PanelUI is
+        // unable to identify which panel should be closed automatically.
+        PanelUI.hide();
+        ExtensionsUI.showSideloaded(gBrowser, addon);
+      });
+    }
+  },
+};
+
+addEventListener("unload", () => gExtensionsNotifications.uninit(), {
+  once: true,
+});
diff --git a/comm/mail/components/customizableui/moz.build b/comm/mail/components/customizableui/moz.build
new file mode 100644
index 0000000000..4bc53e73ea
--- /dev/null
+++ b/comm/mail/components/customizableui/moz.build
@@ -0,0 +1,14 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# 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/.
+
+DIRS += [
+    "content",
+]
+
+EXTRA_JS_MODULES += [
+    "CustomizableUI.sys.mjs",
+    "PanelMultiView.sys.mjs",
+]