Bug 1634033: lazify menus and panels used within customize mode by placing in template. r=Gijs

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

browser/base/content/browser.xhtml

@@ -1393,9 +1393,11 @@
     <vbox id="browser-border-end" hidden="true" layer="true"/>
   </hbox>
 
-  <box id="customization-container" flex="1" hidden="true"><![CDATA[
+  <html:template id="customizationPanel">
+    <box id="customization-container" flex="1" hidden="true"><![CDATA[
 #include ../../components/customizableui/content/customizeMode.inc.xhtml
-  ]]></box>
+    ]]></box>
+  </html:template>
 
   <html:div id="fullscreen-and-pointerlock-wrapper">
     <html:div id="fullscreen-warning" class="pointerlockfswarning" hidden="true">

browser/components/customizableui/CustomizeMode.jsm

@@ -130,6 +130,8 @@ function CustomizeMode(aWindow) {
   this.browser = aWindow.gBrowser;
   this.areas = new Set();
 
+  this._ensureCustomizationPanels();
+
   let content = this.$("customization-content-container");
   if (!content) {
     this.window.MozXULElement.insertFTLIfNeeded("browser/customizeMode.ftl");
@@ -1723,6 +1725,14 @@ CustomizeMode.prototype = {
     return this.window.TabsInTitlebar.systemSupported;
   },
 
+  _ensureCustomizationPanels() {
+    let template = this.$("customizationPanel");
+    template.replaceWith(template.content);
+
+    let wrapper = this.$("customModeWrapper");
+    wrapper.replaceWith(wrapper.content);
+  },
+
   _updateTitlebarCheckbox() {
     let drawInTitlebar = Services.prefs.getBoolPref(
       kDrawInTitlebarPref,
@@ -2592,7 +2602,6 @@ CustomizeMode.prototype = {
   },
 
   _setupDownloadAutoHideToggle() {
-    this.$(kDownloadAutohidePanelId).removeAttribute("hidden");
     this.window.addEventListener("click", this._checkForDownloadsClick, true);
   },
 

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

@@ -182,23 +182,37 @@
   </panel>
 </html:template>
 
-<menupopup id="customizationPaletteItemContextMenu"
-           onpopupshowing="gCustomizeMode.onPaletteContextMenuShowing(event)">
-  <menuitem oncommand="gCustomizeMode.addToToolbar(document.popupNode)"
-            class="customize-context-addToToolbar"
-            accesskey="&customizeMenu.addToToolbar.accesskey;"
-            label="&customizeMenu.addToToolbar.label;"/>
-  <menuitem oncommand="gCustomizeMode.addToPanel(document.popupNode)"
-            class="customize-context-addToPanel"
-            accesskey="&customizeMenu.addToOverflowMenu.accesskey;"
-            label="&customizeMenu.addToOverflowMenu.label;"/>
-</menupopup>
+<html:template id="customModeWrapper">
+  <menupopup id="customizationPaletteItemContextMenu"
+             onpopupshowing="gCustomizeMode.onPaletteContextMenuShowing(event)">
+    <menuitem oncommand="gCustomizeMode.addToToolbar(document.popupNode)"
+              class="customize-context-addToToolbar"
+              accesskey="&customizeMenu.addToToolbar.accesskey;"
+              label="&customizeMenu.addToToolbar.label;"/>
+    <menuitem oncommand="gCustomizeMode.addToPanel(document.popupNode)"
+              class="customize-context-addToPanel"
+              accesskey="&customizeMenu.addToOverflowMenu.accesskey;"
+              label="&customizeMenu.addToOverflowMenu.label;"/>
+  </menupopup>
 
-<menupopup id="customizationPanelContextMenu">
-  <menuitem command="cmd_CustomizeToolbars"
-            accesskey="&customizeMenu.addMoreItems.accesskey;"
-            label="&customizeMenu.addMoreItems.label;"/>
-</menupopup>
+  <menupopup id="customizationPanelContextMenu">
+    <menuitem command="cmd_CustomizeToolbars"
+              accesskey="&customizeMenu.addMoreItems.accesskey;"
+              label="&customizeMenu.addMoreItems.label;"/>
+  </menupopup>
+  <panel id="downloads-button-autohide-panel"
+         role="group"
+         type="arrow"
+         onpopupshown="gCustomizeMode._downloadPanelAutoHideTimeout = setTimeout(() => event.target.hidePopup(), 4000);"
+         onmouseover="clearTimeout(gCustomizeMode._downloadPanelAutoHideTimeout);"
+         onmouseout="gCustomizeMode._downloadPanelAutoHideTimeout = setTimeout(() => event.target.hidePopup(), 2000);"
+         onpopuphidden="clearTimeout(gCustomizeMode._downloadPanelAutoHideTimeout);"
+         >
+    <checkbox id="downloads-button-autohide-checkbox"
+              label="&customizeMode.autoHideDownloadsButton.label;" checked="true"
+              oncommand="gCustomizeMode.onDownloadsAutoHideChange(event)"/>
+  </panel>
+</html:template>
 
 <panel id="appMenu-popup"
        class="cui-widget-panel panel-no-padding"
@@ -982,20 +996,6 @@
   </panelmultiview>
 </panel>
 
-<panel id="downloads-button-autohide-panel"
-       role="group"
-       type="arrow"
-       hidden="true"
-       onpopupshown="gCustomizeMode._downloadPanelAutoHideTimeout = setTimeout(() => event.target.hidePopup(), 4000);"
-       onmouseover="clearTimeout(gCustomizeMode._downloadPanelAutoHideTimeout);"
-       onmouseout="gCustomizeMode._downloadPanelAutoHideTimeout = setTimeout(() => event.target.hidePopup(), 2000);"
-       onpopuphidden="clearTimeout(gCustomizeMode._downloadPanelAutoHideTimeout);"
-       >
-  <checkbox id="downloads-button-autohide-checkbox"
-            label="&customizeMode.autoHideDownloadsButton.label;" checked="true"
-            oncommand="gCustomizeMode.onDownloadsAutoHideChange(event)"/>
-</panel>
-
 <html:template id="extensionNotificationTemplate">
   <panel id="extension-notification-panel"
          class="popup-notification-panel panel-no-padding"

browser/components/customizableui/test/browser_reload_tab.js

@@ -4,12 +4,12 @@
  * Check that customize mode doesn't break when its tab is reloaded.
  */
 add_task(async function reload_tab() {
-  let customizationContainer = document.getElementById(
-    "customization-container"
-  );
   let initialTab = gBrowser.selectedTab;
   let customizeTab = BrowserTestUtils.addTab(gBrowser, "about:blank");
   gCustomizeMode.setTab(customizeTab);
+  let customizationContainer = document.getElementById(
+    "customization-container"
+  );
 
   is(
     customizationContainer.clientWidth,