Skip to content

Commit 2d69db7

Browse files
IzheilIzheil
committed
Update multirow to support FF131+
1 parent d4f66e1 commit 2d69db7

File tree

13 files changed

+250
-217
lines changed

13 files changed

+250
-217
lines changed

‎Installers/Multirow & other functions/functions/MultiRowTab-scrollable-autohide.uc.js‎

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -61,14 +61,14 @@ function zzzz_MultiRowTabLite() {
6161
// EDITABLE JAVASCRIPT VARIABLES
6262

6363
// Enables the use of the rows resizer
64-
var useResizer = false;
64+
let useResizer = false;
6565

6666
// Size of the scrollbar
6767
// auto = default OS size (will show arrow handlers even when it's not needed) | thin = half the width | none = always hidden scrollbar
68-
var scrollbarSize = "thin";
68+
let scrollbarSize = "thin";
6969

7070
// CSS section
71-
var css =`
71+
let css =`
7272
/* MULTIROW TABS CSS */
7373
7474
/* EDITABLE CSS VARIABLES */
@@ -249,7 +249,7 @@ function zzzz_MultiRowTabLite() {
249249
`;
250250

251251
// We check if using australis here
252-
var australisElement = getComputedStyle(document.getElementsByClassName("tabbrowser-tab")[0])
252+
let australisElement = getComputedStyle(document.getElementsByClassName("tabbrowser-tab")[0])
253253
.getPropertyValue('--svg-before-normal-density');
254254

255255
if (australisElement == null) {
@@ -258,7 +258,7 @@ function zzzz_MultiRowTabLite() {
258258
}
259259

260260
// Check if it's proton past FF91
261-
var tabsHavePadding = false;
261+
let tabsHavePadding = false;
262262
let tabBackground = document.getElementsByClassName("tab-background")[0];
263263
if (parseInt(getComputedStyle(tabBackground).getPropertyValue('--tab-block-margin').substring(0,1)) > 0) {
264264
tabsHavePadding = true;
@@ -275,7 +275,7 @@ function zzzz_MultiRowTabLite() {
275275
`
276276

277277
// This is a fix for the shadow elements:
278-
var style = document.createElement('style');
278+
let style = document.createElement('style');
279279
style.innerHTML = `
280280
.scrollbox-clip {
281281
overflow: visible;
@@ -400,13 +400,13 @@ function zzzz_MultiRowTabLite() {
400400
}
401401
}
402402

403-
var sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
404-
var uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
403+
let sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
404+
let uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
405405
sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
406406

407407
gBrowser.tabContainer._getDropIndex = function(event, isLink) {
408-
var tabs = document.getElementsByClassName("tabbrowser-tab");
409-
var tab = this._getDragTargetTab(event, isLink);
408+
let tabs = document.getElementsByClassName("tabbrowser-tab");
409+
let tab = this._getDragTargetTab(event, isLink);
410410
if (window.getComputedStyle(this).direction == "ltr") {
411411
for (let i = tab ? tab._tPos : 0; i < tabs.length; i++) {
412412
let rect = tabs[i].getBoundingClientRect();
@@ -464,7 +464,7 @@ function zzzz_MultiRowTabLite() {
464464

465465
// Handles resizing of rows when enabled
466466
if (useResizer) {
467-
var tabsScrollbox;
467+
let tabsScrollbox;
468468
// FF71+
469469
if (document.querySelector("#tabbrowser-tabs > arrowscrollbox").shadowRoot) {
470470
tabsScrollbox = document.querySelector("#tabbrowser-tabs > arrowscrollbox").shadowRoot.querySelector(".scrollbox-clip > scrollbox");
@@ -473,11 +473,11 @@ function zzzz_MultiRowTabLite() {
473473
tabsScrollbox = document.querySelector("#tabbrowser-tabs .arrowscrollbox-scrollbox");
474474
}
475475

476-
var tabsContainer = document.getElementById("TabsToolbar-customization-target");
477-
var mainWindow = document.getElementById("main-window");
476+
let tabsContainer = document.getElementById("TabsToolbar-customization-target");
477+
let mainWindow = document.getElementById("main-window");
478478

479479
// Adds the resizer element to tabsContainer
480-
var tabsResizer = document.createElement("div");
480+
let tabsResizer = document.createElement("div");
481481
tabsResizer.setAttribute('id', "tab-scrollbox-resizer");
482482
tabsContainer.appendChild(tabsResizer);
483483
console.log("Potato")
@@ -504,15 +504,15 @@ function zzzz_MultiRowTabLite() {
504504
}
505505

506506
// We set this to check if the listeners were added before
507-
var Listeners = false;
507+
let Listeners = false;
508508

509509
// This sets when to apply the fix (by default a new row starts after the 23th open tab, unless you changed the min-size of tabs)
510510
gBrowser.tabContainer.ondragstart = function(){
511511
if(gBrowser.tabContainer.clientHeight > document.getElementsByClassName("tabbrowser-tab")[0].clientHeight) {
512512

513513
/* fix for moving multiple selected tabs */
514514
gBrowser.visibleTabs.forEach(t => t.style.transform && "");
515-
var tab = this._getDragTargetTab(event, false);
515+
let tab = this._getDragTargetTab(event, false);
516516
let selectedTabs = gBrowser.selectedTabs;
517517
while (selectedTabs.length) {
518518
let t = selectedTabs.pop();
@@ -529,9 +529,9 @@ function zzzz_MultiRowTabLite() {
529529
event.preventDefault();
530530
event.stopPropagation();
531531

532-
var ind = this._tabDropIndicator;
532+
let ind = this._tabDropIndicator;
533533

534-
var effects = orig_getDropEffectForTabDrag(event);
534+
let effects = orig_getDropEffectForTabDrag(event);
535535
if (effects == "link") {
536536
let tab = this._getDragTargetTab(event, true);
537537
if (tab) {
@@ -545,14 +545,14 @@ function zzzz_MultiRowTabLite() {
545545
}
546546
}
547547

548-
var newIndex = this._getDropIndex(event, effects == "link");
548+
let newIndex = this._getDropIndex(event, effects == "link");
549549
if (newIndex == null)
550550
return;
551551

552-
var tabs = document.getElementsByClassName("tabbrowser-tab");
553-
var ltr = (window.getComputedStyle(this).direction == "ltr");
554-
var rect = this.arrowScrollbox.getBoundingClientRect();
555-
var newMarginX, newMarginY;
552+
let tabs = document.getElementsByClassName("tabbrowser-tab");
553+
let ltr = (window.getComputedStyle(this).direction == "ltr");
554+
let rect = this.arrowScrollbox.getBoundingClientRect();
555+
let newMarginX, newMarginY;
556556
if (newIndex == tabs.length) {
557557
let tabRect = tabs[newIndex - 1].getBoundingClientRect();
558558
if (ltr)
@@ -587,11 +587,11 @@ function zzzz_MultiRowTabLite() {
587587
};
588588

589589
gBrowser.tabContainer.onDrop = function(event) {
590-
var newIndex;
591-
var dt = event.dataTransfer;
592-
var dropEffect = dt.dropEffect;
593-
var draggedTab;
594-
var movingTabs;
590+
let newIndex;
591+
let dt = event.dataTransfer;
592+
let dropEffect = dt.dropEffect;
593+
let draggedTab;
594+
let movingTabs;
595595
if (dt.mozTypesAt(0)[0] == TAB_DROP_TYPE) {
596596
draggedTab = dt.mozGetDataAt(TAB_DROP_TYPE, 0);
597597
if (!draggedTab) {
@@ -630,7 +630,7 @@ function zzzz_MultiRowTabLite() {
630630

631631
// copy of the original and overrided _getDropEffectForTabDrag method
632632
function orig_getDropEffectForTabDrag(event) {
633-
var dt = event.dataTransfer;
633+
let dt = event.dataTransfer;
634634

635635
let isMovingTabs = dt.mozItemCount > 0;
636636
for (let i = 0; i < dt.mozItemCount; i++) {

‎Installers/Multirow & other functions/functions/MultiRowTab-scrollable.uc.js‎

Lines changed: 36 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@
33
// @namespace https://github.com/Izheil/Quantum-Nox-Firefox-Dark-Full-Theme
44
// @description Multi-row tabs draggability fix with scrollable rows
55
// @include main
6-
// @compatibility Firefox 70 to Firefox 115.0a1 (2023-05-09)
6+
// @compatibility Firefox 70 to Firefox 131.0a1 (2024-09-07)
77
// @author Alice0775, Endor8, TroudhuK, Izheil, Merci-chao
8+
// @version 07/09/2024 13:25 Compatibility fix for FF131a (Nightly)
89
// @version 10/05/2023 18:42 Fix tab-growth variable from not applying
910
// @version 14/01/2023 22:36 Fixed new tab button getting overlapped with last tab
1011
// @version 15/12/2022 22:17 Fixed min/max/close button duplication when having menu bar always visible
@@ -56,14 +57,14 @@ function zzzz_MultiRowTabLite() {
5657
// EDITABLE JAVASCRIPT VARIABLES
5758

5859
// Enables the use of the rows resizer
59-
var useResizer = false;
60+
let useResizer = false;
6061

6162
// Size of the scrollbar
6263
// auto = default OS size | thin = half the width | none = always hidden scrollbar
63-
var scrollbarSize = "auto";
64+
let scrollbarSize = "auto";
6465

6566
// CSS section
66-
var css =`
67+
let css =`
6768
/* MULTIROW TABS CSS */
6869
6970
/* EDITABLE CSS VARIABLES */
@@ -230,7 +231,7 @@ function zzzz_MultiRowTabLite() {
230231
`;
231232

232233
// We check if using australis here
233-
var australisElement = getComputedStyle(document.getElementsByClassName("tabbrowser-tab")[0])
234+
let australisElement = getComputedStyle(document.getElementsByClassName("tabbrowser-tab")[0])
234235
.getPropertyValue('--svg-before-normal-density');
235236

236237
if (australisElement == null) {
@@ -239,7 +240,7 @@ function zzzz_MultiRowTabLite() {
239240
}
240241

241242
// Check if it's proton past FF91
242-
var tabsHavePadding = false;
243+
let tabsHavePadding = false;
243244
let tabBackground = document.getElementsByClassName("tab-background")[0];
244245
if (parseInt(getComputedStyle(tabBackground).getPropertyValue('--tab-block-margin').substring(0,1)) > 0) {
245246
tabsHavePadding = true;
@@ -256,7 +257,7 @@ function zzzz_MultiRowTabLite() {
256257
`
257258

258259
// This is a fix for the shadow elements:
259-
var style = document.createElement('style');
260+
let style = document.createElement('style');
260261
style.innerHTML = `
261262
.scrollbox-clip {
262263
overflow: visible;
@@ -272,6 +273,11 @@ function zzzz_MultiRowTabLite() {
272273
max-height: calc(var(--tab-min-height) * var(--max-tab-rows));
273274
}
274275
276+
/* Firefox 131+ fix */
277+
scrollbox > slot {
278+
flex-wrap: wrap;
279+
}
280+
275281
.arrowscrollbox-overflow-start-indicator,
276282
.arrowscrollbox-overflow-end-indicator {position: fixed !important}
277283
@@ -374,13 +380,13 @@ function zzzz_MultiRowTabLite() {
374380
}
375381
}
376382

377-
var sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
378-
var uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
383+
let sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
384+
let uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
379385
sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
380386

381387
gBrowser.tabContainer._getDropIndex = function(event, isLink) {
382-
var tabs = document.getElementsByClassName("tabbrowser-tab");
383-
var tab = this._getDragTargetTab(event, isLink);
388+
let tabs = document.getElementsByClassName("tabbrowser-tab");
389+
let tab = this._getDragTargetTab(event, isLink);
384390
if (window.getComputedStyle(this).direction == "ltr") {
385391
for (let i = tab ? tab._tPos : 0; i < tabs.length; i++) {
386392
let rect = tabs[i].getBoundingClientRect();
@@ -438,7 +444,7 @@ function zzzz_MultiRowTabLite() {
438444

439445
// Handles resizing of rows when enabled
440446
if (useResizer) {
441-
var tabsScrollbox;
447+
let tabsScrollbox;
442448
// FF71+
443449
if (document.querySelector("#tabbrowser-tabs > arrowscrollbox").shadowRoot) {
444450
tabsScrollbox = document.querySelector("#tabbrowser-tabs > arrowscrollbox").shadowRoot.querySelector(".scrollbox-clip > scrollbox");
@@ -447,11 +453,11 @@ function zzzz_MultiRowTabLite() {
447453
tabsScrollbox = document.querySelector("#tabbrowser-tabs .arrowscrollbox-scrollbox");
448454
}
449455

450-
var tabsContainer = document.getElementById("TabsToolbar-customization-target");
451-
var mainWindow = document.getElementById("main-window");
456+
let tabsContainer = document.getElementById("TabsToolbar-customization-target");
457+
let mainWindow = document.getElementById("main-window");
452458

453459
// Adds the resizer element to tabsContainer
454-
var tabsResizer = document.createElement("div");
460+
let tabsResizer = document.createElement("div");
455461
tabsResizer.setAttribute('id', "tab-scrollbox-resizer");
456462
tabsContainer.appendChild(tabsResizer);
457463
console.log("Potato")
@@ -478,15 +484,15 @@ function zzzz_MultiRowTabLite() {
478484
}
479485

480486
// We set this to check if the listeners were added before
481-
var Listeners = false;
487+
let Listeners = false;
482488

483489
// This sets when to apply the fix (by default a new row starts after the 23th open tab, unless you changed the min-size of tabs)
484490
gBrowser.tabContainer.ondragstart = function(){
485491
if(gBrowser.tabContainer.clientHeight > document.getElementsByClassName("tabbrowser-tab")[0].clientHeight) {
486492

487493
/* fix for moving multiple selected tabs */
488494
gBrowser.visibleTabs.forEach(t => t.style.transform && "");
489-
var tab = this._getDragTargetTab(event, false);
495+
let tab = this._getDragTargetTab(event, false);
490496
let selectedTabs = gBrowser.selectedTabs;
491497
while (selectedTabs.length) {
492498
let t = selectedTabs.pop();
@@ -503,9 +509,9 @@ function zzzz_MultiRowTabLite() {
503509
event.preventDefault();
504510
event.stopPropagation();
505511

506-
var ind = this._tabDropIndicator;
512+
let ind = this._tabDropIndicator;
507513

508-
var effects = orig_getDropEffectForTabDrag(event);
514+
let effects = orig_getDropEffectForTabDrag(event);
509515
if (effects == "link") {
510516
let tab = this._getDragTargetTab(event, true);
511517
if (tab) {
@@ -519,14 +525,14 @@ function zzzz_MultiRowTabLite() {
519525
}
520526
}
521527

522-
var newIndex = this._getDropIndex(event, effects == "link");
528+
let newIndex = this._getDropIndex(event, effects == "link");
523529
if (newIndex == null)
524530
return;
525531

526-
var tabs = document.getElementsByClassName("tabbrowser-tab");
527-
var ltr = (window.getComputedStyle(this).direction == "ltr");
528-
var rect = this.arrowScrollbox.getBoundingClientRect();
529-
var newMarginX, newMarginY;
532+
let tabs = document.getElementsByClassName("tabbrowser-tab");
533+
let ltr = (window.getComputedStyle(this).direction == "ltr");
534+
let rect = this.arrowScrollbox.getBoundingClientRect();
535+
let newMarginX, newMarginY;
530536
if (newIndex == tabs.length) {
531537
let tabRect = tabs[newIndex - 1].getBoundingClientRect();
532538
if (ltr)
@@ -561,11 +567,11 @@ function zzzz_MultiRowTabLite() {
561567
};
562568

563569
gBrowser.tabContainer.onDrop = function(event) {
564-
var newIndex;
565-
var dt = event.dataTransfer;
566-
var dropEffect = dt.dropEffect;
567-
var draggedTab;
568-
var movingTabs;
570+
let newIndex;
571+
let dt = event.dataTransfer;
572+
let dropEffect = dt.dropEffect;
573+
let draggedTab;
574+
let movingTabs;
569575
if (dt.mozTypesAt(0)[0] == TAB_DROP_TYPE) {
570576
draggedTab = dt.mozGetDataAt(TAB_DROP_TYPE, 0);
571577
if (!draggedTab) {
@@ -604,7 +610,7 @@ function zzzz_MultiRowTabLite() {
604610

605611
// copy of the original and overrided _getDropEffectForTabDrag method
606612
function orig_getDropEffectForTabDrag(event) {
607-
var dt = event.dataTransfer;
613+
let dt = event.dataTransfer;
608614

609615
let isMovingTabs = dt.mozItemCount > 0;
610616
for (let i = 0; i < dt.mozItemCount; i++) {

0 commit comments

Comments
 (0)