From 4cbe7069271c69dc5696381d1083644dd821fab6 Mon Sep 17 00:00:00 2001 From: Izheil <33794458+Izheil@users.noreply.github.com> Date: Wed, 13 Nov 2024 23:22:15 +0100 Subject: [PATCH] update multirow code for FF133 --- .../MultiRowTab-scrollable-autohide.uc.js | 51 +++++++++++-------- .../functions/MultiRowTab-scrollable.uc.js | 51 ++++++++++--------- .../functions/MultiRowTabLiteforFx.uc.js | 51 +++++++++++-------- .../MultiRowTab-scrollable-autohide.uc.js | 43 +++++++++------- .../MultiRowTab-scrollable.uc.js | 50 ++++++++++-------- .../Multirow tabs/MultiRowTabLiteforFx.uc.js | 49 ++++++++++-------- README.md | 15 +++--- 7 files changed, 175 insertions(+), 135 deletions(-) diff --git a/Installers/Multirow & other functions/functions/MultiRowTab-scrollable-autohide.uc.js b/Installers/Multirow & other functions/functions/MultiRowTab-scrollable-autohide.uc.js index f37e25e..325970b 100644 --- a/Installers/Multirow & other functions/functions/MultiRowTab-scrollable-autohide.uc.js +++ b/Installers/Multirow & other functions/functions/MultiRowTab-scrollable-autohide.uc.js @@ -3,8 +3,10 @@ // @namespace https://github.com/Izheil/Quantum-Nox-Firefox-Dark-Full-Theme // @description Multi-row tabs draggability fix with autohiding scrollbar // @include main -// @compatibility Firefox 70 to Firefox 115.0a1 (2023-05-09) +// @compatibility Firefox 70 to Firefox 131.0a1 (2024-09-07) // @author Alice0775, Endor8, TroudhuK, Izheil, Merci-chao +// @version 13/11/2024 23:13 Fixed issue with Firefox 133+ +// @version 07/09/2024 13:25 Compatibility fix for FF131a (Nightly) // @version 10/05/2023 18:42 Fix tab-growth variable from not applying // @version 14/01/2023 22:36 Fixed new tab button getting overlapped with last tab // @version 15/12/2022 22:17 Fixed min/max/close button duplication when having menu bar always visible @@ -61,11 +63,11 @@ function zzzz_MultiRowTabLite() { // EDITABLE JAVASCRIPT VARIABLES // Enables the use of the rows resizer - let useResizer = false; + const useResizer = false; // Size of the scrollbar // auto = default OS size (will show arrow handlers even when it's not needed) | thin = half the width | none = always hidden scrollbar - let scrollbarSize = "thin"; + const scrollbarSize = "thin"; // CSS section let css =` @@ -138,7 +140,6 @@ function zzzz_MultiRowTabLite() { The second rule (.titlebar-buttonbox) has paddings control the padding of the min/max/close buttons. Changing these are required if you want the tab bar to be smaller when having 1 row. */ - /* #TabsToolbar { --toolbarbutton-inner-padding: inherit !important; } @@ -148,11 +149,6 @@ function zzzz_MultiRowTabLite() { height: var(--tab-min-height) !important; } - .titlebar-buttonbox-container { - display: block; - } - */ - /*-------- Don't edit past here unless you know what you are doing --------*/ #tab-scrollbox-resizer { @@ -246,6 +242,15 @@ function zzzz_MultiRowTabLite() { padding-inline-start: 0 !important; } + /* Remove duplicated min/max/close buttons */ + #nav-bar > .titlebar-buttonbox-container { + display: none !important; + } + + #TabsToolbar .titlebar-buttonbox-container { + display: block !important; + } + `; // We check if using australis here @@ -295,6 +300,11 @@ function zzzz_MultiRowTabLite() { margin-right: 0; overflow-y: scroll} + /* Firefox 131+ fix */ + scrollbox > slot { + flex-wrap: wrap; + } + .arrowscrollbox-overflow-start-indicator, .arrowscrollbox-overflow-end-indicator {position: fixed !important} @@ -378,7 +388,7 @@ function zzzz_MultiRowTabLite() { -moz-window-dragging: no-drag} `; - if (useThinScrollbar == true) { + if (scrollbarSize == "thin") { style.innerHTML += ` #tabbrowser-tabs .arrowscrollbox-scrollbox { scrollbar-color: var(--tabs-scrollbar-color) transparent; @@ -473,8 +483,8 @@ function zzzz_MultiRowTabLite() { tabsScrollbox = document.querySelector("#tabbrowser-tabs .arrowscrollbox-scrollbox"); } - let tabsContainer = document.getElementById("TabsToolbar-customization-target"); - let mainWindow = document.getElementById("main-window"); + const tabsContainer = document.getElementById("TabsToolbar-customization-target"); + const mainWindow = document.getElementById("main-window"); // Adds the resizer element to tabsContainer let tabsResizer = document.createElement("div"); @@ -512,7 +522,7 @@ function zzzz_MultiRowTabLite() { /* fix for moving multiple selected tabs */ gBrowser.visibleTabs.forEach(t => t.style.transform && ""); - let tab = this._getDragTargetTab(event, false); + const tab = this._getDragTargetTab(event, false); let selectedTabs = gBrowser.selectedTabs; while (selectedTabs.length) { let t = selectedTabs.pop(); @@ -538,7 +548,7 @@ function zzzz_MultiRowTabLite() { if (!this._dragTime) this._dragTime = Date.now(); if (!tab.hasAttribute("pendingicon") && // annoying fix - Date.now() >= this._dragTime + this._dragOverDelay); + Date.now() >= this._dragTime + this._dragOverDelay) this.selectedItem = tab; ind.hidden = true; return; @@ -591,17 +601,18 @@ function zzzz_MultiRowTabLite() { let dt = event.dataTransfer; let dropEffect = dt.dropEffect; let draggedTab; - let movingTabs; if (dt.mozTypesAt(0)[0] == TAB_DROP_TYPE) { draggedTab = dt.mozGetDataAt(TAB_DROP_TYPE, 0); if (!draggedTab) { return; } - movingTabs = draggedTab._dragData.movingTabs; - draggedTab.container._finishGroupSelectedTabs(draggedTab); + if (draggedTab.container._finishMoveTogetherSelectedTabs) { + draggedTab.container._finishMoveTogetherSelectedTabs(draggedTab); + } else { + draggedTab.container._finishGroupSelectedTabs(draggedTab); + } } - if (draggedTab && dropEffect == "copy") {} - else if (draggedTab && draggedTab.container == this) { + if (draggedTab && dropEffect != "copy" && draggedTab.container == this) { newIndex = this._getDropIndex(event, false); /* fix for moving multiple selected tabs */ @@ -619,7 +630,7 @@ function zzzz_MultiRowTabLite() { }; // We then attach the event listeners for the new functionability to take effect - if (Listeners == false) { + if (!Listeners) { gBrowser.tabContainer.addEventListener("dragover", gBrowser.tabContainer._onDragOver, true); gBrowser.tabContainer.addEventListener("drop", function(event){this.onDrop(event);}, true); Listeners = true; diff --git a/Installers/Multirow & other functions/functions/MultiRowTab-scrollable.uc.js b/Installers/Multirow & other functions/functions/MultiRowTab-scrollable.uc.js index 2ba4177..4f7b6dd 100644 --- a/Installers/Multirow & other functions/functions/MultiRowTab-scrollable.uc.js +++ b/Installers/Multirow & other functions/functions/MultiRowTab-scrollable.uc.js @@ -5,9 +5,9 @@ // @include main // @compatibility Firefox 70 to Firefox 131.0a1 (2024-09-07) // @author Alice0775, Endor8, TroudhuK, Izheil, Merci-chao +// @version 13/11/2024 23:13 Fixed issue with Firefox 133+ // @version 07/09/2024 13:25 Compatibility fix for FF131a (Nightly) // @version 10/05/2023 18:42 Fix tab-growth variable from not applying -// @version 14/01/2023 22:36 Fixed new tab button getting overlapped with last tab // @version 15/12/2022 22:17 Fixed min/max/close button duplication when having menu bar always visible // @version 14/12/2022 19:11 Fixed issue with Firefox 108 (Stable) // @version 21/11/2022 18:38 Fixed issue with Firefox 108a (Nightly) @@ -57,11 +57,11 @@ function zzzz_MultiRowTabLite() { // EDITABLE JAVASCRIPT VARIABLES // Enables the use of the rows resizer - let useResizer = false; + const useResizer = false; // Size of the scrollbar // auto = default OS size | thin = half the width | none = always hidden scrollbar - let scrollbarSize = "auto"; + const scrollbarSize = "auto"; // CSS section let css =` @@ -129,7 +129,6 @@ function zzzz_MultiRowTabLite() { YOU DON'T NEED TO CHANGE THESE unless you want to use values of --tab-min-height lower than 20px. Before changing them, you need to UNCOMMENT the 2 rules below for them TO TAKE EFFECT. */ - /* #TabsToolbar { --toolbarbutton-inner-padding: inherit !important; } @@ -139,12 +138,6 @@ function zzzz_MultiRowTabLite() { height: var(--tab-min-height) !important; } - .titlebar-buttonbox-container { - display: block !important; - } - - */ - /*-------- Don't edit past here unless you know what you are doing --------*/ #tab-scrollbox-resizer { @@ -228,6 +221,15 @@ function zzzz_MultiRowTabLite() { padding-inline-start: 0 !important; } + /* Remove duplicated min/max/close buttons */ + #nav-bar > .titlebar-buttonbox-container { + display: none !important; + } + + #TabsToolbar .titlebar-buttonbox-container { + display: block !important; + } + `; // We check if using australis here @@ -241,12 +243,13 @@ function zzzz_MultiRowTabLite() { // Check if it's proton past FF91 let tabsHavePadding = false; - let tabBackground = document.getElementsByClassName("tab-background")[0]; + const tabBackground = document.getElementsByClassName("tab-background")[0]; if (parseInt(getComputedStyle(tabBackground).getPropertyValue('--tab-block-margin').substring(0,1)) > 0) { tabsHavePadding = true; } // Here the FF71+ changes + let style = document.createElement('style'); if (document.querySelector("#tabbrowser-tabs > arrowscrollbox").shadowRoot) { css += `scrollbar, #tab-scrollbox-resizer {-moz-window-dragging: no-drag !important} @@ -257,7 +260,6 @@ function zzzz_MultiRowTabLite() { ` // This is a fix for the shadow elements: - let style = document.createElement('style'); style.innerHTML = ` .scrollbox-clip { overflow: visible; @@ -358,7 +360,7 @@ function zzzz_MultiRowTabLite() { -moz-window-dragging: no-drag} `; - if (useThinScrollbar == true) { + if (scrollbarSize == "thin") { style.innerHTML += ` #tabbrowser-tabs .arrowscrollbox-scrollbox { scrollbar-color: var(--tabs-scrollbar-color) transparent; @@ -453,8 +455,8 @@ function zzzz_MultiRowTabLite() { tabsScrollbox = document.querySelector("#tabbrowser-tabs .arrowscrollbox-scrollbox"); } - let tabsContainer = document.getElementById("TabsToolbar-customization-target"); - let mainWindow = document.getElementById("main-window"); + const tabsContainer = document.getElementById("TabsToolbar-customization-target"); + const mainWindow = document.getElementById("main-window"); // Adds the resizer element to tabsContainer let tabsResizer = document.createElement("div"); @@ -492,7 +494,7 @@ function zzzz_MultiRowTabLite() { /* fix for moving multiple selected tabs */ gBrowser.visibleTabs.forEach(t => t.style.transform && ""); - let tab = this._getDragTargetTab(event, false); + const tab = this._getDragTargetTab(event, false); let selectedTabs = gBrowser.selectedTabs; while (selectedTabs.length) { let t = selectedTabs.pop(); @@ -518,7 +520,7 @@ function zzzz_MultiRowTabLite() { if (!this._dragTime) this._dragTime = Date.now(); if (!tab.hasAttribute("pendingicon") && // annoying fix - Date.now() >= this._dragTime + this._dragOverDelay); + Date.now() >= this._dragTime + this._dragOverDelay) this.selectedItem = tab; ind.hidden = true; return; @@ -571,17 +573,20 @@ function zzzz_MultiRowTabLite() { let dt = event.dataTransfer; let dropEffect = dt.dropEffect; let draggedTab; - let movingTabs; if (dt.mozTypesAt(0)[0] == TAB_DROP_TYPE) { draggedTab = dt.mozGetDataAt(TAB_DROP_TYPE, 0); if (!draggedTab) { return; } - movingTabs = draggedTab._dragData.movingTabs; - draggedTab.container._finishGroupSelectedTabs(draggedTab); + + // Fix for FF133+ + if (draggedTab.container._finishMoveTogetherSelectedTabs) { + draggedTab.container._finishMoveTogetherSelectedTabs(draggedTab); + } else { + draggedTab.container._finishGroupSelectedTabs(draggedTab); + } } - if (draggedTab && dropEffect == "copy") {} - else if (draggedTab && draggedTab.container == this) { + if (draggedTab && dropEffect != "copy" && draggedTab.container == this) { newIndex = this._getDropIndex(event, false); /* fix for moving multiple selected tabs */ @@ -599,7 +604,7 @@ function zzzz_MultiRowTabLite() { }; // We then attach the event listeners for the new functionability to take effect - if (Listeners == false) { + if (!Listeners) { gBrowser.tabContainer.addEventListener("dragover", gBrowser.tabContainer._onDragOver, true); gBrowser.tabContainer.addEventListener("drop", function(event){this.onDrop(event);}, true); Listeners = true; diff --git a/Installers/Multirow & other functions/functions/MultiRowTabLiteforFx.uc.js b/Installers/Multirow & other functions/functions/MultiRowTabLiteforFx.uc.js index f01b2ef..421d37f 100644 --- a/Installers/Multirow & other functions/functions/MultiRowTabLiteforFx.uc.js +++ b/Installers/Multirow & other functions/functions/MultiRowTabLiteforFx.uc.js @@ -5,6 +5,7 @@ // @include main // @compatibility Firefox 70 to Firefox 131.0a1 (2024-09-07) // @author Alice0775, Endor8, TroudhuK, Izheil, Merci-chao +// @version 13/11/2024 23:13 Fixed issue with Firefox 133+ // @version 07/09/2024 13:25 Compatibility fix for FF131a (Nightly) // @version 10/05/2023 18:42 Fix tab-growth variable from not applying // @version 14/01/2023 22:36 Fixed new tab button getting overlapped with last tab @@ -112,7 +113,6 @@ function zzzz_MultiRowTabLite() { The second rule (.titlebar-buttonbox) has paddings control the padding of the min/max/close buttons. Changing these are required if you want the tab bar to be smaller when having 1 row. */ - /* #TabsToolbar { --toolbarbutton-inner-padding: inherit !important; } @@ -122,11 +122,6 @@ function zzzz_MultiRowTabLite() { height: var(--tab-min-height) !important; } - .titlebar-buttonbox-container { - display: block !important; - } - */ - /*-------- Don't edit past here unless you know what you are doing --------*/ /* These 2 rules are a fix to make sure that tabs become smaller on smaller --tab-min-height values */ @@ -211,6 +206,15 @@ function zzzz_MultiRowTabLite() { padding-inline-start: 0 !important; } + /* Remove duplicated min/max/close buttons */ + #nav-bar > .titlebar-buttonbox-container { + display: none !important; + } + + #TabsToolbar .titlebar-buttonbox-container { + display: block !important; + } + `; // We check if using australis here @@ -233,7 +237,7 @@ function zzzz_MultiRowTabLite() { ` // This is a fix for the shadow elements: - const style = document.createElement('style'); + let style = document.createElement('style'); style.innerHTML = ` .scrollbox-clip { overflow: visible; @@ -330,22 +334,22 @@ function zzzz_MultiRowTabLite() { // This scrolls down to the current tab when you open a new one, or restore a session. function scrollToView() { - let selTab = document.querySelectorAll(".tabbrowser-tab[selected='true']")[0]; - let wrongTab = document.querySelectorAll('.tabbrowser-tab[style^="margin-inline-start"]'); - let hiddenToolbox = document.querySelector('#navigator-toolbox[style^="margin-top"]'); - let fullScreen = document.querySelector('#main-window[sizemode="fullscreen"]'); + const selTab = document.querySelectorAll(".tabbrowser-tab[selected='true']")[0]; + const wrongTab = document.querySelectorAll('.tabbrowser-tab[style^="margin-inline-start"]'); + const hiddenToolbox = document.querySelector('#navigator-toolbox[style^="margin-top"]'); + const fullScreen = document.querySelector('#main-window[sizemode="fullscreen"]'); selTab.scrollIntoView({behavior: "smooth", block: "nearest", inline: "nearest"}); if (wrongTab[0]) { - for(const element of wrongTab) { - element.removeAttribute("style"); + for(let i = 0; i < wrongTab.length; i++) { + wrongTab[i].removeAttribute("style"); } } // If in fullscreen we also make sure to keep the toolbar hidden when a new row is created // when opening a new tab in the background if (fullScreen && hiddenToolbox) { - let toolboxHeight = hiddenToolbox.getBoundingClientRect().height; - let tabsHeight = selTab.getBoundingClientRect().height; + const toolboxHeight = hiddenToolbox.getBoundingClientRect().height; + const tabsHeight = selTab.getBoundingClientRect().height; hiddenToolbox.style.marginTop = ((toolboxHeight + tabsHeight) * -1) + "px"; } } @@ -401,8 +405,8 @@ function zzzz_MultiRowTabLite() { return; let tabs = document.getElementsByClassName("tabbrowser-tab"); - let ltr = (window.getComputedStyle(this).direction == "ltr"); - let rect = this.arrowScrollbox.getBoundingClientRect(); + const ltr = (window.getComputedStyle(this).direction == "ltr"); + const rect = this.arrowScrollbox.getBoundingClientRect(); let newMarginX, newMarginY; if (newIndex == tabs.length) { let tabRect = tabs[newIndex - 1].getBoundingClientRect(); @@ -442,17 +446,20 @@ function zzzz_MultiRowTabLite() { let dt = event.dataTransfer; let dropEffect = dt.dropEffect; let draggedTab; - let movingTabs; if (dt.mozTypesAt(0)[0] == TAB_DROP_TYPE) { draggedTab = dt.mozGetDataAt(TAB_DROP_TYPE, 0); if (!draggedTab) { return; } - movingTabs = draggedTab._dragData.movingTabs; - draggedTab.container._finishGroupSelectedTabs(draggedTab); + + // Fix for FF133+ + if (draggedTab.container._finishMoveTogetherSelectedTabs) { + draggedTab.container._finishMoveTogetherSelectedTabs(draggedTab); + } else { + draggedTab.container._finishGroupSelectedTabs(draggedTab); + } } - if (draggedTab && dropEffect == "copy") {} - else if (draggedTab && draggedTab.container == this) { + if (draggedTab && dropEffect != "copy" && draggedTab.container == this) { newIndex = this._getDropIndex(event, false); /* fix for moving multiple selected tabs */ diff --git a/Multirow and other functions/Multirow tabs/MultiRowTab-scrollable-autohide.uc.js b/Multirow and other functions/Multirow tabs/MultiRowTab-scrollable-autohide.uc.js index 7efbea6..cd30f56 100644 --- a/Multirow and other functions/Multirow tabs/MultiRowTab-scrollable-autohide.uc.js +++ b/Multirow and other functions/Multirow tabs/MultiRowTab-scrollable-autohide.uc.js @@ -5,6 +5,7 @@ // @include main // @compatibility Firefox 70 to Firefox 131.0a1 (2024-09-07) // @author Alice0775, Endor8, TroudhuK, Izheil, Merci-chao +// @version 13/11/2024 23:13 Fixed issue with Firefox 133+ // @version 07/09/2024 13:25 Compatibility fix for FF131a (Nightly) // @version 10/05/2023 18:42 Fix tab-growth variable from not applying // @version 14/01/2023 22:36 Fixed new tab button getting overlapped with last tab @@ -62,11 +63,11 @@ function zzzz_MultiRowTabLite() { // EDITABLE JAVASCRIPT VARIABLES // Enables the use of the rows resizer - let useResizer = false; + const useResizer = false; // Size of the scrollbar // auto = default OS size (will show arrow handlers even when it's not needed) | thin = half the width | none = always hidden scrollbar - let scrollbarSize = "thin"; + const scrollbarSize = "thin"; // CSS section let css =` @@ -139,7 +140,6 @@ function zzzz_MultiRowTabLite() { The second rule (.titlebar-buttonbox) has paddings control the padding of the min/max/close buttons. Changing these are required if you want the tab bar to be smaller when having 1 row. */ - /* #TabsToolbar { --toolbarbutton-inner-padding: inherit !important; } @@ -149,11 +149,6 @@ function zzzz_MultiRowTabLite() { height: var(--tab-min-height) !important; } - .titlebar-buttonbox-container { - display: block; - } - */ - /*-------- Don't edit past here unless you know what you are doing --------*/ #tab-scrollbox-resizer { @@ -247,6 +242,15 @@ function zzzz_MultiRowTabLite() { padding-inline-start: 0 !important; } + /* Remove duplicated min/max/close buttons */ + #nav-bar > .titlebar-buttonbox-container { + display: none !important; + } + + #TabsToolbar .titlebar-buttonbox-container { + display: block !important; + } + `; // We check if using australis here @@ -384,7 +388,7 @@ function zzzz_MultiRowTabLite() { -moz-window-dragging: no-drag} `; - if (useThinScrollbar == true) { + if (scrollbarSize == "thin") { style.innerHTML += ` #tabbrowser-tabs .arrowscrollbox-scrollbox { scrollbar-color: var(--tabs-scrollbar-color) transparent; @@ -479,8 +483,8 @@ function zzzz_MultiRowTabLite() { tabsScrollbox = document.querySelector("#tabbrowser-tabs .arrowscrollbox-scrollbox"); } - let tabsContainer = document.getElementById("TabsToolbar-customization-target"); - let mainWindow = document.getElementById("main-window"); + const tabsContainer = document.getElementById("TabsToolbar-customization-target"); + const mainWindow = document.getElementById("main-window"); // Adds the resizer element to tabsContainer let tabsResizer = document.createElement("div"); @@ -518,7 +522,7 @@ function zzzz_MultiRowTabLite() { /* fix for moving multiple selected tabs */ gBrowser.visibleTabs.forEach(t => t.style.transform && ""); - let tab = this._getDragTargetTab(event, false); + const tab = this._getDragTargetTab(event, false); let selectedTabs = gBrowser.selectedTabs; while (selectedTabs.length) { let t = selectedTabs.pop(); @@ -544,7 +548,7 @@ function zzzz_MultiRowTabLite() { if (!this._dragTime) this._dragTime = Date.now(); if (!tab.hasAttribute("pendingicon") && // annoying fix - Date.now() >= this._dragTime + this._dragOverDelay); + Date.now() >= this._dragTime + this._dragOverDelay) this.selectedItem = tab; ind.hidden = true; return; @@ -597,17 +601,18 @@ function zzzz_MultiRowTabLite() { let dt = event.dataTransfer; let dropEffect = dt.dropEffect; let draggedTab; - let movingTabs; if (dt.mozTypesAt(0)[0] == TAB_DROP_TYPE) { draggedTab = dt.mozGetDataAt(TAB_DROP_TYPE, 0); if (!draggedTab) { return; } - movingTabs = draggedTab._dragData.movingTabs; - draggedTab.container._finishGroupSelectedTabs(draggedTab); + if (draggedTab.container._finishMoveTogetherSelectedTabs) { + draggedTab.container._finishMoveTogetherSelectedTabs(draggedTab); + } else { + draggedTab.container._finishGroupSelectedTabs(draggedTab); + } } - if (draggedTab && dropEffect == "copy") {} - else if (draggedTab && draggedTab.container == this) { + if (draggedTab && dropEffect != "copy" && draggedTab.container == this) { newIndex = this._getDropIndex(event, false); /* fix for moving multiple selected tabs */ @@ -625,7 +630,7 @@ function zzzz_MultiRowTabLite() { }; // We then attach the event listeners for the new functionability to take effect - if (Listeners == false) { + if (!Listeners) { gBrowser.tabContainer.addEventListener("dragover", gBrowser.tabContainer._onDragOver, true); gBrowser.tabContainer.addEventListener("drop", function(event){this.onDrop(event);}, true); Listeners = true; diff --git a/Multirow and other functions/Multirow tabs/MultiRowTab-scrollable.uc.js b/Multirow and other functions/Multirow tabs/MultiRowTab-scrollable.uc.js index 8f146db..2a1267f 100644 --- a/Multirow and other functions/Multirow tabs/MultiRowTab-scrollable.uc.js +++ b/Multirow and other functions/Multirow tabs/MultiRowTab-scrollable.uc.js @@ -5,6 +5,7 @@ // @include main // @compatibility Firefox 70 to Firefox 131.0a1 (2024-09-07) // @author Alice0775, Endor8, TroudhuK, Izheil, Merci-chao +// @version 13/11/2024 23:13 Fixed issue with Firefox 133+ // @version 07/09/2024 13:25 Compatibility fix for FF131a (Nightly) // @version 10/05/2023 18:42 Fix tab-growth variable from not applying // @version 15/12/2022 22:17 Fixed min/max/close button duplication when having menu bar always visible @@ -56,11 +57,11 @@ function zzzz_MultiRowTabLite() { // EDITABLE JAVASCRIPT VARIABLES // Enables the use of the rows resizer - let useResizer = false; + const useResizer = false; // Size of the scrollbar // auto = default OS size | thin = half the width | none = always hidden scrollbar - let scrollbarSize = "auto"; + const scrollbarSize = "auto"; // CSS section let css =` @@ -128,7 +129,6 @@ function zzzz_MultiRowTabLite() { YOU DON'T NEED TO CHANGE THESE unless you want to use values of --tab-min-height lower than 20px. Before changing them, you need to UNCOMMENT the 2 rules below for them TO TAKE EFFECT. */ - /* #TabsToolbar { --toolbarbutton-inner-padding: inherit !important; } @@ -138,12 +138,6 @@ function zzzz_MultiRowTabLite() { height: var(--tab-min-height) !important; } - .titlebar-buttonbox-container { - display: block !important; - } - - */ - /*-------- Don't edit past here unless you know what you are doing --------*/ #tab-scrollbox-resizer { @@ -227,6 +221,15 @@ function zzzz_MultiRowTabLite() { padding-inline-start: 0 !important; } + /* Remove duplicated min/max/close buttons */ + #nav-bar > .titlebar-buttonbox-container { + display: none !important; + } + + #TabsToolbar .titlebar-buttonbox-container { + display: block !important; + } + `; // We check if using australis here @@ -240,12 +243,13 @@ function zzzz_MultiRowTabLite() { // Check if it's proton past FF91 let tabsHavePadding = false; - let tabBackground = document.getElementsByClassName("tab-background")[0]; + const tabBackground = document.getElementsByClassName("tab-background")[0]; if (parseInt(getComputedStyle(tabBackground).getPropertyValue('--tab-block-margin').substring(0,1)) > 0) { tabsHavePadding = true; } // Here the FF71+ changes + let style = document.createElement('style'); if (document.querySelector("#tabbrowser-tabs > arrowscrollbox").shadowRoot) { css += `scrollbar, #tab-scrollbox-resizer {-moz-window-dragging: no-drag !important} @@ -256,7 +260,6 @@ function zzzz_MultiRowTabLite() { ` // This is a fix for the shadow elements: - let style = document.createElement('style'); style.innerHTML = ` .scrollbox-clip { overflow: visible; @@ -357,7 +360,7 @@ function zzzz_MultiRowTabLite() { -moz-window-dragging: no-drag} `; - if (useThinScrollbar == true) { + if (scrollbarSize == "thin") { style.innerHTML += ` #tabbrowser-tabs .arrowscrollbox-scrollbox { scrollbar-color: var(--tabs-scrollbar-color) transparent; @@ -452,8 +455,8 @@ function zzzz_MultiRowTabLite() { tabsScrollbox = document.querySelector("#tabbrowser-tabs .arrowscrollbox-scrollbox"); } - let tabsContainer = document.getElementById("TabsToolbar-customization-target"); - let mainWindow = document.getElementById("main-window"); + const tabsContainer = document.getElementById("TabsToolbar-customization-target"); + const mainWindow = document.getElementById("main-window"); // Adds the resizer element to tabsContainer let tabsResizer = document.createElement("div"); @@ -491,7 +494,7 @@ function zzzz_MultiRowTabLite() { /* fix for moving multiple selected tabs */ gBrowser.visibleTabs.forEach(t => t.style.transform && ""); - let tab = this._getDragTargetTab(event, false); + const tab = this._getDragTargetTab(event, false); let selectedTabs = gBrowser.selectedTabs; while (selectedTabs.length) { let t = selectedTabs.pop(); @@ -517,7 +520,7 @@ function zzzz_MultiRowTabLite() { if (!this._dragTime) this._dragTime = Date.now(); if (!tab.hasAttribute("pendingicon") && // annoying fix - Date.now() >= this._dragTime + this._dragOverDelay); + Date.now() >= this._dragTime + this._dragOverDelay) this.selectedItem = tab; ind.hidden = true; return; @@ -570,17 +573,20 @@ function zzzz_MultiRowTabLite() { let dt = event.dataTransfer; let dropEffect = dt.dropEffect; let draggedTab; - let movingTabs; if (dt.mozTypesAt(0)[0] == TAB_DROP_TYPE) { draggedTab = dt.mozGetDataAt(TAB_DROP_TYPE, 0); if (!draggedTab) { return; } - movingTabs = draggedTab._dragData.movingTabs; - draggedTab.container._finishGroupSelectedTabs(draggedTab); + + // Fix for FF133+ + if (draggedTab.container._finishMoveTogetherSelectedTabs) { + draggedTab.container._finishMoveTogetherSelectedTabs(draggedTab); + } else { + draggedTab.container._finishGroupSelectedTabs(draggedTab); + } } - if (draggedTab && dropEffect == "copy") {} - else if (draggedTab && draggedTab.container == this) { + if (draggedTab && dropEffect != "copy" && draggedTab.container == this) { newIndex = this._getDropIndex(event, false); /* fix for moving multiple selected tabs */ @@ -598,7 +604,7 @@ function zzzz_MultiRowTabLite() { }; // We then attach the event listeners for the new functionability to take effect - if (Listeners == false) { + if (!Listeners) { gBrowser.tabContainer.addEventListener("dragover", gBrowser.tabContainer._onDragOver, true); gBrowser.tabContainer.addEventListener("drop", function(event){this.onDrop(event);}, true); Listeners = true; diff --git a/Multirow and other functions/Multirow tabs/MultiRowTabLiteforFx.uc.js b/Multirow and other functions/Multirow tabs/MultiRowTabLiteforFx.uc.js index 0fdc7f8..421d37f 100644 --- a/Multirow and other functions/Multirow tabs/MultiRowTabLiteforFx.uc.js +++ b/Multirow and other functions/Multirow tabs/MultiRowTabLiteforFx.uc.js @@ -5,6 +5,7 @@ // @include main // @compatibility Firefox 70 to Firefox 131.0a1 (2024-09-07) // @author Alice0775, Endor8, TroudhuK, Izheil, Merci-chao +// @version 13/11/2024 23:13 Fixed issue with Firefox 133+ // @version 07/09/2024 13:25 Compatibility fix for FF131a (Nightly) // @version 10/05/2023 18:42 Fix tab-growth variable from not applying // @version 14/01/2023 22:36 Fixed new tab button getting overlapped with last tab @@ -112,7 +113,6 @@ function zzzz_MultiRowTabLite() { The second rule (.titlebar-buttonbox) has paddings control the padding of the min/max/close buttons. Changing these are required if you want the tab bar to be smaller when having 1 row. */ - /* #TabsToolbar { --toolbarbutton-inner-padding: inherit !important; } @@ -122,11 +122,6 @@ function zzzz_MultiRowTabLite() { height: var(--tab-min-height) !important; } - .titlebar-buttonbox-container { - display: block !important; - } - */ - /*-------- Don't edit past here unless you know what you are doing --------*/ /* These 2 rules are a fix to make sure that tabs become smaller on smaller --tab-min-height values */ @@ -211,6 +206,15 @@ function zzzz_MultiRowTabLite() { padding-inline-start: 0 !important; } + /* Remove duplicated min/max/close buttons */ + #nav-bar > .titlebar-buttonbox-container { + display: none !important; + } + + #TabsToolbar .titlebar-buttonbox-container { + display: block !important; + } + `; // We check if using australis here @@ -330,10 +334,10 @@ function zzzz_MultiRowTabLite() { // This scrolls down to the current tab when you open a new one, or restore a session. function scrollToView() { - let selTab = document.querySelectorAll(".tabbrowser-tab[selected='true']")[0]; - let wrongTab = document.querySelectorAll('.tabbrowser-tab[style^="margin-inline-start"]'); - let hiddenToolbox = document.querySelector('#navigator-toolbox[style^="margin-top"]'); - let fullScreen = document.querySelector('#main-window[sizemode="fullscreen"]'); + const selTab = document.querySelectorAll(".tabbrowser-tab[selected='true']")[0]; + const wrongTab = document.querySelectorAll('.tabbrowser-tab[style^="margin-inline-start"]'); + const hiddenToolbox = document.querySelector('#navigator-toolbox[style^="margin-top"]'); + const fullScreen = document.querySelector('#main-window[sizemode="fullscreen"]'); selTab.scrollIntoView({behavior: "smooth", block: "nearest", inline: "nearest"}); if (wrongTab[0]) { for(let i = 0; i < wrongTab.length; i++) { @@ -344,8 +348,8 @@ function zzzz_MultiRowTabLite() { // If in fullscreen we also make sure to keep the toolbar hidden when a new row is created // when opening a new tab in the background if (fullScreen && hiddenToolbox) { - let toolboxHeight = hiddenToolbox.getBoundingClientRect().height; - let tabsHeight = selTab.getBoundingClientRect().height; + const toolboxHeight = hiddenToolbox.getBoundingClientRect().height; + const tabsHeight = selTab.getBoundingClientRect().height; hiddenToolbox.style.marginTop = ((toolboxHeight + tabsHeight) * -1) + "px"; } } @@ -363,7 +367,7 @@ function zzzz_MultiRowTabLite() { /* fix for moving multiple selected tabs */ gBrowser.visibleTabs.forEach(t => t.style.transform && ""); - let tab = this._getDragTargetTab(event, false); + const tab = this._getDragTargetTab(event, false); let selectedTabs = gBrowser.selectedTabs; while (selectedTabs.length) { let t = selectedTabs.pop(); @@ -401,8 +405,8 @@ function zzzz_MultiRowTabLite() { return; let tabs = document.getElementsByClassName("tabbrowser-tab"); - let ltr = (window.getComputedStyle(this).direction == "ltr"); - let rect = this.arrowScrollbox.getBoundingClientRect(); + const ltr = (window.getComputedStyle(this).direction == "ltr"); + const rect = this.arrowScrollbox.getBoundingClientRect(); let newMarginX, newMarginY; if (newIndex == tabs.length) { let tabRect = tabs[newIndex - 1].getBoundingClientRect(); @@ -442,17 +446,20 @@ function zzzz_MultiRowTabLite() { let dt = event.dataTransfer; let dropEffect = dt.dropEffect; let draggedTab; - let movingTabs; if (dt.mozTypesAt(0)[0] == TAB_DROP_TYPE) { draggedTab = dt.mozGetDataAt(TAB_DROP_TYPE, 0); if (!draggedTab) { return; } - movingTabs = draggedTab._dragData.movingTabs; - draggedTab.container._finishGroupSelectedTabs(draggedTab); + + // Fix for FF133+ + if (draggedTab.container._finishMoveTogetherSelectedTabs) { + draggedTab.container._finishMoveTogetherSelectedTabs(draggedTab); + } else { + draggedTab.container._finishGroupSelectedTabs(draggedTab); + } } - if (draggedTab && dropEffect == "copy") {} - else if (draggedTab && draggedTab.container == this) { + if (draggedTab && dropEffect != "copy" && draggedTab.container == this) { newIndex = this._getDropIndex(event, false); /* fix for moving multiple selected tabs */ @@ -470,7 +477,7 @@ function zzzz_MultiRowTabLite() { }; // We then attach the event listeners for the new functionability to take effect - if (Listeners == false) { + if (!Listeners) { gBrowser.tabContainer.addEventListener("dragover", gBrowser.tabContainer._onDragOver, true); gBrowser.tabContainer.addEventListener("drop", function(event){this.onDrop(event);}, true); Listeners = true; diff --git a/README.md b/README.md index c2d2fee..451be41 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,13 @@ You can use it to fully change the colors of most of firefox UI to dark-gray col If you want to know how to change some colors of the theme, check the [wiki](https://github.com/Izheil/Quantum-Nox-Firefox-Dark-Full-Theme/wiki/Editting-CSS-files). -### Last update: 07/09/2024 +### Last update: 13/11/2024 + +Files updated: + +- **Multirow*.uc.js**: Updated multirow code to support FF133+. + +### Pre-Last update: 07/09/2024 Files updated: @@ -25,13 +31,6 @@ Files updated: - **Multirow*.uc.js**: Updated multirow code to support FF131+. - __Megabar-*__: Fixed some issue with the megabar on FF131+. -### Pre-Last update: 29/08/2023 - -Files updated: - -- **userChrome.jsm**: Updated some dependency that was deprecated in FF117. -- **xPref.jsm**: Updated some dependency that was deprecated in FF117. - ### A note on people looking to replace some Tab Mix Plus features: You can find some of the basic settings that can be simulated through `about:config`, some userscripts, and some addons [here](https://github.com/Izheil/Quantum-Nox-Firefox-Dark-Full-Theme/wiki/Useful-about:config-settings#some-tab-mix-plus-features).