Tabs verschieben in mehrzeiliger Tableiste

Boderike

Hallo, liebe Foristi!

Erstmal ein dickes Lob an all die ganzen Experten hier: dank Euch und Euren tollen Scripten sieht mein Firefox immer noch so fast aus wie zu den Zeiten, als es für jegliche Wünsche eine nette Erweiterung gab .

Allerdings ‚zittere‘ ich vor jedem größeren Update, weil dann mal wieder ~~nix~~ einiges nicht wie gewohnt funktioniert und die (von keinerlei Sachkenntnis meinerseits getrübte) Fummelei an den Scripten wieder losgeht. Neues Jahr – neues Glück: ich habe mich endlich getraut auf Version 80+x upzudaten.

Dank 2002Andreas und allen Anderen, die irgendwie an diesem Script Tableiste mehrreihig unten mitgearbeitet haben, ist meine (mehrzeilige!) Tableiste auch wieder unter der (mehrzeiligen!) Lesezeichenleiste, schön mit abgerundeten Ecken.

Das Einzige, was nicht mehr funktioniert, ist das gezielte Verschieben von Tabs innerhalb der Tableiste. Verschiebe ich einen Tab mittels gedrückter linker Maustaste, dann landet der irgendwo, aber nicht da, wo ich ihn gerne hätte .

Es gab dazu auch mal eine Lösung, die das Verschieben eines Tabs an eine bestimmte Stelle ermöglichte. Ich finde die aber leider nicht mehr wieder, obwohl ich hier schon eine ganze Weile gesucht habe.

Ich würde mich freuen, wenn mir jemand helfen könnte.

Auf jeden Fall vielen lieben Dank im Voraus.

Schöne Grüße

Boderike

2002Andreas

Zitat von Boderike

das Verschieben eines Tabs an eine bestimmte Stelle ermöglichte.

Hallo und Willkommen hier im Forum. ?

Das funktioniert wenn dann nur per Script und nicht per CSS Code.

Dieses Script würde genau das machen:

JavaScript

