FF89.0.2 - Mehrreihige Tabs

J87

Hallo,

hatte vor zwei Jahren das Problem mit FF70 dass die mehrreihigen Tabs nicht gingen.

Das Problem wurde auch schnell gelöst.

Jetzt habe ich einen neuen PC und dort bekomme ich es wieder nicht hin.

Auf dewm Laptop läuft alles noch super. Habe die ganzen Dateien so verteilt und ausgefüllt wie bei meinem Laptop aber es passiert nichts.

Die Lösung damals war in diesem Thread:

Thema

FF70 -Mehrreihige Tabs

Hallo erstmal,

ich hab mich gerade registriert, weil ich keine Ahnung mehr habe was ich tun kann, damit ich in FF die Tabs in mehreren Reihen anzeigen lassen kann.

Seit TabMixPlus weg ist, scheint es ja nicht mehr so leicht zu sein.

Vor 1-2 jahren habe ich da mal was mit dem userchrome.css gemacht und das hat so semigut funktioniert.

Bis es plötzlich bei mir nach einem Update garnicht mehr ging. Von welcher auf welche Version kann ich nicht mehr sagen.

Dann hab ich den ganzen Ordner gelöscht.

Jetzt…

J87

28. Oktober 2019 um 20:47

Aber das klappt an meinem PC komischerwesie nicht. Auch am Laptop hab ich die selber Firefoxversion.

Was auch seltsam ist (finde ich), dass ich zwei Profile in Firefox habe:

"52k2fhss.default"

"hjcnzt9y.default-release"

Hoffe man kann mir wieder helfen.

Danke

Dharkness

Hallo J87,

hast Du denn auch die ↓ Pref in about:config umgestellt und liegt die userChrome.css auch wirklich im Ordner chrome?

toolkit.legacyUserProfileCustomizations.stylesheets

J87

Ja, alles richtig kopiert. So wie auf dem Laptop und in der Anleitung.

Und das aus der userChrome.css habe ich auch umgestellt auf true

Dharkness

Da Du dort 2 Profile hast, ist auch alles im richtigen Profil kopiert und umgestellt?

J87

in dem Profil dass Firefox vorgibt wenn ich über "weitere Informationen und Fehlerbehebung" rein geh

milupo

Zitat von J87

Was auch seltsam ist (finde ich), dass ich zwei Profile in Firefox habe:

Das ist nicht seltsam. Seit Fx 67 erhält jede Firefox-Installation ihr eigenes Profil. Das neue erkennt man an der Bezeichnung default-release, default-release-1, default-release-2 usw. Da du Firefox wahrscheinlich auf dem neuen PC neu installieren musstest, hast du auch ein neues Profil.

Zitat von J87

Ja, alles richtig kopiert. So wie auf dem Laptop und in der Anleitung.
Und das aus der userChrome.css habe ich auch umgestellt auf true

Wie hast du denn überhaupt die mehrzeilige Tableiste erreicht? Wirklich per CSS oder nicht doch per Benutzerskript. Das sind zwei Paar Schuhe. Beides wird im Thread erwähnt, auf den du verlinkt hast. Für Benutzerskripte musst du andere Vorbereitungen treffen, damit sie funktionieren und zwar sowohl im Profilverzeichnis als auch im Installationsverzeichnis. Das heißt, selbst, wenn du die Daten aus dem Profilverzeichnis kopiert hast, so hast du doch sicher ein neues Installationsverzeichnis. Folge den Anweisungen auf folgender Seite:

https://github.com/Endor8/userChr…ster/userChrome

J87

Zitat

Das ist nicht seltsam. Seit Fx 67 erhält jede Firefox-Installation ihr eigenes Profil. Das neue erkennt man an der Bezeichnung default-release, default-release-1, default-release-2 usw. Da du Firefox wahrscheinlich auf dem neuen PC neu installieren musstest, hast du auch ein neues Profil.

Das es ein neues Profil ist wenn ich Firefox neu auf einem neuen System installiere ist ja klar. Aber wieos sind es dann zwei? Das ist das was mich verwirrt.

Genauso gibt es den Ordner einmal bei Roaming und einmal bei Local.

Zitat

