Enhance split view tab management and styling adjustments

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

@@ -28,7 +28,12 @@ tab-group[split-view-group] {
       --tab-min-height: 28px;
     }
 
+    container-type: inline-size;
+    container-name: browser-tab;
+
     flex: 1 !important;
+    padding-inline: 2px !important;
+    overflow: clip;
 
     &:not(:last-child)::after {
       content: '';
@@ -75,10 +80,18 @@ tab-group[split-view-group] {
     background-color: var(--zen-toolbar-element-bg);
   }
 
-  & .tab-close-button {
+  & .tab-close-button,
+  & .tab-reset-button {
+    margin-inline-end: -3px !important;
     display: none !important;
   }
 
+  @container browser-tab (min-width: 70px) {
+    :root[zen-sidebar-expanded='true'] &:hover > .tabbrowser-tab:not([pinned]) .tab-close-button {
+      display: block !important;
+    }
+  }
+
   @media (prefers-reduced-motion: no-preference) {
     #tabbrowser-tabs[movingtab] & {
       transition: var(--tab-dragover-transition);

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

@@ -600,7 +600,7 @@
       &:is(:hover, [visuallyselected]) .tab-close-button {
         display: block;
         --tab-inline-padding: 0; /* Avoid weird padding */
-        margin-inline-end: 0 !important;
+        margin-inline-end: 0;
       }
 
       .tab-throbber,
@@ -888,7 +888,6 @@
 .reset-icon,
 .tab-reset-pin-button {
   appearance: none;
-
 }
 
 @media not (forced-colors) {

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

@@ -8,20 +8,49 @@
       document.addEventListener('TabGrouped', this.#onTabGrouped.bind(this));
       document.addEventListener('TabUngrouped', this.#onTabUngrouped.bind(this));
       document.addEventListener('TabGroupRemoved', this.#onTabGroupRemoved.bind(this));
+      document.addEventListener('TabGroupCreate', this.#onTabGroupCreate.bind(this));
     }
 
     #onTabGrouped(event) {
       const tab = event.target;
       const group = tab.group;
       group.pinned = tab.pinned;
+
+      if (group.hasAttribute('split-view-group') && group.hasAttribute('zen-pinned-changed')) {
+        // zen-pinned-changed remove it and set it to had-zen-pinned-changed to keep
+        // track of the original pinned state
+        group.removeAttribute('zen-pinned-changed');
+        group.setAttribute('had-zen-pinned-changed', true);
+      }
     }
 
-    #onTabUngrouped(event) {}
+    #onTabUngrouped(event) {
+      const tab = event.target;
+      const group = event.detail;
+      if (group.hasAttribute('split-view-group') && tab.hasAttribute('had-zen-pinned-changed')) {
+        tab.setAttribute('zen-pinned-changed', true);
+        tab.removeAttribute('had-zen-pinned-changed');
+      }
+    }
+
+    #onTabGroupCreate(event) {
+      const group = event.target;
+      const tabs = group.tabs;
+      if (!group.pinned) {
+        return;
+      }
+      for (const tab of tabs) {
+        if (tab.hasAttribute('zen-pinned-changed')) {
+          tab.removeAttribute('zen-pinned-changed');
+          tab.setAttribute('had-zen-pinned-changed', true);
+        }
+      }
+    }
 
     #onTabGroupRemoved(event) {}
 
     expandGroupTabs(group) {
-      for (const tab of group.tabs) {
+      for (const tab of group.tabs.reverse()) {
         gBrowser.ungroupTab(tab);
       }
     }
@@ -31,15 +60,20 @@
       if (!group) {
         return false;
       }
-      if (group.hasAttribute('split-view-group')) {
-        for (const tab of group.tabs) {
-          tab.setAttribute('pinned', 'true');
+      if (group.hasAttribute('split-view-group') && !this._piningFolder) {
+        this._piningFolder = true;
+        for (const otherTab of group.tabs) {
+          if (tab === otherTab) {
+            continue;
           }
+          gBrowser.pinTab(otherTab);
+        }
+        this._piningFolder = false;
         gBrowser.verticalPinnedTabsContainer.insertBefore(group, gBrowser.verticalPinnedTabsContainer.lastChild);
         gBrowser.tabContainer._invalidateCachedTabs();
         return true;
       }
-      return false;
+      return this._piningFolder;
     }
 
     handleTabUnpin(tab) {
@@ -47,15 +81,20 @@
       if (!group) {
         return false;
       }
-      if (group.hasAttribute('split-view-group')) {
-        for (const tab of group.tabs) {
-          tab.removeAttribute('pinned');
+      if (group.hasAttribute('split-view-group') && !this._piningFolder) {
+        this._piningFolder = true;
+        for (const otherTab of group.tabs) {
+          if (tab === otherTab) {
+            continue;
           }
+          gBrowser.unpinTab(otherTab);
+        }
+        this._piningFolder = false;
         ZenWorkspaces.activeWorkspaceStrip.prepend(group);
         gBrowser.tabContainer._invalidateCachedTabs();
         return true;
       }
-      return false;
+      return this._piningFolder;
     }
   }
 

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

@@ -781,6 +781,7 @@
         return;
       }
       tab.removeAttribute('zen-pinned-changed');
+      tab.removeAttribute('had-zen-pinned-changed');
       tab.style.removeProperty('--zen-original-tab-icon');
     }
 
@@ -788,7 +789,11 @@
       if (tab.hasAttribute('zen-pinned-changed')) {
         return;
       }
+      if (tab.group?.hasAttribute('split-view-group')) {
+        tab.setAttribute('had-zen-pinned-changed', 'true');
+      } else {
         tab.setAttribute('zen-pinned-changed', 'true');
+      }
       tab.style.setProperty('--zen-original-tab-icon', `url(${pin.iconUrl})`);
     }
 

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

@@ -709,7 +709,9 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
    */
   splitTabs(tabs, gridType) {
     const firstisPinned = tabs[0].pinned;
-    tabs = tabs.filter((t) => t.pinned === firstisPinned && !t.hidden && !t.hasAttribute('zen-empty-tab'));
+    tabs = tabs.filter(
+      (t) => t.pinned === firstisPinned && !t.hidden && !t.hasAttribute('zen-empty-tab') && !t.hasAttribute('zen-essential')
+    );
     if (tabs.length < 2 || tabs.length > this.MAX_TABS) {
       return;
     }

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

@@ -1493,9 +1493,10 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     this._inChangingWorkspace = true;
     try {
       await this._performWorkspaceChange(window, ...args);
-    } finally {
-      this._inChangingWorkspace = false;
+    } catch (e) {
+      console.error('ZenWorkspaces: Error changing workspace', e);
     }
+    this._inChangingWorkspace = false;
   }
 
   _cancelSwipeAnimation() {
@@ -1630,7 +1631,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       const elementWorkspaceIndex = workspaces.workspaces.findIndex((w) => w.uuid === elementWorkspaceId);
       const offset = -(newWorkspaceIndex - elementWorkspaceIndex) * 100;
       const newTransform = `translateX(${offset}%)`;
-      const isCurrent = offset === 0;
       if (shouldAnimate) {
         element.removeAttribute('hidden');
         animations.push(