Bug 1648639, remove containers, help view, and developer panels from main view and place in template r=Gijs
authorEmma Malysz <emalysz@mozilla.com>
Tue, 30 Jun 2020 22:40:15 +0000
changeset 3015684 df91fb44b2d4bd8cf55cb2a5360094feb2c6ca6b
parent 3015683 74aed250da9ec95e466416556bbd42022c0bb43b
child 3015685 37c7c2fad0cb5246950be9ae2dd2075f4ef879e6
child 3028719 15564de3339d886c584e09f93f6aee183975caac
child 3038371 24573d138362a02c9f62a781be9d0a99078b5efd
push id562592
push usersgiesecke@mozilla.com
push dateWed, 01 Jul 2020 07:24:16 +0000
treeherdertry@ac7ebdc21dc3 [default view] [failures only]
reviewersGijs
bugs1648639
milestone80.0a1
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
browser/base/content/test/keyboard/browser_toolbarButtonKeyPress.js
browser/components/customizableui/CustomizableUI.jsm
browser/components/customizableui/content/panelUI.inc.xhtml
browser/components/customizableui/content/panelUI.js
browser/components/customizableui/test/browser_981305_separator_insertion.js
browser/components/customizableui/test/browser_overflow_use_subviews.js
browser/components/customizableui/test/browser_panel_keyboard_navigation.js
browser/modules/test/browser/browser_UsageTelemetry_interaction.js
browser/tools/mozscreenshots/mozscreenshots/extension/configurations/AppMenu.jsm
devtools/startup/DevToolsStartup.jsm
--- a/browser/base/content/browser.xhtml
+++ b/browser/base/content/browser.xhtml
@@ -761,16 +761,28 @@
                      class="panel-subview-footer subviewbutton"
                      label="&appMenuHistory.showAll.label;"
                      oncommand="PlacesCommandHook.showPlacesOrganizer('History'); CustomizableUI.hidePanelForNode(this);"/>
     </panelview>
 
     <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"
                        class="subviewbutton subviewbutton-iconic subviewbutton-nav"
                        label="&bookmarksSubview.label;"
                        closemenu="none"
                        oncommand="BookmarkingUI.showSubView(this);"/>
         <toolbarbutton id="appMenu-library-pocket-button"
--- a/browser/base/content/test/keyboard/browser_toolbarButtonKeyPress.js
+++ b/browser/base/content/test/keyboard/browser_toolbarButtonKeyPress.js
@@ -77,19 +77,19 @@ add_task(async function testLibraryButto
 // The Developer menu should appear and focus should move inside it.
 add_task(async function testDeveloperButtonPress() {
   CustomizableUI.addWidgetToArea(
     "developer-button",
     CustomizableUI.AREA_NAVBAR
   );
   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);
   view.closest("panel").hidePopup();
   await hidden;
   CustomizableUI.reset();
 });
 
