Beiträge von FuchsFan

FuchsFan

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

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

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

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

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

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/userChr…LiteforFx.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

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

Zitat von Büssen

Nun ist wieder alles bei mir paletti.

Dann freue ich mich mit dir.

FuchsFan

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

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

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.

FuchsFan

Zitat von 2002Andreas

Siehe bitte mein gif, da passt das alles hier

Das passt hier auch (hatte ich schon vorher probiert), der Button sitzt genau richtig, aber dann kommen die Button bei Hover für die inaktiven Tabs alle mit nach unten, was sie aber nicht sollen.

FuchsFan

Zitat von 2002Andreas

Wo soll er denn hin?

Hallo Andreas !

Vom oberen Rand weiter nach unten. Dazu sei gesagt, wenn ich meinen älteren Code verwende, wo der Button ständig angezeigt wird (bei allen Tabs), da kann der Button immer verschoben werden.

In diesem Code habe ich ja für Hover den Platz reguliert, und dabei verschiebt sich auch im aktiven Tab der Button mit nach oben, und das sollte er nicht.

FuchsFan

Zitat von Büssen

Welche Farbe hast du für den Rahmen der Zeilen gewählt?

Hallo Büssen!

border: 1px solid dodgerblue !important;

FuchsFan

Hier RE: userChrome.js Scripte für den Fuchs (Diskussion) hatte ich über Tests mit dem Script berichtet, nun versuche ich alte Gewohnheiten mit einzubauen. Leider vertragen sich css-Code und Script nicht so richtig. Der Schliessen-Button im aktiven Tab lässt sich nicht in Position bringen, was beim inaktiven funktioniert. Nun habe ich schon Kombinationen probiert, aber nichts führt zum Ziel. Als Code verwende ich diesen:

CSS

  /**** Tabschliessen-Button ** nur zu sehen bei Mouseover ****/
.tab-close-button {
    display: none !important;
}

.tabbrowser-tab:hover .tab-close-button {
    display: block !important;
    height: 22px !important;  /* Höhe des Icons */
    width:  22px !important;  /* Breite des Icons */ 
    margin-left: -3px !important; /* Abstand vom linken Rand */
    margin-bottom: 6px !important; }  /* Abstand von unten */  
}

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

Alles anzeigen

FuchsFan

Zitat von harff182

damit ich das erreiche, was ich mir heute vorgestellt habe:

Prima!

Wenn du deinem gewählten Code dann noch padding hinzufügst, dann hast du diesen doppelten Rand. Der Abstand untereinander über px auswählbar.

CSS

.popup-internal-box, menupopup,
popup {
   -moz-appearance: none !important;
   background-color: white  !important;       
   border: 2px blue solid !important;
   border-radius: 10px !important;
   padding: 3px 3px 3px 3px ! important;
}

FuchsFan

Zitat von harff182

Danke, ich geh dann mal spielen

Vergiss Eimerchen und Schaufel nicht.

Hier findest du auch noch Codes, musst mal durchblättern. Hintergrundfarbe der Menüs/Lesezeichen/Kontextmenü - mit Hover-Effekt

FuchsFan

Zitat von FuchsFan

Erst einmal danke für den Code. Ich habe ihn ein wenig geändert und in das Script integriert, und zwar hinter Zeile 61 eingefügt.

Ich muss meine Aussage relativieren, weil ich jetzt festgestellt habe, dass bei Verwendung meiner Abänderung es zu Schwierigkeiten bei weiteren Anpassunge der Tabs kommt. Deshalb den Code von Andreas von hier RE: userChrome.js Scripte für den Fuchs (Diskussion) verwenden, der auch so in das Script übernommen werden kann ( ist im Beitrag darunter gezeigt). Die Werte für die Breite müssen getestet werden, damit auch bis zum rechten Rand alles ausgefüllt ist (siehe Bild).

Für jeden der seine Tableiste verschieben möchte, egal wohin, sind die angebotenen Scripte von Endor eine hervorragende Alternative. Ich habe mir das Script 03 noch einmal vorgenommen und die Tabs etwas "verschönert". In diesem zusätzlichen Code musste ich zwar Icons und Schrift in die richtige Position bringen, aber auf jeden Fall ist es machbar. Also, nur Mut !

Zitat von harff182

Gibts irgendwo ein CSS dafür, das ich mir zum rumtesten mal angucken kann?

Hier gibt es alles, du musst nur fragen.

Das Bild, dass du dort zeigst ist aus meinem Test-Fox, damit auch der Code für Popup und Kontext-Menüs (letzter Test). Hier ist er dann für dich zum Testen:

CSS

