Refactor ZenWorkspaces initialization and enhance pinned tab management for improved performance and layout

src/browser/base/content/browser-init-js.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/base/content/browser-init.js b/browser/base/content/browser-init.js
-index 63100defacf66c6b3232b9e0a783a5fd14e3a46a..22b79b021ff0baab4dac602447a124308208c828 100644
+index 63100defacf66c6b3232b9e0a783a5fd14e3a46a..398d685b142a47a85619dfc55772ea98ccfad445 100644
 --- a/browser/base/content/browser-init.js
 +++ b/browser/base/content/browser-init.js
 @@ -162,13 +162,15 @@ var gBrowserInit = {
@@ -30,3 +30,11 @@ index 63100defacf66c6b3232b9e0a783a5fd14e3a46a..22b79b021ff0baab4dac602447a12430
      if (gToolbarKeyNavEnabled) {
        ToolbarKeyboardNavigator.init();
      }
+@@ -365,6 +371,7 @@ var gBrowserInit = {
+     TelemetryTimestamps.add("delayedStartupStarted");
+ 
+     this._cancelDelayedStartup();
++    ZenWorkspaces.afterLoadInit();
+ 
+     gBrowser.addEventListener(
+       "PermissionStateChange",

src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css

@@ -554,12 +554,12 @@
         width: -moz-available;
       }
 
-      &[zen-pinned-changed='true'] .tab-icon-image {
+      &[zen-pinned-changed='true'] .tab-icon-stack {
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
-        /* -4px for the reset tab button extra margin */
-        left: calc(-1 * var(--toolbarbutton-inner-padding) - 16px);
+        /* 16px divided by 2, it's the icon size */
+        left: 8px;
         margin: 0 !important;
         pointer-events: none;
       }
@@ -579,7 +579,7 @@
           opacity: 0.6;
         }
 
-        & ~ .tab-icon-stack .tab-icon-image {
+        & ~ .tab-icon-stack {
           opacity: 0;
         }
 
@@ -839,7 +839,7 @@
   height: calc(100% - var(--tab-block-margin) * 2);
   margin-left: calc(-1 * var(--tab-inline-padding) + var(--tab-block-margin));
   margin-right: 4px;
-  padding: 0 calc(var(--toolbarbutton-inner-padding) - 5px) 0 calc(var(--toolbarbutton-inner-padding) / 4 + var(--tab-inline-padding) - 2px);
+  padding: 0 calc(var(--toolbarbutton-inner-padding) - 4px) 0 calc(var(--toolbarbutton-inner-padding) / 4 + var(--tab-inline-padding) - 2px);
   border-radius: 0;
   border-top-left-radius: var(--border-radius-medium);
   width: unset;
@@ -863,10 +863,10 @@
     height: 16px;
     background: light-dark(rgba(88, 79, 79, 0.02), rgba(255, 255, 255, 0.3));
     position: absolute;
-    right: calc(var(--tab-inline-padding) / 1.5 - 4px);
+    right: calc(var(--tab-inline-padding) / 2 - 2px);
     top: 50%;
     border-radius: 2px;
-    transform: rotate(15deg) translateY(-50%);
+    transform: rotate(12deg) translateY(-50%);
   }
 
   &:hover::after {

src/browser/base/zen-components/ZenPinnedTabManager.mjs

@@ -104,14 +104,14 @@
         return;
       }
       let userContextId;
-      if (tab.hasAttribute("usercontextid")) {
-        userContextId = tab.getAttribute("usercontextid");
+      if (tab.hasAttribute('usercontextid')) {
+        userContextId = tab.getAttribute('usercontextid');
       }
       const pinnedUrl = Services.io.newURI(pin.url);
       const browser = tab.linkedBrowser;
       browser.loadURI(pinnedUrl, {
         triggeringPrincipal: Services.scriptSecurityManager.createNullPrincipal({
-          userContextId
+          userContextId,
         }),
       });
     }
@@ -397,7 +397,7 @@
       pin.userContextId = userContextId ? parseInt(userContextId, 10) : 0;
 
       await ZenPinnedTabsStorage.savePin(pin);
-      const currentWorkspace = await ZenWorkspaces.getActiveWorkspace();
+      this.resetPinChangedUrl(tab);
       await this._refreshPinnedTabs();
     }
 
@@ -434,7 +434,7 @@
         tab.removeAttribute('zen-pinned-entry');
         return;
       }
