Bug 1648640, remove character encoding panel view, panic view, SSB view, more view, and what's new panel view from main panel and place in template r=Gijs

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

browser/base/content/browser.js

@@ -2536,7 +2536,10 @@ const SiteSpecificBrowserUI = {
     }
 
     XPCOMUtils.defineLazyGetter(this, "panelBody", () => {
-      return document.querySelector("#appMenu-SSBView .panel-subview-body");
+      return PanelMultiView.getViewNode(
+        document,
+        "appMenu-SSBView .panel-subview-body"
+      );
     });
 
     let initializeMenu = async () => {
@@ -2559,7 +2562,10 @@ const SiteSpecificBrowserUI = {
       "popupshowing",
       () => {
         let blocker = initializeMenu();
-        document.getElementById("appMenu-SSBView").addEventListener(
+        PanelMultiView.getViewNode(
+          document,
+          "appMenu-SSBView"
+        ).addEventListener(
           "ViewShowing",
           event => {
             event.detail.addBlocker(blocker);

browser/base/content/browser.xhtml

@@ -906,6 +906,72 @@
       </vbox>
     </panelview>
 
+    <panelview id="PanelUI-characterEncodingView" flex="1">
+      <vbox class="panel-subview-body">
+        <vbox id="PanelUI-characterEncodingView-pinned"
+              class="PanelUI-characterEncodingView-list"/>
+        <toolbarseparator/>
+        <vbox id="PanelUI-characterEncodingView-charsets"
+              class="PanelUI-characterEncodingView-list"/>
+      </vbox>
+    </panelview>
+
+    <panelview id="PanelUI-panicView" flex="1"
+               descriptionheightworkaround="true">
+      <vbox class="panel-subview-body">
+        <hbox id="PanelUI-panic-timeframe">
+          <image id="PanelUI-panic-timeframe-icon" alt=""/>
+          <vbox flex="1">
+            <description data-l10n-id="panic-main-timeframe-desc" id="PanelUI-panic-mainDesc"></description>
+            <radiogroup id="PanelUI-panic-timeSpan" aria-labelledby="PanelUI-panic-mainDesc" closemenu="none">
+              <radio id="PanelUI-panic-5min" data-l10n-id="panic-button-5min" selected="true"
+                    value="5" class="subviewradio"/>
+              <radio id="PanelUI-panic-2hr" data-l10n-id="panic-button-2hr"
+                    value="2" class="subviewradio"/>
+              <radio id="PanelUI-panic-day" data-l10n-id="panic-button-day"
+                    value="6" class="subviewradio"/>
+            </radiogroup>
+          </vbox>
+        </hbox>
+        <vbox id="PanelUI-panic-explanations">
+          <label id="PanelUI-panic-actionlist-main-label" data-l10n-id="panic-button-action-desc"></label>
+
+          <label id="PanelUI-panic-actionlist-windows" class="PanelUI-panic-actionlist" data-l10n-id="panic-button-delete-tabs-and-windows"></label>
+          <label id="PanelUI-panic-actionlist-cookies" class="PanelUI-panic-actionlist" data-l10n-id="panic-button-delete-cookies"></label>
+          <label id="PanelUI-panic-actionlist-history" class="PanelUI-panic-actionlist" data-l10n-id="panic-button-delete-history"></label>
+          <label id="PanelUI-panic-actionlist-newwindow" class="PanelUI-panic-actionlist" data-l10n-id="panic-button-open-new-window"></label>
+
+          <label id="PanelUI-panic-warning" data-l10n-id="panic-button-undo-warning"></label>
+        </vbox>
+        <button id="PanelUI-panic-view-button"
+                data-l10n-id="panic-button-forget-button"/>
+      </vbox>
+    </panelview>
+
+    <panelview id="appMenu-SSBView" class="PanelUI-subView">
+      <vbox class="panel-subview-body">
+      </vbox>
+    </panelview>
+
+    <panelview id="appMenu-moreView" title="&moreMenu.label;" class="PanelUI-subView">
+      <vbox class="panel-subview-body">
+        <toolbarbutton id="appMenu-taskmanager-button"
+                       class="subviewbutton subviewbutton-iconic"
+                       label="&taskManagerCmd.label;"
+                       oncommand="switchToTabHavingURI('about:performance', true)"/>
+        <toolbarbutton id="appMenu-characterencoding-button"
+                       class="subviewbutton subviewbutton-nav"
+                       label="&charsetMenu2.label;"
+                       closemenu="none"
+                       oncommand="PanelUI.showSubView('PanelUI-characterEncodingView', this)"/>
+        <toolbarbutton id="appMenu-workoffline-button"
+                       class="subviewbutton"
+                       data-l10n-id="menu-file-go-offline"
+                       type="checkbox"
+                       command="cmd_toggleOfflineStatus"/>
+      </vbox>
+    </panelview>
+
     <panelview id="appMenu-libraryView" class="PanelUI-subView">
       <vbox class="panel-subview-body">
         <toolbarbutton id="appMenu-library-bookmarks-button"
@@ -969,6 +1035,25 @@
                        oncommand="BookmarkingUI.toggleBookmarksToolbar('bookmark-tools');"/>
       </vbox>
     </panelview>
+
+    <panelview id="PanelUI-whatsNew" class="PanelUI-subView">
+      <vbox class="panel-subview-body">
+        <box id="PanelUI-whatsNew-title" class="panel-header">
+          <label data-l10n-id="whatsnew-panel-header"/>
+        </box>
+        <toolbaritem id="PanelUI-whatsNew-content"
+                     orient="vertical"
+                     smoothscroll="false">
+          <html:div id="PanelUI-whatsNew-message-container" role="document">
+            <!-- What's New messages will be rendered here -->
+          </html:div>
+        </toolbaritem>
+      </vbox>
+      <checkbox id="panelMenu-toggleWhatsNew"
+                class="panelMenu-toggleWhatsNew-checkbox"
+                oncommand="ToolbarPanelHub.toggleWhatsNewPref(event)"
+                data-l10n-id="whatsnew-panel-footer-checkbox"/>
+    </panelview>
   </html:template>
 
   <!-- Temporary wrapper until we move away from XUL flex to allow a negative

browser/components/customizableui/CustomizableWidgets.jsm

@@ -907,42 +907,7 @@ if (Services.prefs.getBoolPref("privacy.panicButton.enabled")) {
       let win = aEvent.target.ownerGlobal;
       let doc = win.document;
       let eventBlocker = null;
-      if (!doc.querySelector("#PanelUI-panic-timeframe")) {
+      eventBlocker = doc.l10n.translateElements([aEvent.target]);
-        win.MozXULElement.insertFTLIfNeeded("browser/panicButton.ftl");
-        let frag = win.MozXULElement.parseXULToFragment(`
-          <vbox class="panel-subview-body">
-            <hbox id="PanelUI-panic-timeframe">
-              <image id="PanelUI-panic-timeframe-icon" alt=""/>
-              <vbox flex="1">
-                <description data-l10n-id="panic-main-timeframe-desc" id="PanelUI-panic-mainDesc"></description>
-                <radiogroup id="PanelUI-panic-timeSpan" aria-labelledby="PanelUI-panic-mainDesc" closemenu="none">
-                  <radio id="PanelUI-panic-5min" data-l10n-id="panic-button-5min" selected="true"
-                        value="5" class="subviewradio"/>
-                  <radio id="PanelUI-panic-2hr" data-l10n-id="panic-button-2hr"
-                        value="2" class="subviewradio"/>
-                  <radio id="PanelUI-panic-day" data-l10n-id="panic-button-day"
-                        value="6" class="subviewradio"/>
-                </radiogroup>
-              </vbox>
-            </hbox>
-            <vbox id="PanelUI-panic-explanations">
-              <label id="PanelUI-panic-actionlist-main-label" data-l10n-id="panic-button-action-desc"></label>
-
-              <label id="PanelUI-panic-actionlist-windows" class="PanelUI-panic-actionlist" data-l10n-id="panic-button-delete-tabs-and-windows"></label>
-              <label id="PanelUI-panic-actionlist-cookies" class="PanelUI-panic-actionlist" data-l10n-id="panic-button-delete-cookies"></label>
-              <label id="PanelUI-panic-actionlist-history" class="PanelUI-panic-actionlist" data-l10n-id="panic-button-delete-history"></label>
-              <label id="PanelUI-panic-actionlist-newwindow" class="PanelUI-panic-actionlist" data-l10n-id="panic-button-open-new-window"></label>
-
-              <label id="PanelUI-panic-warning" data-l10n-id="panic-button-undo-warning"></label>
-            </vbox>
-            <button id="PanelUI-panic-view-button"
-                    data-l10n-id="panic-button-forget-button"/>
-          </vbox>
-        `);
-
-        aEvent.target.appendChild(frag);
-        eventBlocker = doc.l10n.translateElements([aEvent.target]);
-      }
 
       let forgetButton = aEvent.target.querySelector(
         "#PanelUI-panic-view-button"

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

@@ -569,45 +569,6 @@
       </vbox>
     </panelview>
 
-    <panelview id="PanelUI-characterEncodingView" flex="1">
-      <vbox class="panel-subview-body">
-        <vbox id="PanelUI-characterEncodingView-pinned"
-              class="PanelUI-characterEncodingView-list"/>
-        <toolbarseparator/>
-        <vbox id="PanelUI-characterEncodingView-charsets"
-              class="PanelUI-characterEncodingView-list"/>
-      </vbox>
-    </panelview>
-
-    <panelview id="PanelUI-panicView" flex="1"
-               descriptionheightworkaround="true">
-      <!-- This is constructed in CustomizableWidgets.jsm -->
-    </panelview>
-
-    <panelview id="appMenu-moreView" title="&moreMenu.label;" class="PanelUI-subView">
-      <vbox class="panel-subview-body">
-        <toolbarbutton id="appMenu-taskmanager-button"
-                       class="subviewbutton subviewbutton-iconic"
-                       label="&taskManagerCmd.label;"
-                       oncommand="switchToTabHavingURI('about:performance', true)"/>
-        <toolbarbutton id="appMenu-characterencoding-button"
-                       class="subviewbutton subviewbutton-nav"
-                       label="&charsetMenu2.label;"
-                       closemenu="none"
-                       oncommand="PanelUI.showSubView('PanelUI-characterEncodingView', this)"/>
-        <toolbarbutton id="appMenu-workoffline-button"
-                       class="subviewbutton"
-                       data-l10n-id="menu-file-go-offline"
-                       type="checkbox"
-                       command="cmd_toggleOfflineStatus"/>
-      </vbox>
-    </panelview>
-
-    <panelview id="appMenu-SSBView" class="PanelUI-subView">
-      <vbox class="panel-subview-body">
-      </vbox>
-    </panelview>
-
     <panelview id="PanelUI-fxa" title="&fxa.menu.account.label;" class="PanelUI-subView" descriptionheightworkaround="true">
       <vbox id="PanelUI-fxa-menu" class="panel-subview-body">
         <toolbarbutton id="fxa-manage-account-button"
@@ -723,25 +684,6 @@
                        oncommand="gSync.openConnectAnotherDeviceFromFxaMenu(this);"/>
       </vbox>
     </panelview>
-
-    <panelview id="PanelUI-whatsNew" class="PanelUI-subView">
-      <vbox class="panel-subview-body">
-        <box id="PanelUI-whatsNew-title" class="panel-header">
-          <label data-l10n-id="whatsnew-panel-header"/>
-        </box>
-        <toolbaritem id="PanelUI-whatsNew-content"
-                     orient="vertical"
-                     smoothscroll="false">
-          <html:div id="PanelUI-whatsNew-message-container" role="document">
-            <!-- What's New messages will be rendered here -->
-          </html:div>
-        </toolbaritem>
-      </vbox>
-      <checkbox id="panelMenu-toggleWhatsNew"
-                class="panelMenu-toggleWhatsNew-checkbox"
-                oncommand="ToolbarPanelHub.toggleWhatsNewPref(event)"
-                data-l10n-id="whatsnew-panel-footer-checkbox"/>
-    </panelview>
   </panelmultiview>
 </panel>
 

browser/components/customizableui/content/panelUI.js

@@ -46,7 +46,6 @@ const PanelUI = {
       overflowFixedList: "widget-overflow-fixed-list",
       overflowPanel: "widget-overflow",
       navbar: "nav-bar",
-      whatsNewPanel: "PanelUI-whatsNew",
     };
   },
 
@@ -198,7 +197,9 @@ const PanelUI = {
     if (this.libraryView) {
       this.libraryView.removeEventListener("ViewShowing", this);
     }
-    this.whatsNewPanel.removeEventListener("ViewShowing", this);
+    if (this.whatsNewPanel) {
+      this.whatsNewPanel.removeEventListener("ViewShowing", this);
+    }
   },
 
   /**
@@ -454,6 +455,7 @@ const PanelUI = {
 
     this.ensureLibraryInitialized(viewNode);
     this.ensureWhatsNewInitialized(viewNode);
+    this.ensurePanicViewInitialized(viewNode);
 
     let container = aAnchor.closest("panelmultiview");
     if (container) {
@@ -683,14 +685,36 @@ const PanelUI = {
    * @param {panelview} panelView The What's New panelview.
    */
   ensureWhatsNewInitialized(panelView) {
-    if (panelView != this.whatsNewPanel || panelView._initialized) {
+    if (panelView.id != "PanelUI-whatsNew" || panelView._initialized) {
       return;
     }
 
+    if (!this.whatsNewPanel) {
+      this.whatsNewPanel = panelView;
+    }
+
     panelView._initialized = true;
     panelView.addEventListener("ViewShowing", this);
   },
 
+  /**
+   * Adds FTL before appending the panic view markup to the main DOM.
+   *
+   * @param {panelview} panelView The Panic View panelview.
+   */
+  ensurePanicViewInitialized(panelView) {
+    if (panelView.id != "PanelUI-panicView" || panelView._initialized) {
+      return;
+    }
+
+    if (!this.panic) {
+      this.panic = panelView;
+    }
+
+    MozXULElement.insertFTLIfNeeded("browser/panicButton.ftl");
+    panelView._initialized = true;
+  },
+
   /**
    * When the What's New panel is showing, we fetch the messages to show.
    */

browser/components/customizableui/test/browser_967000_button_charEncoding.js

@@ -50,11 +50,11 @@ add_task(async function() {
     !charEncodingButton.hasAttribute("disabled"),
     "The Character encoding button gets enabled"
   );
+  charEncodingButton.click();
   let characterEncodingView = document.getElementById(
     "PanelUI-characterEncodingView"
   );
   let subviewShownPromise = subviewShown(characterEncodingView);
-  charEncodingButton.click();
   await subviewShownPromise;
 
   ok(

browser/components/customizableui/test/browser_987640_charEncoding.js

@@ -27,11 +27,11 @@ add_task(async function() {
 
   await document.getElementById("nav-bar").overflowable.show();
   let charEncodingButton = document.getElementById("characterencoding-button");
+  charEncodingButton.click();
   let characterEncodingView = document.getElementById(
     "PanelUI-characterEncodingView"
   );
   let subviewShownPromise = subviewShown(characterEncodingView);
-  charEncodingButton.click();
   await subviewShownPromise;
 
   let checkedButtons = characterEncodingView.querySelectorAll(

browser/components/customizableui/test/browser_character_encoding_ctrl_click.js

@@ -20,10 +20,10 @@ add_task(async function test_character_encoding_menu() {
   );
 
   const button = document.getElementById("characterencoding-button");
-  const view = document.getElementById("PanelUI-characterEncodingView");
-
-  let shownPromise = subviewShown(view);
   EventUtils.synthesizeMouseAtCenter(button, { ctrlKey: true });
+
+  const view = document.getElementById("PanelUI-characterEncodingView");
+  let shownPromise = subviewShown(view);
   await shownPromise;
   ok(true, "Character encoding menu shown after button pressed");
 

browser/components/newtab/lib/ToolbarPanelHub.jsm

@@ -15,6 +15,11 @@ XPCOMUtils.defineLazyModuleGetters(this, {
     "resource://messaging-system/lib/SpecialMessageActions.jsm",
   RemoteL10n: "resource://activity-stream/lib/RemoteL10n.jsm",
 });
+ChromeUtils.defineModuleGetter(
+  this,
+  "PanelMultiView",
+  "resource:///modules/PanelMultiView.jsm"
+);
 XPCOMUtils.defineLazyServiceGetter(
   this,
   "TrackingDBService",
@@ -176,7 +181,7 @@ class _ToolbarPanelHub {
     const messages =
       (options.force && options.messages) ||
       (await this.messages).sort(this._sortWhatsNewMessages);
-    const container = doc.getElementById(containerId);
+    const container = PanelMultiView.getViewNode(doc, containerId);
 
     if (messages) {
       // Targeting attribute state might have changed making new messages
@@ -215,9 +220,10 @@ class _ToolbarPanelHub {
 
   removeMessages(win, containerId) {
     const doc = win.document;
-    const messageNodes = doc
+    const messageNodes = PanelMultiView.getViewNode(
-      .getElementById(containerId)
+      doc,
-      .querySelectorAll(".whatsNew-message");
+      containerId
+    ).querySelectorAll(".whatsNew-message");
     for (const messageNode of messageNodes) {
       messageNode.remove();
     }

browser/components/newtab/test/unit/lib/ToolbarPanelHub.test.js

@@ -27,6 +27,7 @@ describe("ToolbarPanelHub", () => {
   let defaultSearchStub;
   let scriptloaderStub;
   let fakeRemoteL10n;
+  let getViewNodeStub;
 
   beforeEach(async () => {
     sandbox = sinon.createSandbox();
@@ -125,6 +126,7 @@ describe("ToolbarPanelHub", () => {
       new Date() - 500
     );
     getEventsByDateRangeStub = sandbox.stub().returns([]);
+    getViewNodeStub = sandbox.stub().returns(fakeElementById);
     defaultSearchStub = { defaultEngine: { name: "DDG" } };
     fakeRemoteL10n = {
       l10n: {},
@@ -158,6 +160,9 @@ describe("ToolbarPanelHub", () => {
         handleAction: sandbox.stub(),
       },
       RemoteL10n: fakeRemoteL10n,
+      PanelMultiView: {
+        getViewNode: getViewNodeStub,
+      },
     });
   });
   afterEach(() => {

browser/components/ssb/tests/browser/browser_ssb_list_menu.js

@@ -6,26 +6,35 @@ add_task(async () => {
   let win = await BrowserTestUtils.openNewBrowserWindow();
 
   let button = win.document.getElementById("appMenu-ssb-button");
-  let panel = win.document.querySelector(
-    "#appMenu-SSBView .panel-subview-body"
-  );
 
   Assert.ok(button.hidden, "Button should be hidden.");
-  Assert.equal(panel.firstElementChild, null, "Should be nothing in the list.");
+  Assert.equal(
+    win.document.querySelector("#appMenu-SSBView .panel-subview-body"),
+    null,
+    "Panel should not be available"
+  );
 
   let ssb = await SiteSpecificBrowser.createFromURI(
     Services.io.newURI(gHttpsTestRoot)
   );
 
   Assert.ok(button.hidden, "Button should be hidden.");
-  Assert.equal(panel.firstElementChild, null, "Should be nothing in the list.");
+  Assert.equal(
+    win.document.querySelector("#appMenu-SSBView .panel-subview-body"),
+    null,
+    "Panel should not be available"
+  );
 
   await ssb.install();
 
   // Button should still be hidden, we don't populate the list until it is
   // first opened.
   Assert.ok(button.hidden, "Button should be hidden.");
-  Assert.equal(panel.firstElementChild, null, "Should be nothing in the list.");
+  Assert.equal(
+    win.document.querySelector("#appMenu-SSBView .panel-subview-body"),
+    null,
+    "Panel should not be available"
+  );
 
   let appMenuOpened = BrowserTestUtils.waitForEvent(
     win.document.getElementById("appMenu-popup"),
@@ -42,6 +51,22 @@ add_task(async () => {
   await Promise.all([appMenuOpened, buttonShown]);
 
   Assert.ok(!button.hidden, "Button should be visible.");
+
+  EventUtils.synthesizeMouseAtCenter(
+    win.document.getElementById("appMenu-ssb-button"),
+    {},
+    win
+  );
+
+  let panelShown = BrowserTestUtils.waitForEvent(
+    win.document.getElementById("appMenu-SSBView"),
+    "ViewShown"
+  );
+  let panel = win.document.querySelector(
+    "#appMenu-SSBView .panel-subview-body"
+  );
+  await panelShown;
+
   Assert.notEqual(
     panel.firstElementChild,
     null,
@@ -53,18 +78,6 @@ add_task(async () => {
     "Should have the right ID."
   );
 
-  let panelShown = BrowserTestUtils.waitForEvent(
-    win.document.getElementById("appMenu-SSBView"),
-    "ViewShown"
-  );
-
-  EventUtils.synthesizeMouseAtCenter(
-    win.document.getElementById("appMenu-ssb-button"),
-    {},
-    win
-  );
-  await panelShown;
-
   let ssbOpened = waitForSSB();
   EventUtils.synthesizeMouseAtCenter(panel.firstElementChild, {}, win);
   let ssbWin = await ssbOpened;