Wie hast du denn überhaupt die mehrzeilige Tableiste erreicht? Wirklich per CSS oder nicht doch per Benutzerskript. Das sind zwei Paar Schuhe. Beides wird im Thread erwähnt, auf den du verlinkt hast. Für Benutzerskripte musst du andere Vorbereitungen treffen, damit sie funktionieren und zwar sowohl im Profilverzeichnis als auch im Installationsverzeichnis. Das heißt, selbst, wenn du die Daten aus dem Profilverzeichnis kopiert hast, so hast du doch sicher ein neues Installationsverzeichnis. Folge den Anweisungen auf folgender Seite:

https://github.com/Endor8/user…js/tree/master/userChrome

Ja so wie es auf der seite Gesagt wurde hab ich es gemacht. Und es ging ja am Laptop.

Ist ja das selbe wie der link den du mir geschickt hast.

Und wieso soll das selbe auf dem Laptop gehen und am PC nicht?!

Kann auch nur das sagen was ich gemacht habe nach der Beschreibung und dass ich den selben Weg am PC gegangen bin wie damals.

Und beim Laptop läuft es ja immernoch seit FF70 bis jetzt FF89. Ob CSS oder Benutzerscript oder beides das selbe ist davon hab ich dann kein Plan sry XD

milupo

Zitat von J87

Das es ein neues Profil ist wenn ich Firefox neu auf einem neuen System installiere ist ja klar. Aber wieos sind es dann zwei? Das ist das was mich verwirrt.

Weil default das Standard-Profil von Firefox ist. Bei einer Erstinstallation wird es angelegt. Ohne Profil funktioniert Firefox nicht. Wenn du es kopiert hast, ist es natürlich auch auf deinem neuen PC. Da du Firefox neu installiert hast, wird default-release angelegt. Du musst jetzt wissen, wo du deine alten Profildaten hast.

Zitat von J87

Genauso gibt es den Ordner einmal bei Roaming und einmal bei Local.

Local ist nur der Cache-Ordner. Entscheidend ist, was sich unter Roaming befindet.

Zitat von J87

Und wieso soll das selbe auf dem Laptop gehen und am PC nicht?!

Auf dem Laptop hast du nichts neu installiert? Dann sollte es auch keine Probleme geben.

Zitat von J87

Ob CSS oder Benutzerscript oder beides das selbe ist davon hab ich dann kein Plan sry XD

Das ist aber wichtig. Hast du nur Code in der userChrome.css im Ordner chrome des richtigen Profilverzeichnisses? Oder hast du im Ordner chrome auch eine Datei mit dem Namen MultiRowTabLiteforFx.uc.js? Das ist ein Benutzerskript.

Was die userChrome.css angeht, so kopiere deren Inhalt in einen Code-Kasten. Klicke dazu auf das Symbol </> in der Symbolleiste des Editorfensters. Ein Kasten wird eingefügt, mit dem Text Quellcode. Klicke dort darauf. Ein Fenster wird geöffnet. Klicke da auf Syntaxhervorhebung und wähle CSS aus. Klicke dann auf Speichern um das Fenster zu schließen. Kopiere jetzt den Inhalt aus der userChrome.css in den Code-Kasten.

J87

Ich habe jetzt einfach die ganzen Dateien vom Laptop kopiert und dann geht es...gleiche Orte usw.

Sehr seltsam.

Jedoch siewht das alles ziemlich unschön aus.

die Tabs sind schlecht zu erknennen..also nicht wirklich einzeln aufgeführt und der aktive Tab überhaupt nicht zu erkennen.

gibts da irgendwelche vorlagen.

Ich hab tasächlich die css-Datei und die MultiRowTab69Plus.uc im Ordner..-.also so hieß es funktioniert es nur.

hier die userChrome.css:

CSS

/* Tableiste mehrreihig */
@-moz-document url(chrome://browser/content/browser.xhtml) {

[tabsintitlebar="true"][sizemode="maximized"] #navigator-toolbox {
padding-top: 8px !important;
}

#titlebar,#tabbrowser-tabs {
appearance: none !important;
}

[tabsintitlebar="true"] #TabsToolbar > .titlebar-buttonbox-container,
#main-window[inFullscreen="true"] #window-controls {
display: block;
}

/* Mehrreihige Tableiste, Anzahl der angezeigten Tabreihen = 3 Zeilen, weitere per Scrollbar */
box[class="scrollbox-clip"][orient="horizontal"],
tabs > arrowscrollbox { display: block; }
scrollbox[part][orient="horizontal"] {
display: flex;
flex-wrap: wrap;
max-height: calc(var(--tab-min-height) * 3); /* Anzahl der angezeigten Tabreihen = 3 Zeilen */
overflow-x: hidden;
overflow-y: auto;
}

