fix: Fixed duplicate Ids for split views and wrong activations, p=#11953

* fix: Fixed duplicate Ids for split views and wrong activations, b=no-bug, c=split-view

* fix: Fixed creating a new split view ID on restore, b=no-bug, c=split-view, tabs, workspaces

* chore: Simplify split view group extraction, b=no-bug, c=split-view

* feat: Make sure to return the group, even when not activating, b=no-bug, c=split-view

* feat: Assume tabs could be null, b=no-bug, c=split-view

src/zen/split-view/ZenViewSplitter.mjs

@@ -1191,12 +1191,18 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature {
       }
 
       const existingSplitTab = tabs.find((tab) => tab.splitView);
+      let shouldActivateSplit =
+        (initialIndex >= 0 || tabs.includes(window.gBrowser.selectedTab)) &&
+        !this._sessionRestoring;
       if (existingSplitTab) {
         this._moveTabsToContainer(tabs, tabs[tabIndexToUse]);
         const groupIndex = this._data.findIndex((group) => group.tabs.includes(existingSplitTab));
         const group = this._data[groupIndex];
         const gridTypeChange = gridType && group.gridType !== gridType;
         const newTabsAdded = tabs.find((t) => !group.tabs.includes(t));
+        if (group.tabs.length >= this.MAX_TABS) {
+          return;
+        }
         if (gridTypeChange || !newTabsAdded) {
           // reset layout
           group.gridType = gridType;
@@ -1212,14 +1218,15 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature {
               gBrowser.moveTabToExistingGroup(tab, this._getSplitViewGroup(tabs, groupFetchId));
               group.tabs.push(tab);
               this.addTabToSplit(tab, group.layoutTree);
+              tab.splitView = true;
             }
           }
         }
-        if (this._sessionRestoring) {
-          return;
+        this.#dispatchItemEvent("ZenSplitViewTabsSplit", group.tabs[0].group);
+        if (!shouldActivateSplit) {
+          return group;
         }
         this.activateSplitView(group, true);
-        this.#dispatchItemEvent("ZenSplitViewTabsSplit", group.tabs[0].group);
         // eslint-disable-next-line consistent-return
         return group;
       }
@@ -1260,9 +1267,13 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature {
         layoutTree: this.calculateLayoutTree(tabs, gridType),
       };
       this._data.push(splitData);
-      if (!this._sessionRestoring && initialIndex >= 0) {
+      if (shouldActivateSplit) {
         window.gBrowser.selectedTab = tabs[tabIndexToUse] ?? tabs[0];
         this.activateSplitView(splitData);
+      } else {
+        for (const tab of tabs) {
+          tab.splitView = true;
+        }
       }
 
       this.#dispatchItemEvent("ZenSplitViewTabsSplit", splitGroup);
@@ -2016,21 +2027,15 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature {
     }
 
     // Try to find an existing split view group
-    let splitGroup = gBrowser.tabGroups.find(
-      (group) =>
-        group.getAttribute("split-view-group") &&
-        group.tabs.some((tab) => tabs.includes(tab) && tab.splitView)
-    );
-
+    let splitGroup = tabs?.find((tab) => tab.group?.hasAttribute("split-view-group"))?.group;
     if (splitGroup) {
       return splitGroup;
     }
 
     // We can't create an empty group, so only create if we have tabs
-    let group = null;
     if (tabs?.length) {
       // Create a new group with the initial tabs
-      group = gBrowser.addTabGroup(tabs, {
+      splitGroup = gBrowser.addTabGroup(tabs, {
         id,
         label: "",
         showCreateUI: false,
@@ -2039,7 +2044,7 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature {
       });
     }
 
-    return group;
+    return splitGroup;
   }
 
   storeDataForSessionStore() {

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

@@ -297,7 +297,7 @@
 
   --tab-block-margin: 2px;
   --tab-selected-bgcolor: light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.12));
-  --tab-selected-shadow: 0 1px 1px 1px light-dark(rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.1)) !important;
+  --tab-selected-shadow: 0 1px 1px 1px light-dark(rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.05)) !important;
   grid-gap: 0 !important;
 
   &[overflow]::after,

src/zen/workspaces/zen-workspaces.css

@@ -209,7 +209,7 @@
     fill-opacity: 0.6;
     -moz-context-properties: fill-opacity, fill;
     fill: currentColor;
-    font-size: 18px;
+    font-size: 14px;
 
     &[zen-emoji-open='true']::before {
       border: 1px dashed light-dark(rgba(0, 0, 0, .5), rgba(255, 255, 255, .5));