// ==UserScript==
// @name           zzzz-MultiRowTab_LiteforFx48.uc.js
// @namespace      http://space.geocities.yahoo.co.jp/gl/alice0775
// @description    Experimentelle CSS Version für Mehrzeilige Tableiste
// @include        main
// @compatibility  Firefox 81
// @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() {

    /* Symbolleisten und Menüleiste von der Titelleiste in die Navigator-Toolbox verschieben */
    document.getElementById("titlebar").parentNode.insertBefore(document.getElementById("toolbar-menubar"),document.getElementById("titlebar"));

    var css =` @-moz-document url-prefix("chrome://browser/content/browser.xhtml") {

    /* Symbolleiste Sortieren */
    #toolbar-menubar { -moz-box-ordinal-group: 1 !important; } /* Menüleiste */
    #nav-bar { -moz-box-ordinal-group: 2 !important; }         /* Navigationsleiste */
    #PersonalToolbar { -moz-box-ordinal-group: 3 !important; } /* Lesezeichen-Symbolleiste */
    #titlebar { -moz-box-ordinal-group: 4 !important; }        /* Titelleiste */

    /* Anpassung der Symbolleisten */
    [tabsintitlebar="true"] #toolbar-menubar { height: 29px; }
    [tabsintitlebar="true"][sizemode="maximized"] #navigator-toolbox { padding-top: 8px !important; }
    #titlebar,#tabbrowser-tabs { -moz-appearance: none !important; }

    /* Windows 10 und Firefox Standardtheme, Fensterausenlinie in weiß. 
       Anpassung für Titelleistenschaltflächen wenn sie in den Hintergrund verschoben sind */
    #main-window:not([lwtheme="true"]) #TabsToolbar .titlebar-buttonbox .titlebar-button,
    #main-window:not([lwtheme="true"]) #window-controls toolbarbutton { color: rgb(24, 25, 26) !important; }
    #main-window:not([lwtheme="true"]) #TabsToolbar .titlebar-buttonbox .titlebar-button:not(.titlebar-close):hover,
    #main-window:not([lwtheme="true"]) #window-controls toolbarbutton:not([id="close-button"]):hover {
        background-color: var(--lwt-toolbarbutton-hover-background, hsla(0,0%,70%,.4)) !important; }

    /* Anpassung für Titelleistenschaltflächen */
    [tabsintitlebar="true"] .titlebar-buttonbox-container { display: block; position: fixed; right:0; }
    [tabsintitlebar="true"][sizemode="normal"] .titlebar-buttonbox-container { top: 1px; }
    [tabsintitlebar="true"][sizemode="maximized"] .titlebar-buttonbox-container { top: 8px; }
    #navigator-toolbox:not([style^="margin-top:"])[style=""][inFullscreen="true"] #window-controls { display: flex; position: fixed; top: 0; right:0; }
    #navigator-toolbox:not([style^="margin-top:"])[style=""][inFullscreen="true"] #window-controls > toolbarbutton { display: inline; max-height: var(--tab-min-height); }

    /* auf der rechten Seite Platz für die Schaltflächen der Titelleiste einfügen, damit die    
       Schaltflächen der Titelleiste und der Navigationsleiste nicht verdeckt werden */
    [tabsintitlebar="true"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #nav-bar:not([inFullscreen="true"]) { padding-right: 139px !important; }
    #navigator-toolbox[inFullscreen="true"] #nav-bar { padding-right: 109px !important; }

    /* Mehrzeilige Tableiste */
    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) * 5); /* Anzahl der Tabzeilen(Standard = 5 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%; }

    /* Bei Überschreitung der angegebenen Zeilenanzahl, mit der Maus,    
       über die dann eingeblendetet Scrolleiste zur gewünschten Zeile wechseln */
    scrollbox[part][orient="horizontal"] > scrollbar { -moz-window-dragging: no-drag; }

    /* Drag-Bereich auf der linken und rechten Seite der
       Tab-Leiste ausblenden - verstecken
       Links und rechts → hbox.titlebar-spacer 
       links → hbox.titlebar-spacer[type="pre-tabs"] 
       rechts → hbox.titlebar-spacer[type="post-tabs"] */
    hbox.titlebar-spacer
    ,
    /* Ausblenden - Verstecken */
    tabs tab:not([fadein]),
    #toolbar-menubar[autohide="false"] + #titlebar #TabsToolbar .titlebar-buttonbox-container { display: none; }

    } `;
    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.AGENT_SHEET);

    gBrowser.tabContainer.clearDropIndicator = function() {
        var tabs = document.getElementsByClassName("tab-background");
        for (let i = 0, len = tabs.length; i < len; i++) {
            tabs[i].style.removeProperty("border-left-style");
            tabs[i].style.removeProperty("border-right-style");
        }
    }
    gBrowser.tabContainer.addEventListener("dragleave", function(event) { this.clearDropIndicator(event); }, true);

    gBrowser.tabContainer.on_dragover = function(event) {
        this.clearDropIndicator();
        var effects = this._getDropEffectForTabDrag(event);
        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;
                }
                return;
            }
        }
        let newIndex = this._getDropIndex(event, effects == "link");
        let children = document.getElementsByClassName("tab-background");
        if (newIndex == children.length) {
            children[newIndex - 1].style.setProperty("border-right","2px solid red","important");
        } else {
            children[newIndex].style.setProperty("border-left","2px solid 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;
            }
            if (oldTranslateX && oldTranslateX != newTranslateX && !gReduceMotion) {
                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

Um Scripte nutzen zu können bedarf es erst einiger Vorbereitungen, die hier beschrieben werden:

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

Wenn, dann mach es bitte ganz in Ruhe, es sieht komplizierter aus als es ist

Obiges Script und weitere findest du hier:

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

milupo

Zitat von Boderike

Allerdings ‚zittere‘ ich vor jedem größeren Update, weil dann mal wieder nix einiges nicht wie gewohnt funktioniert und die (von keinerlei Sachkenntnis meinerseits getrübte) Fummelei an den Scripten wieder losgeht.

Nur mal so: Du hast anscheinend vergessen, dass die alten Erweiterungen vor Fx 57 oft Kompatibilitätsprobleme mit neuen Firefox-Versionen hatten und man warten musste, bis die Autoren der Erweiterungen diese an neue Firefox-Versionen angepasst hatten. Bei den Webextensions, die es seit Fx 57 gibt, gehört das weitgehend der Vergangenheit an.

Boderike

2002Andreas:

HA -funktioniert wieder!!!

Als ich mir die Links angesehen habe, kam mir das Ganze irgendwie bekannt vor...

Es hatte vermutlich vorher nicht mehr funktioniert, weil ich die neue Firefox-Version in einem anderen Verzeichnis installiert hatte und insofern die Dateien im Installationsverzeichnis natürlich fehlten.

Fazit: Man muss nicht alles wissen, sondern nur wo man nachsehen bzw. wen man fragen sollte!

Einen klitzekleinen Wunsch hätte ich noch: in der alten Version war es so, dass beim Verschieben zunächst ein schmaler roter Strich an der Stelle, wo der Tab hin sollte, auftauchte. Der verschwand dann, wenn ich die Maustaste losgelassen habe. Das war schon nett, weil man dann sicher sah, ob der Tab auch da landen würde, wo er sollte.

milupo:

FX 57 ist ja auch schon lange her und in der Vergangenheit verklären sich ja bekannterweise manche Dinge...

2002Andreas

Zitat von Boderike

ein schmaler roter Strich an der Stelle

Welches Scripz bzw. welchen Code benutzt du denn jetzt?

So sieht das mit dem aus Beitrag Nr. 2 aus:

milupo

Zitat von Boderike

Einen klitzekleinen Wunsch hätte ich noch: in der alten Version war es so, dass beim Verschieben zunächst ein schmaler roter Strich an der Stelle, wo der Tab hin sollte, auftauchte. Der verschwand dann, wenn ich die Maustaste losgelassen habe. Das war schon nett, weil man dann sicher sah, ob der Tab auch da landen würde, wo er sollte.

Im Skript aus Beitrag #2 von 2002Andreas wird das in Zeile 118 (rechter Rand) bzw. 120 (linker Rand) festgelegt. Wenn du also sein Skript verwendest, sollte das eigentlich funktionieren.

Boderike

2002Andreas

Das ist genau das, was ich meine.

Dein Script aus Beitrag #2 habe ich unverändert übernommen.

Außerdem gibt es bei mir noch eine userChrome.css, die dieses Script hier

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

(Beitrag #216) beinhaltet und in dem ich außer der Tabbreite, der Zeilenanzahl und einer Schriftfarbe und -Größe nichts verändert habe.

17 /* Feste Tabbreite */

18 .tabbrowser-tab:not([pinned]) {

19 min-width: 125px !important;

20 max-width: 125px !important;

...

93 /* Mehrzeilige Tableiste, bei mehr als 3 Zeilen erscheint eine Scrollbar */

94 scrollbox[part][orient="horizontal"] {

95 display: flex;

96 flex-wrap: wrap;

97 max-height: calc(var(--tab-min-height) * 3); /* Anzahl der Tabzeilen = 3 Zeilen */

98 overflow-x: hidden;

99 overflow-y: auto;

...

130 /* Schriftart/Schriftgröße ändern */

131 .tabbrowser-tab .tab-label {

132 text-shadow: 1px 1px 0px #FFFFFF !important;

133 /* font-weight: 500 !important; */

134 font-size: 12px !important;

135 font-family: "Arial" !important;

136 color: black !important;

...

142 .tabbrowser-tab .tab-label[selected="true"] {

143 text-shadow: 1px 1px 0px #000000 !important;

144 color: white !important;

145 font-weight: 500 !important;

146 font-size: 12px !important;

147 font-family: "Arial" !important;

Könnte es sein, dass sich da irgendetwas nicht verträgt?

Schöne Grüße

Boderike

2002Andreas

Zitat von Boderike

Außerdem gibt es bei mir noch

Du solltest nicht ein Script und eine CSS Datei zusammen nutzen, die letztlich beide das gleiche machen.

Teste nur das Script erstmal.

Farben der Tabs etc. kann man später noch anpassen.

So müsste der CSS Code dann aussehen:

CSS

/* Schriftart/Schriftgröße ändern */

.tabbrowser-tab .tab-label {
text-shadow: 1px 1px 0px #FFFFFF !important;
 /* font-weight: 500 !important; */
font-size: 12px !important;
font-family: "Arial" !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;
 }
 

/* Höhe der Tabs und Abstand nach unten*/
.tabbrowser-tab:not([pinned]) {
    margin-left: 1px !important;
    max-height: 25px !important;   
    margin-bottom: 4px !important;
}

/* Höhe vom Tabtext und Abstand nach unten*/
.tab-text,.tab-icon-image,.tab-close-button {
    margin-top: -3px !important;
}

/* Feste Tabbreite */
.tabbrowser-tab:not([pinned]) {
min-width: 150px !important;
max-width: 150px !important;
}

/* Farbe der Tableiste hellgrau */
#titlebar {
appearance: none !important;
background: #eeeeee !important;
}

Alles anzeigen

Boderike

(Erstmal vielen lieben Dank, dass Du Dich auch zu später Stunde noch mit meinem Wunsch / Problemchen befasst!
Wenn ich da so an mein berufliches Umfeld denke, da herrscht doch eher das Motto "Vogel friss oder stirb!")

Ich habe naturlich gleich mal probiert, ob ich mit Deinem Lösungsansatz weiterkomme:

Wenn ich nur das Script benutzte und aus der CSS-Datei Deinen Code für die mehrzeiligen Tabs komplett lösche (ansonsten ist da nur noch ein Code für mehrzeilige Lesezeichen drin), dann bekomme ich etwas, was genau wie Dein Muster aussieht, nämlich:

den gewünschten roten Strich beim Verschieben von Tabs

Allerdings:

Bei mehr als 5 Zeilen erscheint ein Scroll-Balken, der sich aber leider nicht bewegen lässt
Es erscheinen anders als bei dem Code aus der CSS-Datei Tabs mit unterschiedlicher Breite, je nach dem ob die Zeile voll ist (recht schmale Tabs) oder ob noch Platz in der Zeile ist (dann variabel)

Füge ich nun den CSS-Code aus Beitrag #8 in die CSS-Datei ein, bekommen die Tabs alle wieder die gleiche konstante Breite und der Scroll-Balken lässt sich nur bewegen, wenn ich mit der Maus etwas links daneben bin (Lücke zwischen Tabs und Scroll-Balken); auf dem Balken selbst tut sich nichts.

Wenn ich dann noch aus dem ursprünglichen CSS-Code den kompletten Bereich „Tab-Hintergrund“ (ab Zeile 191) dranhänge, dann erscheinen erste Ansätze der abgerundeten Tabs.

Es sieht allerdings so aus, als wenn die Tabs quasi 2 Ebenen hätten, eine abgerundete und eine eckige, wobei ich nicht sagen kann, welche der Vordergrund und welche der Hintergrund ist. Da der CCS-Code aber mit „Tab-Hintergrund“ überschrieben ist, vermute ich mal dass die Rundungen die hintere Ebene sind, auch wenn es eigentlich anders wirkt.

Außerdem sind die Rundungen in der unteren Hälfte etwas abgeschnitten.

Schöne Grüße

Boderike

2002Andreas

Zitat von Boderike

Allerdings:

Also bei mir funktioniert das alles einwandfrei mit dem Script und dem Code

Was genau hast du denn noch alles in deiner userChrome.css Datei stehen?

Evtl. kommt sich ja da etwas in die Quere.

Zitat von Boderike

noch mit meinem Wunsch / Problemchen befasst!

Wir Helfer/ich sind freiwillig hier, um anderen Usern bei ihren Problemen zu helfen(wenn es möglich ist).

Wobei es egal ist, ob es sich dabei um ein Problem oder wie du es sagst..Problemchen...handelt

PS:

Bin jetzt dann aber erstmal offline, weiteres wenn dann morgen.

Boderike

Schönen guten Morgen / Mittag!

Im Moment steht in der userChrome.css Datei das hier:

CSS

/***************************************************/
/*Mehrzeilige Lesezeichen-Symbolleiste*/
@-moz-document url-prefix("chrome://browser/content/browser.xhtml") {
     #PersonalToolbar {
        max-height: calc(20px * 3) !important;
    }
    
    #personal-bookmarks,
    #PlacesToolbar,
    #PlacesToolbar > hbox {
        display: block !important;
    }
    
    #PersonalToolbar toolbarbutton {
        min-height: 20px !important;
        max-height: 25px !important;
    }
    
    #PlacesToolbarItems {
        max-height:60px!important;
        display: flex!important;
        flex-wrap: wrap!important;
        overflow-x: visible!important;
        overflow-y: auto!important;
    }
    
    #PlacesToolbar,
    #PersonalToolbar > scrollbar {
        -moz-window-dragging: no-drag !important;
    }
    
    #PlacesToolbar #PlacesChevron {
        display: none !important;
    }
}
/**************************************************/
/****Mehrzeilige Tableiste*************/
/**************************************************/
/* Schriftart/Schriftgröße ändern */

