Started to add support for dragging folders and split view groups

zen-browser · Feb 27, 2025 · 7585514 · 7585514
1 parent 99ab59f
commit 7585514
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 15 deletions.
diff --git a/src/browser/base/content/zen-styles/zen-folders.css b/src/browser/base/content/zen-styles/zen-folders.css
@@ -17,7 +17,7 @@ tab-group[split-view-group] {
     --tab-min-height: 32px;
     --tab-selected-bgcolor: var(--zen-toolbar-element-bg);
     --tab-selected-shadow: none;
-    --border-radius-medium: calc(2px + var(--tab-border-radius));
+    --border-radius-medium: var(--tab-border-radius);
     --zen-active-tab-scale: 1;
   }
 

diff --git a/src/browser/components/tabbrowser/content/tabbrowser-js.patch b/src/browser/components/tabbrowser/content/tabbrowser-js.patch
@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tabbrowser.js b/browser/components/tabbrowser/content/tabbrowser.js
-index 628aa6596627c85efe361fc1ece8fd58f7ee653e..dc1bf702844ab60eb781c12dd59d29e839577cdb 100644
+index 628aa6596627c85efe361fc1ece8fd58f7ee653e..36ac8b0623059638ecb3fb1821b272964d0e4aea 100644
 --- a/browser/components/tabbrowser/content/tabbrowser.js
 +++ b/browser/components/tabbrowser/content/tabbrowser.js
 @@ -412,11 +412,50 @@
@@ -427,7 +427,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..dc1bf702844ab60eb781c12dd59d29e8
        } else {
          aIndex = Math.max(aIndex, this.pinnedTabCount);
        }
