- Firefox-Version
- FF73.0
- Betriebssystem
- Win10
[20.02.2020 18:45Uhr]
Fehler in allen CSS-Dateien beseitigt (Dank an diwa fürs melden )
[18.02.2020 13:30Uhr]
- Anpassen des User-JavaSkripts aus (3).
- Skript 'Tabsrunter.uc.js' wurde entfernt, da jetzt bereits in (3) integriert.
[11.12.2019 13:15Uhr]
- Optische Anpassungen an Code (1) und (2).
- Neuen Code hinzugefügt für 'Tabs mit abgerundeten Ecken' (2a).
- Anpassen des User-JavaSkripts zum Verschieben der Tabs (3).
[08.12.2019 17:45Uhr]
- Anpassungen am Code (1) und (2) vorgenommen, um 'Tableiste unten' zu berücksichtigen.
- JavaSkript hinzugefügt, welches die Tableiste nach unten befördert.
Neues Update (18.02.2020):
Geändert wurde ausschließlich das User-JavaScript (3).
Folgende Funktionalität wurde hinzugefügt:
- 'TabWheel'-Support (standardmäßig aus).
- 'TabsRunter'-Skript ist integriert (standardmäßig aus). Das vorhandene Script 'TabsRunter.uc.js' muss dann gelöscht werden! (Die Funktionalität von 'TabsRunter.uc.js' ist von 2002Andreas und Endor ...Danke!)
- Seitenweises vs. zeilenweises Scrollen ist einstellbar.
- Wenn [Strg]-Taste beim Benutzen des Mausrades gehalten wird, wird immer seiten- bzw zeilenweise gescrollt.
- Wenn sich der Mauszeiger über der Scrollbar befindet, wird immer seiten- bzw zeilenweise gescrollt.
Folgende Funktionalität wurde geändert:
- Selektierte Tabs werden beim Öffnen automatisch in den sichtbaren Bereich gescrollt (auch beim Start von FireFox!).
- Selektierte (aber nicht vollständig sichtbare) Tabs werden beim Auswählen in den sichtbaren Bereich gescrollt.
- Beim Scrollen mit dem Mausrad, werden die Tabs immer vollständig sichtbar gescroll
Folgende Einstellungen in dem Script 'MultiLineTab-V4.uc.js' (3.) können bzw. müssen angepasst werden:
var bTabsDown = false; // [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 einschalten, [false]: zeilenweises Scrollen einschalten
var nTabLines = 3; // Anzahl der sichtbaren Tab-Zeilen, darüber hinaus wird gescrollt -> !! Wert aus 'userChome.css' übernehmen!!
Ganz wichtig ist es, die selbe Anzahl von Tab-Zeilen für die Variable 'nTabLines' anzugeben (in diesem Fall 3), welche in der 'userChrome.css' definiert wurde: max-height: calc( 3 * 30px ) !important; /* Anzahl der Tabreihen * Minimal-Höhe */
Diese Werte müssen immer zusammen geändert werden.
---------------------------------------------------------------------------------------
Da sich die Fragen zu diesem Thema auf Grund nicht mehr funktionierender Skripte ab FF71 häufen, hier noch einmal die aktuellen CSS-Codes und Skripte, um diese Funktionalität wieder herzustellen.
Für alle, die sich beim Thema 'userChrome.css' und/oder 'User-JavaSkripte' unsicher fühlen, habe ich am Ende noch Links und Erklärungen angefügt.
1.) Minimal-Version : keine optischen Anpassungen (außer Höhe/Breite) / Verschieben der Tabs funktioniert nicht korrekt.
/* ----------------------*/
/* Mehrzeilige Tabreihen */
/* ----------------------*/
/* Tab-Höhe */
.tabbrowser-tab {
min-height: 28px !important;
max-height: 28px !important;
vertical-align: bottom !important;
margin-top: 1px !important;
margin-bottom: 1px !important;
}
/* Feste Breite des einzelnem Tabs */
.tabbrowser-tab:not([pinned]) {
min-width: 234px !important;
}
/* Platz für Scrollbar schaffen */
.tabbrowser-tabs {
margin-right: -41px !important;
}
tabs > arrowscrollbox {
display: block;
}
scrollbox[part][orient="horizontal"] {
display: flex;
flex-wrap: wrap;
overflow: visible !important;
overflow-x: hidden !important;
overflow-y: auto !important;
min-height: 30px !important; /* Tab-Höhe(28px) + 2px */
max-height: calc( 3 * 30px ) !important; /* Anzahl der Tabreihen * Minimal-Höhe */
-moz-window-dragging: no-drag !important;
}
/* Buttons/Zwischenräume Ausblenden */
hbox.titlebar-spacer,
[class="scrollbutton-up"],
[class="scrollbutton-up"] + spacer,
scrollbox[part][orient="horizontal"] + spacer,
[class="scrollbutton-down"] {
display: none;
}
#TabsToolbar > .titlebar-buttonbox-container {
display: none !important;
}
Alles anzeigen
2.) Optisch angepasste Version: Funktional wie Version 1.)
Standard-Theme:
/* ------------------------------------------------*/
/* Mehrzeilige Tabreihen mit optischen Anpassungen */
/* ------------------------------------------------*/
/* Tab-Höhe */
.tabbrowser-tab {
min-height: 28px !important;
max-height: 28px !important;
vertical-align: bottom !important;
margin-top: 1px !important;
margin-bottom: 1px !important;
}
/* Feste Breite des einzelnem Tabs */
.tabbrowser-tab:not([pinned]) {
min-width: 234px !important;
}
/* Platz für Scrollbar schaffen */
.tabbrowser-tabs {
margin-right: -41px !important;
}
tabs > arrowscrollbox {
display: block;
}
scrollbox[part][orient="horizontal"] {
display: flex;
flex-wrap: wrap;
overflow: visible !important;
overflow-x: hidden !important;
overflow-y: auto !important;
min-height: 30px !important; /* Tab-Höhe(28px) + 2px */
max-height: calc( 3 * 30px ) !important; /* Anzahl der Tabreihen * Minimal-Höhe */
-moz-window-dragging: no-drag !important;
}
/* Buttons/Zwischenräume Ausblenden */
hbox.titlebar-spacer,
[class="scrollbutton-up"],
[class="scrollbutton-up"] + spacer,
scrollbox[part][orient="horizontal"] + spacer,
[class="scrollbutton-down"] {
display: none;
}
#TabsToolbar > .titlebar-buttonbox-container {
display: none !important;
}
/* -----------------------------*/
/* Tab: Optische Anpassungen */
/* -----------------------------*/
#tabbrowser-tabs :not([fokus]){
opacity: 1!important;
}
#TabsToolbar:not(:-moz-lwtheme){
color: black !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;
}
/* 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:not(:-moz-lwtheme) {
text-shadow: none !important;
color: black !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-Line entfernen */
#TabsToolbar .tabbrowser-tab .tab-line {
display: none !important;
}
/* Tab-Höhe */
.tabbrowser-tab {
min-height: 28px !important;
max-height: 28px !important;
vertical-align: bottom !important;
margin-top: 1px !important;
margin-bottom: 1px !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: collapse !important;
}
*/
/* Tab-Icon ausrichten *//*
.tab-throbber:not([pinned]),
.tab-sharing-icon-overlay:not([pinned]),
.tab-icon-pending:not([pinned]),
.tab-icon-image:not([pinned])
{
margin-top: -1px !important;
}
*/
/*------------------*/
/* Tab-Hintergrund */
/*------------------*/
/*--- selektiert ---*/
.tab-background[selected=true]:not(:-moz-lwtheme) > spacer {
background-image: linear-gradient( rgba(103,171,224,1), rgba(10,58,95,1) ), none !important; /* blau */
/*background-image: linear-gradient( rgba(230,175,175,1), rgba(84,25,25,1) ), none !important;*/ /* rot */
filter: drop-shadow(4px 3px 2px rgba(0,0,0,0.33)) drop-shadow(-4px 3px 2px rgba(0,0,0,0.33)) !important;
}
.tab-background[selected=true]:-moz-lwtheme > 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]):not(:-moz-lwtheme) > spacer {
background-image: linear-gradient( rgba(255,255,255,1), rgba(115,115,115,1) ), none !important;
filter: brightness(130%) contrast(95%) drop-shadow(1px 1px 1px rgba(0,0,0,0.33)) drop-shadow(-1px 1px 1px rgba(0,0,0,0.33)) !important;
}
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]):-moz-lwtheme > spacer {
background-image: linear-gradient( rgba(225,225,225,0.66), rgba(100,125,145,0.66) ), none !important;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
}
/*--- nicht selektiert ---*/
.tab-background:not([selected=true]):not(:-moz-lwtheme) > spacer {
background-image: linear-gradient( rgba(255,255,255,1), rgba(125,125,125,1) ), none !important;
filter: brightness(115%) contrast(90%) drop-shadow(1px 1px 1px rgba(0,0,0,0.33)) drop-shadow(-1px 1px 1px rgba(0,0,0,0.33)) !important;
}
.tab-background:not([selected=true]):-moz-lwtheme > spacer {
background-image: linear-gradient( rgba(255,255,255,0.33), rgba(110,110,110,0.33) ), none !important;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
}
/*--- 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;
}
Alles anzeigen
2a.) Optisch angepasste Version mit abgerundeten Ecken: Funktional wie Version 1.)
Standard-Theme:
/* ------------------------------------------------------------------------*/
/* Mehrzeilige Tabreihen mit optischen Anpassungen und abgerundeten Ecken */
/* ------------------------------------------------------------------------*/
/* Tab-Höhe */
.tabbrowser-tab {
min-height: 28px !important;
max-height: 28px !important;
vertical-align: bottom !important;
margin-top: 1px !important;
margin-bottom: 1px !important;
}
/* Feste Breite des einzelnem Tabs */
.tabbrowser-tab:not([pinned]) {
min-width: 234px !important;
}
/* Platz für Scrollbar schaffen */
.tabbrowser-tabs {
margin-right: -41px !important;
}
tabs > arrowscrollbox {
display: block;
}
scrollbox[part][orient="horizontal"] {
display: flex;
flex-wrap: wrap;
overflow: visible !important;
overflow-x: hidden !important;
overflow-y: auto !important;
min-height: 30px !important; /* Tab-Höhe(28px) + 2px */
max-height: calc( 3 * 30px ) !important; /* Anzahl der Tabreihen * Minimal-Höhe */
-moz-window-dragging: no-drag !important;
}
/* Buttons/Zwischenräume Ausblenden */
hbox.titlebar-spacer,
[class="scrollbutton-up"],
[class="scrollbutton-up"] + spacer,
scrollbox[part][orient="horizontal"] + spacer,
[class="scrollbutton-down"] {
display: none;
}
#TabsToolbar > .titlebar-buttonbox-container {
display: none !important;
}
/* -----------------------------*/
/* Tab: Optische Anpassungen */
/* -----------------------------*/
#tabbrowser-tabs :not([fokus]){
opacity: 1!important;
}
#TabsToolbar:not(:-moz-lwtheme){
color: black !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;
}
/* 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:not(:-moz-lwtheme) {
text-shadow: none !important;
color: black !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-Line entfernen */
#TabsToolbar .tabbrowser-tab .tab-line {
display: none !important;
}
/* Tab-Höhe */
.tabbrowser-tab {
min-height: 28px !important;
max-height: 28px !important;
vertical-align: bottom !important;
margin-top: 1px !important;
margin-bottom: 1px !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: collapse !important;
}
*/
/* Tab-Icon ausrichten *//*
.tab-throbber:not([pinned]),
.tab-sharing-icon-overlay:not([pinned]),
.tab-icon-pending:not([pinned]),
.tab-icon-image:not([pinned])
{
margin-top: -1px !important;
}
*/
/*------------------*/
/* Tab-Hintergrund */
/*------------------*/
/*--- selektiert ---*/
.tab-background[selected=true]:not(:-moz-lwtheme) > spacer {
background-image: linear-gradient( rgba(103,171,224,1), rgba(10,58,95,1) ), none !important; /* blau */
/*background-image: linear-gradient( rgba(230,175,175,1), rgba(84,25,25,1) ), none !important;*/ /* rot */
filter: drop-shadow(4px 3px 2px rgba(0,0,0,0.33)) drop-shadow(-4px 3px 2px rgba(0,0,0,0.33)) !important;
border-radius: 80px !important;
}
.tab-background[selected=true]:-moz-lwtheme > 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;
border-radius: 80px !important;
}
/*--- hover(nicht selektiert) ---*/
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]):not(:-moz-lwtheme) > spacer {
background-image: linear-gradient( rgba(255,255,255,1), rgba(115,115,115,1) ), none !important;
filter: brightness(130%) contrast(95%) drop-shadow(1px 1px 1px rgba(0,0,0,0.33)) drop-shadow(-1px 1px 1px rgba(0,0,0,0.33)) !important;
border-radius: 80px !important;
}
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]):-moz-lwtheme > spacer {
background-image: linear-gradient( rgba(225,225,225,0.66), rgba(100,125,145,0.66) ), none !important;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
border-radius: 80px !important;
}
/*--- nicht selektiert ---*/
.tab-background:not([selected=true]):not(:-moz-lwtheme) > spacer {
background-image: linear-gradient( rgba(255,255,255,1), rgba(125,125,125,1) ), none !important;
filter: brightness(115%) contrast(90%) drop-shadow(1px 1px 1px rgba(0,0,0,0.33)) drop-shadow(-1px 1px 1px rgba(0,0,0,0.33)) !important;
border-radius: 80px !important;
}
.tab-background:not([selected=true]):-moz-lwtheme > spacer {
background-image: linear-gradient( rgba(255,255,255,0.33), rgba(110,110,110,0.33) ), none !important;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
border-radius: 80px !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;
border-radius: 80px !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;
border-radius: 80px !important;
}
Alles anzeigen
3.) User-JavaScript: Damit funktioniert das Verschieben der Tabs fehlerfrei (Voraussetzung ist, dass die CSS-Skripte (1) oder (2) oder (2a) schon vorhanden sind und richtig funktionieren). Außerdem wurde TabWheel-Support, verschiebbare Tableiste und erweiterte Scrolleigenschaften hinzugefügt....
Das Skript basiert auf den von Endor übersetzten Skripten (Danke!), die er hier hinterlegt hat (ist aber nicht identisch!).
// ==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
// ==/UserScript==
"use strict";
MultiRowTabLiteforFx();
function MultiRowTabLiteforFx() {
var bTabsDown = false; // [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 einschalten, [false]: zeilenweises Scrollen einschalten
var nTabLines = 3; // Anzahl der sichtbaren Tab-Zeilen, darüber hinaus wird gescrollt -> !! Wert aus 'userChome.css' übernehmen!!
var 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; }
`;
var sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
var uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);
if(bTabsDown){
var tabbar = document.getElementById("TabsToolbar");
tabbar.parentNode.parentNode.appendChild(tabbar);
var css =`
#main-window[sizemode="normal"] #titlebar {
margin-bottom: -6px;}
`;
var sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
var uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);
}
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);
//------------------------------------------------------------------------------------------
// ...
// DomContentLoaded-Event:
// ...
document.addEventListener("DOMContentLoaded", function(event) {
gBrowser.selectedTab.scrollIntoView();
});
// ...
// TabSelect-Event:
// ...
gBrowser.tabContainer.addEventListener("TabSelect", function(event) {
var bScroll = false;
var bScrollTop = true;
var scrollBoxY1 = event.target.parentElement.scrollbox.screenY;
var scrollBoxHeight = event.target.parentElement.scrollbox.clientHeight;
var scrollBoxY2 = scrollBoxY1+scrollBoxHeight;
var TabSelY1 = event.target.screenY;
var TabSelHeight = event.target.clientHeight;
var 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();
var scrollUp = true;
var wrap = false;
var scrollBy = 0;
var scrollBoxY1 = gBrowser.tabContainer._animateElement.scrollbox.scrollTop;
var 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);
var 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()
{
var 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" )
{
//let dir = (scrollUp ? 1 : -1) * Math.sign(event.deltaY);
gBrowser.tabContainer.advanceSelectedTab(dir, wrap);
if( (gBrowser.tabContainer._firstTab == gBrowser.selectedTab) ||
(gBrowser.tabContainer._lastTab == gBrowser.selectedTab) )
{
gBrowser.selectedTab.scrollIntoView();
}
}
}, 50);
}
}, false);
//-------------------------------------------------------------------------------------------
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;
}
}
Alles anzeigen
Links und Erklärungen zum Thema userChrome.css und User-JavaSkripts:
'userChrome.css' um FireFox-Benutzeroberfläche (optisch) zu verändern:
milupo hat zu diesem Thema eine sehr verständliche Anleitung geschrieben.
'User-JavaSkripts' um dem FireFox neue Funktionalität hinzuzufügen oder zu verändern:
2002Andreas hat eine übersichtliche Zusammenfassung aller notwendigen Quellen verfasst um JavaScripts zum Laufen zu bringen.
Dort befindet sich auch der Link auf die bebilderte Anleitung von Endor, die ich wirklich empfehlen kann.
Für Eilige hier noch Kurzfassungen :
1 ) about:support in das Addressfeld des FF eingeben->return.
2 ) Unter ' Profilordner' -> auf [Ordner öffnen] klicken.
3 ) Im sich öffnenden Win-Explorer das neue Verzeichnis chrome anlegen(falls nicht schon vorhanden).
4 ) In diesem Verzeichnis eine neues Textdokument anlegen userChrome.css . Darauf achten, dass die Endung wirklich 'css'
ist und nicht 'txt'. Um die Dateierweiterung sichtbar zu machen muss in den Einstellungen des Win-Explorers unter Optionen->Ansicht der Haken bei 'Erweiterung bei bekannten Dateitypen ausblenden' entfernt werden.
5 ) Überprüfen: Der Eintrag toolkit.legacyUserProfileCustomizations.stylesheets in 'about:config' muss auf true stehen.
6 ) Nach jeder Änderung an der 'userChrome.css', FireFox neu starten!
7 ) Fertig!
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).
3 ) Zum Testen dieses Skript in eine neue Textdatei einfügen und in das 'chrome'-Verzeichnis z.B. als 'aboutconfig-button.uc.js' abspeichern (erzeugt einen 'about:config'-Button in der NavBar):
// aboutconfig-button.uc.js
(function() {
if (location != 'chrome://browser/content/browser.xhtml') return;
try {
CustomizableUI.createWidget({
id: 'aboutconfig-ToolBarButton',
type: 'custom',
defaultArea: CustomizableUI.AREA_NAVBAR,
onBuild: function(aDocument) {
var toolbaritem = aDocument.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'toolbarbutton');
var props = {
id: 'aboutconfig-ToolBarButton',
class: 'toolbarbutton-1 chromeclass-toolbar-additional',
label: 'About:Config',
tooltiptext: 'About:Config',
style: 'list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACkUlEQVQ4ja2SX0hTcRTHv27euz/qLvfqdtO8lRmEoLm2RTTUmWHFtlgYIlFPleNuI5cggYTJpDGIVnP+CaVQ3FtCkYQvPfYSprewxCZCUYwgUKIeHIidHvSKiPrUef2ez/ec3/l9gf9VoijmhcPhq7FYbKizszNSUVFRvFOfATggsqgEUA5AtynYbDb78PDwfCaToaWlJUokEk8A6LfxZfHThsG3rcKk38reA3Bwq8hJktQSiUSmstksLS8vr9XX11/cokv3bRih0fI1Shyi+euGNMfAAQCMw+E4KoriSQD5jY2NiUwmQ0REsiz3qnDMhhEaMBNN24nuFtH4GShGwA4AOo/Hc01RFOrq6nqZTCa/K4pCCwtpejqammIY5kTMiiHqK1yjaTtRTwk9d2sWLDoEAZgAACzLVvb393+amZmh2dlZGhsbo0g0Sg/jiWz0WO7HvwlhVYVfuDWLJgZBAGYAOer7dDqd7qzX632dSqXoZlvbvBzu+BFv2E+rj0ykwuPnMcczCAEQdvohlud5r8fjeceybDOg9QdrKn/+8YMouo8mzmmpLI95ACB/jzSgiGGY4wDMDoejnYio54p35VldLk1UW+mWif/WUlratJcBALBOpzNAROSX5UkA0RqN/utEtZXSPh/Fef53myR1ANDuBBe6XK4gEVEgEHgFoA5AIQe0tHPc5w+1tZT2+aiX4+h2SUkfAIMKakRRbKCNktcnuwGwG7oxH2jqtli+vKmqotaCgulujlu5xPNu1UAbCoVGVQNBEG4A4LZtZ+CBy3fM5sUBSfrl57j3xRtBAgCjy+UaTCaTcxaLpQfA4V3uUyBotc2n9PrHPHABgHHTHUA1ACeAI7sdSB2G9RwYAeT8A0L0/bjRXZQXAAAAAElFTkSuQmCC)',
onclick: 'if (event.button == 0) { \
openTrustedLinkIn("about:config", "tab");\
}; '
};
for (var p in props)
toolbaritem.setAttribute(p, props[p]);
return toolbaritem;
}
});
} catch(e) { };
})();
Alles anzeigen
4 ) Danach unbedingt den FireFox neu starten!
5 ) Fertig!