feat: Improve startup time and reduce initial animations, b=bug #6997, c=common, workspaces

src/zen/common/ZenCustomizableUI.sys.mjs

@@ -37,7 +37,7 @@ export var ZenCustomizableUI = new (class {
   }
 
   _addSidebarButtons(window) {
-    const kDefaultSidebarWidth = '228px';
+    const kDefaultSidebarWidth = '210px';
     const toolbox = window.gNavToolbox;
 
     // Set a splitter to navigator-toolbox

src/zen/common/ZenStartup.mjs

@@ -2,12 +2,14 @@
 // 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/.
 {
-  var ZenStartup = {
+  var gZenStartup = {
     _watermarkIgnoreElements: ['zen-toast-container'],
 
-    async init() {
+    isReady: false,
+
+    init() {
       this.openWatermark();
-      await this._initBrowserBackground();
+      this._initBrowserBackground();
       this._changeSidebarLocation();
       this._zenInitBrowserLayout();
     },
@@ -21,7 +23,7 @@
       document.getElementById('browser').prepend(background);
     },
 
-    async _zenInitBrowserLayout() {
+    _zenInitBrowserLayout() {
       if (this.__hasInitBrowserLayout) return;
       this.__hasInitBrowserLayout = true;
       try {
@@ -42,7 +44,9 @@
         }
 
         gZenWorkspaces.init();
-        gZenUIManager.init();
+        setTimeout(() => {
+          gZenUIManager.init();
+        }, 0);
 
         this._checkForWelcomePage();
 
@@ -75,21 +79,16 @@
         await SessionStore.promiseAllWindowsRestored;
         delete gZenUIManager.promiseInitialized;
         this._initSearchBar();
-        setTimeout(() => {
-          gZenCompactModeManager.init();
-          setTimeout(() => {
-            // Fix for https://github.com/zen-browser/desktop/issues/7605, specially in compact mode
-            if (gURLBar.hasAttribute('breakout-extend')) {
-              gURLBar.focus();
-            }
-            setTimeout(() => {
-              // A bit of a hack to make sure the tabs toolbar is updated.
-              // Just in case we didn't get the right size.
-              gZenUIManager.updateTabsToolbar();
-            }, 0);
-          }, 100);
-        }, 0);
+        gZenCompactModeManager.init();
+        // Fix for https://github.com/zen-browser/desktop/issues/7605, specially in compact mode
+        if (gURLBar.hasAttribute('breakout-extend')) {
+          gURLBar.focus();
+        }
+        // A bit of a hack to make sure the tabs toolbar is updated.
+        // Just in case we didn't get the right size.
+        gZenUIManager.updateTabsToolbar();
         this.closeWatermark();
+        this.isReady = true;
       });
     },
 
@@ -114,8 +113,7 @@
               opacity: [0, 1],
             },
             {
-              delay: 0.6,
-              easing: 'ease-in-out',
+              duration: 0.1,
             }
           )
           .then(() => {
@@ -165,7 +163,7 @@
   window.addEventListener(
     'MozBeforeInitialXULLayout',
     () => {
-      ZenStartup.init();
+      gZenStartup.init();
     },
     { once: true }
   );

src/zen/common/ZenUIManager.mjs

@@ -549,7 +549,8 @@ var gZenVerticalTabsManager = {
       !aTab ||
       !gZenUIManager._hasLoadedDOM ||
       !aTab.isConnected ||
-      gZenUIManager.testingEnabled
+      gZenUIManager.testingEnabled ||
+      !gZenStartup.isReady
     ) {
       return;
     }

src/zen/workspaces/ZenWorkspace.mjs

@@ -11,7 +11,7 @@
           <toolbarbutton class="toolbarbutton-1 chromeclass-toolbar-additional zen-workspaces-actions" context="zenWorkspaceMoreActions"></toolbarbutton>
         </vbox>
         <arrowscrollbox orient="vertical" class="workspace-arrowscrollbox">
-          <vbox class="zen-workspace-tabs-section zen-workspace-pinned-tabs-section">
+          <vbox class="zen-workspace-tabs-section zen-workspace-pinned-tabs-section" hide-separator="true">
             <html:div class="pinned-tabs-container-separator"></html:div>
           </vbox>
           <vbox class="zen-workspace-tabs-section zen-workspace-normal-tabs-section">

src/zen/workspaces/ZenWorkspaces.mjs

@@ -1606,7 +1606,7 @@ var gZenWorkspaces = new (class extends nsZenMultiWindowFeature {
     ) {
       delete this._alwaysAnimatePaddingTop;
       const essentialsHeight = essentialContainer.getBoundingClientRect().height;
-      if (!forAnimation && animateContainer && gZenUIManager.motion) {
+      if (!forAnimation && animateContainer && gZenUIManager.motion && gZenStartup.isReady) {
         gZenUIManager.motion.animate(
           workspaceElement,
           {

src/zen/zen.globals.js

@@ -17,6 +17,7 @@ export default [
 
   'gZenUIManager',
   'gZenVerticalTabsManager',
+  'gZenStartup',
 
   'gZenWorkspaces',
   'ZenWorkspacesEngine',