Beiträge von FuchsFan

FuchsFan · Mittwoch, 22:13

Zitat von Sören Hentzschel

ist meine Aussage eigentlich klar.

Ist alles klar, ich verzieh mich wieder.

FuchsFan · Mittwoch, 22:05

Zitat von Sören Hentzschel

In meinem Beitrag steht doch "mit der neuen Adressleiste".

Es ging nach deiner Aussage um den Code, denn der funktioniert sogar noch bis zur 77. Nur hier kommt dann die neue Adressleiste ins Spiel (mit Verbreiterung). Aber die Tage sollen ja gezählt sein, wo es dann auch nicht mehr wirken wird, so wie du und auch Andreas berichten.

FuchsFan · Mittwoch, 21:51

Zitat von Sören Hentzschel

Aber ich hab den Code mal eben in Firefox 75 ausprobiert und da entspricht das Ergebnis definitiv nicht mehr der ursprünglichen Idee.

Der Code macht immer noch das, wozu er gedacht war. Nur in Version 75 ist es erforderlich, dass unter about:config browser.urlbar.update1 auf false zu setzen ist.

CSS

/** Adressfeld die Ecken abgerundet **/


#urlbar {
border: 2px solid #5badff !important;
border-radius: 50px !important;
background-color: #d9ecfd ! important;
}

FuchsFan · 13. März 2020

Zitat von Sören Hentzschel

Es wäre nett, wenn du auch ein paar Worte dazu schreiben würdest,

Ich hatte eigentlich gedacht, dass das unmissverständlich ist. Das ist vom Patentamt (Europa), und zeigt das Patent auf auf den Coronavirus, Entwickler (drei Engländer), stehen auch dabei, sowie das einreichende Institut aus England.

FuchsFan · 13. März 2020

https://worldwide.espacenet.co…72319A1&called_by=epo.org

FuchsFan · 2. März 2020

BrokenHeart

Die letzten Tage habe ich mir deine Collection mal in Ruhe angesehen und auch durchprobiert. Du berufst dich ja auch auf die Scripte von Endor für mehrzeilige Tabreihen, die, obwohl ich sie persönlich nie voll ausnutzen werde, mir es doch sehr angetan haben.

Deine CSS-Codes mit den Scripten von Endor, was will man mehr.

So, was habe ich probiert?

Ich habe den CSS-Code aus 2.) genommen, dort die Zeilen 17 bis 47 entfernt. Gleich dazu noch, in dem Code gibt es zweimal den identischen Punkt "Tab Höhe", Zeile 5 bis 12 und Zeile 95 bis 102.

Dann habe ich die Scripte 01 und 03 für meine Zwecke vorbereitet. Dazu habe ich aus dem Script 02 den Absatz für die Scrollbar entnommen und ihn in die Scripte 01 und 03 eigearbeitet. Hier der Code aus Script 02:

Code

