Mehrzeilige Tableiste für aktuelle FireFox-Versionen (71+)

BrokenHeart · 8. Dezember 2019

Update-Verlauf (Letztes: 20.02.2020 18:45Uhr)

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.

CSS

/* ----------------------*/
/* 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:

CSS

/* ------------------------------------------------*/
/* 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:

CSS

/* ------------------------------------------------------------------------*/
/* 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!).

JavaScript: MultiLineTab-V4.uc.js

// ==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 :

Quickstart: 'userChrome.css'

QuickStart: User-JavaSkripte

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):

JavaScript

  //  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!

Boersenfeger · 8. Dezember 2019

Auch wenn ich die beschriebenen Codes bzw Scripte nicht nutze:

Vielen Dank für diese hervorragend zusammengestellte Anleitung!

PS: Du weisst aber schon, das du jetzt für die jeweilige Aktualität verantwortlich bist?

Thomas3 · 8. Dezember 2019

Hallo Broken Heart

Wollte deine CSS mit der CSS kombinieren welche die Tabs wieder nach unten bringt.

Beitrag 1:
Fx 71 - Tableiste unten

Die erste Tabreihe ist dann zwar unten, die nächsten Tabreihen schieben sich aber nach oben über NAV und
Favoriten.

Gibt es eine Möglichkeit die zusätzlichen Tabreihen nach unten zu öffnen?

mr.b. · 8. Dezember 2019

Hallo,

genau die Frage hatte ich auch schon gestellt, blieb aber unbeantwortet, daher gehe ich davon aus, dass das momentan nicht geht. Auch bei mir schieben sich dann die Tabreihen bis in die Menüleiste. Da ich dort Icons habe, sind die nicht zu gebrauchen. Vermutlich muss man die Abweichungen wieder korrigieren. Bin aber sicher, dass das die Experten bald hinbekommen. Allerdings gewöhnt man sich schnell wieder an die Tableiste oben. Wenn's nicht anders geht, werde ich es so lassen. Hauptsache die Tabs sind mehrzeilig.

2002Andreas · 8. Dezember 2019

Bitte mal testen:

CSS

/* ----------------------------*/
/* Mehrzeilige Tabreihen unten     */
/* ----------------------------*/

@-moz-document url(chrome://browser/content/browser.xhtml) {
       
#TabsToolbar {
    position: absolute !important;
    display:block !important;
    bottom: 0 !important;
    width: 100vw !important;
    }

#tabbrowser-tabs {
    width: 100vw !important;
    }
        
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {
    padding-bottom: var(--tab-min-height) !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;
}
 /* Feste Breite  des einzelnem Tabs */
.tabbrowser-tab:not([pinned]) {
    min-width: 234px !important; 
}
/* Platz für Scrollbar schaffen */
.tabbrowser-tabs {
  margin-right: -41px !important;
}