.tabbrowser-tab .tab-label {
text-shadow: 1px 1px 0px #FFFFFF !important;
 /* font-weight: 500 !important; */
font-size: 12px !important;
font-family: "Arial" !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;
 }
 

/* Höhe der Tabs und Abstand nach unten*/
.tabbrowser-tab:not([pinned]) {
    margin-left: 1px !important;
    max-height: 25px !important;   
    margin-bottom: 4px !important;
}

/* Höhe vom Tabtext und Abstand nach unten*/
.tab-text,.tab-icon-image,.tab-close-button {
    margin-top: -3px !important;
}

/* Feste Tabbreite */
.tabbrowser-tab:not([pinned]) {
min-width: 125px !important;
max-width: 125px !important;
}

/* Farbe der Tableiste hellgrau */
#titlebar {
appearance: none !important;
background: #eeeeee !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

Mir ist allerdings bezüglich der Bewegbarkeit des Scroll-Balkens noch etwas aufgefallen, was ich gestern gar nicht bemerkt habe: Versucht man (wie wie ich das gestern wohl gemacht habe), den Scroll-Balken mittels gedrückter linker Maustaste zu bewegen, passiert nix. Wenn ich allerdings mit der Maus auf den Scroll-Balken gehe und dann das Mausrad bewege, dann funktioniert es wie gewohnt und der Balken bewegt sich.

