Bug 1690351 - Create a Proton-specific More Tools panel. r=jdescottes,mconley,fluent-reviewers,flod
authorMicah Tigley <mtigley@mozilla.com>
Wed, 10 Feb 2021 15:21:58 +0000
changeset 566827 93aab6a4a920da467ccd665401879bc51d750060
parent 566826 8c53818717a1fb7a9925b8ac612d504167dabced
child 566828 64e2b89ff57f583ad2e0902a4626770f512b5135
push id38191
push userbtara@mozilla.com
push dateThu, 11 Feb 2021 05:02:45 +0000
treeherdermozilla-central@5cbcb80f72bd [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjdescottes, mconley, fluent-reviewers, flod
bugs1690351
milestone87.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1690351 - Create a Proton-specific More Tools panel. r=jdescottes,mconley,fluent-reviewers,flod Differential Revision: https://phabricator.services.mozilla.com/D104249
browser/base/content/browser.xhtml
browser/components/customizableui/content/panelUI.js
browser/locales/en-US/browser/appmenu.ftl
devtools/startup/DevToolsStartup.jsm
--- a/browser/base/content/browser.xhtml
+++ b/browser/base/content/browser.xhtml
@@ -878,17 +878,17 @@
 #ifdef XP_MACOSX
                        key="key_preferencesCmdMac"
 #endif
 #endif
                        oncommand="openPreferences()"
                        />
         <toolbarbutton id="appMenu-customize-button"
                        class="subviewbutton subviewbutton-iconic"
-                       data-l10n-id="appmenuitem-customize-mode"
+                       data-l10n-id="appmenu-customizetoolbar"
                        command="cmd_CustomizeToolbars"
                        />
         <toolbarseparator/>
         <toolbarbutton id="appMenu-open-file-button"
                        class="subviewbutton"
                        label="&openFileCmd.label;"
                        key="openFileKb"
                        command="Browser:OpenFile"
@@ -1051,17 +1051,17 @@
 #ifdef XP_MACOSX
                        key="key_preferencesCmdMac"
 #endif
                        oncommand="openPreferences()"/>
         <toolbarbutton id="appMenu-more-button2"
                        class="subviewbutton subviewbutton-iconic subviewbutton-nav"
                        data-l10n-id="appmenuitem-more-tools"
                        closemenu="none"
-                       oncommand="PanelUI.showSubView('appMenu-moreView', this)"/>
+                       oncommand="PanelUI.showMoreToolsPanel(this);"/>
         <toolbarbutton id="appMenu-help-button2"
                        class="subviewbutton subviewbutton-iconic subviewbutton-nav"
                        label="&appMenuHelp.label;"
                        closemenu="none"
                        oncommand="PanelUI.showSubView('PanelUI-helpView', this)"/>
 #ifndef XP_MACOSX
         <toolbarseparator/>
         <toolbarbutton id="appMenu-quit-button2"
@@ -1305,16 +1305,32 @@
         <toolbarbutton id="appMenu-workoffline-button"
                        class="subviewbutton"
                        data-l10n-id="more-menu-go-offline"
                        type="checkbox"
                        command="cmd_toggleOfflineStatus"/>
       </vbox>
     </panelview>
 
+    <panelview id="appmenu-moreTools" class="PanelUI-subView">
+      <vbox class="panel-subview-body">
+        <toolbarbutton id="appmenu-moreTools-button"
+                       class="subviewbutton subviewbutton-iconic"
+                       data-l10n-id="appmenu-customizetoolbar"
+                       command="cmd_CustomizeToolbars"/>
+        <toolbarseparator/>
+        <label id="appmenu-developer-tools"
+               data-l10n-id="appmenu-developer-tools-subheader"
+               class="subview-subheader"/>
+        <vbox id="appmenu-developer-tools-view" class="panel-subview-body">
+          <!-- Developer Tools menu items are inserted here -->
+        </vbox>
+      </vbox>
+    </panelview>
+
     <panelview id="PanelUI-remotetabs" flex="1" class="PanelUI-subView"
                descriptionheightworkaround="true">
       <vbox class="panel-subview-body">
         <!-- this widget has 3 boxes in the body, but only 1 is ever visible -->
         <!-- When Sync is ready to sync -->
         <vbox id="PanelUI-remotetabs-main" hidden="true">
           <vbox id="PanelUI-remotetabs-buttons">
             <toolbarbutton id="PanelUI-remotetabs-view-sidebar"
--- a/browser/components/customizableui/content/panelUI.js
+++ b/browser/components/customizableui/content/panelUI.js
@@ -376,16 +376,32 @@ const PanelUI = {
    * in that view.
    */
   showHelpView(aAnchor) {
     this._ensureEventListenersAdded();
     this.multiView.showSubView("PanelUI-helpView", aAnchor);
   },
 
   /**
+   * Switch the panel to the "More Tools" view.
+   *
+   * @param moreTools The panel showing the "More Tools" view.
+   */
+  showMoreToolsPanel(moreTools) {
+    this.showSubView("appmenu-moreTools", moreTools);
+
+    // Notify DevTools the panel view is showing and need it to populate the
+    // "Browser Tools" section of the panel. We notify the observer setup by
+    // DevTools because we want to ensure the same menuitem list is shared
+    // between both the AppMenu and toolbar button views.
+    let view = document.getElementById("appmenu-developer-tools-view");
+    Services.obs.notifyObservers(view, "web-developer-tools-view-showing");
+  },
+
+  /**
    * 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.
    * @param aEvent the event triggering the view showing.
    */
   async showSubView(aViewId, aAnchor, aEvent) {
     let domEvent = null;
--- a/browser/locales/en-US/browser/appmenu.ftl
+++ b/browser/locales/en-US/browser/appmenu.ftl
@@ -2,18 +2,16 @@
 # 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/.
 
 ## App Menu
 
 appmenuitem-update-banner =
     .label-update-downloading = Downloading { -brand-shorter-name } update
 appmenuitem-protection-dashboard-title = Protections Dashboard
-appmenuitem-customize-mode =
-    .label = Customize…
 appmenuitem-new-window =
     .label = New Window
 appmenuitem-new-private-window =
     .label = New Private Window
 appmenuitem-passwords =
     .label = Passwords
 appmenuitem-extensions-and-themes =
     .label = Extensions and Themes
@@ -146,8 +144,15 @@ appmenu-help-report-deceptive-site =
 appmenu-help-not-deceptive =
     .label = This Isn’t a Deceptive Site…
     .accesskey = D
 
 ##
 
 appmenu-help-check-for-update =
     .label = Check for Updates…
+
+## More Tools
+
+appmenu-customizetoolbar =
+    .label = Customize Toolbar…
+
+appmenu-developer-tools-subheader = Browser Tools
--- a/devtools/startup/DevToolsStartup.jsm
+++ b/devtools/startup/DevToolsStartup.jsm
@@ -308,16 +308,18 @@ XPCOMUtils.defineLazyGetter(this, "Profi
   return ChromeUtils.import(
     "resource://devtools/client/performance-new/popup/background.jsm.js"
   );
 });
 
 function DevToolsStartup() {
   this.onEnabledPrefChanged = this.onEnabledPrefChanged.bind(this);
   this.onWindowReady = this.onWindowReady.bind(this);
+  this.addDevToolsItemsToSubview = this.addDevToolsItemsToSubview.bind(this);
+  this.onMoreToolsViewShowing = this.onMoreToolsViewShowing.bind(this);
   this.toggleProfilerKeyShortcuts = this.toggleProfilerKeyShortcuts.bind(this);
 }
 
 DevToolsStartup.prototype = {
   /**
    * Boolean flag to check if DevTools have been already initialized or not.
    * By initialized, we mean that its main modules are loaded.
    */
@@ -383,16 +385,22 @@ DevToolsStartup.prototype = {
         "browser-delayed-startup-finished"
       );
 
       // Update menu items when devtools.enabled changes.
       Services.prefs.addObserver(
         DEVTOOLS_ENABLED_PREF,
         this.onEnabledPrefChanged
       );
+
+      // Add DevTools menu items to the "More Tools" view.
+      Services.obs.addObserver(
+        this.onMoreToolsViewShowing,
+        "web-developer-tools-view-showing"
+      );
       /* eslint-enable mozilla/balanced-observers */
 
       if (!this.isDisabledByPolicy()) {
         if (AppConstants.MOZ_DEV_EDITION) {
           // On DevEdition, the developer toggle is displayed by default in the navbar
           // area and should be created before the first paint.
           this.hookDeveloperToggle();
         }
@@ -554,43 +562,22 @@ DevToolsStartup.prototype = {
     }
     const item = {
       id: id,
       type: "view",
       viewId: "PanelUI-developer",
       shortcutId: "key_toggleToolbox",
       tooltiptext: "developer-button.tooltiptext2",
       onViewShowing: event => {
-        if (Services.prefs.getBoolPref(DEVTOOLS_ENABLED_PREF)) {
-          // If DevTools are enabled, initialize DevTools to create all menuitems in the
-          // system menu before trying to copy them.
-          this.initDevTools("HamburgerMenu");
-        }
-
-        // Populate the subview with whatever menuitems are in the developer
-        // menu. We skip menu elements, because the menu panel has no way
-        // of dealing with those right now.
         const doc = event.target.ownerDocument;
-
-        const menu = doc.getElementById("menuWebDeveloperPopup");
-
-        const itemsToDisplay = [...menu.children];
-        // Hardcode the addition of the "work offline" menuitem at the bottom:
-        itemsToDisplay.push({
-          localName: "menuseparator",
-          getAttribute: () => {},
-        });
-        itemsToDisplay.push(doc.getElementById("goOfflineMenuitem"));
-
         const developerItems = PanelMultiView.getViewNode(
           doc,
           "PanelUI-developerItems"
         );
-        CustomizableUI.clearSubview(developerItems);
-        CustomizableUI.fillSubviewFromMenuItems(itemsToDisplay, developerItems);
+        this.addDevToolsItemsToSubview(developerItems);
       },
       onInit(anchor) {
         // Since onBeforeCreated already bails out when initialized, we can call
         // it right away.
         this.onBeforeCreated(anchor.ownerDocument);
       },
       onBeforeCreated: doc => {
         // The developer toggle needs the "key_toggleToolbox" <key> element.
@@ -610,16 +597,46 @@ DevToolsStartup.prototype = {
       },
     };
     CustomizableUI.createWidget(item);
     CustomizableWidgets.push(item);
 
     this.developerToggleCreated = true;
   },
 
+  addDevToolsItemsToSubview(subview) {
+    if (Services.prefs.getBoolPref(DEVTOOLS_ENABLED_PREF)) {
+      // If DevTools are enabled, initialize DevTools to create all menuitems in the
+      // system menu before trying to copy them.
+      this.initDevTools("HamburgerMenu");
+    }
+
+    // Populate the subview with whatever menuitems are in the developer
+    // menu. We skip menu elements, because the menu panel has no way
+    // of dealing with those right now.
+    const doc = subview.ownerDocument;
+
+    const menu = doc.getElementById("menuWebDeveloperPopup");
+
+    const itemsToDisplay = [...menu.children];
+    // Hardcode the addition of the "work offline" menuitem at the bottom:
+    itemsToDisplay.push({
+      localName: "menuseparator",
+      getAttribute: () => {},
+    });
+    itemsToDisplay.push(doc.getElementById("goOfflineMenuitem"));
+
+    CustomizableUI.clearSubview(subview);
+    CustomizableUI.fillSubviewFromMenuItems(itemsToDisplay, subview);
+  },
+
+  onMoreToolsViewShowing(moreToolsView) {
+    this.addDevToolsItemsToSubview(moreToolsView);
+  },
+
   /**
    * Register the profiler recording button. This button will be available
    * in the customization palette for the Firefox toolbar. In addition, it can be
    * enabled from profiler.firefox.com.
    */
   hookProfilerRecordingButton() {
     if (this.profilerRecordingButtonCreated) {
       return;