Enhance UI styles and functionality for gradient generator, vertical tabs, and URL bar; improve tab management logic

src/browser/base/content/zen-styles/zen-gradient-generator.css

@@ -331,7 +331,7 @@
     height: 4px;
     width: 4px;
     border-radius: 50%;
-    background: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
+    background: light-dark(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.2));
     position: absolute;
     transition: opacity 0.2s;
     transform: translate(-50%, -50%);

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

@@ -558,7 +558,7 @@
         width: -moz-available;
       }
 
-      &[zen-pinned-changed='true'] .tab-icon-stack {
+      &[zen-pinned-changed='true'] > .tab-stack > .tab-content > .tab-icon-stack {
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
@@ -566,6 +566,10 @@
         left: 8px;
         margin: 0 !important;
         pointer-events: none;
+
+        & > *:not(.tab-icon-image) {
+          pointer-events: all;
+        }
       }
 
       &[zen-pinned-changed='true'] .tab-reset-pin-button image {
@@ -583,7 +587,8 @@
           opacity: 0.6;
         }
 
-        & ~ .tab-icon-stack {
+
+        & ~ .tab-icon-stack .tab-icon-image {
           opacity: 0;
         }
 

src/browser/base/content/zen-styles/zen-urlbar.css

@@ -129,7 +129,8 @@
   }
 
   #identity-icon-box:not([open]) {
-    margin-inline-end: calc(-8px - 2 * var(--urlbar-icon-padding)) !important;
+    margin-inline-start: calc(-8px - 2 * var(--urlbar-icon-padding)) !important;
+    transform: translateX(100%);
     opacity: 0;
     transition: all 0.1s ease;
   }
@@ -144,13 +145,16 @@
     ),
   #urlbar:hover #identity-icon-box {
     opacity: 1;
-    margin-inline-end: 0 !important;
+    margin-inline-start: 0 !important;
+    transform: none;
     display: flex;
-    transition: 0;
+    #urlbar:not(:hover) & {
+      transition: 0;
+    }
   }
 
-  #urlbar:not([open]):hover #identity-box {
-    margin-inline-end: 0 !important;
+  #urlbar:not([open]) #userContext-icons {
+    margin-inline: 0;
   }
 
   #urlbar:not([open]) {
@@ -425,14 +429,7 @@ button.popup-notification-dropmarker {
   }
   top: 50% !important;
   transform: translate(-50%, -50%);
-
-  :root[zen-right-side='true'] & {
-    right: 50% !important;
-  }
-
-  :root:not([zen-right-side='true']) & {
-    left: 50% !important;
-  }
+  left: 50% !important;
 
   #urlbar-container:has(&) {
     border-radius: 10px;

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

@@ -486,6 +486,7 @@
     }
 
     finishOpeningGlance() {
+      ZenWorkspaces.updateTabsContainers();
       this.browserWrapper.removeAttribute('animate-full');
       this.overlay.classList.remove('zen-glance-overlay');
       this.browserWrapper.removeAttribute('style');

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

@@ -114,6 +114,7 @@
           userContextId,
         }),
       });
+      this.resetPinChangedUrl(tab);
     }
 
     get enabled() {
@@ -215,6 +216,16 @@
           gBrowser._setTabLabel(tab, pin.title);
           tab.setAttribute('zen-has-static-label', 'true');
         }
+
+        // Reorder the tab if needed
+        if (tab._tPos !== pin.position) {
+          const parent = tab.parentNode;
+          const isEssential = tab.hasAttribute('zen-essential');
+          // If we arent an essential, we need to take into account
+          // that the last child is a separator
+          const childIndex = isEssential ? pin.position : Math.min(pin.position, parent.children.length - 1);
+          parent.insertBefore(tab, parent.children[childIndex]);
+        }
       }
 
       // Third pass: create new tabs for pins that don't have tabs
@@ -332,8 +343,6 @@
       }
 
       // Recollect pinned tabs and essentials after a tab move
-      const currentWorkspace = await ZenWorkspaces.getActiveWorkspace();
-
       tab.position = tab._tPos;
 
       for (let otherTab of gBrowser.tabs) {

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

@@ -79,15 +79,14 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     );
     ChromeUtils.defineLazyGetter(this, 'tabContainer', () => document.getElementById('tabbrowser-tabs'));
     this._activeWorkspace = Services.prefs.getStringPref('zen.workspaces.active', '');
+  }
+
+  async afterLoadInit() {
     await SessionStore.promiseInitialized;
     if (!this._hasInitializedTabsStrip) {
       await this.delayedStartup();
     }
-  }
-
-  async afterLoadInit() {
     await this.promiseSectionsInitialized;
-    await SessionStore.promiseAllWindowsRestored;
     console.info('ZenWorkspaces: ZenWorkspaces initialized');
 
     await this.initializeWorkspaces();
@@ -2205,6 +2204,10 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       for (const tab of container.children) {
         if (tab.tagName === 'tab' || tab.tagName == 'tab-group') {
           tabs.push(tab);
+          const glance = tab.querySelector('.tabbrowser-tab[glance-id]');
+          if (glance) {
+            tabs.push(glance);
+          }
         }
       }
     }

src/browser/components/tabbrowser/content/browser-ctrlTab-js.patch

@@ -1,7 +1,16 @@
 diff --git a/browser/components/tabbrowser/content/browser-ctrlTab.js b/browser/components/tabbrowser/content/browser-ctrlTab.js
-index e5d16e605b7edf11fc9f52b93e415087b76398f1..feb7ccfc0562efda56177a75454a9f83a332e8d1 100644
+index e5d16e605b7edf11fc9f52b93e415087b76398f1..40b6e29d26c7f8d692a2a9a7d924b289ec7a3d03 100644
 --- a/browser/components/tabbrowser/content/browser-ctrlTab.js
 +++ b/browser/components/tabbrowser/content/browser-ctrlTab.js
+@@ -459,7 +459,7 @@ var ctrlTab = {
+     // If the tab is hidden, don't add it to the list unless it's selected
+     // (Normally hidden tabs would be unhidden when selected, but that doesn't
+     // happen for Firefox View).
+-    if (aTab.closing || (aTab.hidden && !aTab.selected)) {
++    if (aTab.closing || (aTab.hidden && !aTab.selected) || aTab.hasAttribute("zen-empty-tab")) {
+       return;
+     }
+ 
 @@ -761,7 +761,7 @@ var ctrlTab = {
    _initRecentlyUsedTabs() {
      this._recentlyUsedTabs = Array.prototype.filter.call(

surfer.json

@@ -19,7 +19,7 @@
       "brandShortName": "Zen",
       "brandFullName": "Zen Browser",
       "release": {
-        "displayVersion": "1.7.6b",
+        "displayVersion": "1.8b",
         "github": {
           "repo": "zen-browser/desktop"
         },