Schöne Grüße

Boderike

2002Andreas

Zitat von Boderike

steht in der userChrome.css Datei das hier:

Da fehlen diverse Einträge mit:

border-radius: 80px !important;

am Ende.

Dadurch sind die Tabs nicht immer abgerundet.

Außerdem ist am Ende des Codes eine } zuviel.

Ich bin mir nicht sicher, aber das Problem hatten wir hier schon mal, wenn eine mehrzeilige Lesezeichenleiste und eine mehrzeilige Tableiste zusammen verwendet werden.

Es gab meiner Meinung nach auch keine perfekte Lösung dafür.

Evtl. habe ich aber auch nur die Lösung übersehen, evtl. fällt einem anderen User ja noch etwas dazu ein.

Boderike

Über die 2. } können wir reden...

Nach den Änderungen von gestern abend sieht das Ganze so aus:

Wie man erkennen kann, ist der rote Strich wieder da, aber es gibt eine eckige und eine abgerundete Ebene.

Was meinst Du damit, dass da Einträge

border-radius: 80px !important;

fehlen?

Das, was ich da in Zeile 81 ff. stehen habe, sind die 45 Zeilen aus Code in den Tread über die mehrzeiligen Tabs (siehe oben), dort Zeilen 190 bis 235.

Die einzige Stelle, an der
border-radius: 80px !important;
im "Original" sonst noch auftaucht wäre diese hier (Zeilen 165 - 173):

