- Firefox-Version
- FF 78.0.1
- Betriebssystem
- Win 10
Etwas Bastelei meinerseits...bitte als Beta-Version zum Testen betrachten. Wer Lust hat, kann das ja mal ausprobieren... (für die Nightly habe ich es noch nicht getestet)
Habe das alte Skript aus diesem Thread für die mehrzeilige Tableiste noch einmal angepasst und eine vertikale Autohide-Tableiste als Option hinzugefügt (ist standardmäßig eingeschaltet). Vertikale Tableiste gibt es zwar auch als WebExtension, aber meines Wissens nicht mit Autohide-Funktion und nur innerhalb der Sidebar. Außerdem bleibt auf Grund von Systembeschränkungen die original Tableiste bei einer Webextension immer erhalten. Diese Einschränkungen gibt es bei User-Skripten nicht.
Im Gegensatz zur Kombination aus Skript/CSS in der oben verlinkten Version vom 18.02.2020, ist jetzt der gesamte CSS-Code innerhalb des UserScripts. Größen, Abstände und andere Anpssungen kann man via Variablen im Skript einstellen. Falls das Aussehen der Tabs/Tableiste/Hintergrund angepasst werden soll, ist es am besten, dies in der userChrome.css zu tun und nicht innerhalb des UserSkripts, da der CSS-Code parametrisiert wurde. d.h. es finden noch textuelle Ersetzungen durch den JS-Code statt. Der Code in der userChrome.css überschreibt den JS-Code.
Info für 'Tab-Messies': Es ist übrigens möglich mehr als 750 Tabs gleichzeitig darzustellen. 
Einspaltig:
Mehrspaltig (ca. 300 offene Tabs):
Wie bringe ich User-JavaSkripte zum Laufen?
1 ) firefox-anpassungen.zip herunterladen und entpacken.
2 ) Entpackte Dateien/Verzeichnisse in folgende Verzeichnisse verteilen:
- Datei config.js und das gesamte Verzeichnis userChromeJS werden in den Firefox-Installationsordner (standardmäßig unter Windows(!) ist das 'C:\Programme\Mozilla Firefox' ) kopiert.
- Datei config-prefs.js wird im Firefox-Installationsordner(s.o.) in das Unterverzeichnis '\defaults\pref' kopiert.
- Datei userChrome.js (befindet sich in der entp. zip-Datei im Ordner 'chrome') wird in das 'chrome' Verzeichnis des Profil-Ordners kopiert (an die Stelle, wo sich auch die 'userChrome.css' befindet).
Ausführliche Beschreibung: User-Java-Skripte: Link
Hier das Skript: (Ich hoffe die User-Einstellungen am Anfang des Skripts sind selbsterklärend)
JavaScript
// ==UserScript==
// @name zzzz-MultiRowTab_LiteforFx48.uc.js
// @namespace http://space.geocities.yahoo.co.jp/gl/alice0775
// @description Experimentelle CSS Version für Mehrzeilige Tableiste
// @include main
// @compatibility Firefox 72
// @author Alice0775
// @version 2016/08/05 00:00 Firefox 48
// @version 2016/05/01 00:01 hide favicon if busy
// @version 2016/03/09 00:01 Bug 1222490 - Actually remove panorama for Fx45+
// @version 2016/02/09 00:01 workaround css for lwt
// @version 2016/02/09 00:00
// Version: 04.07.2020 FireFox 78+ by 'BrokenHeard'
// ==/UserScript==
"use strict";
MultiRowTabLiteforFx();
function MultiRowTabLiteforFx() {
// User-Settings ---
var bTabsAutoPopup = true; // [true]: 'AutoPopup' für Tabs einschalten, [false]:'AutoPopup' für Tabs auschalten
var bTabsDown = true; // [true]: Tab-Leiste unter allen anderen Toolbars, [false]: Tab-Leiste oben
var bTabWheel = false; // [true]: Tab-Wheel-Selection einschalten, [false]: Tab-Wheel-Selection ausschalten
var bPageScroll = true; // [true]: seitenweises Scrollen, [false]: zeilenweises Scrollen
var nTabsAutoPopupWidth = 220; // Breite der 'AutoPopup'-Leiste in Pixeln
var nTabsAutoPopupHover = 2; // Abstand zum FF-Fensterrand in Pixeln, ab dem das Popup-Fenster sichtbar gemacht wird
var nTabsAutoPopupAnim = 0.5; // Dauer der Animation beim 'Herausschieben' des Popups in Sekunden (0 = keine Animation)
var nTabLines = 3; // Anzahl der sichtbaren Tab-Zeilen, darüber hinaus wird gescrollt (!keine Funktion bei 'bTabsAutoPopup=true'!)
var nTabWidth = 180; // Breite der einzelnen Tabs in Pixeln
var nTabHeight = 26; // Höhe der einzelnen Tabs in Pixeln
var nTabMargin = 1; // Abstand zwischen den Tab-Zeilen in Pixeln
var bTabScrollbar = true; // [true] Scrollbar für Tabbar anzeigen, [false] Keine Scrollbar für Tabbar anzeigen
var bTabCloseButton = false; // [true] Tab-Schließen-Button anzeigen, [false] Tab-Schließen-Button verbergen
var bTabTooltips = true; // [true] Tab-Tooltips werden angezeigt, [false] Tab-Tooltips werden nicht angezeigt
var bDblclickOnTabbarNewTab = true; // [true] Doppel-Klick über Tabbar öffnet neuen Tab, [false] Funktion wird nicht ausgeführt
var bDblclickOnTabReloadTab = true; // [true] Doppel-Klick über Tab lädt diesen neu, [false] Funktion wird nicht ausgeführt
// User-Settings ---
var nTabLineHeight = nTabHeight+2*nTabMargin;
tabsetting: {
let css =`
tabs tab {
border-left: solid 1px hsla(0,0%,0%,0) !important;
border-right: solid 1px hsla(0,0%,0%,0) !important;
}
tabs tab:after,tabs tab:before
{
display: none !important;
}
`;
let sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
let uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);
}
multiLineTabSetup: {
let cssIn =`
#tabbrowser-tab-tooltip {
visibility: strTabTooltips !important;
/*display: strTabTooltips !important;*/
}
#TabsToolbar > .titlebar-buttonbox-container,
#main-window[sizemode="fullscreen"] #window-controls {
display: none !important;
}
/* TabToolbar */
#TabsToolbar {
/*background-image: linear-gradient( rgba(0,0,0,1), rgba(100,125,145,1) ), none !important; */
/*background-image: url('file:///D://Programme%20(Portable)//Firefox%20Portable//Firefox-Test//Profilordner//chrome//image//BackNew0008.png') !important;*/
background: rgba(30,40,50,0.80) !important;
-moz-window-dragging: no-drag !important;
}
/* Tab-Höhe */
.tabbrowser-tab {
min-height: nTabHeightpx !important;
max-height: nTabHeightpx !important;
margin-top: nTabMarginpx !important;
margin-bottom: nTabMarginpx !important;
}
/* Tab-Rahmen entfernen */
#TabsToolbar .tabbrowser-tab[visuallyselected="true"],
#TabsToolbar .tabbrowser-tab,
#TabsToolbar .tabbrowser-tab .tab-background {
background: unset !important;
border-top: unset !important;
outline: none !important;
}
/* Tab-Schließen-Button entfernen */
.tabbrowser-tab .tab-close-button {
visibility: strVisible !important;
}
tabs > arrowscrollbox {
display: block;
}
tabs > arrowscrollbox::part(scrollbox) {
display: flex !important;
position: relative !important;
flex-wrap: wrap !important;
overflow: visible !important;
overflow-x: hidden !important;
overflow-y: strScrollbar !important;
-moz-window-dragging: no-drag !important;
}
.tabbrowser-tab:not([pinned]) {
min-width: nTabWidthpx !important;
}
/* Tab-Separatoren entfernen */
.tabbrowser-tab::after,
.tabbrowser-tab::before {
opacity: 0 !important;
border-image: unset !important;
border-image-slice: none !important;
width: 2 !important;
}
/* Tab-Line entfernen */
#TabsToolbar .tabbrowser-tab .tab-line {
display: none !important;
}
/* Schriftart/Schriftgröße ändern */
.tabbrowser-tab .tab-label {
text-shadow: 1px 1px 0px #000000 !important;
font-weight: 500 !important;
font-size: 12px !important;
font-family: "Arial" !important;
color: white !important;
}
.tabbrowser-tab .tab-label[selected="true"] {
text-shadow: 1px 1px 0px #000000 !important;
color: white !important;
font-weight: 500 !important;
font-size: 12px !important;
font-family: "Arial" !important;
}
/* Tab-Hintergrund */
/*--- selektiert ---*/
.tab-background[selected=true] > spacer {
background-image: linear-gradient( rgba(103,171,224,1), rgba(10,58,95,1) ), none !important;
filter: drop-shadow(3px 3px 2px rgba(0,0,0,0.33)) drop-shadow(-2px 3px 2px rgba(0,0,0,0.33)) !important;
}
/*--- hover(nicht selektiert) ---*/
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > spacer {
background-image: linear-gradient( rgba(112,112,112,0.85), rgba(50,62,72,0.85) ), none !important;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75) !important;
}
/*--- nicht selektiert ---*/
.tab-background:not([selected=true]) > spacer {
background-image: linear-gradient( rgba(60,60,60,0.85), rgba(25,25,25,0.85) ), none !important;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75); !important;
}
/*--- Multi-selektiert ---*/
.tab-background[multiselected=true]:not([selected=true]) > spacer {
background-image: linear-gradient( rgba(225,225,225,1), rgba(50,98,135,1) ), none !important;
}
.tabbrowser-tab:hover > .tab-stack > .tab-background[multiselected=true]:not([selected=true]) > spacer {
background-image: linear-gradient( rgba(225,225,225,1), rgba(50,98,135,1) ), none !important;
}
`;
let cssOut;
cssOut = cssIn.replace(/nTabHeight/g, nTabHeight);
cssOut = cssOut.replace(/nTabMargin/g, nTabMargin);
cssOut = cssOut.replace(/nTabWidth/g, nTabWidth);
if(bTabCloseButton)
cssOut = cssOut.replace("strVisible", "visible");
else
cssOut = cssOut.replace("strVisible", "collapse");
if(bTabScrollbar)
cssOut = cssOut.replace("strScrollbar", "auto");
else
cssOut = cssOut.replace("strScrollbar", "hidden");
if(bTabTooltips)
cssOut = cssOut.replace("strTabTooltips", "visible");
else
cssOut = cssOut.replace("strTabTooltips", "hidden");
//console.log(cssOut);
let sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
let uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(cssOut));
sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);
let tabbrowsertabs = document.getElementById('tabbrowser-tabs');
let tabsScrollbox = document.getElementById('tabbrowser-arrowscrollbox').scrollbox;
tabsScrollbox.style.minHeight = nTabLineHeight + 'px';
tabsScrollbox.style.maxHeight = nTabLineHeight*nTabLines + 'px';
console.log(tabbrowsertabs.style);
console.log(tabsScrollbox.style);
}
if(bTabsDown || bTabsAutoPopup){
let tabbar = document.getElementById("TabsToolbar");
tabbar.parentNode.parentNode.appendChild(tabbar);
let css =`
#main-window[sizemode="normal"] #titlebar {
margin-bottom: -6px;}
`;
let sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
let uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);
}
if(bTabsAutoPopup)
{
let cssIn =`
.StyleShowingTabsToolbar {
transition: margin-left nTabsAutoPopupAnims !important;
display: flex !important;
position: absolute !important;
opacity: 1;
margin-left: 0px !important;
z-index: 100 !important;
min-width: nTabsAutoPopupWidthpx !important;
filter: drop-shadow(4px 3px 2px rgba(0,0,0,0.33)) !important;
}
.StyleHidingTabsToolbar {
display: flex !important;
position: absolute !important;
opacity: 0;
margin-left: calc( (nTabsAutoPopupWidthpx - nTabsAutoPopupHoverpx) * -1 );
z-index: 100 !important;
min-width: nTabsAutoPopupWidthpx !important;
}
.toolbar-items
{
display:flex !important;
}
tabs > arrowscrollbox {
display: flex !important;
position: absolute !important;
min-width: nTabsAutoPopupWidthpx !important;
/*background-color: rgba(0,0,0,0.25); */
}
`;
let cssOut;
cssOut = cssIn.replace(/nTabsAutoPopupWidth/g, nTabsAutoPopupWidth);
cssOut = cssOut.replace(/nTabsAutoPopupHover/g, nTabsAutoPopupHover);
cssOut = cssOut.replace(/nTabsAutoPopupAnim/g, nTabsAutoPopupAnim);
//console.log("AutoPopup: ");
//console.log(cssOut);
let sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
let uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(cssOut));
sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);
let tabsToolbar = document.getElementById('TabsToolbar');
tabsToolbar.classList.add('StyleHidingTabsToolbar');
//console.log(tabsToolbar);
}
//------------------------------------------------------------------------------------------
var tabsToolbar = document.getElementById('TabsToolbar');
var tabbrowsertabs = document.getElementById('tabbrowser-tabs');
var tabsscrollbox = document.getElementById('tabbrowser-arrowscrollbox');
var ScrollBox = tabsscrollbox.scrollbox;
var bMouseEnter = false;
var bToolbarLocked = false;
// ----------------------------------
// Load-Event:
// ----------------------------------
function onReady()
{
console.log("Ready");
let cssElements =`
#alltabs-button,
hbox.titlebar-spacer,
[class="scrollbutton-up"],
[class="scrollbutton-up"] + spacer,
scrollbox[part][orient="horizontal"] + spacer,
[class="scrollbutton-down"] {
display: none;
}
`;
let service = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
let ur = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(cssElements));
service.loadAndRegisterSheet(ur, service.AUTHOR_SHEET);
gBrowser.selectedTab.scrollIntoView();
}
if (window.readyState !== "loading") {
setTimeout(onReady,350);
}
else
{
window.addEventListener("DOMContentLoaded", onReady );
}
// ----------------------------------
// ResizeObserver / Client
// ----------------------------------
var resizeClientObserver=null;
if( bTabsAutoPopup )
{
resizeClientObserver = new ResizeObserver(function(entries) {
for (let entry of entries) {
tabsToolbar.style.minHeight = tabsToolbar.style.maxHeight = entry.contentRect.height + 'px';
ScrollBox.style.maxHeight = entry.contentRect.height + 'px';
}
});
resizeClientObserver.observe(document.getElementById("browser"));
}
// ----------------------------------
// 'Middleclick' on Tab -> Close Tab
// ----------------------------------
gBrowser.tabContainer.addEventListener('click', function(event)
{
if (event.button == 1)
{
let element = event.target.parentNode;
while(element)
{
if (element.localName == 'tab')
{
gBrowser.removeTab(element, {animate: false});
event.preventDefault();
event.stopPropagation();
console.log("Klick-M1");
return;
}
element = element.parentNode;
}
};
}, true);
// ----------------------------------
// 'Middleclick' on TabsToolbar -> Add Tab
// ----------------------------------
tabsToolbar.addEventListener('click', function(event)
{
if (event.button == 1)
{
//let element = event.target.parentNode;
if(event.target.parentNode.id == "navigator-toolbox")
{
gBrowser.selectedTab = gBrowser.addTrustedTab('moz-extension://073ae002-537d-4165-ae7b-07540569971e/index.html');
let urlbar = document.getElementById('urlbar-input');
urlbar.focus();
event.preventDefault();
event.stopPropagation();
console.log("Klick-M2");
return;
}
};
}, true);
// ----------------------------------
// 'Doubleclick' on TabsToolbar -> Add Tab
// ----------------------------------
tabsToolbar.addEventListener('dblclick', function(event)
{
if(!bDblclickOnTabbarNewTab)
return;
if (event.button == 0)
{
//let element = event.target.parentNode;
if(event.target.parentNode.id == "navigator-toolbox")
{
gBrowser.selectedTab = gBrowser.addTrustedTab('moz-extension://073ae002-537d-4165-ae7b-07540569971e/index.html');
let urlbar = document.getElementById('urlbar-input');
urlbar.focus();
event.preventDefault();
event.stopPropagation();
console.log("Klick-D1");
return;
}
};
}, true);
// ----------------------------------
// 'Doubleclick' on TabsToolbar -> Add Tab
// ----------------------------------
gBrowser.tabContainer.addEventListener('dblclick', function(event)
{
if(!bDblclickOnTabbarNewTab)
return;
if (event.button == 0)
{
let element = event.target.parentNode;
if (element == gBrowser.tabContainer )
{
gBrowser.selectedTab = gBrowser.addTrustedTab('moz-extension://073ae002-537d-4165-ae7b-07540569971e/index.html');
let urlbar = document.getElementById('urlbar-input');
urlbar.focus();
event.preventDefault();
event.stopPropagation();
console.log("Klick-D2");
return;
}
};
}, true);
// ----------------------------------
// 'Doubleclick' on Tab -> Reload Tab
// ----------------------------------
gBrowser.tabContainer.addEventListener('dblclick', function(event)
{
if(!bDblclickOnTabReloadTab)
return;
if (event.button == 0)
{
// Test ---------------------------------------------------------------------------------
/*
let tabinfo = document.getElementById('tabInfo');
let strTabInfo = tabinfo.textContent;
*/
// Test ---------------------------------------------------------------------------------
let element = event.target.parentNode;
while (element)
{
if (element.localName == 'tab')
{
element.linkedBrowser.reload();
console.log("Klick-D-Tab");
return;
}
element = element.parentNode;
}
}
}, true);
// ----------------------------------
// 'mouseenter'
// ----------------------------------
tabsToolbar.addEventListener('mouseenter', event => {
if( bTabsAutoPopup )
{
if(!bMouseEnter)
{
//tabsToolbar.style.minHeight = tabsToolbar.style.maxHeight = gBrowser.selectedBrowser.clientHeight + 'px';
//ScrollBox.style.maxHeight = gBrowser.selectedBrowser.clientHeight + 'px';
bMouseEnter = true;
tabsToolbar.classList.add('StyleShowingTabsToolbar');
tabsToolbar.classList.remove('StyleHidingTabsToolbar');
//console.log("TabsToolbar: MOUSE ENTER");
//tabsToolbar.style.backgroundColor = "rgba(0,0,0,0.75)";
}
}
}, true);
// ----------------------------------
// 'mouseleave'
// ----------------------------------
tabsToolbar.addEventListener('mouseleave', event => {
if( bTabsAutoPopup )
{
if(bMouseEnter)
{
if( event.clientX > 0/*tabsToolbar.clientLeft*/ &&
event.offsetY > tabsToolbar.clientTop &&
event.offsetX < tabsToolbar.clientWidth &&
event.offsetY < tabsToolbar.clientHeight )
{
//console.log("TabsToolbar: (1) MOUSE NO LEAVE screenX:%d|screenY:%d ", event.screenX, event.screenY );
//console.log("TabsToolbar: (2) MOUSE NO LEAVE clientX:%d|clientY:%d ", event.clientX, event.clientY );
//console.log("TabsToolbar: (3) MOUSE NO LEAVE offsetX:%d|offsetY:%d ", event.offsetX, event.offsetY );
//console.log("TabsToolbar: (4) MOUSE NO LEAVE tabsToolbar.clientLeft:%d|tabsToolbar.clientTop:%d|tabsToolbar.clientWidth-2:%d|tabsToolbar.clientHeight:%d ", tabsToolbar.clientLeft, tabsToolbar.clientTop, tabsToolbar.clientWidth-2, tabsToolbar.clientHeight );
//console.log("TabsToolbar: (5) MOUSE NO LEAVE event.target.clientLeft:%d|event.target.clientTop:%d|event.target.clientWidth-2:%d|event.target.clientHeight:%d ", event.target.clientLeft, event.target.clientTop, event.target.clientWidth-2, event.target.clientHeight );
return;
}
event.preventDefault();
event.stopPropagation();
tabsToolbar.classList.add('StyleHidingTabsToolbar');
tabsToolbar.classList.remove('StyleShowingTabsToolbar');
//console.log("TabsToolbar: (1) MOUSE LEAVE screenX:%d|screenY:%d ", event.screenX, event.screenY );
//console.log("TabsToolbar: (2) MOUSE LEAVE clientX:%d|clientY:%d ", event.clientX, event.clientY );
//console.log("TabsToolbar: (3) MOUSE LEAVE offsetX:%d|offsetY:%d ", event.offsetX, event.offsetY );
//console.log("TabsToolbar: (4) MOUSE LEAVE tabsToolbar.clientLeft:%d|tabsToolbar.clientTop:%d|tabsToolbar.clientWidth-2:%d|tabsToolbar.clientHeight:%d ", tabsToolbar.clientLeft, tabsToolbar.clientTop, tabsToolbar.clientWidth-2, tabsToolbar.clientHeight );
//console.log("TabsToolbar: (5) MOUSE LEAVE event.target.clientLeft:%d|event.target.clientTop:%d|event.target.clientWidth-2:%d|event.target.clientHeight:%d ", event.target.clientLeft, event.target.clientTop, event.target.clientWidth-2, event.target.clientHeight );
bMouseEnter = false;
//tabsToolbar.style.backgroundColor = "rgba(0,0,0,0.8)";
}
}
}, false);
// ...
// TabSelect-Event:
// ...
gBrowser.tabContainer.addEventListener("TabSelect", function(event) {
let bScroll = false;
let bScrollTop = true;
let scrollBoxY1 = event.target.parentElement.scrollbox.screenY;
let scrollBoxHeight = event.target.parentElement.scrollbox.clientHeight;
let scrollBoxY2 = scrollBoxY1+scrollBoxHeight;
let TabSelY1 = event.target.screenY;
let TabSelHeight = event.target.clientHeight;
let TabSelY2 = TabSelY1+TabSelHeight;
if( TabSelY2 > scrollBoxY2 )
{
bScroll = true;
bScrollTop = false;
}
if( TabSelY1 < scrollBoxY1 )
{
bScroll = true;
bScrollTop = true;
}
if( bScroll )
{
setTimeout(function()
{
event.target.scrollIntoView(bScrollTop);
}, 0);
}
}, true);
// ...
// Wheel-Event:
// ...
gBrowser.tabContainer.addEventListener("wheel", function(event)
{
event.preventDefault();
event.stopPropagation();
let scrollUp = true;
let wrap = false;
let scrollBoxY1 = gBrowser.tabContainer._animateElement.scrollbox.scrollTop;
let scrollHeight;
//let nTabLineHeight = gBrowser.tabContainer._animateElement.scrollbox.clientHeight/nTabLines ;
if(bPageScroll)
{scrollHeight = gBrowser.tabContainer._animateElement.scrollbox.clientHeight;}
else
{scrollHeight = nTabLineHeight;}
let dir = (scrollUp ? 1 : -1) * Math.sign(event.deltaY);
let bLastScrollLine = false;
if( gBrowser.tabContainer._animateElement.scrollbox.scrollTopMax == gBrowser.tabContainer._animateElement.scrollbox.scrollTop)
{
bLastScrollLine = true;
}
if( !bTabWheel || event.ctrlKey || event.originalTarget.localName == "thumb" || event.originalTarget.localName == "slider" || event.originalTarget.localName == "scrollbarbutton" )
{
setTimeout(function()
{
let scrollBoxMod = scrollBoxY1%scrollHeight;
if( scrollBoxMod > 0 )
{
if( dir == -1 )
{
scrollBoxY1 -= scrollBoxMod;
if(scrollBoxMod < nTabLineHeight && !bLastScrollLine) { scrollBoxY1 -= scrollHeight; }
}
else
{
scrollBoxY1 += (scrollHeight-(scrollBoxMod));
if(scrollHeight-(scrollBoxMod) < nTabLineHeight) { scrollBoxY1 += scrollHeight; }
}
}
else
{
if( dir == -1 )
{
scrollBoxY1 -= scrollHeight;
}
else
{
scrollBoxY1 += scrollHeight;
}
}
gBrowser.tabContainer._animateElement.scrollbox.scrollTo({ top: scrollBoxY1, left: 0, behavior: 'auto'});
}, 20);
}
if( bTabWheel && !event.ctrlKey )
{
setTimeout(function()
{
if( event.originalTarget.localName != "slider" &&
event.originalTarget.localName != "thumb" &&
event.originalTarget.localName != "scrollbarbutton" )
{
gBrowser.tabContainer.advanceSelectedTab(dir, wrap);
if( (gBrowser.tabContainer._firstTab == gBrowser.selectedTab) ||
(gBrowser.tabContainer._lastTab == gBrowser.selectedTab) )
{
gBrowser.selectedTab.scrollIntoView();
}
}
}, 50);
}
}, false);
//-------------------------------------------------------------------------------------------
gBrowser.tabContainer.clearDropIndicator = function() {
var tabs = this.allTabs;
for (let i = 0, len = tabs.length; i < len; i++) {
tabs[i].style.removeProperty("border-left-color");
tabs[i].style.removeProperty("border-right-color");
}
}
gBrowser.tabContainer.addEventListener("dragleave", function(event) { this.clearDropIndicator(event); }, true);
gBrowser.tabContainer.on_dragover = function(event) {
this.clearDropIndicator();
var effects = this._getDropEffectForTabDrag(event);
var ind = this._tabDropIndicator;
if (effects == "" || effects == "none") {
ind.hidden = true;
return;
}
event.preventDefault();
event.stopPropagation();
if (effects == "link") {
let tab = this._getDragTargetTab(event, true);
if (tab) {
if (!this._dragTime) {
this._dragTime = Date.now();
}
if (Date.now() >= this._dragTime + this._dragOverDelay) {
this.selectedItem = tab;
}
ind.hidden = true;
return;
}
}
let newIndex = this._getDropIndex(event, effects == "link");
let children = this.allTabs;
if (newIndex == children.length) {
children[newIndex - 1].style.setProperty("border-right-color","red","important");
} else {
children[newIndex].style.setProperty("border-left-color","red","important");
}
}
gBrowser.tabContainer.on_drop = function(event) {
this.clearDropIndicator();
var dt = event.dataTransfer;
var dropEffect = dt.dropEffect;
var draggedTab;
let movingTabs;
if (dt.mozTypesAt(0)[0] == TAB_DROP_TYPE) {
// tab copy or move
draggedTab = dt.mozGetDataAt(TAB_DROP_TYPE, 0);
// not our drop then
if (!draggedTab) {
return;
}
movingTabs = draggedTab._dragData.movingTabs;
draggedTab.container._finishGroupSelectedTabs(draggedTab);
}
this._tabDropIndicator.hidden = true;
event.stopPropagation();
if (draggedTab && dropEffect == "copy") {
// copy the dropped tab (wherever it's from)
let newIndex = this._getDropIndex(event, false);
let draggedTabCopy;
for (let tab of movingTabs) {
let newTab = gBrowser.duplicateTab(tab);
gBrowser.moveTabTo(newTab, newIndex++);
if (tab == draggedTab) {
draggedTabCopy = newTab;
}
}
if (draggedTab.container != this || event.shiftKey) {
this.selectedItem = draggedTabCopy;
}
} else if (draggedTab && draggedTab.container == this) {
let oldTranslateX = Math.round(draggedTab._dragData.translateX);
let tabWidth = Math.round(draggedTab._dragData.tabWidth);
let translateOffset = oldTranslateX % tabWidth;
let newTranslateX = oldTranslateX - translateOffset;
if (oldTranslateX > 0 && translateOffset > tabWidth / 2) {
newTranslateX += tabWidth;
} else if (oldTranslateX < 0 && -translateOffset > tabWidth / 2) {
newTranslateX -= tabWidth;
}
let dropIndex = this._getDropIndex(event, false);
// "animDropIndex" in draggedTab._dragData &&
// draggedTab._dragData.animDropIndex;
let incrementDropIndex = true;
if (dropIndex && dropIndex > movingTabs[0]._tPos) {
dropIndex--;
incrementDropIndex = false;
}
let animate = gBrowser.animationsEnabled;
if (oldTranslateX && oldTranslateX != newTranslateX && animate) {
for (let tab of movingTabs) {
tab.setAttribute("tabdrop-samewindow", "true");
tab.style.transform = "translateX(" + newTranslateX + "px)";
let onTransitionEnd = transitionendEvent => {
if (
transitionendEvent.propertyName != "transform" ||
transitionendEvent.originalTarget != tab
) {
return;
}
tab.removeEventListener("transitionend", onTransitionEnd);
tab.removeAttribute("tabdrop-samewindow");
this._finishAnimateTabMove();
if (dropIndex !== false) {
gBrowser.moveTabTo(tab, dropIndex);
if (incrementDropIndex) {
dropIndex++;
}
}
gBrowser.syncThrobberAnimations(tab);
};
tab.addEventListener("transitionend", onTransitionEnd);
}
} else {
this._finishAnimateTabMove();
if (dropIndex !== false) {
for (let tab of movingTabs) {
gBrowser.moveTabTo(tab, dropIndex);
if (incrementDropIndex) {
dropIndex++;
}
}
}
}
} else if (draggedTab) {
let newIndex = this._getDropIndex(event, false);
let newTabs = [];
for (let tab of movingTabs) {
let newTab = gBrowser.adoptTab(tab, newIndex++, tab == draggedTab);
newTabs.push(newTab);
}
// Restore tab selection
gBrowser.addRangeToMultiSelectedTabs(
newTabs[0],
newTabs[newTabs.length - 1]
);
} else {
// Pass true to disallow dropping javascript: or data: urls
let links;
try {
links = browserDragAndDrop.dropLinks(event, true);
} catch (ex) {}
if (!links || links.length === 0) {
return;
}
let inBackground = Services.prefs.getBoolPref(
"browser.tabs.loadInBackground"
);
if (event.shiftKey) {
inBackground = !inBackground;
}
let targetTab = this._getDragTargetTab(event, true);
let userContextId = this.selectedItem.getAttribute("usercontextid");
let replace = !!targetTab;
let newIndex = this._getDropIndex(event, true);
let urls = links.map(link => link.url);
let csp = browserDragAndDrop.getCSP(event);
let triggeringPrincipal = browserDragAndDrop.getTriggeringPrincipal(
event
);
(async () => {
if (
urls.length >=
Services.prefs.getIntPref("browser.tabs.maxOpenBeforeWarn")
) {
// Sync dialog cannot be used inside drop event handler.
let answer = await OpenInTabsUtils.promiseConfirmOpenInTabs(
urls.length,
window
);
if (!answer) {
return;
}
}
gBrowser.loadTabs(urls, {
inBackground,
replace,
allowThirdPartyFixup: true,
targetTab,
newIndex,
userContextId,
triggeringPrincipal,
csp,
});
})();
}
if (draggedTab) {
delete draggedTab._dragData;
}
}
gBrowser.tabContainer._getDropIndex = function(event, isLink) {
var tabs = this.allTabs;
var tab = this._getDragTargetTab(event, isLink);
if (!RTL_UI) {
for (let i = tab ? tab._tPos : 0; i < tabs.length; i++) {
if (
event.screenY <
tabs[i].screenY + tabs[i].getBoundingClientRect().height
) {
if (
event.screenX <
tabs[i].screenX + tabs[i].getBoundingClientRect().width / 2
) {
return i;
}
if (
event.screenX >
tabs[i].screenX + tabs[i].getBoundingClientRect().width / 2 &&
event.screenX <
tabs[i].screenX + tabs[i].getBoundingClientRect().width
) {
return i + 1;
}
}
}
} else {
for (let i = tab ? tab._tPos : 0; i < tabs.length; i++) {
if (
event.screenY <
tabs[i].screenY + tabs[i].getBoundingClientRect().height
) {
if (
event.screenX <
tabs[i].screenX + tabs[i].getBoundingClientRect().width &&
event.screenX >
tabs[i].screenX + tabs[i].getBoundingClientRect().width / 2
) {
return i;
}
if (
event.screenX <
tabs[i].screenX + tabs[i].getBoundingClientRect().width / 2
) {
return i + 1;
}
}
}
}
return tabs.length;
}
}