Fix on latest nightly

README.md

@@ -23,6 +23,7 @@ It works in the new Proton UI and alongside any themes. You can configure the fo
   | --- | --- |
   | `xpinstall.signatures.required` | `false` [(Why?)](#why-cant-i-install-paxmod-as-a-verified-extension-through-mozilla) |
   | `extensions.experiments.enabled` | `true` |
+  | `browser.tabs.groups.enabled` | `false` (Does not work with drag-and-drop)|
 
 - Install Paxmod. (Download the `.xpi` file from [here](https://github.com/numirias/paxmod/releases/latest) and load it in Firefox.)
 

src/browser.css

@@ -9,6 +9,11 @@
     display: none !important;
 }
 
+#pinned-drop-indicator {
+    /* Hide pinned indicator since it won't pin anyways */
+    display: none !important;
+}
+
 #TabsToolbar #tabs-newtab-button {
     margin: 0 !important;
     display: var(--paxmod-display-newtab) !important;
@@ -20,6 +25,8 @@
 #tabbrowser-tabs {
     /* No padding, even when some tabs are pinned (see GH-88) */
     padding-inline: 0 !important;
+
+    min-height: 0 !important;
 }
 
 #tabbrowser-arrowscrollbox::part(scrollbox-clip) {
@@ -40,7 +47,7 @@
     display: none !important;
 }
 
-#tabbrowser-arrowscrollbox::part(scrollbox) {
+#tabbrowser-arrowscrollbox::part(items-wrapper) {
     width: 100% !important;
     display: flex !important;
     flex-wrap: wrap !important;
@@ -60,8 +67,11 @@
     width: var(--paxmod-tab-size) !important;
     min-width: var(--paxmod-min-tab-size) !important;
     max-width: var(--paxmod-max-tab-size) !important;
+    left: 0 !important;
+
     /* Explicit min-height rule is only needed for non-Proton UI */
     min-height: var(--tab-min-height) !important;
+    height: var(--tab-min-height) !important;
     flex-grow: 1;
     /* Can't completely disable transitions, otherwise tabs have small pixel
      * offsets after closing some tabs */
@@ -70,6 +80,10 @@
     scroll-margin: var(--tab-min-height) !important;
 }
 
+.tabbrowser-tab[dragtarget=""] {
+    opacity: 0;
+}
+
 .tabbrowser-tab .tab-label-container {
     /* Unset fixed label height to allow smaller tab min height */
     height: initial !important;
@@ -98,7 +112,7 @@
 }
 
 /* Need specific selector here to overrule !important from browser style */
-#titlebar #tabbrowser-tabs > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] {
+#navigator-toolbox #tabbrowser-tabs > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] {
     flex-grow: 0 !important;
     width: initial !important;
     min-width: initial !important;
@@ -117,12 +131,12 @@
 
 /********** Titlebar **********/
 
-:root[tabsintitlebar] #titlebar .titlebar-buttonbox-container {
+#navigator-toolbox .titlebar-buttonbox-container {
     /* Give users an option to hide the min/max/close buttions */
     display: var(--paxmod-titlebar-display);
 }
 
-:root[tabsintitlebar] #titlebar .titlebar-buttonbox {
+#navigator-toolbox .titlebar-buttonbox {
     /* Otherwise, the inline min/max/close buttons on Windows (and maybe MacOS)
      * will stretch to the full height of multiple tab rows */
     display: inline-block;

src/paxmod-api-experiment/api.js

@@ -35,7 +35,7 @@ function patch(win) {
     console.warn('Paxmod: tab box not found in this win')
     return
   }