-@@ -5684,8 +5797,8 @@
+@@ -5684,9 +5797,11 @@
        }
 
        this._handleTabMove(aTab, () => {
@@ -436,9 +436,12 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..dc1bf702844ab60eb781c12dd59d29e8
 +        let neighbor = this.tabs.filter(tab => !tab.hasAttribute("zen-glance-tab"))[aIndex];
 +        if (forceStandaloneTab && neighbor.group || (neighbor.group && neighbor.group.hasAttribute("split-view-group"))) {
            neighbor = neighbor.group;
++        } else if (aTab.group && aTab.group.hasAttribute("split-view-group")) {
++          aTab = aTab.group;
          }
          if (neighbor && aIndex >= aTab._tPos) {
-@@ -5697,7 +5810,7 @@
+           neighbor.after(aTab);
+@@ -5697,7 +5812,7 @@
      }
 
      moveTabToGroup(aTab, aGroup) {
@@ -447,7 +450,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..dc1bf702844ab60eb781c12dd59d29e8
          return;
        }
        if (aTab.group && aTab.group.id === aGroup.id) {
-@@ -5721,6 +5834,8 @@
+@@ -5721,6 +5836,8 @@
 
        moveActionCallback();
 
@@ -456,7 +459,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..dc1bf702844ab60eb781c12dd59d29e8
        // Clear tabs cache after moving nodes because the order of tabs may have
        // changed.
        this.tabContainer._invalidateCachedTabs();
-@@ -5771,7 +5886,7 @@
+@@ -5771,7 +5888,7 @@
          createLazyBrowser,
        };
 
@@ -465,15 +468,15 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..dc1bf702844ab60eb781c12dd59d29e8
        if (aIndex < numPinned || (aTab.pinned && aIndex == numPinned)) {
          params.pinned = true;
        }
-@@ -7415,6 +7530,7 @@
+@@ -7415,6 +7532,7 @@
              aWebProgress.isTopLevel
            ) {
              this.mTab.setAttribute("busy", "true");
 +            if (!this.mTab.selected) this.mTab.setAttribute("unread", "true");
              gBrowser._tabAttrModified(this.mTab, ["busy"]);
              this.mTab._notselectedsinceload = !this.mTab.selected;
            }
-@@ -8381,7 +8497,7 @@ var TabContextMenu = {
+@@ -8381,7 +8499,7 @@ var TabContextMenu = {
      );
      contextUnpinSelectedTabs.hidden =
        !this.contextTab.pinned || !multiselectionContext;
@@ -482,7 +485,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..dc1bf702844ab60eb781c12dd59d29e8
      // Move Tab items
      let contextMoveTabOptions = document.getElementById(
        "context_moveTabOptions"
-@@ -8414,7 +8530,7 @@ var TabContextMenu = {
+@@ -8414,7 +8532,7 @@ var TabContextMenu = {
      let contextMoveTabToStart = document.getElementById("context_moveToStart");
      let isFirstTab =
        tabsToMove[0] == visibleTabs[0] ||
@@ -491,7 +494,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..dc1bf702844ab60eb781c12dd59d29e8
      contextMoveTabToStart.disabled = isFirstTab && allSelectedTabsAdjacent;
 
      document.getElementById("context_openTabInWindow").disabled =
-@@ -8647,6 +8763,7 @@ var TabContextMenu = {
+@@ -8647,6 +8765,7 @@ var TabContextMenu = {
      if (this.contextTab.multiselected) {
        gBrowser.removeMultiSelectedTabs();
      } else {

diff --git a/src/browser/components/tabbrowser/content/tabs-js.patch b/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 fa96568d366fd3608f9bd583fa793150bd815c8b..0d4c63aa336172cbee0c4feb7eed42959e7331a1 100644
+index fa96568d366fd3608f9bd583fa793150bd815c8b..5e25d78b04675fbb736192fb0bbcbf6067cbc257 100644
 --- a/browser/components/tabbrowser/content/tabs.js
 +++ b/browser/components/tabbrowser/content/tabs.js
 @@ -94,7 +94,7 @@
@@ -361,7 +361,22 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..0d4c63aa336172cbee0c4feb7eed4295
        );
 
        if (this.#rtlMode) {
-@@ -2541,8 +2579,9 @@
+@@ -2347,8 +2385,12 @@
+         (lastMovingTabScreen + tabSize);
+       translate = Math.min(Math.max(translate, firstBound), lastBound);
+
+-      for (let tab of movingTabs) {
+-        tab.style.transform = `${translateAxis}(${translate}px)`;
++      if (draggedTab.group?.hasAttribute("split-view-group")) {
++        draggedTab.group.style.transform = `${translateAxis}(${translate}px)`;
++      } else {
++        for (let tab of movingTabs) {
++          tab.style.transform = `${translateAxis}(${translate}px)`;
++        }
+       }
+
+       dragData.translatePos = translate;
+@@ -2541,8 +2583,9 @@
        );
      }
 
@@ -373,7 +388,15 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..0d4c63aa336172cbee0c4feb7eed4295
          return;
        }
 
-@@ -2604,7 +2643,7 @@
+@@ -2553,6 +2596,7 @@
+         tab.style.transform = "";
+         if (tab.group) {
+           tab.group.style.removeProperty("--tabgroup-dragover-transform");
++          tab.group.style.transform = "";
+         }
+         tab.removeAttribute("dragover-createGroup");
+       }
+@@ -2604,7 +2648,7 @@
            movingTab._moveTogetherSelectedTabsData.newIndex = movingTabNewIndex;
            movingTab._moveTogetherSelectedTabsData.animate = false;
          };
@@ -382,7 +405,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..0d4c63aa336172cbee0c4feb7eed4295
            postTransitionCleanup();
          } else {
            let onTransitionEnd = transitionendEvent => {
-@@ -2707,9 +2746,9 @@
+@@ -2707,9 +2751,9 @@
        function newIndex(aTab, index) {
          // Don't allow mixing pinned and unpinned tabs.
          if (aTab.pinned) {
@@ -394,7 +417,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..0d4c63aa336172cbee0c4feb7eed4295
        }
      }
 
-@@ -2793,7 +2832,7 @@
+@@ -2793,7 +2837,7 @@
      }
 
      _notifyBackgroundTab(aTab) {