Bug 1648639, remove containers, help view, and developer panels from main view and place in template r=Gijs

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

browser/base/content/browser.xhtml

@@ -766,6 +766,18 @@
     <panelview id="appMenu-library-recentlyClosedTabs"/>
     <panelview id="appMenu-library-recentlyClosedWindows"/>
 
+    <panelview id="PanelUI-containers" flex="1">
+      <vbox id="PanelUI-containersItems"/>
+    </panelview>
+
+    <panelview id="PanelUI-helpView" flex="1" class="PanelUI-subView">
+      <vbox id="PanelUI-helpItems" class="panel-subview-body"/>
+    </panelview>
+
+    <panelview id="PanelUI-developer" flex="1">
+      <vbox id="PanelUI-developerItems" class="panel-subview-body"/>
+    </panelview>
+
     <panelview id="appMenu-libraryView" class="PanelUI-subView">
       <vbox class="panel-subview-body">
         <toolbarbutton id="appMenu-library-bookmarks-button"

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

@@ -82,9 +82,9 @@ add_task(async function testDeveloperButtonPress() {
   );
   let button = document.getElementById("developer-button");
   forceFocus(button);
+  EventUtils.synthesizeKey(" ");
   let view = document.getElementById("PanelUI-developer");
   let focused = BrowserTestUtils.waitForEvent(view, "focus", true);
-  EventUtils.synthesizeKey(" ");
   await focused;
   ok(true, "Focus inside Developer menu after toolbar button pressed");
   let hidden = BrowserTestUtils.waitForEvent(document, "popuphidden", true);

browser/components/customizableui/CustomizableUI.jsm

@@ -1757,7 +1757,7 @@ var CustomizableUIInternal = {
             aWidget.id +
             " has a view. Auto-registering event handlers."
         );
-        let viewNode = aDocument.getElementById(aWidget.viewId);
+        let viewNode = PanelMultiView.getViewNode(aDocument, aWidget.viewId);
 
         if (viewNode) {
           // PanelUI relies on the .PanelUI-subView class to be able to show only

browser/components/customizableui/content/panelUI.inc.xhtml

@@ -604,18 +604,6 @@
                      onclick="PanelUI.hide();"/>
     </panelview>
 
-    <panelview id="PanelUI-containers" flex="1">
-      <vbox id="PanelUI-containersItems"/>
-    </panelview>
-
-    <panelview id="PanelUI-helpView" flex="1" class="PanelUI-subView">
-      <vbox id="PanelUI-helpItems" class="panel-subview-body"/>
-    </panelview>
-
-    <panelview id="PanelUI-developer" flex="1">
-      <vbox id="PanelUI-developerItems" class="panel-subview-body"/>
-    </panelview>
-
     <panelview id="PanelUI-profiler" flex="1" descriptionheightworkaround="true">
       <vbox id="PanelUI-profiler-container">
         <vbox id="PanelUI-profiler-header" animationready="false">

browser/components/customizableui/content/panelUI.js

@@ -40,7 +40,6 @@ const PanelUI = {
     return {
       mainView: "appMenu-mainView",
       multiView: "appMenu-multiView",
-      helpView: "PanelUI-helpView",
       menuButton: "PanelUI-menu-button",
       panel: "appMenu-popup",
       addonNotificationContainer: "appMenu-addon-banners",
@@ -158,7 +157,10 @@ const PanelUI = {
       this.panel.addEventListener(event, this);
     }
 
-    this.helpView.addEventListener("ViewShowing", this._onHelpViewShow);
+    PanelMultiView.getViewNode(document, "PanelUI-helpView").addEventListener(
+      "ViewShowing",
+      this._onHelpViewShow
+    );
     this._eventListenersAdded = true;
   },
 
@@ -166,7 +168,10 @@ const PanelUI = {
     for (let event of this.kEvents) {
       this.panel.removeEventListener(event, this);
     }
-    this.helpView.removeEventListener("ViewShowing", this._onHelpViewShow);
+    PanelMultiView.getViewNode(
+      document,
+      "PanelUI-helpView"
+    ).removeEventListener("ViewShowing", this._onHelpViewShow);
     this._eventListenersAdded = false;
   },
 

browser/components/customizableui/test/browser_981305_separator_insertion.js

@@ -42,9 +42,9 @@ function checkSeparatorInsertion(menuId, buttonId, subviewId) {
 
     await document.getElementById("nav-bar").overflowable.show();
 
-    let subview = document.getElementById(subviewId);
     let button = document.getElementById(buttonId);
     button.click();
+    let subview = document.getElementById(subviewId);
     await BrowserTestUtils.waitForEvent(subview, "ViewShown");
 
     let subviewBody = subview.firstElementChild;

browser/components/customizableui/test/browser_overflow_use_subviews.js

@@ -38,15 +38,18 @@ add_task(async function check_developer_subview_in_overflow() {
   await waitForCondition(() => navbar.hasAttribute("overflowing"));
 
   let chevron = document.getElementById("nav-bar-overflow-button");
-  let shownPanelPromise = promisePanelElementShown(window, kOverflowPanel);
+  let shownPanelPromise = BrowserTestUtils.waitForEvent(
+    kOverflowPanel,
+    "ViewShown"
+  );
   chevron.click();
   await shownPanelPromise;
 
-  let developerView = document.getElementById("PanelUI-developer");
   let button = document.getElementById("developer-button");
-  let subviewShownPromise = subviewShown(developerView);
   button.click();
-  await subviewShownPromise;
+
+  let developerView = document.getElementById("PanelUI-developer");
+  await BrowserTestUtils.waitForEvent(developerView, "ViewShown");
   let hasSubviews = !!kOverflowPanel.querySelector("panelmultiview");
   let expectedPanel = hasSubviews
     ? kOverflowPanel

browser/components/customizableui/test/browser_panel_keyboard_navigation.js

@@ -100,7 +100,6 @@ add_task(async function testEnterKeyBehaviors() {
     "The last button should be focused after navigating upward"
   );
 
-  let promise = BrowserTestUtils.waitForEvent(PanelUI.helpView, "ViewShown");
   // Make sure the Help button is in focus.
   while (
     !focusedElement ||
@@ -111,9 +110,11 @@ add_task(async function testEnterKeyBehaviors() {
     focusedElement = document.commandDispatcher.focusedElement;
   }
   EventUtils.synthesizeKey("KEY_Enter");
-  await promise;
 
-  let helpButtons = getEnabledNavigableElementsForView(PanelUI.helpView);
+  let helpView = document.getElementById("PanelUI-helpView");
+  await BrowserTestUtils.waitForEvent(helpView, "ViewShown");
+
+  let helpButtons = getEnabledNavigableElementsForView(helpView);
   Assert.ok(
     helpButtons[0].classList.contains("subviewbutton-back"),
     "First button in help view should be a back button"
@@ -150,7 +151,7 @@ add_task(async function testEnterKeyBehaviors() {
   }
 
   // The first button is the back button. Hittin Enter should navigate us back.
-  promise = BrowserTestUtils.waitForEvent(PanelUI.mainView, "ViewShown");
+  let promise = BrowserTestUtils.waitForEvent(PanelUI.mainView, "ViewShown");
   EventUtils.synthesizeKey("KEY_Enter");
   await promise;
 
@@ -204,12 +205,12 @@ add_task(async function testLeftRightKeys() {
 
   // Hitting ArrowRight on a button that points to a subview should navigate us
   // there.
-  let promise = BrowserTestUtils.waitForEvent(PanelUI.helpView, "ViewShown");
   EventUtils.synthesizeKey("KEY_ArrowRight");
-  await promise;
+  let helpView = document.getElementById("PanelUI-helpView");
+  await BrowserTestUtils.waitForEvent(helpView, "ViewShown");
 
   // Hitting ArrowLeft should navigate us back.
-  promise = BrowserTestUtils.waitForEvent(PanelUI.mainView, "ViewShown");
+  let promise = BrowserTestUtils.waitForEvent(PanelUI.mainView, "ViewShown");
   EventUtils.synthesizeKey("KEY_ArrowLeft");
   await promise;
 
@@ -321,9 +322,9 @@ add_task(async function testSpaceDownAfterTabNavigation() {
 
   // Pressing down space on a button that points to a subview should navigate us
   // there, before keyup.
-  let promise = BrowserTestUtils.waitForEvent(PanelUI.helpView, "ViewShown");
   EventUtils.synthesizeKey(" ", { type: "keydown" });
-  await promise;
+  let helpView = document.getElementById("PanelUI-helpView");
+  await BrowserTestUtils.waitForEvent(helpView, "ViewShown");
 
   await gCUITestUtils.hideMainMenu();
 });

browser/modules/test/browser/browser_UsageTelemetry_interaction.js

@@ -202,11 +202,11 @@ add_task(async function devtools() {
     click("PanelUI-menu-button");
     await shown;
 
+    click("appMenu-developer-button");
     shown = BrowserTestUtils.waitForEvent(
       elem("PanelUI-developer"),
       "ViewShown"
     );
-    click("appMenu-developer-button");
     await shown;
 
     let tabOpen = BrowserTestUtils.waitForNewTab(gBrowser);

browser/tools/mozscreenshots/mozscreenshots/extension/configurations/AppMenu.jsm

@@ -50,9 +50,9 @@ var AppMenu = {
         );
         await reopenAppMenu(browserWindow);
 
+        browserWindow.document.getElementById("appMenu-help-button").click();
         let view = browserWindow.document.getElementById("PanelUI-helpView");
         let promiseViewShown = BrowserTestUtils.waitForEvent(view, "ViewShown");
-        browserWindow.document.getElementById("appMenu-help-button").click();
         await promiseViewShown;
       },
 

devtools/startup/DevToolsStartup.jsm

@@ -71,6 +71,11 @@ ChromeUtils.defineModuleGetter(
   "WebChannel",
   "resource://gre/modules/WebChannel.jsm"
 );
+ChromeUtils.defineModuleGetter(
+  this,
+  "PanelMultiView",
+  "resource:///modules/PanelMultiView.jsm"
+);
 
 // We don't want to spend time initializing the full loader here so we create
 // our own lazy require.
@@ -575,7 +580,10 @@ DevToolsStartup.prototype = {
         });
         itemsToDisplay.push(doc.getElementById("goOfflineMenuitem"));
 
-        const developerItems = doc.getElementById("PanelUI-developerItems");
+        const developerItems = PanelMultiView.getViewNode(
+          doc,
+          "PanelUI-developerItems"
+        );
         CustomizableUI.clearSubview(developerItems);
         CustomizableUI.fillSubviewFromMenuItems(itemsToDisplay, developerItems);
       },
@@ -590,8 +598,7 @@ DevToolsStartup.prototype = {
         // not called yet when CustomizableUI creates the widget.
         this.hookKeyShortcuts(doc.defaultView);
 
-        // Bug 1223127, CUI should make this easier to do.
-        if (doc.getElementById("PanelUI-developerItems")) {
+        if (PanelMultiView.getViewNode(doc, "PanelUI-developerItems")) {
           return;
         }
         const view = doc.createXULElement("panelview");