tabs tab[fadein]:not([pinned]) {
flex-grow: 1;
}

tabs tab,.tab-background {
height: var(--tab-min-height);
overflow: hidden;
}

tab > .tab-stack {
width: 100%;
}

box[class="scrollbox-clip"][orient="horizontal"] {
-moz-window-dragging: no-drag;
}

hbox.titlebar-spacer,
#alltabs-button,tabs tab:not([fadein]) {
display: none;
}

/* Feste Breite der einzelnen Tabs wenn gewünscht, sonst entfernen bzw. verbreitern */
tabs tab[fadein]:not([pinned]) {
min-width: 150px !important;/* Minimale Tabbreite 76px */
max-width: 150px !important;/* Maximale Tabbreite 225px */
}
}

/* 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; 
}
tabs tab {
    border-left: solid 1px hsla(0,0%,50%,.5);
    border-right: solid 1px hsla(0,0%,50%,.5);
}
tabs tab:after,tabs tab:before { display: none;}

#TabsToolbar:not(:-moz-lwtheme){ 
    color: black !important;
}
#TabsToolbar > .titlebar-buttonbox-container {
    display: none !important;
}    

/* -----------------------------*/
/* 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;
}
*/

/************* Tabschliessen-Button ****************/
.tab-close-button.close-icon{
    display: -moz-box !important;
    width: 20px; height: 20px !important;
    border: none !important;
    background-color: none !important;
}

.tab-close-button {
    color: white !important; /* Farbe des Kreuzes */
}      

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

Hier die von der MultiRowTab69Plus.uc:

JavaScript

// ==UserScript==
// @name zzzz-MultiRowTab_Lite.uc.js
// @namespace http://space.geocities.yahoo.co.jp/gl/alice0775
// @description Version für Mehrzeilige Tableiste
// @include main
// @compatibility Firefox 69
// @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==
// ==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 71
// @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 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);
    
    gBrowser.tabContainer.clearDropIndicator = function() {
        var tabs = this.allTabs;
        for (let i = 0, len = tabs.length; i < len; i++) {
            tabs[i].style.removeProperty("border-left-color");
            tabs[i].style.removeProperty("border-right-color");
        }
    }
    gBrowser.tabContainer.addEventListener("dragleave", function(event) { this.clearDropIndicator(event); }, true);
    gBrowser.tabContainer.on_dragover = function(event) {
        this.clearDropIndicator();
        var effects = this._getDropEffectForTabDrag(event);
        var ind = this._tabDropIndicator;
        if (effects == "" || effects == "none") {
            ind.hidden = true;
            return;
        }
        event.preventDefault();
        event.stopPropagation();
        var arrowScrollbox = this.arrowScrollbox;
        // autoscroll the tab strip if we drag over the scroll
        // buttons, even if we aren't dragging a tab, but then
        // return to avoid drawing the drop indicator
        var pixelsToScroll = 0;
        if (this.getAttribute("overflow") == "true") {
            switch (event.originalTarget) {
                case arrowScrollbox._scrollButtonUp:
                    pixelsToScroll = arrowScrollbox.scrollIncrement * -1;
                    break;
                case arrowScrollbox._scrollButtonDown:
                    pixelsToScroll = arrowScrollbox.scrollIncrement;
                    break;
            }
            if (pixelsToScroll) {
                arrowScrollbox.scrollByPixels(
                    (RTL_UI ? -1 : 1) * pixelsToScroll,
                    true
                );
            }
        }
/*
        let draggedTab = event.dataTransfer.mozGetDataAt(TAB_DROP_TYPE, 0);
        if (
            (effects == "move" || effects == "copy") &&
            this == draggedTab.container
        ) {
            ind.hidden = true;
            if (!this._isGroupTabsAnimationOver()) {
                // Wait for grouping tabs animation to finish
                return;
            }
            this._finishGroupSelectedTabs(draggedTab);
            if (effects == "move") {
                this._animateTabMove(event);
                return;
            }
        }
        this._finishAnimateTabMove();
*/
        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;
            }
        }
        var rect = arrowScrollbox.getBoundingClientRect();
        var newMargin;
        if (pixelsToScroll) {
            // if we are scrolling, put the drop indicator at the edge
            // so that it doesn't jump while scrolling
            let scrollRect = arrowScrollbox.scrollClientRect;
            let minMargin = scrollRect.left - rect.left;
            let maxMargin = Math.min(
                minMargin + scrollRect.width,
                scrollRect.right
            );
            if (RTL_UI) {
                [minMargin, maxMargin] = [
                    this.clientWidth - maxMargin,
                    this.clientWidth - minMargin,
                ];
            }
            newMargin = pixelsToScroll > 0 ? maxMargin : minMargin;
        } else {
            let newIndex = this._getDropIndex(event, effects == "link");
            let children = this.allTabs;
            if (newIndex == children.length) {
                let tabRect = children[newIndex - 1].getBoundingClientRect();
                if (RTL_UI) {
                    newMargin = rect.right - tabRect.left;
                } else {
                    newMargin = tabRect.right - rect.left;
                }
                children[newIndex - 1].style.setProperty("border-right-color","red","important");
            } else {
                let tabRect = children[newIndex].getBoundingClientRect();
                if (RTL_UI) {
                    newMargin = rect.right - tabRect.right;
                } else {
                    newMargin = tabRect.left - rect.left;
                }
                children[newIndex].style.setProperty("border-left-color","red","important");
            }
        }
        ind.hidden = false;
        newMargin += ind.clientWidth / 2;
        if (RTL_UI) {
            newMargin *= -1;
        }
        ind.style.transform = "translate(" + Math.round(newMargin) + "px)";
        ind.style.marginInlineStart = -ind.clientWidth + "px";
    }
    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