-      const currentWorkspace = await ZenWorkspaces.getActiveWorkspace();
+      this.onLocationChange(browser);
       await this._refreshPinnedTabs();
     }
 
@@ -598,6 +598,7 @@
           gBrowser.unpinTab(tab);
         }
         gBrowser.pinTab(tab);
+        this.resetPinChangedUrl(tab);
         this.onTabIconChanged(tab);
         this._onTabMove(tab);
       }
@@ -742,7 +743,7 @@
 
     async onLocationChange(browser) {
       const tab = gBrowser.getTabForBrowser(browser);
-      if (!tab || !tab.pinned || tab.hasAttribute('zen-esential') || !this._pinsCache) {
+      if (!tab || !tab.pinned || tab.hasAttribute('zen-essential') || !this._pinsCache) {
         return;
       }
       const pin = this._pinsCache.find((pin) => pin.uuid === tab.getAttribute('zen-pin-id'));
@@ -759,7 +760,7 @@
 
     resetPinChangedUrl(tab) {
       if (!tab.hasAttribute('zen-pinned-changed')) {
-        return
+        return;
       }
       tab.removeAttribute('zen-pinned-changed');
       tab.style.removeProperty('--zen-original-tab-icon');

src/browser/base/zen-components/ZenWelcome.mjs

@@ -45,19 +45,21 @@
       const tab = window.gBrowser.addTrustedTab(url, {
         inBackground: true,
       });
-      setTimeout((tab) => {
-        gBrowser.pinTab(tab);
-      }, 1000, tab);
+      setTimeout(
+        (tab) => {
+          gBrowser.pinTab(tab);
+        },
+        1000,
+        tab
+      );
     }
   }
 
   function openWelcomeTab() {
-    const currentSelectedTab = window.gBrowser.selectedTab;
     const tab = window.gBrowser.addTrustedTab('https://zen-browser.app/welcome', {
       inBackground: true,
     });
     gBrowser.selectedTab = tab;
-    gBrowser.removeTab(currentSelectedTab);
   }
 
   class ZenWelcomePages {
@@ -427,9 +429,13 @@
             const createdTab = window.gBrowser.addTrustedTab(url, {
               inBackground: true,
             });
-            setTimeout((tab) => {
-              gZenPinnedTabManager.addToEssentials(tab);
-            }, 1000, createdTab);
+            setTimeout(
+              (tab) => {
+                gZenPinnedTabManager.addToEssentials(tab);
+              },
+              1000,
+              createdTab
+            );
           }
           openInitialPinTab();
           openWelcomeTab();

src/browser/base/zen-components/ZenWorkspaces.mjs

@@ -83,18 +83,11 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     if (!this._hasInitializedTabsStrip) {
       await this.delayedStartup();
     }
-    await this.promiseSectionsInitialized;
-    window.addEventListener(
-      'MozAfterPaint',
-      async () => {
-        await SessionStore.promiseAllWindowsRestored;
-        await this.afterLoadInit();
-      },
-      { once: true }
-    );
   }
 
   async afterLoadInit() {
+    await this.promiseSectionsInitialized;
+    await SessionStore.promiseAllWindowsRestored;
     console.info('ZenWorkspaces: ZenWorkspaces initialized');
 
     await this.initializeWorkspaces();
@@ -209,7 +202,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
         for (const tab of tabs) {
           if (tab.hasAttribute('zen-essential')) {
             essentialsContaienr.appendChild(tab);
-            continue
+            continue;
           } else if (tab.pinned) {
             pinnedContainer.insertBefore(tab, pinnedContainer.lastChild);
             continue;
@@ -595,6 +588,22 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       } catch (e) {
         console.error('ZenWorkspaces: Error initializing theme picker', e);
       }
+      this._selectStartPage();
+    }
+  }
+
+  _selectStartPage() {
+    const currentTab = gBrowser.selectedTab;
+    const isEssential = currentTab.hasAttribute('zen-essential');
+    if (isEssential) {
+      this.selectEmptyTab();
+      return;
+    }
+    const currentTabUrl = currentTab.linkedBrowser?.currentURI.spec;
+    console.log('ZenWorkspaces: Current tab URL', currentTabUrl);
+    if (currentTabUrl === 'about:blank' || currentTabUrl === 'about:newtab' || currentTabUrl === 'about:home') {
+      this.selectEmptyTab();
+      gBrowser.removeTab(currentTab);
     }
   }