/* angewählte Zeilen erhalten farbigen Hintergrund (Lime) und blaue fette Schrift bei Hover */
menupopup.textbox-contextmenu :-moz-any(menu,menuitem)[_moz-menuactive="true"],
popupset > menupopup  :-moz-any(menu,menuitem)[_moz-menuactive="true"]:not([id^="BMB"]),
popupset > menupopup  menupopup :-moz-any(menu,menuitem)[_moz-menuactive="true"]:not([id^="BMB"]),
popupset >*:not(menupopup) menupopup :-moz-any(menu,menuitem)[_moz-menuactive="true"],
toolbarbutton:not(#bookmarks-menu-button):not(#alltabs-button):not(.bookmark-item)  menupopup :-moz-any(menu,menuitem)[_moz-menuactive="true"],
#PlacesToolbar :-moz-any(menu,menuitem)[_moz-menuactive="true"],
#main-menubar menupopup :-moz-any(menu,menuitem)[_moz-menuactive="true"],
#sourceeditor-context :-moz-any(menu,menuitem)[_moz-menuactive="true"] {
    -moz-appearance: none !important;
    background-color: lime !important;
    font-size: 10pt !important; /* Schriftgröße bei Hover */
    font-weight: bold !important;  /* fette Schrift */
    border:1px solid red !important; /* Umrandung bei Hover */
    color: #3300ff !important;
}


/* nichtanwählbare Zeilen erhalten farbigen Hintergrund (Blue) und dunkle graue fette Schrift bei Hover */
menupopup.textbox-contextmenu :-moz-any([disabled="true"])[_moz-menuactive="true"],
popupset > menupopup  :-moz-any([disabled="true"])[_moz-menuactive="true"]:not([id^="BMB"]),
popupset > menupopup  menupopup :-moz-any([disabled="true"])[_moz-menuactive="true"]:not([id^="BMB"]),
popupset >*:not(menupopup) menupopup :-moz-any([disabled="true"])[_moz-menuactive="true"],
toolbarbutton:not(#bookmarks-menu-button):not(#alltabs-button):not(.bookmark-item)  menupopup :-moz-any([disabled="true"])[_moz-menuactive="true"],
#PlacesToolbar :-moz-any([disabled="true"])[_moz-menuactive="true"],
#main-menubar menupopup :-moz-any([disabled="true"])[_moz-menuactive="true"],
#sourceeditor-context :-moz-any([disabled="true"])[_moz-menuactive="true"],
#lpt_site-context-menu :-moz-any([disabled="true"])[_moz-menuactive="true"] {
    background-color: #3399ff !important;
    color: #666699 !important;
    font-weight: bold !important;
} 


/* Anpassungen für die Zeilen */
#toolbar-context-menu, menuitem, menupopup, popup, menupopup > menu, menupopup menuitem, popup menu, popup menuitem{
    -moz-appearance: none !important;
    color: black !important;
    background:  #f8f8ff !important; /* Hintergrundfarbe */
    /* font-size:13px!important; */
    border: 1px solid dodgerblue !important;
    border-radius: 10px ! important;
    padding: 5px 5px 5px 5px ! important;
}

/* Verhalten der Popup-Fenster bei Hover */
menupopup > menu[_moz-menuactive="true"],
menupopup > menuitem[_moz-menuactive="true"],
popup > menu[_moz-menuactive="true"],
popup > menuitem[_moz-menuactive="true"]{
    -moz-appearance: none !important;
    border: 1px solid red !important; /* Umrandung bei Hover */
    background: #fff44f !important; /* Farbe der Zeilen bei Hover */
    border-radius: 10px ! important;
    font-weight: bold !important;
    color: blue !important;
}

/* Einstellungen für alle Popup-Fenster */
.popup-internal-box,
menupopup,
popup {
   -moz-appearance: none !important;
   width: 325px !important; /* Vorgegebene Breite der Popup-Fenster */
   background-color: white  !important; /* erste Hintergrundfarbe -ganzes Fenster- */
   border: 1px red solid !important;
   border-radius: 10px !important;
   padding: 3px 3px 3px 3px !important; /* Umrandung nach außen versetzt */
   font-family: /* verdana */ "helvetica"  !important;
   font-style: /* initial */  italic !important; /* Schriftstil */
   font-size: 11pt !important; /* Schriftgröße */
   /* font-weight: bold !important; */ /* fette Schrift */
}

#main-menubar > menu{
    font-size:10pt!important;}

}


/********** KONTEXT-MENÜ ***************************/

#context-navigation > menuitem > hbox.menu-iconic-left {
    -moz-appearance: none !important;
}
/* Hintergrund hinter den Icons */
#context-navigation {
    background: lightblue !important; /* Farbe */
    padding: 4px  4px 4px 4px !important; /* Ausrichtung */
    margin-bottom: 4px ! important; /* untere Anpassung */
    min-height: 50px !important; /* vorgegebene Höhe des Hintergrundes */
    max-height: 50px !important;
    color:     blue ! important; /* Farbe */
}

/************* SEPARATOREN *******************************/

/* Separatoren werden entfernt (Querlinien) */
.small-separator,
#organizeBookmarksSeparator,
#bookmarksToolbarSeparator,
#bookmarksMenuItemsSeparator {
    display: none !important;
}    

#contentAreaContextMenu menuseparator {
    display: none !important;
}

menupopup menuseparator {
    display: none !important;
}

Alles anzeigen

Der Code gehört in die userChrome.css.

FuchsFan

Zitat von milupo

Mit Speichern nach geht man diesem Konflikt aus dem Wege, das lässt sich für beides verwenden.

Und deswegen bleibt es bei mir so, danke für die Unterrichts-Minuten.

FuchsFan

Zitat von Endor

Soll ich es eventuell auf „Speichern nach“ ändern,
was sagt ihr?

Gute Idee, Endor, dann ist klare Linie drin.