sieht nun so aus:

so sah es am Laptop aus und so sieht es jetzt auch am PC aus:

was auch sehr nervig istr, ich kann die Tabs nicht verschieben..wenn dann sind sie auf einmal ganz vorn...aber nie da wo ich sie haben möchte.

Habe gerade mal nen anderen code in die .js Datei gesetzt...und trotzdem bleibt die Einstellung die ich gerade habe gleich. Trotz Neustart von Firefox.

Hab das gefühl das meine Änderungen iwie garnicht aktzeptiert werden. Auch wenn ich die .js öffne ist zwar der andere Text drin, aber es änderrt sich nichts.

Auch der About.config Button lässt sich nicht mehr aktivieren,.

milupo

Zum CSS-Code kann ich nichts sagen, da ich immer nur wenige Tabs offen habe, also nur eine Tableiste brauche. Es gibt aber neue für Fx 89 angepasste Benutzerskripte, 6 verschiedene. Du müsstest dir das entsprechende aussuchen:

https://github.com/Endor8/userChr…tabs/Firefox-89

Auf dieser Seite sind die 6 Skriptversionen beschrieben. Wenn du dich entschieden hast, klicke auf das entsprechende Skript: Es wird angezeigt. Klicke dann auf der neuen Seite rechts oben auf die Schaltfläche Raw. Jetzt wird nur der Text des Skripts angezeigt. Kopiere den in ein leeres Dokument deines bevorzugten Editors und speichere ihn unter dem entsprechenden Dateinamen im Ordner chrome deines Profilverzeichnisses ab. Lösche die alte Skriptdatei oder benenne sie um (sie darf dann nicht mehr die Dateiendung uc.js haben). Starte dann Firefox neu.

J87

Das geht nicht. Egal was ich bei der .js Datei eintrage, dass ändert nichts.

Das einzige was ich ändern konnte war bei der userChrom.cs

Da hab ich mal aus Test dies eingetragen

