fix: Fixed moving split view tabs into other workspaces not working, b=(closes #7840), c=split-view, welcome, workspaces

src/browser/themes/shared/zen-icons/icons.css

@@ -24,10 +24,6 @@
   list-style-image: url('move-tab.svg') !important;
 }
 
-.zen-tab-unsplit-button {
-  list-style-image: url('unpin.svg') !important;
-}
-
 #forward-button,
 #zen-sidebar-web-panel-forward {
   list-style-image: url('forward.svg') !important;
@@ -267,7 +263,8 @@
 #restore-button,
 #fullscreen-button,
 #zen-glance-sidebar-open,
-#appMenu-fullscreen-button2 {
+#appMenu-fullscreen-button2,
+.zen-tab-unsplit-button {
   list-style-image: url('fullscreen.svg') !important;
 }
 

src/zen/split-view/zen-decks.css

@@ -125,7 +125,7 @@
   display: flex;
   align-items: center;
   position: fixed;
-  padding: 0.4rem 0.6rem;
+  padding: 0.4rem 0.6rem 0.2rem 0.6rem;
   border-radius: 8px;
   background-color: light-dark(rgba(255, 255, 255, 1), rgba(0, 0, 0, 1));
   box-shadow: 0 0 0 1px var(--button-primary-border-color);
@@ -144,7 +144,7 @@
 }
 
 .zen-view-splitter-header-container toolbarbutton {
-  display: block;
+  display: flex;
   -moz-context-properties: fill, fill-opacity;
   border-radius: var(--tab-border-radius);
   color: inherit;
@@ -163,6 +163,11 @@
     height: 14px;
   }
 
+  &.zen-tab-unsplit-button image {
+    height: 10px;
+    width: 10px;
+  }
+
   &.zen-tab-rearrange-button {
     cursor: move;
 

src/zen/welcome/ZenWelcome.mjs

@@ -47,6 +47,7 @@
     for (const url of tabs) {
       const tab = window.gBrowser.addTrustedTab(url, {
         inBackground: true,
+        skipAnimation: true,
       });
       _tabsToPin.push(tab);
     }

src/zen/workspaces/ZenWorkspaces.mjs

@@ -1666,27 +1666,37 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
   }
 
   moveTabToWorkspace(tab, workspaceID) {
-    const parent = tab.pinned ? '#vertical-pinned-tabs-container ' : '#tabbrowser-arrowscrollbox ';
-    const container = document.querySelector(parent + `.zen-workspace-tabs-section[zen-workspace-id="${workspaceID}"]`);
+    return this.moveTabsToWorkspace([tab], workspaceID);
+  }
 
-    if (container?.contains(tab)) {
-      return false;
-    }
+  moveTabsToWorkspace(tabs, workspaceID, justChangeId = false) {
+    for (let tab of tabs) {
+      const parent = tab.pinned ? '#vertical-pinned-tabs-container ' : '#tabbrowser-arrowscrollbox ';
+      const container = document.querySelector(parent + `.zen-workspace-tabs-section[zen-workspace-id="${workspaceID}"]`);
 
-    tab.setAttribute('zen-workspace-id', workspaceID);
-    if (tab.hasAttribute('zen-essential')) {
-      return false;
-    }
+      if (container?.contains(tab)) {
+        continue;
+      }
 
-    if (container) {
-      container.insertBefore(tab, container.lastChild);
-    }
-    // also change glance tab if it's the same tab
-    const glanceTab = tab.querySelector('.tabbrowser-tab[zen-glance-tab]');
-    if (glanceTab) {
-      glanceTab.setAttribute('zen-workspace-id', workspaceID);
-    }
+      tab.setAttribute('zen-workspace-id', workspaceID);
+      if (tab.hasAttribute('zen-essential')) {
+        continue;
+      }
 
+      if (container && !justChangeId) {
+        if (tab.group?.hasAttribute('split-view-group')) {
+          this.moveTabsToWorkspace(tab.group.tabs, workspaceID, true);
+          container.insertBefore(tab.group, container.lastChild);
+          continue;
+        }
+        container.insertBefore(tab, container.lastChild);
+      }
+      // also change glance tab if it's the same tab
+      const glanceTab = tab.querySelector('.tabbrowser-tab[zen-glance-tab]');
+      if (glanceTab) {
+        glanceTab.setAttribute('zen-workspace-id', workspaceID);
+      }
+    }
     return true;
   }