scrollbox[part][orient="horizontal"] {
    background: lightgrey !important;
    position: absolute !important;
    display:block !important;
    /* display: flex; */
    /* flex-wrap: wrap;  */
    /* overflow: visible !important; */
    /* overflow-x: hidden !important; */
    overflow-y: scroll !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,
#alltabs-button,tabs tab:not([fadein]), 
[class="scrollbutton-up"],
[class="scrollbutton-up"] + spacer,
scrollbox[part][orient="horizontal"] + spacer,
[class="scrollbutton-down"] { 
    display: none; 
}

/* -----------------------------*/
/* Tab: Optische Anpassungen    */
/* -----------------------------*/
#tabbrowser-tabs :not([fokus]){
    opacity: 1!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

Kleines Problem dabei, man kann die Tabs nur über den Thumb scrollen, nicht mit dem Mausrad.

Evtl. findet ja ein anderer User eine Möglichkeit dafür...danke.

Edit:

Der Code funktioniert doch nicht richtig, siehe Beitrag Nr. 28

BrokenHeart · 8. Dezember 2019

Bei mir funktioniert die mehrzeilige Tabreihe auch unten, wenn ich das kleine User-JavaSkript von aborix (?) verwende, welches Boersenfeger gestern gepostet hat:

JavaScript

/* Tabs runter.uc.js */
(function(){
var tabbar = document.getElementById("TabsToolbar");
tabbar.parentNode.parentNode.appendChild(tabbar);
})()

Falls noch nicht geschehen, würde ich wirklich dazu raten, JS-UserSkripte auf euren FF-Installation lauffähig zu machen ( so schwer ist die Einrichtung nicht ), aber es multipliziert die Möglichkeiten, FF zu verändern.

Wenn ihr keine JS-Userskripte benutzt bzw. benutzen wollt, dann macht es so, wie Andreas es gepostet hat.

2002Andreas : Danke für deinen CSS-Vorschlag.

2002Andreas · 8. Dezember 2019

Zitat von BrokenHeart

Danke für deinen CSS-Vorschlag

Gerne doch, aber er ist leider nicht perfekt

Evtl. fällt einem anderen user ja noch etwas ein dazu.

Thomas3 · 8. Dezember 2019

Zitat von 2002Andreas

Kleines Problem dabei, man kann die Tabs nur über den Thumb scrollen, nicht mit dem Mausrad.

Hallo Andreas

Kann Ich nicht bestätigen, bei mir geht es per Mausrad.

Meine Werte muss Ich noch anpassen aber grundsätzlich funktioniert es.

Es gibt nur ein Problem beim Hintergrund der Tabreihen bei mir.

Ich hab ein Hintergrundbild im kompletten Bereich:

#main-window

{

-moz-appearance: none !important;

background-image:url(file:///D:/...............png) !important;

background-repeat: no-repeat! important;

}

Bei deinem CSS wird ein grauer Hintergrund verwendet (scrollbox).

Wenn Ich diese Zeile lösche sehe Ich zwar mein Bild, aber bei den zusätzlichen Tabreihen wird das Bild
nicht angezeigt. (Bilddatei wäre groß genug)

Mein Bild wird also bei den zusätzlichen Tabreihen nicht mit nach unten angezeigt.

Ersetze Ich die graue Farbe durch mein Bild ist es eine Überlappung von zwei Bildern, da die Scrollbox ein
extra Bild wäre.

mr.b. · 8. Dezember 2019

Klappt hervorragend mit Hilfe des kurzzeiligen Skripts. BestenDank!

BrokenHeart · 8. Dezember 2019

mr.b. Danke für die Rückmeldung. Freut mich wenn's läuft...

Bitte beachten, dass es vor ein paar Stunden kleine Änderungen an Code 1+2 in Bezug auf 'Tableiste unten' gegeben hat.

moonson · 8. Dezember 2019

Hallo zusammen,

ich habe jetzt das Java-Script für "Tabs unten" in Kombination mit dem CSS-Code für die mehrreihigen Tabs und deren Aussehen kombiniert... Langsam bin ich wieder begeistert, zumal sich das mit den JavaScripten als sehr einfach erwiesen hat! Super Anleitung! Allerdings - finde den Fehler - Tipp: rechts neben den Tabs... Die doppelten Schaltflächen aus der Menüleiste (Minimieren, Verkleinern, Schließen -> siehe Screenshot)... Wo kommen die her und wie verschwinden sie? Dann wäre alles perfekt... Mausrad-Scrolling funktioniert hier übrigens auch...

CSS-Code:

CSS

/****************Tabs Farbe ändern aktive,gelesene noch nicht gelesene in Verbindung mit Erweiterung Tab Flag - ok***********/
 
/********aktiver Tab grün**********/

.tab-background[selected="true"]{
opacity: 0.5!important;
background:#99ff66!important;
}


/*
******nicht gelesener Tab rot******/
 
.tabbrowser-tab[titlechanged] {
opacity: 1.2!important;
color: red !important;
/* background:#ff7788!important; */
/* font-weight: bold !important; */
}
*/
.tabbrowser-tab[selected="true"]{
font-weight:bold;
} 

/* Rahmen um die Tabs grau */

.tabbrowser-tab{
    border:0px solid grey!important;
}


.tabbrowser-tab::after, .tabbrowser-tab::before {
    border-left: none !important;
}
.tab-background {
  border-radius: 30px 30px 30px 30px !important;
  border-image: none !important;
  border-left: 0.5px solid !important;
  border-right: 0.5px solid !important;
  border-top: 1px solid !important;
  border-bottom: 1px solid !important;
  background-color: lightgrey !important;
}
.tab-line {
  display: none !important;
}

/* tabs height for "classic tabs" */
:root {
  --tab-min-height: flex!important;
}

/* Abstände zwischen den Tabs einstellen */

#TabsToolbar .tabbrowser-tab {margin: 3px 1px 1px 2px !important;
}

/* Trennlinien zwischen den einzelnen Zeilen */

#toolbar-menubar,
#nav-bar,
#PersonalToolbar,
#TabsToolbar {
   border-top: 1px solid grey !important;
   background: #eeeeee !important;
   color:black!important;
   }


