1 files changed, 77 insertions, 5 deletions

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"
       );
     }