shadow-root Scrollleiste Tabbar

.DeJaVu

Mal wieder was mit shadow, wo ich grad verzweifele, siehe Bild.

Ursache ist eine maximale Höhe voin 32px für die Tabs, das klappt auch, werden die Scrollbuttons sichtbar, bleibt das auch, aber die Scrollbuttons sind 37px hoch. Folgendes CSS greift nicht (der untere teil)

CSS

#TabsToolbar .tabbrowser-tab
    {
        max-height: 32px !important;
    }

#TabsToolbar toolbarbutton#scrollbutton-up,
#TabsToolbar toolbarbutton#scrollbutton-down,
#tabbrowser-arrowscrollbox::part(scrollbutton-up),
#tabbrowser-arrowscrollbox::part(scrollbutton-down)
    {
        padding: 4px 1px !important;
        max-height: 32px !important;
    }

Alles anzeigen

Da das ganze aber auch nur im kompakten Theme passieren soll, sollte es eigentlich so aussehen:

#TabsToolbar[uidensity="compact"]

oder so

:root[uidensity="compact"] #TabsToolbar

Das ursprüngliche Padding wird berechnet und hat hier in Pixel 6.5 0.5, weil da noch ein "border" mit 4px ist um das Element mit 16px

Also 16+ 2*6.5 + 2*4 = 37, bei mir sollen es nur 16+ 2*4 + 2*4 = 32 sein.

Entweder ist das CSS falsch oder ich scheitere mal wieder am shadow-root. Irgendwelche Ideen?

2002Andreas

Zitat von .DeJaVu

wo ich grad verzweifele

Hilft dir das evtl. etwas weiter?

CSS

#TabsToolbar .tabbrowser-tab
    {
        max-height: 32px !important;
    }

#tabbrowser-arrowscrollbox::part(scrollbutton-up), 
#tabbrowser-arrowscrollbox::part(scrollbutton-down) {
    margin-bottom: -9px !important;
    margin-top: -5px !important; 
}

.DeJaVu

nope, das weiss ich auch ohne auszuprobieren. Das CSS schafft diese shadow-root Hürde nicht, sonst hätte ich alle veränderten Einträge schon gefunden, wenn auch ausgegraut im schlechten Fall.

Nachtrag: eigentlich ist ::part schon richtig, wenn ich diesen Artikel lese:

https://css-tricks.com/styling-in-the…s-shadow-parts/

Und nein, auch margin klappt nicht.

Sören Hentzschel

::part wird nach wie vor nicht in der Datei userChrome.css unterstützt.

.DeJaVu

Also das ist ... nix neues. i break togehter... Ich bin nämlich grad mit so Klimmzügen wie :root{ --var} dran, die sehe ich, nur nicht ::part eben mit diesen var(--var). schaaaade.

BrokenHeart

Zitat von Sören Hentzschel

::part wird nach wie vor nicht in der Datei userChrome.css unterstützt.

Aber der CSS-Code von 2002Andreas funktioniert trotzdem, wenn man ihn in ein kleines JavaScript verpflanzt...

JavaScript

//    Script01.uc.js

(function() {

   if (location != 'chrome://browser/content/browser.xhtml') return;
       
    try {
        
        let cssIn =`

            #TabsToolbar .tabbrowser-tab
                {
                    max-height: 32px !important;
                }

            #tabbrowser-arrowscrollbox::part(scrollbutton-up), 
            #tabbrowser-arrowscrollbox::part(scrollbutton-down) {
                margin-bottom: -9px !important;
                margin-top: -5px !important; 
            }
        `;            

        let sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
        let uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(cssIn));
        sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);
    
    } catch(e) { };        
   
})();

Alles anzeigen

.DeJaVu

Wenn ich das in Violentmonkey nutzen kann, gerne, aber ich vermute, VM darf dort nicht wirken

Und userscripte kommen hier nicht in Frage, das ist ein Rattenschwanz, den ich nicht haben will, sorry.

.DeJaVu

Manchmal stolpert man über Lösungen:

Beitrag

RE: Fx 133 > Tableiste unten per CSS-Code, oder per Skript.

[…]

Teste bitte:

(Quelltext, 3 Zeilen)

Edit:

Code geändert, siehe Beitrag Nr. 253

2002Andreas

12. Juni 2021 um 17:15

Das folgende funktioniert:

CSS

#TabsToolbar .tabbrowser-tab
{
    max-height: 32px !important;
}

toolbarbutton#scrollbutton-up,
toolbarbutton#scrollbutton-down
{
    padding: 4px 1px !important;
    max-height: 32px !important;
}

Alles anzeigen

Jetzt müsste ich es noch hinbekommen, dass es auch nur im compact mode wirkt (siehe oben), denn in den anderen Dichten sieht das nicht aus.

Und das funktioniert jetzt auch, mit Umweg über var()

(die obige Lösung funktioniert nicht)

CSS

:root[uidensity="compact"] {
    --scroll-padding-y: 4px !important;
    --scroll-padding-x: 1px !important;
    --scroll-max-height: 32px !important;
}

#TabsToolbar .tabbrowser-tab
{
    max-height: var(--scroll-max-height) !important;
}

toolbarbutton
{
    padding: var(--scroll-padding-y) var(--scroll-padding-x) !important;
    max-height: var(--scroll-max-height) !important;
}

Alles anzeigen

Nachtrag - danke an BrokenHeart wegen toolbarbutton

2002Andreas

Zitat von .DeJaVu

Irgendwelche Ideen?

Ich bin mir nicht sicher ob du das so meinst

Wenn ja, dann habe ich nur padding gegen margin ausgetauscht.

.DeJaVu

Es gibt eine kleine Änderung, weil ich gestern anderweitig was bemerkt hatte mit angepinnten Tabs (bei mir gibt es rechts und links in der Tableiste diesen freien Platz nicht)

CSS

/* tableiste max height + scroller */

:root[uidensity="compact"] {
    --scroll-padding-y: 4px !important;
    --scroll-padding-x: 4px !important;
    --scroll-max-height: 32px !important;
}

#TabsToolbar .tabbrowser-tab
{
    max-height: var(--scroll-max-height) !important;
}

toolbarbutton#scrollbutton-up,
toolbarbutton#scrollbutton-down
{
    padding: var(--scroll-padding-y) var(--scroll-padding-x) !important;
    max-height: var(--scroll-max-height) !important;
    border: none !important;
    border-radius: 0 !important;
}

#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab]
{
  /* Add a gap between the last pinned tab and the first visible tab */
  margin-inline-start: 0 !important; /* .tabbrowser-tab sets margin: 0 !important; */
}

#tabbrowser-arrowscrollbox > toolbarbutton#scrollbutton-up:hover,
#tabbrowser-arrowscrollbox > toolbarbutton#scrollbutton-do:hover
{
    background: #888 !important;
}

Alles anzeigen

Auf diese lange Zeile (mit pinned) bin ich nur durch eine Suche in der browser.css gekommen, Firefox zeigt mir das in den Browser-Werkzeugen kein Stück an.

Und wie man sehen kann, in den Scrollbuttons so ziemlich alles änderbar.