/* Do not remove the @namespace line -- it's required for correct functioning */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */

/* ----------------------------*/
/* Mehrzeilige Tabreihen       */
/* ----------------------------*/
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: 23px !important;
    max-height: calc( 6 * 23px ) !important;  /*6 Tabreihen*/
    -moz-window-dragging: no-drag !important;
}

/* Tab-Höhe  */
.tabbrowser-tab {
    min-height: 23px !important;
    max-height: 23px !important;
    vertical-align: bottom !important;
    margin-top: 1px !important;
    margin-bottom: 1px !important;
}

 /* Feste Breite  des einzelnem Tabs */
.tabbrowser-tab:not([pinned]) {
    min-width: 154px !important; 
}
/* Platz für Scrollbar schaffen */
.tabbrowser-tabs {
  margin-right: -41px !important;
}
/* Buttons/Zwischenräume Ausblenden */
hbox.titlebar-spacer,
#alltabs-button,tabs tab:not([fadein]), 
[class="scrollbutton-up"],
[class="scrollbutton-up"] + spacer,
scrollbox[part][orient="horizontal"] + spacer,
[class="scrollbutton-down"] { 
    display: none; 
}

Alles anzeigen

JavaScript:

Code

/* Tabs runter.uc.js */

(function(){
var tabbar = document.getElementById("TabsToolbar");
tabbar.parentNode.parentNode.appendChild(tabbar);
})()

...und noch mal DANKE! an alle, die sich hier die Mühe machen!!!

2002Andreas · 8. Dezember 2019

Zitat von moonson

Die doppelten Schaltflächen

Teste bitte mal:

CSS

#TabsToolbar > .titlebar-buttonbox-container {
display: none !important;
}

BrokenHeart · 8. Dezember 2019

Genau aus diesem Grund hatte ich die Codes 1+2 vor ein paar Stunden nochmal angepasst ( siehe hier ).

Es geht um folgenden Code, der eingefügt werden muss, damit die Titlebar-Buttons wieder ausgeblendet werden:

CSS

#TabsToolbar > .titlebar-buttonbox-container {
    display: none !important;
}

Also noch mal testen bitte...

Edit: Und wieder war Andreas ein paar Sekunden schneller...

2002Andreas · 8. Dezember 2019

//

Hätte ich damals wohl anpinnen müssen

#1

milupo · 8. Dezember 2019

Und hättest trotzdem darauf hinweisen müssen, weil das wahrscheinlich wieder niemand gelesen hätte.

2002Andreas · 8. Dezember 2019

//

mein Reden immer

milupo · 8. Dezember 2019

Da brauchst du nicht mehr danach suchen. Ist doch auch schon was. Und für mich trifft das noch mehr zu.

moonson · 8. Dezember 2019