CSS

    /* Tabs rund und farbig */

    /* Angaben für die TAB-Leiste*/

    /* TAB normal (inaktiv):
    * Hintergrundfarbe, Schriftfarbe,
    * Rahmen um die TABs, oben abgerundet und Abstände angepaßt,
    * unten kein Rahmen -> Abschlußrahmen vom Container.*/

   
    #TabsToolbar .tabbrowser-tab {
    color: black !important;
    border: 1px solid !important;
    border-bottom: 1px solid black !important;
    border-radius: 16px 16px !important;
    margin-top: 0px !important;
    padding: 0px !important;
    }

    /* TAB bei bei angewähltem TAB (aktiv):
    * Hintergrundfarbe, Rahmen,
    * Schriftfarbe. */
 
    #TabsToolbar .tabbrowser-tab[selected="true"] {
    background: red !important;
    border-radius: 16px 16px !important;
    margin-top: 0px !important;
    padding: 0px !important;
    font-weight: bold !important;    
    color: black ! important; 
    }

    /* Tab-Icon etwas größer,
    * links weniger, unten etwas mehr Abstand zum TAB-Rand.*/
 
    #TabsToolbar .tab-icon-image {
    height: 20px !important;
    width:  20px !important;
    margin-left: -5px !important;    
    margin-bottom: 2px !important; 
    }
        
    /* Tab-Schließen-Button:
    * Rechts weniger Abstand zum TAB-Rand, etwas größer,
    * Textfarbe (Kreuz)
    * Hintergrundfarbe, an den Eckenradius des Buttons angepaßt */
 
    #TabsToolbar .tab-close-button {
    margin-right: -5px !important;  
    color: black !important; 
    }

    #TabsToolbar .tab-close-button .toolbarbutton-icon {
    height: 20px !important;
    width:  20px !important;    
    background-color: red !important;
    border-radius: 14px !important; 
    }
    
    /* Schliessen-Button nur wenn angewählt */

    tab:not([selected]) .tab-close-button {display: none !important; 
    }

    /* Alle anderen Elemente in den TABs ohne Hintergrund. */

    #TabsToolbar .tabbrowser-tab * {
    background: none !important; 
    }
 
    /* Schriftgröße Tabs */

    .tab-text {
    font-size:15px !important; 
    }
    
    /* Damit wird der Tabtext am Ende nicht ausgeblendet */
    
    .tab-label-container[textoverflow][labeldirection=ltr]:not([pinned]),
    .tab-label-container[textoverflow]:not([labeldirection]):not([pinned]):-moz-locale-dir(ltr) {
    direction: ltr;
    mask-image: linear-gradient(to left, transparent, black 0em) !important; 
    }
    
    /* Doppelte Schliessung ausblenden */

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

    /* Tabs Proton-Design */

    :root {
    --proton-tab-radius: 0px !important;
    --proton-tab-block-margin: 0px !important;
    --inline-tab-padding: 10px !important;
    }

    #TabsToolbar {
    min-height: 36px !important;
    max-height: 36px !important;    
    border-top: 1px solid #B2B2B2 !important;
    border-bottom: 1px solid #B2B2B2 !important; 
    margin-bottom: 1px !important;
    padding-left: 2px !important;
    }

    #TabsToolbar .toolbarbutton-1 {
    margin-top: 2px !important;    
    margin-bottom: 2px !important;
    }

    #TabsToolbar .toolbarbutton-1 > image {
    padding: 2px 4px !important;
    }

    /* Rahmen um die Tableiste durchsichtig */

    #TabsToolbar {
    border: 0.2px solid transparent !important;
    }
     
    #TabsToolbar:hover {
    border: 0.2px solid transparent !important;
    }     

    .tabbrowser-tab[label*=" - YouTube"] .tab-content,
    .tabbrowser-tab[label*="YouTube - youtube.com"] .tab-content {
    background-image: linear-gradient(to bottom, red 0%, red 14%, red 14%, red 100%) !important;
    }
    
    .tabbrowser-tab[label*=" - YouTube"][selected="true"] .tab-content,
    .tabbrowser-tab[label*="YouTube - youtube.com"][selected="true"] .tab-content {
    background-image: linear-gradient(to bottom, green 0%, green 14%, red 14%, red 100%) !important;
    }
    
    .tabbrowser-tab[label*=" - YouTube"]:hover .tab-content,
    .tabbrowser-tab[label*="YouTube - youtube.com"]:hover .tab-content {
    background-image: linear-gradient(to bottom, saddlebrown 0%, saddlebrown 14%, saddlebrown 14%, saddlebrown 100%) !important;
    }
    
    .tabbrowser-tab[label*=" - YouTube"][selected="true"]:hover .tab-content,
    .tabbrowser-tab[label*="YouTube - youtube.com"][selected="true"]:hover .tab-content {
    background-image: linear-gradient(to bottom, green 0%, green 14%, saddlebrown 14%, saddlebrown 100%) !important;
    } 

    .tabbrowser-tab .tab-content vbox.tab-label-container.proton {
    -moz-box-orient: horizontal !important;
    } 
    
    .tabbrowser-tab .tab-content vbox.tab-label-container.proton hbox.tab-icon-sound {
    margin-top: 0px !important;
    margin-right: 0px !important;
    } 
    
    .tab-icon-sound[soundplaying="true"],
    .tab-icon-sound[muted="true"],
    .tab-icon-sound[activemedia-blocked="true"] {
    background: #FFF !important;
    padding: 0 1px !important;
    }
    
    .tab-icon-sound[soundplaying="true"] .tab-icon-sound-image,
    .tab-icon-sound[muted="true"] .tab-icon-sound-image,
    .tab-icon-sound[activemedia-blocked="true"] .tab-icon-sound-image {
    fill: #F10 !important;
    }

    .tab-icon-sound-image {
    height: 1.7em !important;
    }
    
    .tabbrowser-tab .tab-content vbox.tab-label-container.proton label[class="tab-icon-sound-label tab-icon-sound-blocked-label"],
    .tabbrowser-tab .tab-content vbox.tab-label-container.proton label[class="tab-icon-sound-label tab-icon-sound-playing-label"],
    .tabbrowser-tab .tab-content vbox.tab-label-container.proton label[class="tab-icon-sound-label tab-icon-sound-muted-label"] {
    display: none !important;
    }

    /* Tab Beschriftung mittig */
    
    .tab-content {
    display: flex !important; 
    justify-content: center !important;
    align-items: center !important;
    }

    .tab-label-container {
    margin: auto !important;}

    .tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
    flex-shrink: 0 !important; 
    padding: 0px !important;
    padding-top: -5px!important;
    width: 16px !important;
    }

    /*Tabs in Tableiste mittig*/
    
    scrollbox:not(#PlacesToolbarItems) {
    -moz-box-pack: center !important;
    }
    
    /* Lautsprechersymbol größer */
    
    .tab-icon-overlay {
    transform: scale(1.7, 1.7) !important;
    }
    
    image.tab-icon-overlay {
    top: 3px !important;
    padding-right: 3px !important;
    }
    
    /* Aktiver Tab breiter */
    
    .tabbrowser-tab:not([pinned]):not([selected]) {
    min-width: 200px !important;
    max-width: 200px !important;
    }
    .tabbrowser-tab:not([pinned])[selected] {
    min-width: 256px !important;
    max-width: 256px !important;
    }
    
    /* Schatten drum */
    
    #TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected="true"],