-  if (tabsProto._positionPinnedTabs_orig) {
+  if (tabsProto.on_drop_orig) {
     console.warn('Paxmod: tab box already patched in this win')
     return
   }
@@ -58,22 +58,30 @@ function patch(win) {
     tabsProto[name + '_orig'] = tabsProto[name]
     tabsProto[name] = f
   }
-  patchMethod('_positionPinnedTabs', function() {
-    this._positionPinnedTabs_orig()
-    // Remove visual offset of pinned tabs
-    this.style.paddingInlineStart = ''
-    for (let tab of this.allTabs) {
-      tab.style.marginInlineStart = ''
-    }
-  })
+  // patchMethod('_positionPinnedTabs', function() {
+  //   this._positionPinnedTabs_orig()
+  //   // Remove visual offset of pinned tabs
+  //   this.style.paddingInlineStart = ''
+  //   for (let tab of this.allTabs) {
+  //     tab.style.marginInlineStart = ''
+  //   }
+  // })
   patchMethod('on_drop', function(event) {
     let dt = event.dataTransfer
     if (dt.dropEffect !== 'move') {
       return this.on_drop_orig(event)
     }
     let draggedTab = dt.mozGetDataAt('application/x-moz-tabbrowser-tab', 0)
-    draggedTab._dragData.animDropIndex = dropIndex(this.allTabs, event)
-    return this.on_drop_orig(event)
+    // draggedTab._dragData.animDropIndex = dropIndex(this.allTabs, event)
+    var val = dropIndex(this.allTabs, event);
+
+    var movingTabs = draggedTab._dragData.movingTabs;
+    movingTabs?.reverse();
+    for (let tab of movingTabs) {
+      win.gBrowser.moveTabTo(tab, {elementIndex: val}, null);
+    }
+    // return this.on_drop_orig(event)
+    return;
   })
   patchMethod('on_dragover', function(event) {
     let dt = event.dataTransfer
@@ -83,6 +91,7 @@ function patch(win) {
     let draggedTab = dt.mozGetDataAt('application/x-moz-tabbrowser-tab', 0)
     let movingTabs = draggedTab._dragData.movingTabs
     draggedTab._dragData.animDropIndex = dropIndex(this.allTabs, event)
+    // var val = dropIndex(this.allTabs, event);
     this.on_dragover_orig(event)
     // Reset rules that visualize dragging because they don't work in multi-row
     for (let tab of this.allTabs) {
@@ -95,7 +104,7 @@ function patch(win) {
     this.setAttribute('overflow', 'true')
     this._handleTabSelect_orig(aInstant)
   })
-  win.document.querySelector('#tabbrowser-tabs')._positionPinnedTabs()
+  // win.document.querySelector('#tabbrowser-tabs')._positionPinnedTabs()
   // Make sure the arrowscrollbox doesn't swallow mouse wheel events, so they
   // get propagated to the tab list, allowing the user to scroll up and down
   let arrowscrollbox = win.document.querySelector('#tabbrowser-arrowscrollbox')
@@ -104,19 +113,31 @@ function patch(win) {
   } else {
     console.warn('Paxmod: arrowscrollbox not found')
   }
+
+  // fix arrowscrollbox > scrollbox part > slot so that it has a part name
+  if (arrowscrollbox) {
+    let scrollboxFlexbox = arrowscrollbox.shadowRoot.querySelector('scrollbox > slot')
+    if (scrollboxFlexbox) {
+      scrollboxFlexbox.setAttribute('part', 'items-wrapper')
+    } else {
+      console.warn('Paxmod: scrollbox flexbox not found')
+    }
+  } else {
+    console.warn('Paxmod: arrowscrollbox not found')
+  }
 }
 
 function unpatch(win) {
   var tabsProto = win.customElements.get('tabbrowser-tabs').prototype
-  if (!tabsProto._positionPinnedTabs_orig) {
+  if (!tabsProto.on_drop_orig) {
     console.warn('Paxmod: tab box not patched')
     return
   }
   function unpatchMethod(name) {
     tabsProto[name] = tabsProto[name + '_orig']
     delete tabsProto[name + '_orig']
   }
-  unpatchMethod('_positionPinnedTabs')
+  // unpatchMethod('_positionPinnedTabs')
   unpatchMethod('on_drop')
   unpatchMethod('on_dragover')
   unpatchMethod('_handleTabSelect')