fix: Correct drag-and-drop targeting for split-view group labels (#9774)

src/browser/components/tabbrowser/content/tabs-js.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tabs.js b/browser/components/tabbrowser/content/tabs.js
-index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..1b934a6837a79e378d729462b62de424b0741bbd 100644
+index 1fcebe3962..d20a98d99a 100644
 --- a/browser/components/tabbrowser/content/tabs.js
 +++ b/browser/components/tabbrowser/content/tabs.js
 @@ -289,6 +289,7 @@
@@ -416,20 +416,12 @@ index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..1b934a6837a79e378d729462b62de424
            }
            let element = tabs[mid];
 +          if (element?.group?.hasAttribute("split-view-group")) {
-+            element = element.group;
++            element = element.group.labelElement;
 +          }
            let elementForSize = isTabGroupLabel(element)
              ? element.parentElement
              : element;
-@@ -2540,6 +2618,7 @@
-       };
- 
-       let dropElement = getOverlappedElement();
-+      if (dropElement?.hasAttribute("split-view-group")) dropElement = dropElement.labelElement;
- 
-       let newDropElementIndex;
-       if (dropElement) {
-@@ -2604,7 +2683,7 @@
+@@ -2604,7 +2682,7 @@
        let shouldCreateGroupOnDrop;
        let dropBefore;
        if (dropElement) {
@@ -438,7 +430,7 @@ index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..1b934a6837a79e378d729462b62de424
            ? dropElement.parentElement
            : dropElement;
  
-@@ -2624,7 +2703,7 @@
+@@ -2624,7 +2702,7 @@
            ? Services.prefs.getIntPref(
                "browser.tabs.dragDrop.moveOverThresholdPercent"
              ) / 100
@@ -447,7 +439,7 @@ index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..1b934a6837a79e378d729462b62de424
          moveOverThreshold = Math.min(1, Math.max(0, moveOverThreshold));
          let shouldMoveOver = overlapPercent > moveOverThreshold;
          if (logicalForward && shouldMoveOver) {
-@@ -2656,23 +2735,6 @@
+@@ -2656,23 +2734,6 @@
  
          // If dragging a group over another group, don't make it look like it is
          // possible to drop the dragged group inside the other group.
@@ -471,7 +463,7 @@ index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..1b934a6837a79e378d729462b62de424
  
          // Constrain drop direction at the boundary between pinned and
          // unpinned tabs so that they don't mix together.
-@@ -2686,14 +2748,13 @@
+@@ -2686,14 +2747,13 @@
          }
        }
  
@@ -491,7 +483,7 @@ index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..1b934a6837a79e378d729462b62de424
          // When dragging tab(s) over an ungrouped tab, signal to the user
          // that dropping the tab(s) will create a new tab group.
          shouldCreateGroupOnDrop =
-@@ -2703,12 +2764,12 @@
+@@ -2703,12 +2763,12 @@
            overlapPercent > dragOverGroupingThreshold;
  
          if (shouldCreateGroupOnDrop) {
@@ -510,7 +502,7 @@ index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..1b934a6837a79e378d729462b62de424
          } else {
            this.removeAttribute("movingtab-createGroup");
            document
-@@ -2735,19 +2796,14 @@
+@@ -2735,19 +2795,14 @@
              dropElement = dropElementGroup;
              colorCode = undefined;
            } else if (isTabGroupLabel(dropElement)) {
@@ -538,7 +530,7 @@ index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..1b934a6837a79e378d729462b62de424
            }
            this.#setDragOverGroupColor(colorCode);
            this.toggleAttribute("movingtab-ungroup", !colorCode);
-@@ -2769,15 +2825,24 @@
+@@ -2769,15 +2824,24 @@
        // Shift background tabs to leave a gap where the dragged tab
        // would currently be dropped.
        for (let item of tabs) {
@@ -564,7 +556,7 @@ index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..1b934a6837a79e378d729462b62de424
          }
          item.style.transform = transform;
        }
-@@ -2830,12 +2895,14 @@
+@@ -2830,12 +2894,14 @@
        );
      }
  
@@ -581,7 +573,7 @@ index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..1b934a6837a79e378d729462b62de424
  
        for (let item of this.ariaFocusableItems) {
          if (isTabGroupLabel(item)) {
-@@ -2843,6 +2910,18 @@
+@@ -2843,6 +2909,18 @@
            item = item.parentElement;
          }
          item.style.transform = "";
@@ -600,7 +592,7 @@ index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..1b934a6837a79e378d729462b62de424
          item.removeAttribute("dragover-createGroup");
        }
        this.removeAttribute("movingtab-createGroup");
-@@ -2889,7 +2968,7 @@
+@@ -2889,7 +2967,7 @@
          let postTransitionCleanup = () => {
            movingTab._moveTogetherSelectedTabsData.animate = false;
          };
@@ -609,7 +601,7 @@ index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..1b934a6837a79e378d729462b62de424
            postTransitionCleanup();
          } else {
            let onTransitionEnd = transitionendEvent => {
-@@ -3062,7 +3141,7 @@
+@@ -3062,7 +3140,7 @@
      }
  
      _notifyBackgroundTab(aTab) {
@@ -618,7 +610,7 @@ index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..1b934a6837a79e378d729462b62de424
          return;
        }
  
-@@ -3171,7 +3250,10 @@
+@@ -3171,7 +3249,10 @@
      #getDragTarget(event, { ignoreSides = false } = {}) {
        let { target } = event;
        while (target) {
@@ -630,7 +622,7 @@ index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..1b934a6837a79e378d729462b62de424
            break;
          }
          target = target.parentNode;
-@@ -3188,6 +3270,9 @@
+@@ -3188,6 +3269,9 @@
            return null;
          }
        }

src/zen/folders/zen-folders.css

@@ -144,7 +144,10 @@ tab-group[split-view-group] .tabbrowser-tab {
 }
 
 tab-group[split-view-group] .tab-group-label-container {
-  visibility: collapse;
+  position: absolute;
+  width: 100%;
+  height: 40px;
+  visibility: hidden;
   padding: 0 !important;
   margin: 0 !important;
 }