CSS

/* Abgerundete Ecken */
#TabsToolbar .tabbrowser-tab,
#TabsToolbar .tabbrowser-tab .tab-background
{
    margin-right : -1px !important;
    background: unset;
    border-radius: 80px !important; 
    border: 1px solid rgba(0,0,0,0.1) !important;
}

Füge ich diesen Teil auch noch in die userChrome.css Datei ein, dann sieht das Ganze bei mir so aus:

Wie man vielleicht erkennen kann, ist der blaue Tab gegenüber dem grauen Teil (Vordergrund <-> Hintergrund) irgendwie verschoben und unten abgeschnitten. Der rote Strich taucht nun auch nicht mehr auf.

Die Merkwürdigkeit des Scroll-Balkens besteht allerdings nach wie vor.

Wenn ich das jetzt richtig sehe, muss ich also aufgrund dieser mysteriösen Unverträglichkeit ( wer hat je behauptet, dass im IT-Bereich immer alles logisch ist??? ) eine Entscheidung treffen, ob mir die komplett abgerundeten Tabs mit dem komplett funktionierenden Scroll-Balken wichtiger sind oder der rote Strich beim Verschieben. Ich tendiere ehrlichgesagt zu Variante 1.

Eine Frage hätte ich aber noch rein interessehalber: Du sagt, das Script und der CSS-Code tun in großen Teilen dasselbe. Welcher Teil aus dem Script ist denn für das saubere / gezielte Verschieben verantwortlich und sollte man das Script nur auf diesen Teil einreduzieren, damit diese Doppelung entfällt?

Schöne Grüße

Boderike

2002Andreas

Zitat von Boderike

sollte man das Script nur

Da musst du dich bitte gedulden bis jemand da ist, der sich mit Scripten auskennt. Ich bin damit überfragt leider.

