Mehrzeilige Tableiste für aktuelle Firefox-Versionen

/*AGENT_SHEET*/ @charset "UTF-8";
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
#tabbrowser-tabs .tabbrowser-arrowscrollbox {
    -moz-binding:
    url("chrome://global/content/bindings/scrollbox.xml#arrowscrollbox")
    !important;
}


/* ------------------------------------------------*/
/* 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: 60px !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,
#alltabs-button,tabs tab:not([fadein]),
[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;
}

// ==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           = true;    // [true]: Tab-Leiste unter allen anderen
    Toolbars, [false]: Tab-Leiste oben
    var bTabWheel              = true;     // [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;
    }

}