andreas, BrokenHeart: Passt! Alles bestens! Ich danke euch noch mal...

Boersenfeger · 8. Dezember 2019

// Ich weise aus gegebenen Anlass darauf hin, das JavaScript nichts mit der Programmiersprache JAVA zu tun hat. Um Irrungen und Wirrungen vorzubeugen, bitte auf die korrekte Schreibweise achten, wie auch bei den Bezeichnungen der Dateien userChrome.css bzw userContent.css.

Krabato · 8. Dezember 2019

Hallo,

ich habe mir jetzt mal die Userchrome.css von 2002Andreas aus #5 genommen und unten noch "meine farblichen Veränderungen" angefügt.

- Leider ist jetzt der Button bzw. das Kreuz, um neue Tabs zu öffnen, weiß.... man sieht es nicht so gut... wie kann man das schwarz färben?

- und der Button zum Tab schließen ist leider nicht mehr in den inaktiven Tabs sichtbar... ich würde gerne in allen Tabs das schwarze Kreuz sehen...

- Wäre es möglich, die Lesezeichenleiste unter die Tableiste zu schieben?

Ein riesengroßes Dankeschön!!! an die fleißigen Helfer in diesem Forum! - Ich bin Euch sooo dankbar für die Hilfe!

Meine jetzige Userchrome.css:

CSS

/* ----------------------------*/
/* Mehrzeilige Tabreihen unten     */
/* ----------------------------*/

@-moz-document url(chrome://browser/content/browser.xhtml) {
       
#TabsToolbar {
    position: absolute !important;
    display:block !important;
    bottom: 0 !important;
    width: 100vw !important;
    }

#tabbrowser-tabs {
    width: 100vw !important;
    }
        
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {
    padding-bottom: var(--tab-min-height) !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;
}
 /* Feste Breite  des einzelnem Tabs */
.tabbrowser-tab:not([pinned]) {
    min-width: 140px !important; 
}
/* Platz für Scrollbar schaffen */
.tabbrowser-tabs {
  margin-right: -41px !important;
}

scrollbox[part][orient="horizontal"] {
    background: lightgrey !important;
    position: absolute !important;
    display:block !important;
    /* display: flex; */
    /* flex-wrap: wrap;  */
    /* overflow: visible !important; */
    /* overflow-x: hidden !important; */
    overflow-y: scroll !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,
#alltabs-button,tabs tab:not([fadein]), 
[class="scrollbutton-up"],
[class="scrollbutton-up"] + spacer,
scrollbox[part][orient="horizontal"] + spacer,
[class="scrollbutton-down"] { 
    display: none; 
}

/* -----------------------------*/
/* Tab: Optische Anpassungen    */
/* -----------------------------*/
#tabbrowser-tabs :not([fokus]){
    opacity: 1!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; 
}    
}



/*TABs farblich unterscheiden ANFANG*/
/* Tab, normal */
.tabbrowser-tab .tab-content {
    background: aquamarine !important;
    color: black !important;
}
/* Tab, aktiv */
.tabbrowser-tab[selected='true'] .tab-content {
    background: #F465B4 !important;
    color: black !important;
    margin-bottom:1px!important;
}
/* Ungelesenes Tab / Tab, in welchem (noch) kein Link angewählt wurde  */
.tabbrowser-tab[notselectedsinceload="true"] .tab-content {
    background: yellow !important;
    color: black !important;
}
/* Tab, entladen / (noch) nicht geladen */
.tabbrowser-tab[pending="true"] .tab-content{
    background: #B7F4F3 !important;
    color: black !important;
}
/* Letztes Tab - DEAKTIVIERT!
.tabbrowser-tab[last-visible-tab="true"] .tab-content {
    background: lightseagreen !important;
    color: black !important;
}*/

/* Tab, aktiv */
.tabbrowser-tab[selected='true'].tab-content {
    background: #F465B4 !important;
    color: black !important;
}


/*TABs farblich unterscheiden ENDE*/

Alles anzeigen

Teilen