Tabform

Horstmann

Zitat von .DeJaVu

Vermutlich bestehen die meisten Ursachen für eure CSS-Merkwürdigkeiten aus dem Zusammenwürfeln verschiedener Quellen, die man warum auch immer nicht zuordnen kann.

Nicht wirklich.
Der hiesige Basiscode von mir benutzt zwar alte Quellen v.a. von Aris ond MOG, ist dann aber angepasst worden damit man auch semi-transparente Tab Hintergründe benutzen kann, plus ein paar Kleinigkeiten. Ist aber generell immer noch das gleiche Prinzip.
Das neue Team sollte das Split Dingens ruck-zuck im Griff haben.

2002Andreas

Zitat von Mira_Belle

der Code für den Button.

Ändere bitte mal:

#new-tab-button

zu:

#tabs-newtab-button

und teste es dann.

Mira_Belle

Danke 2002Andreas aber leider hat das bei mir nicht geklappt!

Aber ich habe jetzt ein kleines JS, das genau das macht, was ich will.
Der Button ist wieder hinter dem letzten Tab.

JavaScript

// ==UserScript==
// @name           New Tab Button Inside Scrollbox
// @include        main
// ==/UserScript==

(function() {
    function moveNewTabButton() {
        const scrollbox = document.getElementById("tabbrowser-arrowscrollbox");
        const newTabBtn = document.getElementById("new-tab-button");
        
        // Prüfen, ob der Button bereits in der Scrollbox ist
        if (scrollbox && newTabBtn && newTabBtn.parentNode !== scrollbox) {
            // Button ans Ende der Scrollbox verschieben (nach den Tabs)
            scrollbox.appendChild(newTabBtn);
        }
    }

    // Initial ausführen, wenn DOM bereit ist
    if (document.readyState === "complete") {
        moveNewTabButton();
    } else {
        window.addEventListener("load", moveNewTabButton, { once: true });
    }
    
    // Sicherheitshalber: Wenn Firefox den Button zurücksetzt (z.B. bei Customization),
    // wird er automatisch wieder verschoben
    const observer = new MutationObserver((mutations) => {
        for (let mutation of mutations) {
            if (mutation.type === "childList" && 
                document.getElementById("new-tab-button")?.parentNode?.id !== "tabbrowser-arrowscrollbox") {
                moveNewTabButton();
            }
        }
    });
    
    const tabsContainer = document.getElementById("tabbrowser-tabs");
    if (tabsContainer) {
        observer.observe(tabsContainer, { childList: true, subtree: true });
    }
})();

Alles anzeigen

Fragt mich aber bitte nicht mit welcher KI ich das erstellt habe, es war wieder so ein battle, wo ich nicht weis, welche Modelle
da verwendet werden.

Mira_Belle

Misst

Das mit dem Skript klappt doch nicht so, wie gewünscht!
Der Fuchs lässt sich per JS nicht mehr neu starten, weil er irgendwie nicht sauber beendet wird,
und beim Verschieben von Tabs gibt es auch Ungereimtheiten.

Doof! Was hat sich Mozilla dabei gedacht, den Button fest an den rechten Rand zu tackern?
B.z.w. aus der Tableiste zu nehmen.

Sören Hentzschel

Zitat von Mira_Belle

Doof! Was hat sich Mozilla dabei gedacht, den Button fest an den rechten Rand zu tackern?
B.z.w. aus der Tableiste zu nehmen.

Was meinst du damit?

Mira_Belle

Wie erkläre ich es?
Der Button ist hier:

Code

html#main-window body toolbox#navigator-toolbox.browser-toolbox-background toolbar#TabsToolbar.browser-toolbar.browser-titlebar hbox.toolbar-items hbox#TabsToolbar-customization-target.customization-target toolbarbutton#new-tab-button.toolbarbutton-1.chromeclass-toolbar-additional

aber die Tabs hier:

Code

html#main-window body toolbox#navigator-toolbox.browser-toolbox-background toolbar#TabsToolbar.browser-toolbar.browser-titlebar hbox.toolbar-items hbox#TabsToolbar-customization-target.customization-target tabs#tabbrowser-tabs

vor Version 149 reichte dieses CSS, oder ähnlich, um den Button dynamisch hinter den letzten Tab zu bekommen.

CSS

    .tabbrowser-tab:not([pinned]) + #tabbrowser-arrowscrollbox-periphery {
        margin-left: -16px !important;  /* Abstand zum Tab */
        z-index: 2 !important;
    }

Das verstehe ich jetzt mal so überhaupt nicht mehr!
Ich habe ein gespiegeltes Testprofil, da ist der Button dynamisch hinter den Tabs.
Da muss ich mal schauen WAS genau da anders ist!

Sören Hentzschel

Der Code ändert doch nichts daran, an welcher Stelle irgendein Button erscheint. Du verschiebst damit lediglich ein Element um wenige Pixel zur Seite und änderst den Stacking Context, sprich worüber oder worunter das Element erscheinen würde, wenn weitere Elemente absolut positioniert wären. Und das sieht in Firefox Nightly immer noch gleich aus wie in Firefox ESR 140 (weswegen ich mir einen Test in Versionen dazwischen erspart habe). Ich sehe auch keinen Button, den Mozilla „fest an den rechten Rand getackert” hätte. Und der Button zum Öffnen eines neuen Tabs ist nach wie vor Bestandteil der Tableiste. Vielleicht passt irgendetwas in Zusammenhang mit deinem Script nicht mehr. Aber das, was du beschrieben hast, ist nichts, was Mozilla getan hat.

Mira_Belle

Sören Hentzschel Ich selber war DAS!
Habe die Tage doch am CSS herumgeschraubt, dabei habe ich das irgendwie verhundst.
Habe gerade ein Backup eingespielt und da ist der Button dynamisch.
Melde mich, wenn ich den Fehler gefunden habe.

Mira_Belle

Fehler gefunden

Es war das CSS zum Verschieben der Tableiste.
Anstatt:

CSS

    #TabsToolbar,
    .global-notificationbox,
    #tab-notification-deck,
    #notifications-toolbar {
        order: 1;
    }

    #TabsToolbar > :is(.titlebar-spacer,.titlebar-buttonbox-container) {
        display: none;
    }

    :root[customtitlebar] #toolbar-menubar:is([autohide=""],[autohide="true"],[collapsed]) ~ #nav-bar {
        > .titlebar-buttonbox-container {
            display: flex !important;
        }
        :root[sizemode="normal"] & {
            > .titlebar-spacer {
                display: flex !important;
            }
        }
        :root[sizemode="maximized"] & {
            > .titlebar-spacer[type="post-tabs"] {
                display: flex !important;
            }
        }
    }

Alles anzeigen

benutze ich jetzt doch wieder:

CSS

    #navigator-toolbox {
        position: relative !important;
        padding-bottom: calc( var(--tab-min-height) + 8px );                /*  44px */
    }
    
    #TabsToolbar {
        position: absolute !important;
        display: block !important;
    }

Horstmann

Zitat von Mira_Belle

Das mit dem Skript klappt doch nicht so, wie gewünscht!
Der Fuchs lässt sich per JS nicht mehr neu starten, weil er irgendwie nicht sauber beendet wird,
und beim Verschieben von Tabs gibt es auch Ungereimtheiten.
Doof! Was hat sich Mozilla dabei gedacht, den Button fest an den rechten Rand zu tackern?
B.z.w. aus der Tableiste zu nehmen.

#tabs-newtab-button ist nicht der #new-tab-button, dein Script und dein CSS macht am falschen Button rum.