[Fx71 - Win10Pro-64bit] Wie Scrollbutton in der Tableiste einfärben?

Ich denke, dass wird schwierig werden, da wir hier das Problem mit den gekapselten Shadow-Roots  haben. D.h. Die ScrollButtons sind als quasi abgeschlossenes Custom-Element definiert. In diesem Fall ist die Shadow-Root zwar offen und besitzt auch ein part Atribute, kann aber über die userChrome.css nicht angesprochen werden . In der Entwicklungsumgebung funktioniert das Ändern (z.B der Farbe) ohne Probleme. Ob es da irgendwelche Tricks gibt oder ob man da was über JS machen kann, weiß ich nicht.

Bei mir scheint es aber mit:

.scrollbutton-up, .scrollbutton-down {
color: white !important;
background-color: darkgray !important;
}

zu funktionieren.

Zitat von milupo

Bei mir scheint es aber mit:

[...]

zu funktionieren.

Ja, das stimmt. Wenn man die Klassen '.scrollbutton-up' ,'.scrollbutton-down' global anspricht, dann geht es. In diesem Fall wohl auch ohne Seiteneffekte (konnte zumindest keine finden). Ich denke, dass Shadow-DOM wurde aber gerade deswegen entwickelt, um gleiche IDs und Klassennamen zu kapseln, damit sie nicht plötzlich etwas verändern, was man nicht verändern will. Wenn irgendwo anders die gleichen Bezeichner verwendet werden für Scrollbuttons, dann wären die jetzt auch weiß/dunkelgrau.

Aber wie gesagt, in diesem Fall funktioniert es wohl sehr gut und daher dürfte sein Problem mehr oder weniger gelöst sein.

Das stimmt schon, aber Klassen sind nun mal dafür da, an mehreren Stellen im Code verwendet zu werden. Mozilla hätte ja auch verschiedene IDs verwenden können, die sind auf jeden Fall eindeutig. Andererseits: Wer CSS-Anpassungen vornimmt, muss wissen, worauf er sich einlässt. Da ist ständig alles im Fluss. Es kann sein, dass nach ein paar Nightly-Updates das kommt, was gebraucht wird.

Der Sinn von Web Components ist die Kapselung zwecks Wiederverwendbarkeit von Komponenten und Vermeidung, dass sich Styles auf andere Elemente auswirken. Das kann man nicht damit gleichsetzen, einem Element einfach nur eine ID zu geben.

Ich frage mich bloß, warum ich dann überhaupt diese starke Kapselung (sprich Shadow-DOM) seitens Mozilla anwende, wenn nicht deswegen, weil ich bei immer komplexer werdenden Projekten auf Nummer sicher gehen will und eben den Gültigkeitsbereich meiner Bezeichner künstlich einschränke. Das ist ja im Prinzip das gleiche wie bei namespace-Blöcken. Dass die IDs wirklich überall auf jeden Fall eindeutig sind, muss nicht zwingend sein. Da ich ja davon ausgehe, dass sie bei den FF-Entwicklern über part() angesprochen werden, was ja leider in der userChrome.css so nicht funktioniert.

Zitat von BrokenHeart

Ich frage mich bloß, warum ich dann überhaupt diese starke Kapselung (sprich Shadow-DOM) seitens Mozilla anwende

Das waren vorher XBL-Bindings. Das ist quasi der Vorläufer der Custom Elements. Am Konzept hat sich nicht wirklich etwas geändert, nur die Technologie.

Eine Sache verstehe ich überhaupt nicht, wenn ich den Code von milupo in die Entwicklungsumgebung einfüge, dann funktioniert er nicht, in der userChrome.css schon.

Außerdem scheint es sich doch bei den Pfeilen um svg-Grafiken zu handeln und die könenn doch nur über 'fill' umgefärbt werden, und nicht über 'color:'

So wie ich das sehe, treffen wohl die SVG-Dateien hier nicht zu, sondern GIF-Dateiein, die in der Datei scrollbar.css festgelegt sind:

chrome://global/skin/scrollbox.css

Die SVG-Datei ist den Selektoren .tabbrowser-arrowscrollbox::part(scrollbutton-up) und .tabbrowser-arrowscrollbox::part(scrollbutton-down) zugewiesen. Und da hast du dann auch recht.

Zitat von milupo

So wie ich das sehe, treffen wohl die SVG-Dateien hier nicht zu, sondern GIF-Dateiein, die in der Datei scrollbar.css festgelegt sind:

chrome://global/skin/scrollbox.css

Die SVG-Datei ist den Selektoren .tabbrowser-arrowscrollbox::part(scrollbutton-up) und .tabbrowser-arrowscrollbox::part(scrollbutton-down) zugewiesen. Und da hast du dann auch recht.

Ich glaube nicht, dass die Bilddateien aus chrome://global/skin/scrollbox.css kommen. Schau dir da mal die gifs an, die sehen ganz anders aus und sind winzig ( ich glaub, die sind eher für scrollbare Menü-Popups gedacht). Auch bei scrollbutton-down / scrollbutton-up werden wohl die svg-Dateien genommen. Sonst würden die Pfeile beim Vergrößern nicht so aussehen:

Ich versteh die ganze Sache ehrlich gesagt überhaupt nicht mehr. Da die Shadow-DOM Geschichte für die weitere Zukunft der userChrome-Anpassungen wichtig ist, wäre es schön, die Thematik noch einmal prinzipiell und technisch zu diskutieren.

Vielleicht besser in einem eigenen Thread...