Merge pull request #6204 from zen-browser/right-split-drop

Enhance ZenViewSplitter to support dynamic side detection for split v…

src/browser/base/content/ZenUIManager.mjs

@@ -620,9 +620,9 @@ var gZenVerticalTabsManager = {
       }
 
       gZenCompactModeManager.updateCompactModeContext(isSingleToolbar);
-      document.getElementById("urlbar").removeAttribute('--urlbar-height');
+      document.getElementById('urlbar').removeAttribute('--urlbar-height');
       if (!isSingleToolbar) {
-        document.getElementById("urlbar").style.setProperty('--urlbar-height', '32px');
+        document.getElementById('urlbar').style.setProperty('--urlbar-height', '32px');
       } else {
         gURLBar.updateLayoutBreakout();
       }

src/browser/base/content/zen-styles/zen-decks.css

@@ -276,6 +276,10 @@
   box-shadow: var(--zen-big-shadow);
   overflow: hidden;
 
+  &[side='right'] {
+    right: 0;
+  }
+
   &::after {
     content: '';
     position: absolute;

src/browser/base/zen-components/ZenViewSplitter.mjs

@@ -196,17 +196,20 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
     if (currentView?.tabs.length >= this.MAX_TABS) {
       return;
     }
-    // only show if we are  1/4 of the way to the edge
     const panelsRect = gBrowser.tabbox.getBoundingClientRect();
     const panelsWidth = panelsRect.width;
     if (
-      event.clientX > panelsWidth / 2 ||
+      event.clientX > panelsRect.left + panelsWidth - 10 ||
       event.clientX < panelsRect.left + 10 ||
       event.clientY < panelsRect.top + 10 ||
       event.clientY > panelsRect.bottom - 10
     ) {
       return;
     }
+    // first quarter or last quarter of the screen, but not the middle
+    if (!(event.clientX < panelsRect.left + panelsWidth / 4 || event.clientX > panelsRect.left + (panelsWidth / 4) * 3)) {
+      return;
+    }
     const oldTab = this._lastOpenedTab;
     this._canDrop = true;
     // wait some time before showing the split view
@@ -219,6 +222,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
       }
       const panelsWidth = gBrowser.tabbox.getBoundingClientRect().width;
       const halfWidth = panelsWidth / 2;
+      const side = event.clientX > halfWidth ? 'right' : 'left';
       this.fakeBrowser = document.createXULElement('vbox');
       this.fakeBrowser.addEventListener('dragleave', this.onBrowserDragEndToSplit);
       const padding = Services.prefs.getIntPref('zen.theme.content-element-separation', 0);
@@ -227,14 +231,21 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
       gBrowser.tabbox.appendChild(this.fakeBrowser);
       this.fakeBrowser.style.setProperty('--zen-split-view-fake-icon', `url(${draggedTab.getAttribute('image')})`);
       draggedTab._visuallySelected = true;
+      this.fakeBrowser.setAttribute('side', side);
       this._finishAllAnimatingPromise = Promise.all([
         gZenUIManager.motion.animate(
           gBrowser.tabbox,
+          side === 'left'
+            ? {
+                paddingLeft: [0, `${halfWidth}px`],
+                paddingRight: 0,
+              }
+            : {
+                paddingRight: [0, `${halfWidth}px`],
+                paddingLeft: 0,
+              },
           {
-            paddingLeft: [0, `${halfWidth}px`],
-          },
-          {
-            duration: 0.15,
+            duration: 0.1,
             easing: 'ease-out',
           }
         ),
@@ -242,10 +253,14 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
           this.fakeBrowser,
           {
             width: [0, `${halfWidth - padding}px`],
-            marginLeft: [0, `${-halfWidth}px`],
+            ...(side === 'left'
+              ? {
+                  marginLeft: [0, `${-halfWidth}px`],
+                }
+              : {}),
           },
           {
-            duration: 0.15,
+            duration: 0.1,
             easing: 'ease-out',
           }
         ),
@@ -289,15 +304,21 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
       return;
     }
     this.fakeBrowser.classList.add('fade-out');
