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 538129 df91fb44b2d4bd8cf55cb2a5360094feb2c6ca6b
parent 538128 74aed250da9ec95e466416556bbd42022c0bb43b
child 538130 37c7c2fad0cb5246950be9ae2dd2075f4ef879e6
push id37558
push userdluca@mozilla.com
push dateWed, 01 Jul 2020 09:30:12 +0000
treeherdermozilla-central@e950bdd669d4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs
bugs1648639
milestone80.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 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);