Bug 1694277 - DevTools button should show the "More Tools" panel view. r=jdescottes,mconley

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

browser/components/customizableui/test/browser.ini

@@ -169,6 +169,7 @@ skip-if = os == "mac"
 skip-if = (verify && (os == 'linux' || os == 'mac'))
 tags = fullscreen
 [browser_panelUINotifications_multiWindow.js]
+[browser_proton_moreTools_panel.js]
 [browser_proton_toolbar_hide_toolbarbuttons.js]
 [browser_remove_customized_specials.js]
 [browser_reset_builtin_widget_currentArea.js]

browser/components/customizableui/test/browser_proton_moreTools_panel.js

@@ -0,0 +1,48 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+XPCOMUtils.defineLazyGetter(this, "DevToolsStartup", () => {
+  return Cc["@mozilla.org/devtools/startup-clh;1"].getService(
+    Ci.nsICommandLineHandler
+  ).wrappedJSObject;
+});
+
+// Test activating the developer button shows the More Tools panel.
+add_task(async function testMoreToolsPanelInToolbar() {
+  // We need to force DevToolsStartup to rebuild the developer tool toggle so that
+  // proton prefs are applied to the new browser window for this test.
+  DevToolsStartup.developerToggleCreated = false;
+  await SpecialPowers.pushPrefEnv({
+    set: [
+      ["browser.proton.enabled", true],
+      ["browser.proton.doorhangers.enabled", true],
+    ],
+  });
+  CustomizableUI.destroyWidget("developer-button");
+
+  // Now open a new window where the proton prefs will be applied.
+  const win = await BrowserTestUtils.openNewBrowserWindow();
+
+  CustomizableUI.addWidgetToArea(
+    "developer-button",
+    CustomizableUI.AREA_NAVBAR
+  );
+
+  // Test the "More Tools" panel is showing.
+  let button = document.getElementById("developer-button");
+  let moreToolsView = PanelMultiView.getViewNode(document, "appmenu-moreTools");
+  let moreToolsShownPromise = BrowserTestUtils.waitForEvent(
+    moreToolsView,
+    "ViewShown"
+  );
+
+  EventUtils.synthesizeMouseAtCenter(button, {});
+  await moreToolsShownPromise;
+  ok(true, "More Tools view is showing");
+
+  // Cleanup
+  await BrowserTestUtils.closeWindow(win);
+  CustomizableUI.reset();
+});

browser/themes/shared/customizableui/panelUI.inc.css

@@ -267,6 +267,12 @@ panelmultiview[transitioning] > .panel-viewcontainer > .panel-viewstack > panelv
   .subview-subheader + .panel-subview-body {
     padding: 0;
   }
+
+  #appmenu-developer-tools-view.panel-subview-body {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
 } /** END Proton **/
 
 .panel-view-body-unscrollable {

devtools/startup/DevToolsStartup.jsm

@@ -560,18 +560,26 @@ DevToolsStartup.prototype = {
     if (widget && widget.provider == CustomizableUI.PROVIDER_API) {
       return;
     }
+
+    const protonEnabled =
+      Services.prefs.getBoolPref("browser.proton.doorhangers.enabled", false) &&
+      Services.prefs.getBoolPref("browser.proton.enabled", false);
+    const panelviewId = protonEnabled
+      ? "appmenu-moreTools"
+      : "PanelUI-developer";
+    const subviewId = protonEnabled
+      ? "appmenu-developer-tools-view"
+      : "PanelUI-developerItems";
+
     const item = {
       id: id,
       type: "view",
-      viewId: "PanelUI-developer",
+      viewId: panelviewId,
       shortcutId: "key_toggleToolbox",
       tooltiptext: "developer-button.tooltiptext2",
       onViewShowing: event => {
         const doc = event.target.ownerDocument;
-        const developerItems = PanelMultiView.getViewNode(
-          doc,
-          "PanelUI-developerItems"
-        );
+        const developerItems = PanelMultiView.getViewNode(doc, subviewId);
         this.addDevToolsItemsToSubview(developerItems);
       },
       onInit(anchor) {
@@ -584,16 +592,6 @@ DevToolsStartup.prototype = {
         // In DEV EDITION, the toggle is added before 1st paint and hookKeyShortcuts() is
         // not called yet when CustomizableUI creates the widget.
         this.hookKeyShortcuts(doc.defaultView);
-
-        if (PanelMultiView.getViewNode(doc, "PanelUI-developerItems")) {
-          return;
-        }
-        const view = doc.createXULElement("panelview");
-        view.id = "PanelUI-developerItems";
-        const panel = doc.createXULElement("vbox");
-        panel.setAttribute("class", "panel-subview-body");
-        view.appendChild(panel);
-        doc.getElementById("PanelUI-multiView").appendChild(view);
       },
     };
     CustomizableUI.createWidget(item);