fix: Essential tabs layout rendering to use better available space, b=(no-bug), c=common, tabs, workspaces

src/zen/common/ZenUIManager.mjs

@@ -629,7 +629,7 @@ var gZenVerticalTabsManager = {
     document.getElementById('urlbar').removeAttribute('--urlbar-height');
     if (!this._hasSetSingleToolbar) {
       document.getElementById('urlbar').style.setProperty('--urlbar-height', '32px');
-    } else {
+    } else if (gURLBar.getAttribute('breakout') !== 'true') {
       try {
         gURLBar.zenUpdateLayoutBreakout();
       } catch (e) {

src/zen/common/styles/zen-urlbar.css

@@ -147,11 +147,28 @@
   position: fixed;
 }
 
-#urlbar[breakout-extend='true'] #urlbar-background {
-  box-shadow: 0px 0px 90px -10px rgba(0, 0, 0, 0.6) !important;
-  border: 1px solid hsla(0, 0%, 100%, 0.1) !important;
-  backdrop-filter: none !important;
-  border-radius: 0.8rem !important;
+#urlbar[breakout-extend='true'] {
+  z-index: 2;
+  --urlbar-margin-inline: 5px;
+
+  & #identity-box {
+    margin-right: var(--urlbar-margin-inline);
+  }
+
+  & #urlbar-background {
+    /* We cant have a transparent background with a backdrop-filter because on normal websites,
+      the backdrop woudn't work, we would need to apply a clip-path to the site and that's not recommended
+      due to performance issues */
+    background-color: light-dark(
+      hsl(0, 0%, 100%),
+      color-mix(in srgb, hsl(0, 0%, 5%) 60%, var(--zen-colors-primary) 40%)
+    ) !important;
+    box-shadow: 0px 0px 90px -10px rgba(0, 0, 0, 0.6) !important;
+    backdrop-filter: none !important;
+    border-radius: 1.1rem !important;
+    outline: 0.5px solid rgba(255, 255, 255, 0.15) !important;
+    outline-offset: -2px;
+  }
 }
 
 #urlbar-go-button {
@@ -414,28 +431,6 @@ button.popup-notification-dropmarker {
   }
 }
 
-#urlbar[open] {
-  z-index: 2;
-  --urlbar-margin-inline: 5px;
-
-  & #identity-box {
-    margin-right: var(--urlbar-margin-inline);
-  }
-
-  & #urlbar-background {
-    /* We cant have a transparent background with a backdrop-filter because on normal websites,
-      the backdrop woudn't work, we would need to apply a clip-path to the site and that's not recommended
-      due to performance issues */
-    background-color: light-dark(
-      hsl(0, 0%, 100%),
-      color-mix(in srgb, hsl(0, 0%, 5%) 90%, var(--zen-colors-primary) 10%)
-    ) !important;
-    @media (-prefers-color-scheme: dark) {
-      outline: 1px solid rgba(0, 0, 0, 0.3) !important;
-    }
-  }
-}
-
 :root[zen-single-toolbar='true'] {
   #urlbar[open] {
     min-width: min(90%, 40rem);

src/zen/tabs/zen-tabs/vertical-tabs.css

@@ -1250,10 +1250,7 @@
   gap: calc(var(--zen-toolbox-padding) - 2px);
   transition: max-height 0.3s ease-out;
   opacity: 1;
-  grid-template-columns: repeat(auto-fit, minmax(48px, 1fr) minmax(48px, 1fr));
-  &[data-hack-type='3'] {
-    grid-template-columns: repeat(auto-fit, minmax(calc(100% / 3 - 1%), auto));
-  }
+  grid-template-columns: repeat(auto-fit, minmax(max(23.7%, 48px), 1fr));
   scrollbar-width: thin;
   min-width: calc(100% + var(--zen-toolbox-padding) * 2);
   padding: 0 var(--zen-toolbox-padding);

src/zen/workspaces/ZenWorkspaces.mjs

@@ -2032,7 +2032,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       );
       for (const cloned of clonedEssentials) {
         const container = cloned.container;
-        const essentialsWorkspacess = cloned.workspaces;
+        const essentialsWorkspaces = cloned.workspaces;
         const repeats = cloned.repeat;
         // Animate like the workspaces above expect essentials are a bit more
         // complicated because they are not based on workspaces but on containers
@@ -2047,9 +2047,9 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
         // will slide in from the right
 
         // Get the index from first and last workspace
-        const firstWorkspaceIndex = workspaces.workspaces.findIndex((w) => w.uuid === essentialsWorkspacess[0].uuid);
+        const firstWorkspaceIndex = workspaces.workspaces.findIndex((w) => w.uuid === essentialsWorkspaces[0].uuid);
         const lastWorkspaceIndex = workspaces.workspaces.findIndex(
-          (w) => w.uuid === essentialsWorkspacess[essentialsWorkspacess.length - 1].uuid
+          (w) => w.uuid === essentialsWorkspaces[essentialsWorkspaces.length - 1].uuid
         );
         // Check if the container is even going to appear on the screen, to save on animation
         if (
@@ -2077,7 +2077,18 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
             (isGoingLeft ? repeats - 1 : -repeats + 1)
           ) * 100;
 
-        const needsOffsetAdjustment = stepsInBetween > essentialsWorkspacess.length || usingSameContainer;
+        // If we are on the same container and both new and old workspace are in the same "essentialsWorkspaces"
+        // we can simply not animate the essentials
+        if (
+          usingSameContainer &&
+          essentialsWorkspaces.some((w) => w.uuid === newWorkspace.uuid) &&
+          essentialsWorkspaces.some((w) => w.uuid === previousWorkspace.uuid)
+        ) {
+          newOffset = 0;
+          existingOffset = 0;
+        }
+
+        const needsOffsetAdjustment = stepsInBetween > essentialsWorkspaces.length || usingSameContainer;
 
         if (repeats > 0 && needsOffsetAdjustment) {
           if (!isGoingLeft) {
@@ -2386,16 +2397,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
         );
         const workspaceObject = this.getWorkspaceFromId(workspaceId);
         const essentialContainer = this.getEssentialsSection(workspaceObject.containerTabId);
-        const essentialNumChildren = essentialContainer.children.length;
-        let essentialHackType = 0;
-        if (essentialNumChildren % 3 === 0) {
-          essentialHackType = 3;
-        }
-        if (essentialHackType > 0) {
-          essentialContainer.setAttribute('data-hack-type', essentialHackType);
-        } else {
-          essentialContainer.removeAttribute('data-hack-type');
-        }
         this._updateMarginTopPinnedTabs(arrowScrollbox, pinnedContainer, essentialContainer, workspaceIndicator, forAnimation);
         this.updateShouldHideSeparator(arrowScrollbox, pinnedContainer);
       }

surfer.json

@@ -19,7 +19,7 @@
       "brandShortName": "Zen",
       "brandFullName": "Zen Browser",
       "release": {
-        "displayVersion": "1.11.5b",
+        "displayVersion": "1.12b",
         "github": {
           "repo": "zen-browser/desktop"
         },
@@ -39,7 +39,7 @@
       "brandShortName": "Twilight",
       "brandFullName": "Zen Twilight",
       "release": {
-        "displayVersion": "1.11.5t",
+        "displayVersion": "1.12t",
         "github": {
           "repo": "zen-browser/desktop"
         }