/* Mehrzeilige Tableiste mit Scrollbar */
    tabs > arrowscrollbox { display: block; }
    scrollbox[part][orient="horizontal"] {
        display: flex;
        flex-wrap: wrap;
        max-height: calc(var(--tab-min-height) * 3); /* 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: 32px; /* 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; }

Alles anzeigen

Wie in dem Script auch beschrieben sind die Basis 5 Tabreihen, dann die Scrollbar. Ich habe das auch auf 3 reduziert, kann nach Bedarf geändert werden.

Eventuell hast du ja Interesse daran, dir das auch noch mal anzuschauen. Das würde meiner Ansicht nach deine Sammlung hier noch komplettieren. Danke für das reichhaltige Angebot.

Hier ein Schnappschuss von Script 01:

hier von Script 03:

FuchsFan · 27. Februar 2020

Zitat von 2002Andreas

Dann musst du den CSS Code ändern.

Toll, Andreas, genau so habe ich mir das vorgestellt. Script und dazu dieser css-Code, passt wunderbar. Danke !

FuchsFan · 27. Februar 2020

Zitat von BrokenHeart

Bin mir nicht sicher, ob ich dich richtig verstanden habe

Doch, ich denke schon.

Erst einmal danke für deine Rückmeldung. Alles, was du da anführst, habe ich gewissenhaft gelesen und auch getestet. Auch den css-Code von Andreas, der funktioniert tadellos. Es ging mir allein um dieses kleine Script, um es auch ganz normal nutzen zu können (ohne mehrzeilige Tabreihen).

Den von dir eingestellten Code zur Ausblendung der Button-Box hatte ich in diesem Zusammenhang auch getestet, aber da trat das von mir geschilderte Problem auf.

Jetzt habe ich Folgendes gemacht, das Script eingesetzt, und den css-Code zusätzlich eingearbeitet. Dadurch habe ich links den Pfeil, rechts Neuer Tab. Das ist weiter nicht schlimm, denn ich kann bequem mit der Maus horizontal in der Tabreihe hin und her scrollen, obwohl mir rechts auch der Pfeil zusagen würde, dafür NewTab weg.

CSS

 #TabsToolbar > .titlebar-buttonbox-container {
display: none !important;
}
/* Buttons/Zwischenräume Ausblenden */
hbox.titlebar-spacer,
#alltabs-button,tabs tab:not([fadein]), 
[class="scrollbutton-down"] { 
    display: none; 
}

FuchsFan · 26. Februar 2020

Wenn ich das Script von hier RE: Mehrzeilige Tableiste für aktuelle FireFox-Versionen (71+) nutze, dann macht es auch das, was es soll. Wenn ich aber keine mehrzeilige Tabreihe nutze passiert das:

Ich habe zwar noch einen Code, der den Container rechts ausblendet, aber dann verschiebt sich die Tableiste über die Lesezeichen-Symbolleiste. Wie bekomme ich das rechts weg (minimieren/schliessen)?

FuchsFan · 25. Februar 2020

Zitat von Büssen

Da hat es mal wieder geklappt..Ich habe gerne die Testerei mit durchgeführt, aber mehrzeilige Tab-Leisten sind auch nicht so mein Ding.
Hat trotzdem Spaß gemacht!!

Hier wird niemandem etwas aufgezwungen, soviel habe ich hier mitbekommen. Wenn es dir nicht gefällt, dann eventuell einem Anderen.

Wie immer, jedem das Seine!

FuchsFan · 25. Februar 2020

Zitat von Büssen

In diesem Fall sind sie aber oben gelandet - auch erst nach mehreren Anläufen.

Also dann wage ich zu behaupten, dass deine Profile Schrott sind, oder andere Codes dagegen arbeiten. Denn das Script von Endor, und zwar die Version 03, verlagert die Tabbar unter die Lesezeichensymbolleiste, nie nach oben. Dafür ist das letzte Script, die Version 01 da.

FuchsFan · 25. Februar 2020

Da läuft was nicht rund.

Ich hänge dir mal ein anderes Script an, da sind die Tabs normal über der Urlbar. Das Script teste jetzt mal ohne den css-Code, da sind die Tabs wieder sehr schmal, aber zum testen reichts. strg + t, damit dann genügend Tabs geöffnet werden können, nach der zweiten Reihe sollte die Scrollbar rechts kommen.

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 72
// @author         Alice0775
// @version        2016/08/05 00:00 Firefox 48
// @version        2016/05/01 00:01 hide favicon if busy
// @version        2016/03/09 00:01 Bug 1222490 - Actually remove panorama for Fx45+
// @version        2016/02/09 00:01 workaround css for lwt
// @version        2016/02/09 00:00
// ==/UserScript==
"use strict";
MultiRowTabLiteforFx();
function MultiRowTabLiteforFx() {

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

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

    /* Verhindern, dass die Titelleistenschaltfläche der Registerkarte im Hochformat angezeigt wird */
    [tabsintitlebar="true"] #TabsToolbar > .titlebar-buttonbox-container,
    #main-window[inFullscreen="true"] #window-controls { display: block; }

   /* Scrollbar schaffen */
    tabs > arrowscrollbox { 
    display: block; }
    scrollbox[part][orient="horizontal"] {
    display: flex;
    flex-wrap: wrap; 
    overflow: visible !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    min-height: 30px !important; /* Tab-Höhe(28px) + 2px */
    max-height: calc( 2 * 30px ) !important;  /* Anzahl der Tabreihen * Minimal-Höhe */
    -moz-window-dragging: no-drag !important; }

    /* Drag-Bereich auf der linken und rechten Seite der
       Tab-Leiste auslenden - 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  */
    #alltabs-button,
    tabs tab:not([fadein]),
    [class="scrollbutton-up"],
    [class="scrollbutton-up"] ~ spacer,
    [class="scrollbutton-down"] { 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;
            }
            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

FuchsFan · 25. Februar 2020

Zitat von Büssen

Ich glaube immer noch, dass ich weiß, was ich mache.

Das habe ich nie angezweifelt, aber so wie es bei deinem Test abläuft, konnte ich das nicht anders erwarten. Ich habe natürlich auch nur den css-Code für sich getestet, und da war genau das gleiche Erscheinungsbild, sonst würde ich nie so etwas behaupten. Hast du mal überprüft, ob beim Kopieren/Einfügen des Scriptes was falsch gelaufen ist, weil ja das Script nicht arbeitet. Zeitmaschine ist nicht.

Ich bastele gerade am Script 01, es gibt überhaupt keine Probleme hier.

FuchsFan · 25. Februar 2020

Zitat von Büssen

Es bildet sich keine 2. oder 3. Reihe - die Tabs wandern alle nach links - und verschwinden klammheimlich!

Hallo Büssen!

Hexerei!!

Ja, mein Freund, was habe ich da geschrieben, das Script und den css-Code zusammen verwenden. Das , was bei dir passiert ist, geht nur, wenn du den css-Code allein nutzt.

Außerdem hatte ich alles zum Test angeboten, über Kleinigkeiten, wie runde Tabs z.B. kann man sich immer noch austauschen.

Und wenn du dir meine Bilder anschaust, dort habe ich nichts anderes gemacht, was ich auch beschrieben habe.

So, dann auf ein Neues!

FuchsFan · 25. Februar 2020

Hallo!

Das mein ursprüngliches Vorhaben scheiterte hatte ich hier RE: Schliessen-Button/Icon versetzen ja schon angedeutet. Nun habe ich aber nicht aufgegeben, und doch noch eine akzeptable Lösung gefunden. Diese möchte ich euch hier zum Test überlassen, damit ihr euch selbst eine Meinung dazu bilden könnt.

Was habe ich also gemacht?

Das Script von hier https://github.com/Endor8/user…ultiRowTabLiteforFx.uc.js genommen , und außerdem den größten Teil des css-Codes von BrokenHeart von hier Mehrzeilige Tableiste für aktuelle FireFox-Versionen (71+).

Das Script habe ich dahingehend umgebaut, dass ich den Code für die Scrollbar entfernt, und dafür den von BrokenHeart wieder eingebaut habe. Hier ist die Grundeinstellung, dass nach drei Tabreihen die Scrollbar einsetzt, was natürlich geändert werden kann. Sind mehrere Tabreihen geöffnet, so kann frei mit dem Mausrad gescrollt werden. Außerdem ,wie in der Script-Beschreibung angegeben, können Tabs mit der Maus verschoben werden.

Mit dem css-Code habe ich dann den Tabs noch einige Sachen hinzugefügt, wie z.B. Schliessen-Button erscheint nur bei Mouseover.

Aber, wie schon gesagt, der größte Teil davon stammt von BrokenHeart.

Getestet, Script zusammen mit css-Code, in Version 73.0.1 und im aktuellen Nightly 75 ( evtl. für Endor interessant, Scripte laufen auch hier).

Was noch wichtig ist, die Tab-Breite muss sich jeder im css-Code selbst anpassen, damit es für den jeweiligen Bildschirm passt.

So, dann hier das 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 73
// @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 Symbolleiste */
    [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 */
    #navigator-toolbox:not([style^="margin-top:"])[style=""][inFullscreen="true"] #window-controls,
    [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 { top: 0; }

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

       /* Scrollbar schaffen */
    tabs > arrowscrollbox { 
    display: block; }
    scrollbox[part][orient="horizontal"] {
    display: flex;
    flex-wrap: wrap; 
    overflow: visible !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    min-height: 30px !important; /* Tab-Höhe(28px) + 2px */
    max-height: calc( 3 * 30px ) !important;  /* Anzahl der Tabreihen * Minimal-Höhe */
    -moz-window-dragging: no-drag !important; }

    /* 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 */
    #alltabs-button,
    tabs tab:not([fadein]),
    #toolbar-menubar[autohide="false"] + #titlebar #TabsToolbar .titlebar-buttonbox-container,
    [class="scrollbutton-up"],
    [class="scrollbutton-up"] ~ spacer,
    [class="scrollbutton-down"] { 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;
            }
            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

....und hier der css-Code:

CSS

/*========================== TABBAR ANPASSEN ================================*/
/*====== mit Script zzzz-MultiRowTab_LiteforFx48.uc.js und css-Code =========*/
/*===========================================================================*/ 
/* Script von Endor: https://github.com/Endor8/userChrome.js/blob/master/Mutirowtabs/Firefox-72/03-MultiRowTabLiteforFx.uc.js  */
/* css-Code vorwiegend von BrokenHeart: https://www.camp-firefox.de/forum/thema/129551-mehrzeilige-tableiste-f%C3%BCr-aktuelle-firefox-versionen-71/  */

/* -----------------------------*/
/* Tab: Optische Anpassungen    */ 
/* -----------------------------*/
 
/* Tab-Höhe */
.tabbrowser-tab {
      min-height: 28px !important;
      max-height: 28px !important;
      vertical-align: bottom !important;
      margin-top: 1px !important;
      margin-bottom: 1px !important;
    }
    
/* Feste Breite  des einzelnem Tabs */
.tabbrowser-tab:not([pinned]) {
      min-width: 211px !important; /* hier die Breite der Tabs abstimmen */ 
      box-shadow: inset 0 0 4px 4px #87CEFA !important; /* innerer Schatten der Tabs */    
    }
    
/* aktiver Tab Höhe und innerer Schatten */
.tab-background[selected] {
      max-height: 27px!important;
      box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
    }            
      
/* nicht aktiver Tab Höhe bei Hover */
.tabbrowser-tab:hover {
      min-height: 28px!important;
      max-height: 28px!important;
    }

/* Icon im Tab versetzt */
#TabsToolbar .tab-icon-image {
      height: 16px !important; /* Höhe */
      width:  16px !important; /* Breite */
      margin-left: -2px !important;
      margin-bottom: 1px !important;
    }  

#tabbrowser-tabs :not([fokus]){
      opacity: 1 !important;
    }

/**** Schriftart/Schriftgröße ändern ****/
.tabbrowser-tab .tab-label {
      font-weight: 500 !important;
      font-size:   12px !important;
      font-family: "Verdana" !important;
      color: black !important;
    }
    
.tabbrowser-tab .tab-label:not(:-moz-lwtheme) {
      text-shadow: none !important; 
      color: black !important;
    }
    
.tabbrowser-tab .tab-label[selected="true"] {
      color: blue !important;  /* Schriftfarbe aktiver Tab */
      font-weight: bold !important;
      font-size:   12px !important; 
      font-family: "Verdana" !important; 
    }

/**** Schrift im Zentrum des Tabs ****/
.tab-label {
      -moz-box-flex: 1 !important;
      text-align: center !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-Seperatoren entfernen */
.tabbrowser-tab::after,
.tabbrowser-tab::before {
      opacity: 0 !important;
      border-image: unset !important;
      border-image-slice: none !important;
      width: 2 !important;
    } 

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

/* doppelte graue Linie unter der Tabs-Toolbar entfernt */
#nav-bar {
      box-shadow: none !important;
    }      
     
/* Tabschliessen-Button ** nur zu sehen bei Mouseover */
.tab-close-button {
      display: none !important;
    }
    
.tabbrowser-tab:hover .tab-close-button {
      display: block !important;
      color: red ! important;
    }
    
.tab-label-container[textoverflow][labeldirection=ltr]:not([pinned]),
.tab-label-container[textoverflow]:not([labeldirection]):not([pinned]):-moz-locale-dir(ltr) {
       mask-image: none !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 */
       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(030,144,255,1), rgba(152,245,255,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(151,225,225,0.66), rgba(000,255,255,0.66) ),  none !important; 
       box-shadow: inset 0 0 3px 3px #63b8ff ! important;
       min-height: 30px!important;
       max-height: 30px!important;
    }

.tabbrowser-tab:hover:not([selected="true"]) .tab-label { 
       color: red  !important; /* Schriftfarbe bei Hover */
       font-weight: bold !important; /* fette Schrift */
    }

/*--- 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(225,225,225,0.66), rgba(100,125,145,0.66) ),  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

FuchsFan · 24. Februar 2020

Andreas, ich glaube wir vergessen dieses Thema (obwohl es mich wurmt), da stimmt irgend etwas nicht im Zusammenwirken bestimmter Bestandteile. Jetzt habe ich mal nur das Original von hier genommen RE: Schliessen-Button/Icon versetzen, und mich dann bei BrokenHeart bedient, aus den Codes für mehrzeilige Tabreihen, dann einige Sachen für das Aussehen genommen und es mit dem Script von Endor getestet.

Und hier tritt dieser Effekt mit der Verschiebung der Schliessen-Button nicht auf, liegen alle auf einer Linie.

Wie immer, ich bedanke mich für deine Unterstützung.

FuchsFan · 24. Februar 2020

Zitat von Büssen

Nun ist wieder alles bei mir paletti.

Dann freue ich mich mit dir.

FuchsFan · 24. Februar 2020

Zitat von 2002Andreas

Sieht hier so aus damit:

Ich habe den ersten Code von hier RE: Schliessen-Button/Icon versetzen und habe dann den "Übeltäter" hinzugefügt, und schon versetzten sich die Icons in den nichtaktiven Tabs bei Hover.

Es waren nur diese beiden Codes und das Script beteiligt.

FuchsFan · 24. Februar 2020

Zitat von 2002Andreas

Ansonsten funkt dir etwas anderes dazwischen

Ja, nun habe ich den Original-Code genommen, ohne Tab-Veränderungen, und da liegen alle Button auf gleicher Linie.

CSS

.tab-close-button {
display: none !important;}
.tabbrowser-tab:hover .tab-close-button {
display: block !important; }
.tab-label-container[textoverflow][labeldirection=ltr]:not([pinned]),
.tab-label-container[textoverflow]:not([labeldirection]):not([pinned]):-moz-locale-dir(ltr) {
mask-image: none !important;}

Dann auf die Pirsch, einer ist's gewesen. Danke bis hierher Andreas, eventuell brauche ich dich dazu noch mal.

Zitat von 2002Andreas

Ansonsten funkt dir etwas anderes dazwischen

Das ist der Übeltäter, was passt da nun nicht?

CSS

/* inaktiver Tab Rand Stärke und Farbe */
.tab-background[selected="true"],
.tabbrowser-tab:not([selected="true"]) {
    border: 1px solid #4682B4 !important;
    -moz-box-flex: 0 !important; }

FuchsFan · 24. Februar 2020

Zitat von 2002Andreas

Dann sprich die einzeln an:

Für Hover (inaktive Tabs) genau richtig, aber es tritt dann wieder der Effekt auf , dass im aktiven Tab der Button wieder mit die Position verlagert.

Beiträge von FuchsFan

FF75 - Adresszeile nicht aufzoomen

FF75 - Adresszeile nicht aufzoomen

FF75 - Adresszeile nicht aufzoomen

SARS-CoV-2 (CoViD-19) & Veranstaltungen

SARS-CoV-2 (CoViD-19) & Veranstaltungen

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

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

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

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

Schliessen-Button/Icon versetzen

Schliessen-Button/Icon versetzen

Schliessen-Button/Icon versetzen

Schliessen-Button/Icon versetzen

Schliessen-Button/Icon versetzen

Schliessen-Button/Icon versetzen

Schliessen-Button/Icon versetzen

userChrome.js Scripte für den Fuchs (Diskussion)

Schliessen-Button/Icon versetzen

Schliessen-Button/Icon versetzen

Schliessen-Button/Icon versetzen