-    gBrowser.selectedTab = this._draggingTab;
+    const side = this.fakeBrowser.getAttribute('side');
+    if (this._draggingTab) this._draggingTab.setAttribute('zen-has-splitted', 'true');
+    this._lastOpenedTab = gBrowser.selectedTab;
     this._draggingTab = null;
     try {
       Promise.all([
         gZenUIManager.motion.animate(
           gBrowser.tabbox,
-          {
-            paddingLeft: [`${halfWidth}px`, 0],
-          },
+          side === 'left'
+            ? {
+                paddingLeft: [`${halfWidth}px`, 0],
+              }
+            : {
+                paddingRight: [`${halfWidth}px`, 0],
+              },
           {
             duration: 0.15,
             easing: 'ease-out',
@@ -307,7 +328,11 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
           this.fakeBrowser,
           {
             width: [`${halfWidth - padding * 2}px`, 0],
-            marginLeft: [`${-(halfWidth - padding)}px`, 0],
+            ...(side === 'left'
+              ? {
+                  marginLeft: [`${-halfWidth}px`, 0],
+                }
+              : {}),
           },
           {
             duration: 0.15,
@@ -1498,7 +1523,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
       delete this._hasAnimated;
       this.fakeBrowser.remove();
       this.fakeBrowser = null;
-      this._draggingTab._visuallySelected = false;
+      if (this._draggingTab) this._draggingTab._visuallySelected = false;
       if (select) {
         gBrowser.selectedTab = this._draggingTab;
         this._draggingTab = null;
@@ -1521,9 +1546,13 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
       return false;
     }
 
+    const dropSide = this.fakeBrowser?.getAttribute('side');
     const containerRect = this.fakeBrowser.getBoundingClientRect();
     const padding = Services.prefs.getIntPref('zen.theme.content-element-separation', 0);
-    const dropTarget = document.elementFromPoint(containerRect.left + containerRect.width + padding + 5, event.clientY);
+    const dropTarget = document.elementFromPoint(
+      side == 'left' ? containerRect.left + containerRect.width + padding + 5 : containerRect.left - padding - 5,
+      event.clientY
+    );
     const browser = dropTarget?.closest('browser');
 
     if (!browser) {
@@ -1543,7 +1572,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
       // Calculate which side of the target browser the drop occurred
       // const browserRect = browser.getBoundingClientRect();
       // const hoverSide = this.calculateHoverSide(event.clientX, event.clientY, browserRect);
-      const hoverSide = 'left';
+      const hoverSide = dropSide;
 
       if (droppedOnTab.splitView) {
         // Add to existing split view
@@ -1595,7 +1624,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
         //}
 
         // Put tabs always as if it was dropped from the left
-        this.splitTabs([draggedTab, droppedOnTab], gridType, 1);
+        this.splitTabs(dropSide == 'left' ? [draggedTab, droppedOnTab] : [droppedOnTab, draggedTab], gridType, 1);
       }
     }
     if (this._finishAllAnimatingPromise) {

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..64e93a414f1544b89af05c636c587620036896db 100644
+index fa96568d366fd3608f9bd583fa793150bd815c8b..24071f1bc0d9cb2a4fe66e5e4657a64ab66f29cf 100644
 --- a/browser/components/tabbrowser/content/tabs.js
 +++ b/browser/components/tabbrowser/content/tabs.js
 @@ -94,7 +94,7 @@
@@ -56,10 +56,14 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
        if (
          (effects == "move" || effects == "copy") &&
          this == draggedTab.container &&
-@@ -996,6 +1002,14 @@
+@@ -996,6 +1002,18 @@
  
        this._tabDropIndicator.hidden = true;
        event.stopPropagation();
++      if (draggedTab.hasAttribute("zen-has-splitted")) {
++        draggedTab.removeAttribute("zen-has-splitted");
++        draggedTab._visuallySelected = false;
++      }
 +      if (draggedTab && dropEffect == "move") {
 +        let moved = gZenPinnedTabManager.moveToAnotherTabContainerIfNecessary(event, movingTabs);
 +
@@ -71,7 +75,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
        if (draggedTab && dropEffect == "copy") {
          // copy the dropped tab (wherever it's from)
          let newIndex = this._getDropIndex(event);
-@@ -1034,10 +1048,11 @@
+@@ -1034,10 +1052,11 @@
            }
          } else {
            let pinned = draggedTab.pinned;
@@ -87,7 +91,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
            );
            let size = this.verticalMode ? "height" : "width";
            let screenAxis = this.verticalMode ? "screenY" : "screenX";
-@@ -1114,7 +1129,7 @@
+@@ -1114,7 +1133,7 @@
                let postTransitionCleanup = () => {
                  tab.removeAttribute("tabdrop-samewindow");
  
@@ -96,7 +100,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
                  if (dropIndex !== false) {
                    gBrowser.moveTabTo(tab, dropIndex);
                    if (!directionForward) {
-@@ -1122,7 +1137,7 @@
+@@ -1122,7 +1141,7 @@
                    }
                  }
                };
@@ -105,7 +109,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
                  postTransitionCleanup();
                } else {
                  let onTransitionEnd = transitionendEvent => {
-@@ -1249,7 +1264,7 @@
+@@ -1249,7 +1268,7 @@
                return;
              }
            }
@@ -114,7 +118,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
            gBrowser.loadTabs(urls, {
              inBackground,
              replace,
-@@ -1279,13 +1294,23 @@
+@@ -1279,13 +1298,23 @@
          return;
        }
  
@@ -140,7 +144,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
        ) {
          delete draggedTab._dragData;
          return;
-@@ -1517,7 +1542,7 @@
+@@ -1517,7 +1546,7 @@
      }
  
      get newTabButton() {
@@ -149,7 +153,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
      }
  
      get verticalMode() {
-@@ -1537,28 +1562,40 @@
+@@ -1537,28 +1566,40 @@
        if (this.#allTabs) {
          return this.#allTabs;
        }
@@ -198,7 +202,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
        return children.filter(node => node.tagName == "tab-group");
      }
  
-@@ -1579,7 +1616,7 @@
+@@ -1579,7 +1620,7 @@
       */
      get visibleTabs() {
        if (!this.#visibleTabs) {
@@ -207,7 +211,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
        }
        return this.#visibleTabs;
      }
-@@ -1613,10 +1650,8 @@
+@@ -1613,10 +1654,8 @@
          return this.#focusableItems;
        }
  
@@ -220,7 +224,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
  
        let focusableItems = [];
        for (let child of children) {
-@@ -1632,6 +1667,7 @@
+@@ -1632,6 +1671,7 @@
        }
  
        this.#focusableItems = [
@@ -228,7 +232,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
          ...verticalPinnedTabsContainer.children,
          ...focusableItems,
        ];
-@@ -1642,6 +1678,7 @@
+@@ -1642,6 +1682,7 @@
      _invalidateCachedTabs() {
        this.#allTabs = null;
        this._invalidateCachedVisibleTabs();
@@ -236,7 +240,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
      }
  
      _invalidateCachedVisibleTabs() {
-@@ -1656,8 +1693,8 @@
+@@ -1656,8 +1697,8 @@
      #isContainerVerticalPinnedExpanded(tab) {
        return (
          this.verticalMode &&
@@ -247,7 +251,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
        );
      }
  
-@@ -1672,7 +1709,7 @@
+@@ -1672,7 +1713,7 @@
  
        if (node == null) {
          // We have a container for non-tab elements at the end of the scrollbox.
@@ -256,7 +260,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
        }
  
        node.before(tab);
-@@ -1772,7 +1809,7 @@
+@@ -1772,7 +1813,7 @@
            // There are separate "new tab" buttons for horizontal tabs toolbar, vertical tabs and
            // for when the tab strip is overflowed (which is shared by vertical and horizontal tabs);
            // Attach the long click popup to all of them.
@@ -265,7 +269,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
            const newTab2 = this.newTabButton;
            const newTabVertical = document.getElementById(
              "vertical-tabs-newtab-button"
-@@ -1855,7 +1892,7 @@
+@@ -1855,7 +1896,7 @@
            let rect = ele => {
              return window.windowUtils.getBoundsWithoutFlushing(ele);
            };
@@ -274,7 +278,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
            if (tab && rect(tab).width <= this._tabClipWidth) {
              this.setAttribute("closebuttons", "activetab");
            } else {
-@@ -1867,10 +1904,12 @@
+@@ -1867,10 +1908,12 @@
  
      _handleTabSelect(aInstant) {
        let selectedTab = this.selectedItem;
@@ -287,7 +291,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
        selectedTab._notselectedsinceload = false;
      }
  
-@@ -1882,7 +1921,7 @@
+@@ -1882,7 +1925,7 @@
          return;
        }
  
@@ -296,7 +300,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
        if (!tabs.length) {
          return;
        }
-@@ -1918,7 +1957,7 @@
+@@ -1918,7 +1961,7 @@
          if (isEndTab && !this._hasTabTempMaxWidth) {
            return;
          }
@@ -305,7 +309,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
          // Force tabs to stay the same width, unless we're closing the last tab,
          // which case we need to let them expand just enough so that the overall
          // tabbar width is the same.
-@@ -1933,7 +1972,7 @@
+@@ -1933,7 +1976,7 @@
          let tabsToReset = [];
          for (let i = numPinned; i < tabs.length; i++) {
            let tab = tabs[i];
@@ -314,7 +318,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
            if (!isEndTab) {
              // keep tabs the same width
              tab.style.transition = "none";
-@@ -1999,16 +2038,15 @@
+@@ -1999,16 +2042,15 @@
        // Move pinned tabs to another container when the tabstrip is toggled to vertical
        // and when session restore code calls _positionPinnedTabs; update styling whenever
        // the number of pinned tabs changes.
@@ -337,7 +341,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
          }
        }
  
-@@ -2016,9 +2054,7 @@
+@@ -2016,9 +2058,7 @@
      }
  
      _resetVerticalPinnedTabs() {
@@ -348,7 +352,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
  
        if (!verticalTabsContainer.children.length) {
          return;
-@@ -2031,8 +2067,8 @@
+@@ -2031,8 +2071,8 @@
      }
  
      _positionPinnedTabs() {
@@ -359,7 +363,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
        let absPositionHorizontalTabs =
          this.overflowing && tabs.length > numPinned && numPinned > 0;
  
-@@ -2041,7 +2077,7 @@
+@@ -2041,7 +2081,7 @@
  
        if (this.verticalMode) {
          this._updateVerticalPinnedTabs();
@@ -368,7 +372,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
          let layoutData = this._pinnedTabsLayoutCache;
          let uiDensity = document.documentElement.getAttribute("uidensity");
          if (!layoutData || layoutData.uiDensity != uiDensity) {
-@@ -2113,7 +2149,7 @@
+@@ -2113,7 +2153,7 @@
          return;
        }
  
@@ -377,7 +381,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
  
        let directionX = screenX > dragData.animLastScreenX;
        let directionY = screenY > dragData.animLastScreenY;
-@@ -2121,7 +2157,7 @@
+@@ -2121,7 +2161,7 @@
        dragData.animLastScreenX = screenX;
  
        let { width: tabWidth, height: tabHeight } =
@@ -386,7 +390,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
        let shiftSizeX = tabWidth * movingTabs.length;
        let shiftSizeY = tabHeight;
        dragData.tabWidth = tabWidth;
-@@ -2296,10 +2332,11 @@
+@@ -2296,10 +2336,11 @@
        }
  
        let pinned = draggedTab.pinned;
@@ -402,7 +406,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
        );
  
        if (this.#rtlMode) {
-@@ -2348,7 +2385,11 @@
+@@ -2348,7 +2389,11 @@
        translate = Math.min(Math.max(translate, firstBound), lastBound);
  
        for (let tab of movingTabs) {
@@ -415,7 +419,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
        }
  
        dragData.translatePos = translate;
-@@ -2484,12 +2525,16 @@
+@@ -2484,12 +2529,16 @@
        // Shift background tabs to leave a gap where the dragged tab
        // would currently be dropped.
        for (let tab of tabs) {
@@ -433,7 +437,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
          if (tab.group?.tabs[0] == tab) {
            tab.group.style.setProperty(
              "--tabgroup-dragover-transform",
-@@ -2541,8 +2586,9 @@
+@@ -2541,8 +2590,9 @@
        );
      }
  
@@ -445,7 +449,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
          return;
        }
  
-@@ -2553,6 +2599,7 @@
+@@ -2553,6 +2603,7 @@
          tab.style.transform = "";
          if (tab.group) {
            tab.group.style.removeProperty("--tabgroup-dragover-transform");
@@ -453,7 +457,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
          }
          tab.removeAttribute("dragover-createGroup");
        }
-@@ -2604,7 +2651,7 @@
+@@ -2604,7 +2655,7 @@
            movingTab._moveTogetherSelectedTabsData.newIndex = movingTabNewIndex;
            movingTab._moveTogetherSelectedTabsData.animate = false;
          };
@@ -462,7 +466,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
            postTransitionCleanup();
          } else {
            let onTransitionEnd = transitionendEvent => {
-@@ -2707,9 +2754,9 @@
+@@ -2707,9 +2758,9 @@
        function newIndex(aTab, index) {
          // Don't allow mixing pinned and unpinned tabs.
          if (aTab.pinned) {
@@ -474,7 +478,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..64e93a414f1544b89af05c636c587620
        }
      }
  
-@@ -2793,7 +2840,7 @@
+@@ -2793,7 +2844,7 @@
      }
  
      _notifyBackgroundTab(aTab) {