Zitat von Boderike

dass da Einträge
border-radius: 80px !important;
fehlen?

Sorry, mein Fehler. Ich habe da etwas mit den CSS Codes verwechselt.

Boderike

Alles gut!

Du hast mir eh schon soviel geholfen!

2002Andreas

Zitat von Boderike

Du hast mir eh schon soviel geholfen!

Das habe ich gerne gemacht, leider konnte ich dir keine perfekte Lösung geben.

milupo

Zitat von Boderike

Der rote Strich taucht nun auch nicht mehr auf.

Der taucht nicht auf, weil der im Skript festgelegt ist und nicht im CSS-Code. Wenn du nur den CSS-Code verwenden willst, zaubert Andreas dir den bestimmt in den CSS-Code rein.

Endor

Hallo Boderike

bitte teste mal diese Version von Script, da habe ich einiges aus dem CSS Code von 2002Andreas

übernommen und noch etwas dazu gepackt. Bitte ohne den CSS Code testen, nur dieses Script:

CSS

// ==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 81
// @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() {


/* Symbolleisten und Menüleiste von der Titelleiste in die Navigator-Toolbox verschieben */
document.getElementById("titlebar").parentNode.insertBefore(document.getElementById("toolbar-menubar"),document.getElementById("titlebar"));


var css =` @-moz-document url-prefix("chrome://browser/content/browser.xhtml") {


/* Symbolleiste Sortieren */
#toolbar-menubar { -moz-box-ordinal-group: 1 !important; } /* Menüleiste */
#nav-bar { -moz-box-ordinal-group: 2 !important; } /* Navigationsleiste */
#PersonalToolbar { -moz-box-ordinal-group: 3 !important; } /* Lesezeichen-Symbolleiste */
#titlebar { -moz-box-ordinal-group: 4 !important; } /* Titelleiste */


/* Anpassung der Symbolleisten */
[tabsintitlebar="true"] #toolbar-menubar { height: 29px; }
[tabsintitlebar="true"][sizemode="maximized"] #navigator-toolbox { padding-top: 8px !important; }
#titlebar,#tabbrowser-tabs {appearance: none !important; }


/* Windows 10 und Firefox Standardtheme, Fensterausenlinie in weiß.
Anpassung für Titelleistenschaltflächen wenn sie in den Hintergrund verschoben sind */
#main-window:not([lwtheme="true"]) #TabsToolbar .titlebar-buttonbox .titlebar-button,
#main-window:not([lwtheme="true"]) #window-controls toolbarbutton { color: rgb(24, 25, 26) !important; }
#main-window:not([lwtheme="true"]) #TabsToolbar .titlebar-buttonbox .titlebar-button:not(.titlebar-close):hover,
#main-window:not([lwtheme="true"]) #window-controls toolbarbutton:not([id="close-button"]):hover {
background-color: var(--lwt-toolbarbutton-hover-background, hsla(0,0%,70%,.4)) !important; }


/* Anpassung für Titelleistenschaltflächen */
[tabsintitlebar="true"] .titlebar-buttonbox-container { display: block; position: fixed; right:0; }
[tabsintitlebar="true"][sizemode="normal"] .titlebar-buttonbox-container { top: 1px; }
[tabsintitlebar="true"][sizemode="maximized"] .titlebar-buttonbox-container { top: 8px; }
#navigator-toolbox:not([style^="margin-top:"])[style=""][inFullscreen="true"] #window-controls { display: flex; position: fixed; top: 0; right:0; }
#navigator-toolbox:not([style^="margin-top:"])[style=""][inFullscreen="true"] #window-controls > toolbarbutton { display: inline; max-height: var(--tab-min-height); }


/* auf der rechten Seite Platz für die Schaltflächen der Titelleiste einfügen, damit die
Schaltflächen der Titelleiste und der Navigationsleiste nicht verdeckt werden */
[tabsintitlebar="true"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #nav-bar:not([inFullscreen="true"]) { padding-right: 139px !important; }
#navigator-toolbox[inFullscreen="true"] #nav-bar { padding-right: 109px !important; }


/* Mehrzeilige Tableiste */
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) * 5); /* Anzahl der Tabzeilen(Standard = 5 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%; }


/* Bei Überschreitung der angegebenen Zeilenanzahl, mit der Maus,
über die dann eingeblendetet Scrolleiste zur gewünschten Zeile wechseln */
scrollbox[part][orient="horizontal"] > scrollbar { -moz-window-dragging: no-drag; }


/* Drag-Bereich auf der linken und rechten Seite der
Tab-Leiste ausblenden - verstecken
Links und rechts → hbox.titlebar-spacer
links → hbox.titlebar-spacer[type="pre-tabs"]
rechts → hbox.titlebar-spacer[type="post-tabs"] */
hbox.titlebar-spacer
,
/* Ausblenden - Verstecken */
tabs tab:not([fadein]),
#toolbar-menubar[autohide="false"] + #titlebar #TabsToolbar .titlebar-buttonbox-container { display: none; }


/* Schriftart/Schriftgröße ändern */


.tabbrowser-tab .tab-label {
text-shadow: 1px 1px 0px #FFFFFF !important;
/* font-weight: 500 !important; */
font-size: 12px !important;
font-family: "Arial" !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;
}

/* Höhe der Tabs und Abstand nach unten*/
.tabbrowser-tab:not([pinned]) {
margin-left: 1px !important;
max-height: 25px !important;
margin-bottom: 4px !important;
}

/* Höhe vom Tabtext und Abstand nach unten*/
.tab-text,.tab-icon-image,.tab-close-button {
margin-top: -3px !important;
}

/* Feste Tabbreite */
.tabbrowser-tab:not([pinned]) {
min-width: 125px !important;
max-width: 125px !important;
}

/* Farbe der Tableiste hellgrau */
#titlebar {
appearance: none !important;
background: #eeeeee !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;}

tab.tabbrowser-tab:nth-child(n+1) > stack:nth-child(1) > vbox:nth-child(1){
border-top-right-radius: 20px !important;
border-bottom-right-radius: 20px !important;
}
   
/* Separatoren entfernt */ 
.tabbrowser-tab::after,
.tabbrowser-tab::before {
opacity: 0 !important;
border-image: unset !important;
border-image-slice: unset !important;
width: unset !important;
}

.tab-line {
  display: none !important;
}

.tab-background {
  border-top-style: 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.AGENT_SHEET);


gBrowser.tabContainer.clearDropIndicator = function() {
var tabs = document.getElementsByClassName("tab-background");
for (let i = 0, len = tabs.length; i < len; i++) {
tabs[i].style.removeProperty("border-left-style");
tabs[i].style.removeProperty("border-right-style");
}
}
gBrowser.tabContainer.addEventListener("dragleave", function(event) { this.clearDropIndicator(event); }, true);


gBrowser.tabContainer.on_dragover = function(event) {
this.clearDropIndicator();
var effects = this._getDropEffectForTabDrag(event);
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;
}
return;
}
}
let newIndex = this._getDropIndex(event, effects == "link");
let children = document.getElementsByClassName("tab-background");
if (newIndex == children.length) {
children[newIndex - 1].style.setProperty("border-right","2px solid red","important");
} else {
children[newIndex].style.setProperty("border-left","2px solid 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;
}
if (oldTranslateX && oldTranslateX != newTranslateX && !gReduceMotion) {
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

Scrollbalken funktioniert hier damit einwandfrei.

2002Andreas

Bei mir ist da rechts neben jeden Tab ein gerader Strich, kriegt man den irgendwie weg?
Habe einiges probiert, aber will mal wieder nicht. :wink:

Mfg.

Endor

FuchsFan

Zitat von Endor

Bei mir ist da rechts neben jeden Tab ein gerader Strich

Hallo Endor!

Ist das nicht der Strich, der beim Verschieben von Tabs rot ausleuchtet?

Ich habe das zusätzlich in das Script eingefügt, damit scheint dann alles sauber zu sein.

CSS

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

/* Separatoren entfernt */ 
.tabbrowser-tab::after,
.tabbrowser-tab::before {
      opacity: 0 !important;
      border-image: unset !important;
      border-image-slice: unset !important;
      width: unset !important;
    }
    
#tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
.tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
#tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
      content: unset !important;
      display: unset !important;
    }

/* obere Tab-Line entfernen */
#TabsToolbar .tabbrowser-tab .tab-line {
      display: none !important; 
    }

Alles anzeigen

Endor

Hallo FuchsFan

Klasse, es waren die Tabseparatoren.

Nun sieht es perfekt aus.

Edit: Habe eben Deinen ganzen CSS Code getestet, das sieht noch besser aus.
Prima. Vielen Dank.

Mfg.
Endor