Bug 1703150, ensure dev tools subview is shown when opening developer tools panel r=Gijs

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

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

@@ -612,6 +612,14 @@
     </vbox>
   </panelview>
 
+  <panelview id="PanelUI-developer-tools" flex="1" class="PanelUI-subview">
+    <vbox id="PanelUI-developer-tools-view"
+          class="panel-subview-body"
+          role="group">
+      <!-- Developer Tools menu items are inserted here -->
+    </vbox>
+  </panelview>
+
   <panelview id="PanelUI-savetopocket" flex="1" class="PanelUI-subView">
     <vbox class="PanelUI-savetopocket-container">
     </vbox>

browser/base/content/test/keyboard/browser_toolbarButtonKeyPress.js

@@ -3,7 +3,7 @@
 
 "use strict";
 
-const kDevPanelID = "appmenu-moreTools";
+const kDevPanelID = "PanelUI-developer-tools";
 
 /**
  * Test the behavior of key presses on various toolbar buttons.

browser/components/customizableui/test/browser_981305_separator_insertion.js

@@ -72,7 +72,7 @@ async function checkSeparatorInsertion(menuId, buttonId, subviewId) {
 }
 
 add_task(async function check_devtools_separator() {
-  const panelviewId = "appmenu-moreTools";
+  const panelviewId = "PanelUI-developer-tools";
 
   await checkSeparatorInsertion(
     "menuWebDeveloperPopup",

browser/components/customizableui/test/browser_989751_subviewbutton_class.js

@@ -5,7 +5,7 @@
 "use strict";
 
 const kCustomClass = "acustomclassnoonewilluse";
-const kDevPanelId = "appmenu-moreTools";
+const kDevPanelId = "PanelUI-developer-tools";
 var tempElement = null;
 
 function insertClassNameToMenuChildren(parentMenu) {

browser/components/customizableui/test/browser_proton_moreTools_panel.js

@@ -10,7 +10,7 @@ XPCOMUtils.defineLazyGetter(this, "DevToolsStartup", () => {
 });
 
 // Test activating the developer button shows the More Tools panel.
-add_task(async function testMoreToolsPanelInToolbar() {
+add_task(async function testDevToolsPanelInToolbar() {
   // 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;
@@ -23,17 +23,30 @@ add_task(async function testMoreToolsPanelInToolbar() {
     CustomizableUI.AREA_NAVBAR
   );
 
-  // Test the "More Tools" panel is showing.
+  // Test the developer tools panel is showing.
   let button = document.getElementById("developer-button");
-  let moreToolsView = PanelMultiView.getViewNode(document, "appmenu-moreTools");
-  let moreToolsShownPromise = BrowserTestUtils.waitForEvent(
-    moreToolsView,
+  let devToolsView = PanelMultiView.getViewNode(
+    document,
+    "PanelUI-developer-tools"
+  );
+  let devToolsShownPromise = BrowserTestUtils.waitForEvent(
+    devToolsView,
     "ViewShown"
   );
 
   EventUtils.synthesizeMouseAtCenter(button, {});
-  await moreToolsShownPromise;
-  ok(true, "More Tools view is showing");
+  await devToolsShownPromise;
+  ok(true, "Dev Tools view is showing");
+  is(
+    devToolsView.children.length,
+    1,
+    "Dev tools subview is the only child of panel"
+  );
+  is(
+    devToolsView.children[0].id,
+    "PanelUI-developer-tools-view",
+    "Dev tools child has correct id"
+  );
 
   // Cleanup
   await BrowserTestUtils.closeWindow(win);

devtools/startup/DevToolsStartup.jsm

@@ -561,8 +561,8 @@ DevToolsStartup.prototype = {
       return;
     }
 
-    const panelviewId = "appmenu-moreTools";
-    const subviewId = "appmenu-developer-tools-view";
+    const panelviewId = "PanelUI-developer-tools";
+    const subviewId = "PanelUI-developer-tools-view";
 
     const item = {
       id: id,