3 files changed, 76 insertions, 126 deletions

diff --git a/browser/components/extensions/parent/ext-browser.js b/browser/components/extensions/parent/ext-browser.js
index d2f72d4f46..e7a516dcd3 100644
--- a/browser/components/extensions/parent/ext-browser.js
+++ b/browser/components/extensions/parent/ext-browser.js
@@ -82,7 +82,7 @@ global.openOptionsPage = extension => {
     extension.id
   )}/preferences`;
 
-  return window.BrowserOpenAddonsMgr(viewId);
+  return window.BrowserAddonUI.openAddonsMgr(viewId);
 };
 
 global.makeWidgetId = id => {
@@ -709,6 +709,23 @@ class TabTracker extends TabTrackerBase {
     };
   }
 
+  getBrowserDataForContext(context) {
+    if (["tab", "background"].includes(context.viewType)) {
+      return this.getBrowserData(context.xulBrowser);
+    } else if (["popup", "sidebar"].includes(context.viewType)) {
+      // popups and sidebars are nested inside a browser element
+      // (with url "chrome://browser/content/webext-panels.xhtml")
+      // and so we look for the corresponding topChromeWindow to
+      // determine the windowId the panel belongs to.
+      const chromeWindow =
+        context.xulBrowser?.ownerGlobal?.browsingContext?.topChromeWindow;
+      const windowId = chromeWindow ? windowTracker.getId(chromeWindow) : -1;
+      return { tabId: -1, windowId };
+    }
+
+    return { tabId: -1, windowId: -1 };
+  }
+
   get activeTab() {
     let window = windowTracker.topWindow;
     if (window && window.gBrowser) {
diff --git a/browser/components/extensions/parent/ext-menus.js b/browser/components/extensions/parent/ext-menus.js
index a5b27bff7d..e4ad9f4747 100644
--- a/browser/components/extensions/parent/ext-menus.js
+++ b/browser/components/extensions/parent/ext-menus.js
@@ -1100,11 +1100,11 @@ const menuTracker = {
     );
     sidebarHeader.addEventListener("SidebarShown", menuTracker.onSidebarShown);
 
-    await window.SidebarUI.promiseInitialized;
+    await window.SidebarController.promiseInitialized;
 
     if (
       !window.closed &&
-      window.SidebarUI.currentID === "viewBookmarksSidebar"
+      window.SidebarController.currentID === "viewBookmarksSidebar"
     ) {
       menuTracker.onSidebarShown({ currentTarget: sidebarHeader });
     }
@@ -1121,8 +1121,8 @@ const menuTracker = {
     );
     sidebarHeader.removeEventListener("SidebarShown", this.onSidebarShown);
 
-    if (window.SidebarUI.currentID === "viewBookmarksSidebar") {
-      let sidebarBrowser = window.SidebarUI.browser;
+    if (window.SidebarController.currentID === "viewBookmarksSidebar") {
+      let sidebarBrowser = window.SidebarController.browser;
       sidebarBrowser.removeEventListener("load", this.onSidebarShown);
       const menu =
         sidebarBrowser.contentDocument.getElementById("placesContext");
@@ -1134,10 +1134,10 @@ const menuTracker = {
     // The event target is an element in a browser window, so |window| will be
     // the browser window that contains the sidebar.
     const window = event.currentTarget.ownerGlobal;
-    if (window.SidebarUI.currentID === "viewBookmarksSidebar") {
-      let sidebarBrowser = window.SidebarUI.browser;
+    if (window.SidebarController.currentID === "viewBookmarksSidebar") {
+      let sidebarBrowser = window.SidebarController.browser;
       if (sidebarBrowser.contentDocument.readyState !== "complete") {
-        // SidebarUI.currentID may be updated before the bookmark sidebar's
+        // SidebarController.currentID may be updated before the bookmark sidebar's
         // document has finished loading. This sometimes happens when the
         // sidebar is automatically shown when a new window is opened.
         sidebarBrowser.addEventListener("load", menuTracker.onSidebarShown, {
diff --git a/browser/components/extensions/parent/ext-sidebarAction.js b/browser/components/extensions/parent/ext-sidebarAction.js
index 197456abd9..b2c009014e 100644
--- a/browser/components/extensions/parent/ext-sidebarAction.js
+++ b/browser/components/extensions/parent/ext-sidebarAction.js
@@ -17,8 +17,6 @@ var { IconDetails } = ExtensionParent;
 // WeakMap[Extension -> SidebarAction]
 let sidebarActionMap = new WeakMap();
 
-const sidebarURL = "chrome://browser/content/webext-panels.xhtml";
-
 /**
  * Responsible for the sidebar_action section of the manifest as well
  * as the associated sidebar browser.
@@ -40,7 +38,6 @@ this.sidebarAction = class extends ExtensionAPI {
     let widgetId = makeWidgetId(extension.id);
     this.id = `${widgetId}-sidebar-action`;
     this.menuId = `menubar_menu_${this.id}`;
-    this.switcherMenuId = `sidebarswitcher_menu_${this.id}`;
 
     this.browserStyle = options.browser_style;
 
@@ -66,23 +63,6 @@ this.sidebarAction = class extends ExtensionAPI {
     };
     windowTracker.addOpenListener(this.windowOpenListener);
 
-    this.updateHeader = event => {
-      let window = event.target.ownerGlobal;
-      let details = this.tabContext.get(window.gBrowser.selectedTab);
-      let header = window.document.getElementById("sidebar-switcher-target");
-      if (window.SidebarUI.currentID === this.id) {
-        this.setMenuIcon(header, details);
-      }
-    };
-
-    this.windowCloseListener = window => {
-      let header = window.document.getElementById("sidebar-switcher-target");
-      if (header) {
-        header.removeEventListener("SidebarShown", this.updateHeader);
-      }
-    };
-    windowTracker.addCloseListener(this.windowCloseListener);
-
     sidebarActionMap.set(extension, this);
   }
 
@@ -91,7 +71,7 @@ this.sidebarAction = class extends ExtensionAPI {
   }
 
   onShutdown(isAppShutdown) {
-    sidebarActionMap.delete(this.this);
+    sidebarActionMap.delete(this.extension);
 
     this.tabContext.shutdown();
 
@@ -102,26 +82,18 @@ this.sidebarAction = class extends ExtensionAPI {
     }
 
     for (let window of windowTracker.browserWindows()) {
-      let { document, SidebarUI } = window;
-      if (SidebarUI.currentID === this.id) {
-        SidebarUI.hide();
-      }
-      document.getElementById(this.menuId)?.remove();
-      document.getElementById(this.switcherMenuId)?.remove();
-      let header = document.getElementById("sidebar-switcher-target");
-      header.removeEventListener("SidebarShown", this.updateHeader);
-      SidebarUI.sidebars.delete(this.id);
+      let { SidebarController } = window;
+      SidebarController.removeExtension(this.id);
     }
     windowTracker.removeOpenListener(this.windowOpenListener);
-    windowTracker.removeCloseListener(this.windowCloseListener);
   }
 
   static onUninstall(id) {
     const sidebarId = `${makeWidgetId(id)}-sidebar-action`;
     for (let window of windowTracker.browserWindows()) {
-      let { SidebarUI } = window;
-      if (SidebarUI.lastOpenedId === sidebarId) {
-        SidebarUI.lastOpenedId = null;
+      let { SidebarController } = window;
+      if (SidebarController.lastOpenedId === sidebarId) {
+        SidebarController.lastOpenedId = null;
       }
     }
   }
@@ -135,12 +107,12 @@ this.sidebarAction = class extends ExtensionAPI {
     let install = this.extension.startupReason === "ADDON_INSTALL";
     for (let window of windowTracker.browserWindows()) {
       this.updateWindow(window);
-      let { SidebarUI } = window;
+      let { SidebarController } = window;
       if (
         (install && this.extension.manifest.sidebar_action.open_at_install) ||
-        SidebarUI.lastOpenedId == this.id
+        SidebarController.lastOpenedId == this.id
       ) {
-        SidebarUI.show(this.id);
+        SidebarController.show(this.id);
       }
     }
   }
@@ -149,60 +121,29 @@ this.sidebarAction = class extends ExtensionAPI {
     if (!this.extension.canAccessWindow(window)) {
       return;
     }
-    let { document, SidebarUI } = window;
-    let keyId = `ext-key-id-${this.id}`;
-
-    SidebarUI.sidebars.set(this.id, {
-      title: details.title,
-      url: sidebarURL,
+    this.panel = details.panel;
+    let { SidebarController } = window;
+    SidebarController.registerExtension(this.id, {
+      icon: this.getMenuIcon(details),
       menuId: this.menuId,
-      switcherMenuId: this.switcherMenuId,
-      // The following properties are specific to extensions
+      title: details.title,
       extensionId: this.extension.id,
-      panel: details.panel,
-      browserStyle: this.browserStyle,
+      onload: () =>
+        SidebarController.browser.contentWindow.loadPanel(
+          this.extension.id,
+          this.panel,
+          this.browserStyle
+        ),
     });
-
-    let header = document.getElementById("sidebar-switcher-target");
-    header.addEventListener("SidebarShown", this.updateHeader);
-
-    // Insert a menuitem for View->Show Sidebars.
-    let menuitem = document.createXULElement("menuitem");
-    menuitem.setAttribute("id", this.menuId);
-    menuitem.setAttribute("type", "checkbox");
-    menuitem.setAttribute("label", details.title);
-    menuitem.setAttribute("oncommand", `SidebarUI.toggle("${this.id}");`);
-    menuitem.setAttribute("class", "menuitem-iconic webextension-menuitem");
-    menuitem.setAttribute("key", keyId);
-    this.setMenuIcon(menuitem, details);
-
-    // Insert a toolbarbutton for the sidebar dropdown selector.
-    let switcherMenuitem = menuitem.cloneNode();
-    switcherMenuitem.setAttribute("id", this.switcherMenuId);
-    switcherMenuitem.removeAttribute("type");
-
-    document.getElementById("viewSidebarMenu").appendChild(menuitem);
-    let separator = document.getElementById("sidebar-extensions-separator");
-    separator.parentNode.insertBefore(switcherMenuitem, separator);
-
-    return menuitem;
   }
 
-  setMenuIcon(menuitem, details) {
+  getMenuIcon(details) {
     let getIcon = size =>
       IconDetails.escapeUrl(
         IconDetails.getPreferredIcon(details.icon, this.extension, size).icon
       );
 
-    menuitem.setAttribute(
-      "style",
-      `
-      --webextension-menuitem-image: image-set(
-        url("${getIcon(16)}"),
-        url("${getIcon(32)}") 2x
-      );
-    `
-    );
+    return `image-set(url("${getIcon(16)}"), url("${getIcon(32)}") 2x)`;
   }
 
   /**
@@ -214,34 +155,26 @@ this.sidebarAction = class extends ExtensionAPI {
    *        Tab specific sidebar configuration.
    */
   updateButton(window, tabData) {
-    let { document, SidebarUI } = window;
+    let { document, SidebarController } = window;
     let title = tabData.title || this.extension.name;
-    let menu = document.getElementById(this.menuId);
-    if (!menu) {
-      menu = this.createMenuItem(window, tabData);
+    if (!document.getElementById(this.menuId)) {
+      // Menu items are added when new windows are opened, or from onReady (when
+      // an extension has fully started). The menu item may be missing at this
+      // point if the extension updates the sidebar during its startup.
+      this.createMenuItem(window, tabData);
     }
-
-    let urlChanged = tabData.panel !== SidebarUI.sidebars.get(this.id).panel;
+    let urlChanged = tabData.panel !== this.panel;
     if (urlChanged) {
-      SidebarUI.sidebars.get(this.id).panel = tabData.panel;
-    }
-
-    menu.setAttribute("label", title);
-    this.setMenuIcon(menu, tabData);
-
-    let button = document.getElementById(this.switcherMenuId);
-    button.setAttribute("label", title);
-    this.setMenuIcon(button, tabData);
-
-    // Update the sidebar if this extension is the current sidebar.
-    if (SidebarUI.currentID === this.id) {
-      SidebarUI.title = title;
-      let header = document.getElementById("sidebar-switcher-target");
-      this.setMenuIcon(header, tabData);
-      if (SidebarUI.isOpen && urlChanged) {
-        SidebarUI.show(this.id);
-      }
+      this.panel = tabData.panel;
     }
+    SidebarController.setExtensionAttributes(
+      this.id,
+      {
+        icon: this.getMenuIcon(tabData),
+        label: title,
+      },
+      urlChanged
+    );
   }
 
   /**
@@ -382,9 +315,9 @@ this.sidebarAction = class extends ExtensionAPI {
    * @param {ChromeWindow} window
    */
   triggerAction(window) {
-    let { SidebarUI } = window;
-    if (SidebarUI && this.extension.canAccessWindow(window)) {
-      SidebarUI.toggle(this.id);
+    let { SidebarController } = window;
+    if (SidebarController && this.extension.canAccessWindow(window)) {
+      SidebarController.toggle(this.id);
     }
   }
 
@@ -394,9 +327,9 @@ this.sidebarAction = class extends ExtensionAPI {
    * @param {ChromeWindow} window
    */
   open(window) {
-    let { SidebarUI } = window;
-    if (SidebarUI && this.extension.canAccessWindow(window)) {
-      SidebarUI.show(this.id);
+    let { SidebarController } = window;
+    if (SidebarController && this.extension.canAccessWindow(window)) {
+      SidebarController.show(this.id);
     }
   }
 
@@ -407,7 +340,7 @@ this.sidebarAction = class extends ExtensionAPI {
    */
   close(window) {
     if (this.isOpen(window)) {
-      window.SidebarUI.hide();
+      window.SidebarController.hide();
     }
   }
 
@@ -417,15 +350,15 @@ this.sidebarAction = class extends ExtensionAPI {
    * @param {ChromeWindow} window
    */
   toggle(window) {
-    let { SidebarUI } = window;
-    if (!SidebarUI || !this.extension.canAccessWindow(window)) {
+    let { SidebarController } = window;
+    if (!SidebarController || !this.extension.canAccessWindow(window)) {
       return;
     }
 
     if (!this.isOpen(window)) {
-      SidebarUI.show(this.id);
+      SidebarController.show(this.id);
     } else {
-      SidebarUI.hide();
+      SidebarController.hide();
     }
   }
 
@@ -436,8 +369,8 @@ this.sidebarAction = class extends ExtensionAPI {
    * @returns {boolean}
    */
   isOpen(window) {
-    let { SidebarUI } = window;
-    return SidebarUI.isOpen && this.id == SidebarUI.currentID;
+    let { SidebarController } = window;
+    return SidebarController.isOpen && this.id == SidebarController.currentID;
   }
 
   getAPI(context) {