Bug 1634051 - don't eagerly initialize the all tabs menu, r=mstriemer

The initialization costs of the TabList constructors is very small compared to
the cost of actually calling _populate, so instead of calling init() from an
idle task, we can just wait until the view actually needs to be shown.

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

browser/base/content/browser-allTabsMenu.inc.xhtml

@@ -2,53 +2,44 @@
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 
-<panel id="allTabsMenu"
-       class="cui-widget-panel"
-       role="group"
-       type="arrow"
-       hidden="true"
-       flip="slide"
-       position="bottomcenter topright"
-       noautofocus="true">
-  <panelmultiview mainViewId="allTabsMenu-allTabsView" disablekeynav="true">
-    <panelview id="allTabsMenu-allTabsView" class="PanelUI-subView">
-      <vbox class="panel-subview-body">
-        <toolbarbutton id="allTabsMenu-undoCloseTab"
-                       class="subviewbutton subviewbutton-iconic"
-                       data-l10n-id="all-tabs-menu-undo-close-tab"
-                       key="key_undoCloseTab"
-                       command="History:UndoCloseTab"/>
-        <toolbarbutton id="allTabsMenu-searchTabs"
-                       class="subviewbutton subviewbutton-iconic"
-                       oncommand="gTabsPanel.searchTabs();"
-                       data-l10n-id="all-tabs-menu-search-tabs"/>
-        <toolbarbutton id="allTabsMenu-containerTabsButton"
-                       class="subviewbutton subviewbutton-nav"
-                       closemenu="none"
-                       oncommand="PanelUI.showSubView('allTabsMenu-containerTabsView', this);"
-                       data-l10n-id="all-tabs-menu-new-user-context"/>
-        <toolbarseparator id="allTabsMenu-hiddenTabsSeparator"/>
-        <toolbarbutton id="allTabsMenu-hiddenTabsButton"
-                       class="subviewbutton subviewbutton-nav"
-                       closemenu="none"
-                       oncommand="PanelUI.showSubView('allTabsMenu-hiddenTabsView', this);"
-                       data-l10n-id="all-tabs-menu-hidden-tabs"/>
-        <toolbarseparator id="allTabsMenu-tabsSeparator"/>
-        <vbox id="allTabsMenu-allTabsViewTabs" class="panel-subview-body"/>
-      </vbox>
-    </panelview>
+<html:template id="allTabsMenu-container">
+  <panelview id="allTabsMenu-allTabsView" class="PanelUI-subView">
+    <vbox class="panel-subview-body">
+      <toolbarbutton id="allTabsMenu-undoCloseTab"
+                     class="subviewbutton subviewbutton-iconic"
+                     data-l10n-id="all-tabs-menu-undo-close-tab"
+                     key="key_undoCloseTab"
+                     command="History:UndoCloseTab"/>
+      <toolbarbutton id="allTabsMenu-searchTabs"
+                     class="subviewbutton subviewbutton-iconic"
+                     oncommand="gTabsPanel.searchTabs();"
+                     data-l10n-id="all-tabs-menu-search-tabs"/>
+      <toolbarbutton id="allTabsMenu-containerTabsButton"
+                     class="subviewbutton subviewbutton-nav"
+                     closemenu="none"
+                     oncommand="PanelUI.showSubView('allTabsMenu-containerTabsView', this);"
+                     data-l10n-id="all-tabs-menu-new-user-context"/>
+      <toolbarseparator id="allTabsMenu-hiddenTabsSeparator"/>
+      <toolbarbutton id="allTabsMenu-hiddenTabsButton"
+                     class="subviewbutton subviewbutton-nav"
+                     closemenu="none"
+                     oncommand="PanelUI.showSubView('allTabsMenu-hiddenTabsView', this);"
+                     data-l10n-id="all-tabs-menu-hidden-tabs"/>
+      <toolbarseparator id="allTabsMenu-tabsSeparator"/>
+      <vbox id="allTabsMenu-allTabsViewTabs" class="panel-subview-body"/>
+    </vbox>
+  </panelview>
 
-    <panelview id="allTabsMenu-hiddenTabsView" class="PanelUI-subView">
-      <vbox class="panel-subview-body"/>
-    </panelview>
+  <panelview id="allTabsMenu-hiddenTabsView" class="PanelUI-subView">
+    <vbox class="panel-subview-body"/>
+  </panelview>
 
-    <panelview id="allTabsMenu-containerTabsView" class="PanelUI-subView">
-      <vbox class="panel-subview-body">
-        <toolbarseparator class="container-tabs-submenu-separator"/>
-        <toolbarbutton class="subviewbutton"
-                       data-l10n-id="all-tabs-menu-manage-user-context"
-                       command="Browser:OpenAboutContainers"/>
-      </vbox>
-    </panelview>
-  </panelmultiview>
-</panel>
+  <panelview id="allTabsMenu-containerTabsView" class="PanelUI-subView">
+    <vbox class="panel-subview-body">
+      <toolbarseparator class="container-tabs-submenu-separator"/>
+      <toolbarbutton class="subviewbutton"
+                     data-l10n-id="all-tabs-menu-manage-user-context"
+                     command="Browser:OpenAboutContainers"/>
+    </vbox>
+  </panelview>
+</html:template>

browser/base/content/browser-allTabsMenu.js

@@ -27,6 +27,8 @@ var gTabsPanel = {
     if (this._initializedElements) {
       return;
     }
+    let template = document.getElementById("allTabsMenu-container");
+    template.replaceWith(template.content);
 
     for (let [name, id] of Object.entries(this.kElements)) {
       this[name] = document.getElementById(id);
@@ -147,8 +149,9 @@ var gTabsPanel = {
   },
 
   hideAllTabsPanel() {
-    this.init();
-    PanelMultiView.hidePopup(this.allTabsView.closest("panel"));
+    if (this.allTabsView) {
+      PanelMultiView.hidePopup(this.allTabsView.closest("panel"));
+    }
   },
 
   showHiddenTabsPanel(event) {

browser/base/content/browser.js

@@ -2269,11 +2269,6 @@ var gBrowserInit = {
       gSync.init();
     });
 
-    scheduleIdleTask(() => {
-      // Initialize the all tabs menu
-      gTabsPanel.init();
-    });
-
     scheduleIdleTask(() => {
       // Read prefers-reduced-motion setting
       let reduceMotionQuery = window.matchMedia(

browser/components/originattributes/test/browser/browser_favicon_firstParty.js

@@ -320,6 +320,8 @@ async function doTestForAllTabsFavicon(
 
   assertIconIsData(tabInfo.tab);
 
+  gTabsPanel.init();
+
   // Make the popup of allTabs showing up and trigger the loading of the favicon.
   let allTabsView = document.getElementById("allTabsMenu-allTabsView");
   let allTabsPopupShownPromise = BrowserTestUtils.waitForEvent(

browser/components/originattributes/test/browser/browser_favicon_userContextId.js

@@ -266,6 +266,8 @@ async function doTestForAllTabsFavicon(aTestPage, aFaviconHost, aFaviconURL) {
   // be made for the favicon of allTabs menuitem.
   clearAllImageCaches();
 
+  gTabsPanel.init();
+
   // Make the popup of allTabs showing up and trigger the loading of the favicon.
   let allTabsView = document.getElementById("allTabsMenu-allTabsView");
   let allTabsPopupShownPromise = BrowserTestUtils.waitForEvent(