--- a/browser/components/customizableui/CustomizableUI.jsm
+++ b/browser/components/customizableui/CustomizableUI.jsm
@@ -1752,17 +1752,17 @@ var CustomizableUIInternal = {
       // If the widget has a view, and has view showing / hiding listeners,
       // hook those up to this widget.
       if (aWidget.type == "view") {
         log.debug(
           "Widget " +
             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
           // one sub-view at a time.
           viewNode.classList.add("PanelUI-subView");
           if (aWidget.source == CustomizableUI.SOURCE_BUILTIN) {
             nodeClasses.push("subviewbutton-nav");
           }
--- a/browser/components/customizableui/content/panelUI.inc.xhtml
+++ b/browser/components/customizableui/content/panelUI.inc.xhtml
@@ -599,28 +599,16 @@
       </vbox>
       <toolbarbutton id="panelMenu_showAllBookmarks"
                      label="&showAllBookmarks2.label;"
                      class="subviewbutton panel-subview-footer"
                      command="Browser:ShowAllBookmarks"
                      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">
           <hbox id="PanelUI-profiler-header-bar">
             <label flex="1" value="Firefox Profiler" />
             <vbox class="PanelUI-profiler-toolbarbutton-container">
               <toolbarbutton id="PanelUI-profiler-info-button"
                             class="panel-info-button"
--- a/browser/components/customizableui/content/panelUI.js
+++ b/browser/components/customizableui/content/panelUI.js
@@ -35,17 +35,16 @@ const PanelUI = {
   /**
    * Used for lazily getting and memoizing elements from the document. Lazy
    * getters are set in init, and memoizing happens after the first retrieval.
    */
   get kElements() {
     return {
       mainView: "appMenu-mainView",
       multiView: "appMenu-multiView",
-      helpView: "PanelUI-helpView",
       menuButton: "PanelUI-menu-button",
       panel: "appMenu-popup",
       addonNotificationContainer: "appMenu-addon-banners",
       overflowFixedList: "widget-overflow-fixed-list",
       overflowPanel: "widget-overflow",
       navbar: "nav-bar",
       whatsNewPanel: "PanelUI-whatsNew",
     };
@@ -153,25 +152,31 @@ const PanelUI = {
     this._addEventListeners();
   },
 
   _addEventListeners() {
     for (let event of this.kEvents) {
       this.panel.addEventListener(event, this);
     }
 
-    this.helpView.addEventListener("ViewShowing", this._onHelpViewShow);
+    PanelMultiView.getViewNode(document, "PanelUI-helpView").addEventListener(
+      "ViewShowing",
+      this._onHelpViewShow
+    );
     this._eventListenersAdded = true;
   },
 
   _removeEventListeners() {
     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;
   },
 
   uninit() {
     this._removeEventListeners();
 
     if (this._notificationPanel) {
       for (let event of this.kEvents) {
--- a/browser/components/customizableui/test/browser_981305_separator_insertion.js
+++ b/browser/components/customizableui/test/browser_981305_separator_insertion.js
@@ -37,19 +37,19 @@ function checkSeparatorInsertion(menuId,
       buttonId,
       CustomizableUI.AREA_FIXED_OVERFLOW_PANEL
     );
 
     await waitForOverflowButtonShown();
 
     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;
     ok(subviewBody.firstElementChild, "Subview should have a kid");
     is(
       subviewBody.firstElementChild.localName,
       "toolbarbutton",
       "There should be no separators to start with"
--- a/browser/components/customizableui/test/browser_overflow_use_subviews.js
+++ b/browser/components/customizableui/test/browser_overflow_use_subviews.js
@@ -33,25 +33,28 @@ add_task(async function check_developer_
     !navbar.hasAttribute("overflowing"),
     "Should start with a non-overflowing toolbar."
   );
   window.resizeTo(kForceOverflowWidthPx, window.outerHeight);
 
   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 button = document.getElementById("developer-button");
+  button.click();
+
   let developerView = document.getElementById("PanelUI-developer");
-  let button = document.getElementById("developer-button");
-  let subviewShownPromise = subviewShown(developerView);
-  button.click();
-  await subviewShownPromise;
+  await BrowserTestUtils.waitForEvent(developerView, "ViewShown");
   let hasSubviews = !!kOverflowPanel.querySelector("panelmultiview");
   let expectedPanel = hasSubviews
     ? kOverflowPanel
     : document.getElementById("customizationui-widget-panel");
   is(
     developerView.closest("panel"),
     expectedPanel,
     "Should be inside the panel"
--- a/browser/components/customizableui/test/browser_panel_keyboard_navigation.js
+++ b/browser/components/customizableui/test/browser_panel_keyboard_navigation.js
@@ -95,30 +95,31 @@ add_task(async function testEnterKeyBeha
   EventUtils.synthesizeKey("KEY_ArrowUp");
   let focusedElement = document.commandDispatcher.focusedElement;
   Assert.equal(
     focusedElement,
     buttons[buttons.length - 1],
     "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 ||
     !focusedElement.id ||
     focusedElement.id != kHelpButtonId
   ) {
     EventUtils.synthesizeKey("KEY_ArrowUp");
     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"
   );
 
   // For posterity, check navigating the subview using up/ down arrow keys as well.
   // When opening a subview, the first control *after* the Back button gets
   // focus.
@@ -145,17 +146,17 @@ add_task(async function testEnterKeyBeha
 
   // Make sure the back button is in focus again.
   while (focusedElement != helpButtons[0]) {
     EventUtils.synthesizeKey("KEY_ArrowDown");
     focusedElement = document.commandDispatcher.focusedElement;
   }
 
   // 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;
 
   // Let's test a 'normal' command button.
   focusedElement = document.commandDispatcher.focusedElement;
   const kFindButtonId = "appMenu-find-button";
   while (
     !focusedElement ||
@@ -199,22 +200,22 @@ add_task(async function testLeftRightKey
   Assert.equal(
     focusedElement.id,
     kHelpButtonId,
     "The last button should be focused after navigating upward"
   );
 
   // 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;
 
   focusedElement = document.commandDispatcher.focusedElement;
   Assert.equal(
     focusedElement.id,
     kHelpButtonId,
     "Help button should be focused again now that we're back in the main view"
@@ -316,14 +317,14 @@ add_task(async function testSpaceDownAft
   Assert.equal(
     document.commandDispatcher.focusedElement,
     button,
     "Help button should be focused after tabbing to it."
   );
 
   // 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();
 });
--- a/browser/modules/test/browser/browser_UsageTelemetry_interaction.js
+++ b/browser/modules/test/browser/browser_UsageTelemetry_interaction.js
@@ -197,21 +197,21 @@ add_task(async function devtools() {
 
     let shown = BrowserTestUtils.waitForEvent(
       elem("appMenu-popup"),
       "popupshown"
     );
     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);
     let hidden = BrowserTestUtils.waitForEvent(
       elem("appMenu-popup"),
       "popuphidden"
     );
     click(
--- a/browser/tools/mozscreenshots/mozscreenshots/extension/configurations/AppMenu.jsm
+++ b/browser/tools/mozscreenshots/mozscreenshots/extension/configurations/AppMenu.jsm
@@ -45,19 +45,19 @@ var AppMenu = {
     appMenuHelpSubview: {
       selectors: ["#appMenu-popup"],
       async applyConfig() {
         let browserWindow = Services.wm.getMostRecentWindow(
           "navigator:browser"
         );
         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;
       },
 
       verifyConfig: verifyConfigHelper,
     },
   },
 };
 
--- a/devtools/startup/DevToolsStartup.jsm
+++ b/devtools/startup/DevToolsStartup.jsm
@@ -66,16 +66,21 @@ ChromeUtils.defineModuleGetter(
   "ProfilerMenuButton",
   "resource://devtools/client/performance-new/popup/menu-button.jsm.js"
 );
 ChromeUtils.defineModuleGetter(
   this,
   "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.
 XPCOMUtils.defineLazyGetter(this, "Telemetry", function() {
   const { require } = ChromeUtils.import(
     "resource://devtools/shared/Loader.jsm"
   );
   // eslint-disable-next-line no-shadow
@@ -570,33 +575,35 @@ DevToolsStartup.prototype = {
         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 = doc.getElementById("PanelUI-developerItems");
+        const developerItems = PanelMultiView.getViewNode(
+          doc,
+          "PanelUI-developerItems"
+        );
         CustomizableUI.clearSubview(developerItems);
         CustomizableUI.fillSubviewFromMenuItems(itemsToDisplay, 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.
         // 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);
 
-        // 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");
         view.id = "PanelUI-developerItems";
         const panel = doc.createXULElement("vbox");
         panel.setAttribute("class", "panel-subview-body");
         view.appendChild(panel);
         doc.getElementById("PanelUI-multiView").appendChild(view);