Bug 1890718 - remove hamburger menu mainview inline command listeners, r=mossop,omc-reviewers,aminomancer

Differential Revision: https://phabricator.services.mozilla.com/D207120

browser/base/content/appmenu-viewcache.inc.xhtml

@@ -8,7 +8,6 @@
     <vbox class="panel-subview-body">
       <vbox id="appMenu-addon-banners"/>
       <toolbarbutton id="appMenu-update-banner" class="panel-banner-item subviewbutton"
-                     oncommand="PanelUI._onBannerItemSelected(event)"
                      wrap="true"
                      hidden="true"/>
       <toolbaritem id="appMenu-fxa-status2"
@@ -17,7 +16,7 @@
         <html:div id="appMenu-fxa-text" data-l10n-id="appmenu-fxa-sync-and-save-data2"/>
         <toolbarbutton id="appMenu-fxa-label2"
                       class="subviewbutton"
-                      oncommand="gSync.toggleAccountPanel(this, event)">
+                      >
           <vbox flex="1">
             <label id="appMenu-header-title"
                    crop="end"/>
@@ -31,7 +30,6 @@
                      data-l10n-id="appmenuitem-profiles"
                      data-l10n-args='{ "profilename": "" }'
                      closemenu="none"
-                     oncommand="gProfiles.updateView(this)"
                      hidden="true"/>
       <toolbarseparator id="appMenu-fxa-separator" class="proton-zap"/>
       <toolbarbutton id="appMenu-new-tab-button2"
@@ -54,12 +52,12 @@
                      class="subviewbutton subviewbutton-nav"
                      data-l10n-id="library-bookmarks-menu"
                      closemenu="none"
-                     oncommand="BookmarkingUI.showSubView(this);"/>
+                     />
       <toolbarbutton id="appMenu-history-button"
                      class="subviewbutton subviewbutton-nav"
                      data-l10n-id="appmenuitem-history"
                      closemenu="none"
-                     oncommand="PanelUI.showSubView('PanelUI-history', this)"/>
+                     />
       <toolbarbutton id="appMenu-downloads-button"
                      class="subviewbutton"
                      data-l10n-id="appmenuitem-downloads"
@@ -68,7 +66,6 @@
       <toolbarbutton id="appMenu-passwords-button"
                      class="subviewbutton"
                      data-l10n-id="appmenuitem-passwords"
-                     oncommand="LoginHelper.openPasswordManager(window, { entryPoint: 'mainmenu' })"
                      />
       <toolbarbutton id="appMenu-extensions-themes-button"
                      class="subviewbutton"
@@ -117,13 +114,6 @@
                        class="subviewbutton subviewbutton-iconic"
                        data-l10n-id="appmenuitem-fullscreen"
                        type="checkbox"
-# Note that we're custom-handling this click to make sure the panel disappears
-# before entering fullscreen, as it does some odd moving about on the screen
-# in the middle of the fullscreen transition otherwise.
-                       oncommand="
-                         this.closest('panel').hidePopup();
-                         setTimeout(() => BrowserCommands.fullScreen(), 0);
-                       "
                        tooltip="dynamic-shortcut-tooltip">
            <observes element="View:FullScreen" attribute="checked"/>
         </toolbarbutton>
@@ -135,12 +125,12 @@
 #ifdef XP_MACOSX
                      key="key_preferencesCmdMac"
 #endif
-                     oncommand="openPreferences()"/>
+                     />
       <toolbarbutton id="appMenu-more-button2"
                      class="subviewbutton subviewbutton-nav"
                      data-l10n-id="appmenuitem-more-tools"
                      closemenu="none"
-                     oncommand="PanelUI.showMoreToolsPanel(this);"/>
+                     />
       <toolbarbutton id="appMenu-report-broken-site-button"
                      class="subviewbutton subviewbutton-nav"
                      data-l10n-id="appmenuitem-report-broken-site"
@@ -151,7 +141,7 @@
                      class="subviewbutton subviewbutton-nav"
                      data-l10n-id="appmenuitem-help"
                      closemenu="none"
-                     oncommand="PanelUI.showSubView('PanelUI-helpView', this)"/>
+                     />
 #ifndef XP_MACOSX
       <toolbarseparator/>
       <toolbarbutton id="appMenu-quit-button2"

browser/components/customizableui/content/panelUI.js

@@ -132,6 +132,7 @@ const PanelUI = {
       "ViewShowing",
       this._onHelpViewShow
     );
+    this.mainView.addEventListener("command", this);
     this._eventListenersAdded = true;
   },
 
@@ -143,6 +144,7 @@ const PanelUI = {
       document,
       "PanelUI-helpView"
     ).removeEventListener("ViewShowing", this._onHelpViewShow);
+    this.mainView.removeEventListener("command", this);
     this._eventListenersAdded = false;
   },
 
@@ -299,6 +301,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;
     }
   },
 

browser/components/uitour/test/browser_UITour5.js

@@ -41,7 +41,7 @@ add_UITour_task(async function test_highlight_help_and_show_help_subview() {
 
   let helpButtonID = "appMenu-help-button2";
   let helpBtn = document.getElementById(helpButtonID);
-  helpBtn.dispatchEvent(new Event("command"));
+  helpBtn.dispatchEvent(new Event("command", { bubbles: true }));
   await highlightHiddenPromise;
   await ViewShownPromise;
   let helpView = document.getElementById("PanelUI-helpView");