no-bug: Add unsplit tabs context menu item (gh-12863)

locales/en-US/browser/browser/zen-split-view.ftl

@@ -5,6 +5,7 @@
 tab-zen-split-tabs =
     .label =
         { $tabCount ->
+            [-1] Unsplit Tabs
             [1] Split Tab (multiple selected tabs needed)
            *[other] Split { $tabCount } Tabs
         }

prefs/firefox/browser.yaml

@@ -82,3 +82,7 @@
 
 - name: browser.settings-redesign.enabled
   value: true
+
+- name: browser.tabs.splitView.enabled
+  value: false
+  locked: true

src/browser/components/tabbrowser/content/drag-and-drop-js.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/drag-and-drop.js b/browser/components/tabbrowser/content/drag-and-drop.js
-index ced2bfd88de2d16e2c028ca3f4d9d27516363575..752eeca60ecb8693fb56a3a594a341d1c3587e35 100644
+index ced2bfd88de2d16e2c028ca3f4d9d27516363575..aaf6e82782357c819ca875f05020723600e41e6b 100644
 --- a/browser/components/tabbrowser/content/drag-and-drop.js
 +++ b/browser/components/tabbrowser/content/drag-and-drop.js
 @@ -35,6 +35,9 @@
@@ -26,7 +26,7 @@ index ced2bfd88de2d16e2c028ca3f4d9d27516363575..752eeca60ecb8693fb56a3a594a341d1
            !draggedTab.group.collapsed
          ) {
            draggedTab.group.collapsed = true;
-+          gZenFolders.animateGroupMove(tab.group);
++          gZenFolders.animateGroupMove(draggedTab.group);
          }
  
          if (dropEffect == "move") {

src/zen/split-view/ZenViewSplitter.mjs

@@ -1164,17 +1164,21 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature {
   insetUpdateContextMenuItems() {
     const contentAreaContextMenu = document.getElementById("tabContextMenu");
     contentAreaContextMenu.addEventListener("popupshowing", () => {
-      const tabCountInfo = JSON.stringify({
+      let isExistingSplitView = gBrowser.selectedTabs.some(tab =>
-        tabCount: window.gBrowser.selectedTabs.length,
+        tab.group?.hasAttribute("split-view-group")
+      );
+      const splitTabCommand = document.getElementById("context_zenSplitTabs");
+      document.l10n.setAttributes(splitTabCommand, "tab-zen-split-tabs", {
+        tabCount: isExistingSplitView ? -1 : gBrowser.selectedTabs.length,
       });
-      document
+      if (isExistingSplitView) {
-        .getElementById("context_zenSplitTabs")
+        splitTabCommand.removeAttribute("hidden");
-        .setAttribute("data-l10n-args", tabCountInfo);
+        return;
-      const splitTabs = document.getElementById("context_zenSplitTabs");
+      }
       if (!this.contextCanSplitTabs()) {
-        splitTabs.setAttribute("hidden", "true");
+        splitTabCommand.setAttribute("hidden", "true");
       } else {
-        splitTabs.removeAttribute("hidden");
+        splitTabCommand.removeAttribute("hidden");
       }
     });
   }
@@ -1189,7 +1193,7 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature {
                 data-l10n-args='{"tabCount": 1}'
                 command="cmd_zenSplitViewContextMenu"/>
     `);
-    document.getElementById("context_duplicateTab").before(element);
+    document.getElementById("context_moveTabToSplitView").before(element);
   }
 
   /**
@@ -1234,6 +1238,15 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature {
    */
   contextSplitTabs() {
     const tabs = window.gBrowser.selectedTabs;
+    // If any is already in a split view, we unsplit them first
+    if (tabs.some(tab => tab.splitView)) {
+      for (const tab of tabs) {
+        if (tab.splitView) {
+          this.removeTabFromGroup(tab);
+        }
+      }
+      return;
+    }
     this.splitTabs(tabs);
   }
 

src/zen/split-view/zen-split-group.inc.css

@@ -104,7 +104,7 @@ tab-group[split-view-group] {
       }
     }
 
-    &:has(> tab:is([visuallyselected], [multiselected])) {
+    tab-group[split-view-group]:where([hasactivetab]) & {
       background-color: var(--tab-selected-bgcolor);
       box-shadow: var(--tab-selected-shadow);