2 files changed, 79 insertions, 7 deletions

diff --git a/browser/components/customizableui/content/panelUI.inc.xhtml b/browser/components/customizableui/content/panelUI.inc.xhtml
index 956a6ae45d..7607f59ec4 100644
--- a/browser/components/customizableui/content/panelUI.inc.xhtml
+++ b/browser/components/customizableui/content/panelUI.inc.xhtml
@@ -107,7 +107,7 @@
         <toolbarbutton id="unified-extensions-manage-extensions"
                        class="subviewbutton panel-subview-footer-button unified-extensions-manage-extensions"
                        data-l10n-id="unified-extensions-manage-extensions"
-                       oncommand="BrowserOpenAddonsMgr('addons://list/extension');" />
+                       oncommand="BrowserAddonUI.openAddonsMgr('addons://list/extension');" />
       </panelview>
     </panelmultiview>
   </panel>
@@ -271,7 +271,7 @@
        flip="slide"
        position="bottomright topright"
        noautofocus="true">
-  <panelmultiview id="appMenu-multiView" mainViewId="appMenu-protonMainView"
+  <panelmultiview id="appMenu-multiView" mainViewId="appMenu-mainView"
                   viewCacheId="appMenu-viewCache">
   </panelmultiview>
 </panel>
diff --git a/browser/components/customizableui/content/panelUI.js b/browser/components/customizableui/content/panelUI.js
index cb32085fd7..cbd27e465e 100644
--- a/browser/components/customizableui/content/panelUI.js
+++ b/browser/components/customizableui/content/panelUI.js
@@ -128,10 +128,16 @@ const PanelUI = {
       this.panel.addEventListener(event, this);
     }
 
+    this._onLibraryCommand = this._onLibraryCommand.bind(this);
     PanelMultiView.getViewNode(document, "PanelUI-helpView").addEventListener(
       "ViewShowing",
       this._onHelpViewShow
     );
+    PanelMultiView.getViewNode(
+      document,
+      "appMenu-libraryView"
+    ).addEventListener("command", this._onLibraryCommand);
+    this.mainView.addEventListener("command", this);
     this._eventListenersAdded = true;
   },
 
@@ -143,6 +149,11 @@ const PanelUI = {
       document,
       "PanelUI-helpView"
     ).removeEventListener("ViewShowing", this._onHelpViewShow);
+    PanelMultiView.getViewNode(
+      document,
+      "appMenu-libraryView"
+    ).removeEventListener("command", this._onLibraryCommand);
+    this.mainView.removeEventListener("command", this);
     this._eventListenersAdded = false;
   },
 
@@ -299,6 +310,54 @@ const PanelUI = {
       case "activate":
         this.updateNotifications();
         break;
+      case "command":
+        this.onCommand(aEvent);
+        break;
+    }
+  },
+
+  // Note that we listen for bubbling command events. In the case where the
+  // button that the user clicks has a command attribute, those events are
+  // redirected to the relevant command element, and we never see them in
+  // here. Bear this in mind if you want to write code that applies to
+  // all commands, for which this wouldn't work well.
+  onCommand(aEvent) {
+    let { target } = aEvent;
+    switch (target.id) {
+      case "appMenu-update-banner":
+        this._onBannerItemSelected(aEvent);
+        break;
+      case "appMenu-fxa-label2":
+        gSync.toggleAccountPanel(target, aEvent);
+        break;
+      case "appMenu-profiles-button":
+        gProfiles.updateView(target);
+        break;
+      case "appMenu-bookmarks-button":
+        BookmarkingUI.showSubView(target);
+        break;
+      case "appMenu-history-button":
+        this.showSubView("PanelUI-history", target);
+        break;
+      case "appMenu-passwords-button":
+        LoginHelper.openPasswordManager(window, { entryPoint: "mainmenu" });
+        break;
+      case "appMenu-fullscreen-button2":
+        // Note that we're custom-handling the hiding of the panel to make
+        // sure it disappears before entering fullscreen. Otherwise it can
+        // end up moving around on the screen during the fullscreen transition.
+        target.closest("panel").hidePopup();
+        setTimeout(() => BrowserCommands.fullScreen(), 0);
+        break;
+      case "appMenu-settings-button":
+        openPreferences();
+        break;
+      case "appMenu-more-button2":
+        this.showMoreToolsPanel(target);
+        break;
+      case "appMenu-help-button2":
+        this.showSubView("PanelUI-helpView", target);
+        break;
     }
   },
 
@@ -632,6 +691,22 @@ const PanelUI = {
     items.appendChild(fragment);
   },
 
+  _onLibraryCommand(aEvent) {
+    let button = aEvent.target;
+    let { BookmarkingUI, DownloadsPanel } = button.ownerGlobal;
+    switch (button.id) {
+      case "appMenu-library-bookmarks-button":
+        BookmarkingUI.showSubView(button);
+        break;
+      case "appMenu-library-history-button":
+        this.showSubView("PanelUI-history", button);
+        break;
+      case "appMenu-library-downloads-button":
+        DownloadsPanel.showDownloadsHistory();
+        break;
+    }
+  },
+
   _hidePopup() {
     if (!this._notificationPanel) {
       return;
@@ -840,10 +915,7 @@ const PanelUI = {
 
   get mainView() {
     if (!this._mainView) {
-      this._mainView = PanelMultiView.getViewNode(
-        document,
-        "appMenu-protonMainView"
-      );
+      this._mainView = PanelMultiView.getViewNode(document, "appMenu-mainView");
     }
     return this._mainView;
   },
@@ -852,7 +924,7 @@ const PanelUI = {
     if (!this._addonNotificationContainer) {
       this._addonNotificationContainer = PanelMultiView.getViewNode(
         document,
-        "appMenu-proton-addon-banners"
+        "appMenu-addon-banners"
       );
     }