From 0b077536c5ab900b3c8b65d7685772613af3a1cf Mon Sep 17 00:00:00 2001 From: John Hao Date: Wed, 25 Dec 2024 12:27:54 -0500 Subject: [PATCH 1/6] fixed with latest update (not error tolerant) --- src/browser.css | 8 ++++---- src/paxmod-api-experiment/api.js | 8 ++++++++ 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/src/browser.css b/src/browser.css index fbb5ff1..c2cf095 100644 --- a/src/browser.css +++ b/src/browser.css @@ -40,7 +40,7 @@ display: none !important; } -#tabbrowser-arrowscrollbox::part(scrollbox) { +#tabbrowser-arrowscrollbox::part(scrollbox-flexbox) { width: 100% !important; display: flex !important; flex-wrap: wrap !important; @@ -98,7 +98,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 +117,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; diff --git a/src/paxmod-api-experiment/api.js b/src/paxmod-api-experiment/api.js index 92c4d0c..876b203 100644 --- a/src/paxmod-api-experiment/api.js +++ b/src/paxmod-api-experiment/api.js @@ -104,6 +104,14 @@ function patch(win) { } else { console.warn('Paxmod: arrowscrollbox not found') } + + // fix arrowscrollbox > scrollbox part > slot so that it has a part name + if (arrowscrollbox) { + console.log(arrowscrollbox.shadowRoot) + arrowscrollbox.shadowRoot.querySelector('scrollbox > slot').setAttribute('part', 'scrollbox-flexbox') + } else { + console.warn('Paxmod: arrowscrollbox not found') + } } function unpatch(win) { From 087cf66cbd4c4754dda51a96507f11e42cac6e28 Mon Sep 17 00:00:00 2001 From: John Hao Date: Wed, 25 Dec 2024 21:42:11 -0500 Subject: [PATCH 2/6] make warning in case there is dom changes --- src/paxmod-api-experiment/api.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/paxmod-api-experiment/api.js b/src/paxmod-api-experiment/api.js index 876b203..c483ec6 100644 --- a/src/paxmod-api-experiment/api.js +++ b/src/paxmod-api-experiment/api.js @@ -107,8 +107,12 @@ function patch(win) { // fix arrowscrollbox > scrollbox part > slot so that it has a part name if (arrowscrollbox) { - console.log(arrowscrollbox.shadowRoot) - arrowscrollbox.shadowRoot.querySelector('scrollbox > slot').setAttribute('part', 'scrollbox-flexbox') + let scrollboxFlexbox = arrowscrollbox.shadowRoot.querySelector('scrollbox > slot') + if (scrollboxFlexbox) { + scrollboxFlexbox.setAttribute('part', 'scrollbox-flexbox') + } else { + console.warn('Paxmod: scrollbox flexbox not found') + } } else { console.warn('Paxmod: arrowscrollbox not found') } From eef24b916fababe952d2e5d3978fa6dd34f7cfcd Mon Sep 17 00:00:00 2001 From: John Hao Date: Wed, 25 Dec 2024 21:57:31 -0500 Subject: [PATCH 3/6] change README to reflect that disabling tab groups is necessary --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 6cfb4f7..1f9e856 100644 --- a/README.md +++ b/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.) From bcb632a0ca736bf7fcfea6bd4dc9e5f235e79f8f Mon Sep 17 00:00:00 2001 From: John Hao Date: Wed, 25 Dec 2024 22:23:53 -0500 Subject: [PATCH 4/6] fix min-height of tabbrowser-tabs --- src/browser.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/browser.css b/src/browser.css index c2cf095..2deb733 100644 --- a/src/browser.css +++ b/src/browser.css @@ -20,6 +20,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) { From e7a39256a18345ec277291211f09342d44a1b2d0 Mon Sep 17 00:00:00 2001 From: John Hao Date: Tue, 9 Sep 2025 16:39:22 -0400 Subject: [PATCH 5/6] fix on newest nightly, breaks pinning, drag and drop works but is ugly --- src/browser.css | 8 ++++++- src/paxmod-api-experiment/api.js | 39 ++++++++++++++++++++------------ 2 files changed, 31 insertions(+), 16 deletions(-) diff --git a/src/browser.css b/src/browser.css index 2deb733..0437285 100644 --- a/src/browser.css +++ b/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; @@ -42,7 +47,7 @@ display: none !important; } -#tabbrowser-arrowscrollbox::part(scrollbox-flexbox) { +#tabbrowser-arrowscrollbox::part(items-wrapper) { width: 100% !important; display: flex !important; flex-wrap: wrap !important; @@ -64,6 +69,7 @@ max-width: var(--paxmod-max-tab-size) !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 */ diff --git a/src/paxmod-api-experiment/api.js b/src/paxmod-api-experiment/api.js index c483ec6..950e91d 100644 --- a/src/paxmod-api-experiment/api.js +++ b/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') @@ -109,7 +118,7 @@ function patch(win) { if (arrowscrollbox) { let scrollboxFlexbox = arrowscrollbox.shadowRoot.querySelector('scrollbox > slot') if (scrollboxFlexbox) { - scrollboxFlexbox.setAttribute('part', 'scrollbox-flexbox') + scrollboxFlexbox.setAttribute('part', 'items-wrapper') } else { console.warn('Paxmod: scrollbox flexbox not found') } @@ -120,7 +129,7 @@ function patch(win) { 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 } @@ -128,7 +137,7 @@ function unpatch(win) { tabsProto[name] = tabsProto[name + '_orig'] delete tabsProto[name + '_orig'] } - unpatchMethod('_positionPinnedTabs') + // unpatchMethod('_positionPinnedTabs') unpatchMethod('on_drop') unpatchMethod('on_dragover') unpatchMethod('_handleTabSelect') From b9cf6a0a32b17a681a13d8ddff79b70cd7b08759 Mon Sep 17 00:00:00 2001 From: John Hao Date: Mon, 29 Dec 2025 07:06:52 -0500 Subject: [PATCH 6/6] make drag look better. combining windows still does not work --- src/browser.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/browser.css b/src/browser.css index 0437285..fde7d6f 100644 --- a/src/browser.css +++ b/src/browser.css @@ -67,6 +67,8 @@ 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; @@ -78,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;