[multiselected]) > .tab-stack > .tab-background
{
    box-shadow: none !important;
}

Alles anzeigen

und dann kam folgendes raus. (wäre ja auch nicht so schlecht, wäre es ein wenig kleiner und mit mehreren Tabs.

Also nur wenn ich bei CSS was ändere nimmt Firefox das auch an.

Die Seite die du mir gesagt hast wenn ich da etwas in der .js _Datei ändere bring nichts.

milupo

Was willst du ändern? Kopiere doch erst einmal den Text von der Seite, wie ich das beschrieben habe und speichere den als Datei im Ordner chrome ab, z. b. als 01-MultiRowTabLiteforFx.uc.js. Das wäre das erste der 6 Skriptversionen.

J87

Zitat von milupo

Was willst du ändern? Kopiere doch erst einmal den Text von der Seite, wie ich das beschrieben habe und speichere den als Datei im Ordner chrome ab, z. b. als 01-MultiRowTabLiteforFx.uc.js. Das wäre das erste der 6 Skriptversionen.

das hab ich ja gemacht gehabt. aber es hat ja an Firefox nichts geändert nach dem Neustart.

Oder soll sich dann in Firefox nichts ändern?

milupo

Es ist doch auf der Seite beschrieben, was welche Version macht. Du müsstest z. B. Tabs verschieben können. Für welche Skript-Version hast du dich denn entschieden?

J87

1. Script..

und das sag ich ja die ganze Zeit. Es geht NICHT.Kein verschieben..garnichts.

Firefox ignoriert die -js-Datei einfach.

Muss ich noch irgend etwas aktivieren dass er die .js-Datein annimmt?

Als CSS geht es eben.

milupo

Zitat von J87

Als CSS geht es eben.

Das hat aber nicht die Skript-Funktionalität, wie z. B. das Verschieben. Nichtsdestotrotz, es ist schon mal schön, wenn der CSS-Code funktioniert.

Zitat von J87

Muss ich noch irgednwas aktivieren dann er die .js-Datein annimmt?

Hast du denn in das Installationsverzeichnis von Firefox auch wirklich die nötigen Dateien bzw. den Ordner kopiert?

Datei config.js

Ordner userChromeJS

Datei defaults\pref\config-prefs.js

J87

Ja alles in den Ordnern verteilt. Genauso wie am Laptop. Und da geht es auch.

Das ist ja das Problem.

Egal was ich in die .js-Datei eintrage bringt es einfach nichts.

Keine Ahnung wo das Problem und der Unterschied ist.

milupo

Gib mal about:support in die Adressleiste ein. Klicke dann auf der erscheinenden Seite rechts oben auf die Schaltfläche Start-Cache löschen… Starte Firefox neu.

milupo

So sieht es mit der Skriptversion bei mir aus:

Sieht bei mir etwas bunt aus, weil ich noch ein paar CSS-Regeln nutze, aber man sieht, dass das zwei Reihen Tabs sind.

J87

habs jketzt nur nmoch über css gemacht.

CSS

    /* Tabs rund und farbig */

    /* Angaben für die TAB-Leiste*/

    /* TAB normal (inaktiv):
    * Hintergrundfarbe, Schriftfarbe,
    * Rahmen um die TABs, oben abgerundet und Abstände angepaßt,
    * unten kein Rahmen -> Abschlußrahmen vom Container.*/

   
    #TabsToolbar .tabbrowser-tab {
    color: black !important;
    border: 1px solid !important;
    border-bottom: 1px solid black !important;
    border-radius: 16px 16px !important;
    margin-top: 0px !important;
    padding: 0px !important;
    }

    /* TAB bei bei angewähltem TAB (aktiv):
    * Hintergrundfarbe, Rahmen,
    * Schriftfarbe. */
 
    #TabsToolbar .tabbrowser-tab[selected="true"] {
    background: red !important;
    border-radius: 16px 16px !important;
    margin-top: 0px !important;
    padding: 0px !important;
    font-weight: bold !important;    
    color: black ! important; 
    }

    /* Tab-Icon etwas größer,
    * links weniger, unten etwas mehr Abstand zum TAB-Rand.*/
 
    #TabsToolbar .tab-icon-image {
    height: 20px !important;
    width:  20px !important;
    margin-left: -5px !important;    
    margin-bottom: 2px !important; 
    }
        
    /* Tab-Schließen-Button:
    * Rechts weniger Abstand zum TAB-Rand, etwas größer,
    * Textfarbe (Kreuz)
    * Hintergrundfarbe, an den Eckenradius des Buttons angepaßt */
 
    #TabsToolbar .tab-close-button {
    margin-right: -5px !important;  
    color: black !important; 
    }

    #TabsToolbar .tab-close-button .toolbarbutton-icon {
    height: 20px !important;
    width:  20px !important;    
    background-color: red !important;
    border-radius: 14px !important; 
    }
    
    /* Schliessen-Button nur wenn angewählt */

    tab:not([selected]) .tab-close-button {display: none !important; 
    }

    /* Alle anderen Elemente in den TABs ohne Hintergrund. */

    #TabsToolbar .tabbrowser-tab * {
    background: none !important; 
    }
 
    /* Schriftgröße Tabs */

    .tab-text {
    font-size:15px !important; 
    }
    
    /* Damit wird der Tabtext am Ende nicht ausgeblendet */
    
    .tab-label-container[textoverflow][labeldirection=ltr]:not([pinned]),
    .tab-label-container[textoverflow]:not([labeldirection]):not([pinned]):-moz-locale-dir(ltr) {
    direction: ltr;
    mask-image: linear-gradient(to left, transparent, black 0em) !important; 
    }
    
    /* Doppelte Schliessung ausblenden */

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

    /* Tabs Proton-Design */

    :root {
    --proton-tab-radius: 0px !important;
    --proton-tab-block-margin: 0px !important;
    --inline-tab-padding: 10px !important;
    }

    #TabsToolbar {
    min-height: 36px !important;
    max-height: 36px !important;    
    border-top: 1px solid #B2B2B2 !important;
    border-bottom: 1px solid #B2B2B2 !important; 
    margin-bottom: 1px !important;
    padding-left: 2px !important;
    }

    #TabsToolbar .toolbarbutton-1 {
    margin-top: 2px !important;    
    margin-bottom: 2px !important;
    }

    #TabsToolbar .toolbarbutton-1 > image {
    padding: 2px 4px !important;
    }

    /* Rahmen um die Tableiste durchsichtig */

    #TabsToolbar {
    border: 0.2px solid transparent !important;
    }
     
    #TabsToolbar:hover {
    border: 0.2px solid transparent !important;
    }     

    .tabbrowser-tab[label*=" - YouTube"] .tab-content,
    .tabbrowser-tab[label*="YouTube - youtube.com"] .tab-content {
    background-image: linear-gradient(to bottom, red 0%, red 14%, red 14%, red 100%) !important;
    }
    
    .tabbrowser-tab[label*=" - YouTube"][selected="true"] .tab-content,
    .tabbrowser-tab[label*="YouTube - youtube.com"][selected="true"] .tab-content {
    background-image: linear-gradient(to bottom, green 0%, green 14%, red 14%, red 100%) !important;
    }
    
    .tabbrowser-tab[label*=" - YouTube"]:hover .tab-content,
    .tabbrowser-tab[label*="YouTube - youtube.com"]:hover .tab-content {
    background-image: linear-gradient(to bottom, saddlebrown 0%, saddlebrown 14%, saddlebrown 14%, saddlebrown 100%) !important;
    }
    
    .tabbrowser-tab[label*=" - YouTube"][selected="true"]:hover .tab-content,
    .tabbrowser-tab[label*="YouTube - youtube.com"][selected="true"]:hover .tab-content {
    background-image: linear-gradient(to bottom, green 0%, green 14%, saddlebrown 14%, saddlebrown 100%) !important;
    } 

    .tabbrowser-tab .tab-content vbox.tab-label-container.proton {
    -moz-box-orient: horizontal !important;
    } 
    
    .tabbrowser-tab .tab-content vbox.tab-label-container.proton hbox.tab-icon-sound {
    margin-top: 0px !important;
    margin-right: 0px !important;
    } 
    
    .tab-icon-sound[soundplaying="true"],
    .tab-icon-sound[muted="true"],
    .tab-icon-sound[activemedia-blocked="true"] {
    background: #FFF !important;
    padding: 0 1px !important;
    }
    
    .tab-icon-sound[soundplaying="true"] .tab-icon-sound-image,
    .tab-icon-sound[muted="true"] .tab-icon-sound-image,
    .tab-icon-sound[activemedia-blocked="true"] .tab-icon-sound-image {
    fill: #F10 !important;
    }

    .tab-icon-sound-image {
    height: 1.7em !important;
    }
    
    .tabbrowser-tab .tab-content vbox.tab-label-container.proton label[class="tab-icon-sound-label tab-icon-sound-blocked-label"],
    .tabbrowser-tab .tab-content vbox.tab-label-container.proton label[class="tab-icon-sound-label tab-icon-sound-playing-label"],
    .tabbrowser-tab .tab-content vbox.tab-label-container.proton label[class="tab-icon-sound-label tab-icon-sound-muted-label"] {
    display: none !important;
    }

    /* Tab Beschriftung mittig */
    
    .tab-content {
    display: flex !important; 
    justify-content: center !important;
    align-items: center !important;
    }

    .tab-label-container {
    margin: auto !important;}

    .tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
    flex-shrink: 0 !important; 
    padding: 0px !important;
    padding-top: -5px!important;
    width: 16px !important;
    }

    /*Tabs in Tableiste mittig*/
    
    scrollbox:not(#PlacesToolbarItems) {
    -moz-box-pack: center !important;
    }
    
    /* Lautsprechersymbol größer */
    
    .tab-icon-overlay {
    transform: scale(1.7, 1.7) !important;
    }
    
    image.tab-icon-overlay {
    top: 3px !important;
    padding-right: 3px !important;
    }
    
    /* Aktiver Tab breiter */
    
    .tabbrowser-tab:not([pinned]):not([selected]) {
    min-width: 200px !important;
    max-width: 200px !important;
    }
    .tabbrowser-tab:not([pinned])[selected] {
    min-width: 256px !important;
    max-width: 256px !important;
    }
    
    /* Schatten drum */
    
    #TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected="true"],
[multiselected]) > .tab-stack > .tab-background
{
    box-shadow: none !important;
}







/* Mehrzeilige Tableiste, bei mehr als 2 Zeilen erscheint eine Scrollbar */
scrollbox[part][orient="horizontal"] {
display: flex;
flex-wrap: wrap;
max-height: calc(var(--tab-min-height) * 2); /* Anzahl der Tabzeilen = 2 Zeilen */
overflow-x: hidden;
overflow-y: auto;
}

tabs tab[fadein]:not([pinned]) {
flex-grow: 1;
}

tabs tab,.tab-background {
height: var(--tab-min-height);
overflow: hidden;
}

tab > .tab-stack {
width: 100%;
}

box[class="scrollbox-clip"][orient="horizontal"] {
-moz-window-dragging: no-drag;
}

hbox.titlebar-spacer,
#alltabs-button,
tabs tab:not([fadein]) {
display: none;
}
}

Alles anzeigen

versuche jetzt nur rauszufinden wie ich es bisschen kleiner bekomme die tabs..und auch 3 reihen untereiander sichtbar