feat: Improved indentation when dragging tabs and folders (#9908)

* feat: Improved indentation when dragging tabs and folders

* fix: Formatting

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 e47f735e4e4563c9b7537944628418d1478c068d..1e821868ef0de97e19f46cc63ed03cb77ecf75a9 100644
+index e47f735e4e4563c9b7537944628418d1478c068d..858f6aa20bc06701facf75ee673f618464a406ab 100644
 --- a/browser/components/tabbrowser/content/tabs.js
 +++ b/browser/components/tabbrowser/content/tabs.js
 @@ -332,7 +332,7 @@
@@ -455,16 +455,19 @@ index e47f735e4e4563c9b7537944628418d1478c068d..1e821868ef0de97e19f46cc63ed03cb7
  
        let newDropElementIndex;
        if (dropElement) {
-@@ -2856,7 +2936,7 @@
+@@ -2856,7 +2936,10 @@
        let shouldCreateGroupOnDrop;
        let dropBefore;
        if (dropElement) {
 -        let dropElementForOverlap = isTabGroupLabel(dropElement)
++        if (dropElement?.group?.hasAttribute("split-view-group") || dropElement.hasAttribute("split-view-group")) {
++          dropElement = dropElement.group.labelElement;
++        }
 +        let dropElementForOverlap = isTabGroupLabel(dropElement) && !dropElement.group?.hasAttribute("split-view-group")
            ? dropElement.parentElement
            : dropElement;
  
-@@ -2876,7 +2956,7 @@
+@@ -2876,7 +2959,7 @@
            ? Services.prefs.getIntPref(
                "browser.tabs.dragDrop.moveOverThresholdPercent"
              ) / 100
@@ -473,7 +476,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..1e821868ef0de97e19f46cc63ed03cb7
          moveOverThreshold = Math.min(1, Math.max(0, moveOverThreshold));
          let shouldMoveOver = overlapPercent > moveOverThreshold;
          if (logicalForward && shouldMoveOver) {
-@@ -2908,44 +2988,21 @@
+@@ -2908,44 +2991,21 @@
  
          // 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.
@@ -523,7 +526,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..1e821868ef0de97e19f46cc63ed03cb7
          // When dragging tab(s) over an ungrouped tab, signal to the user
          // that dropping the tab(s) will create a new tab group.
          shouldCreateGroupOnDrop =
-@@ -2955,12 +3012,6 @@
+@@ -2955,12 +3015,6 @@
            overlapPercent > dragOverGroupingThreshold;
  
          if (shouldCreateGroupOnDrop) {
@@ -536,7 +539,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..1e821868ef0de97e19f46cc63ed03cb7
          } else {
            this.removeAttribute("movingtab-createGroup");
            document
-@@ -2987,19 +3038,14 @@
+@@ -2987,19 +3041,14 @@
              dropElement = dropElementGroup;
              colorCode = undefined;
            } else if (isTabGroupLabel(dropElement)) {
@@ -564,7 +567,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..1e821868ef0de97e19f46cc63ed03cb7
            }
            this.#setDragOverGroupColor(colorCode);
            this.toggleAttribute("movingtab-ungroup", !colorCode);
-@@ -3017,19 +3063,28 @@
+@@ -3017,19 +3066,28 @@
        dragData.dropElement = dropElement;
        dragData.dropBefore = dropBefore;
        dragData.animDropElementIndex = newDropElementIndex;
@@ -595,7 +598,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..1e821868ef0de97e19f46cc63ed03cb7
          }
          item.style.transform = transform;
        }
-@@ -3082,12 +3137,14 @@
+@@ -3082,12 +3140,14 @@
        );
      }
  
@@ -612,7 +615,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..1e821868ef0de97e19f46cc63ed03cb7
  
        for (let item of this.ariaFocusableItems) {
          if (isTabGroupLabel(item)) {
-@@ -3095,6 +3152,18 @@
+@@ -3095,6 +3155,18 @@
            item = item.parentElement;
          }
          item.style.transform = "";
@@ -631,7 +634,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..1e821868ef0de97e19f46cc63ed03cb7
          item.removeAttribute("dragover-createGroup");
        }
        this.removeAttribute("movingtab-createGroup");
-@@ -3198,7 +3267,7 @@
+@@ -3198,7 +3270,7 @@
          let postTransitionCleanup = () => {
            movingTab._moveTogetherSelectedTabsData.animate = false;
          };
@@ -640,7 +643,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..1e821868ef0de97e19f46cc63ed03cb7
            postTransitionCleanup();
          } else {
            let onTransitionEnd = transitionendEvent => {
-@@ -3371,7 +3440,7 @@
+@@ -3371,7 +3443,7 @@
      }
  
      _notifyBackgroundTab(aTab) {
@@ -649,7 +652,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..1e821868ef0de97e19f46cc63ed03cb7
          return;
        }
  
-@@ -3480,7 +3549,10 @@
+@@ -3480,7 +3552,10 @@
      #getDragTarget(event, { ignoreSides = false } = {}) {
        let { target } = event;
        while (target) {
@@ -661,7 +664,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..1e821868ef0de97e19f46cc63ed03cb7
            break;
          }
          target = target.parentNode;
-@@ -3497,6 +3569,9 @@
+@@ -3497,6 +3572,9 @@
            return null;
          }
        }