Das hier funktioniert nicht mit CSS, weil .toolbarbutton-icon diese Klasse eben nicht zugewiesen hat:
Ich denke, dass du hier ein bisschen kompliziert denkst. Ergänze doch einfach die CSS-Regel, die dir fehlt. Du kannst schließlich nicht nur Selektoren verwenden, die es im originalen CSS gibt. Wozu braucht es da überhaupt JavaScript?
Danke für die Antwort; aber wie kann man zB für .toolbarbutton-icon eine hover spezifische Regel mit CSS hinzufügen?
Attribute oder sowas in der Art? 
Das hat mich schon lange interessiert; kann man einem Element eine Klasse oder auch Attribute hinzufügen mit Javascript?
Solche die schon existieren in Firefox oder generell, nichts Erfundenes.
Im speziellen Fall als Beispiel die Pseudoklasse :hover.
Das hier funktioniert mit CSS, weil toolbarbutton im Firefox JS die Klasse "hover" (oder ":hover" ?) zugewiesen hat:
toolbarbutton:hover .toolbarbutton-icon {
background-color: red !important;
}Das hier funktioniert nicht mit CSS, weil .toolbarbutton-icon diese Klasse eben nicht zugewiesen hat:
.toolbarbutton-icon:hover {
background-color: red !important;
}Das kam mir schon öfters in die Quere, weil ich gerne mal mit Buttons spiele zum Verbreitern etc., aber die Hoverfunktion nur auf den ganzen Button, nicht aber nur auf das Icon anwenden kann.
In vielen Javascripts die wir hier teilen, sehe ich wie class oder Attribute zugewiesen werden für selber gebaute Elemente, komme aber nicht dahinter was der korrekte Code wäre in so einem Fall.
Kann man da was machen?
Warum unten?
Werden die Einträge nicht von oben nach unten eingelesen?
CSS liest von unten nach oben, wenn ich mich nicht ganz vertue.
Wie auch immmer, auf jeden Fall hat eine Regel die weiter unten steht Präferenz über die darüber.
Wenn du zB das in eine CSS Datei schreibst (beides zusammen) :
#nav-bar {
background-color: green !important;
}
#nav-bar {
background-color: red !important;
}...ist deine Navbar rot.
Wenn du beide Farben vertauschst, ist deine Navbar grün.
Den gleichen Spass kannst du mit importierten CSS Dateien probieren; die untere importierte Datei hat Präferenz über die darüber; Einträge direkt in der userChrome.css haben Präferenz über alle.
Wenn du 2 Test CSS Dateien anlegst, und den Navbar Code von oben reinschreibst ( diesmal jeweils eine Variante rot oder grün in eine Datei ), dann kannst du das einfach testen.
userchrome.css :
@import url("farbe2.css");
@import url("farbe1.css");
#nav-bar {
background-color: lightblue !important;
}Deshalb habe ich für zB für schnelle Tests eine extra CSS Datei, die in der Importierliste ganz unten steht; damit kann ich Regeln in den darüber eingetragenen importierten CSS Dateien schnell überschreiben.
Alles anzeigen________________________________________________________
Elchtest nicht bestanden!
Die import-anweisungen müssen zwingend an den Anfang!
Es ist nicht egal
Variablen, die auf "Seiten" wie z.B. about:logins wirken sollen, müssen in die userContent.css
Sie wirken sich nicht auf Änderungen, die unter userChrome.css bzw. die per @import url eingebundenen
Änderungen aus!
Andersherum verhält es sich genau so
Frage geklärt.
Ich war mal davon ausgegangen, dass der Unterschied zwischen userChrome.css und userContent.css klar ist. 
Und ja, @import Regeln müssen immer ganz oben stehen, vor allen CSS Regeln.
Hallo 2002Andreas , vielen Dank für das Script.
Ich habe damit allerdings folgendes Problem gehabt:
Ich habe ständig zwei Fenster FF offen. Nur in einem wurde der Button wie gewünscht verschoben. Vermutlich ein Problem mit dem Timing beim FF Programmstart. Um das zu beheben, lasse ich den Timer im Script mit einem Delay von 100 ms laufen.
Zeile 37 lautet jetzt also }, 100);.
Damit funktioniert es zuverlässig.
Hmm, das Problem konnte ich hier nicht feststellen, bei mir lässte er sich in allen Fenstern verschieben, auch ohne die Änderung.
Aber Hauptsache es klappt. 
In das Überhangmenü - dahin wollte er aber nicht...
Hier habe ich aber ein Problem: mit dem Erweiterungsbutton im Überhangmenü öffnet sich das Aufklappfenster der Erweiterungen nur ganz kurz, wenn ich auf den Button klicke, und schliesst sich dann sofort wieder, zusammen mit dem Überhangmenü Fenster.
Ist der Button in der Navbar, funktioniert das Popup ganz normal.
Geht das denn bei dir?
Alles anzeigenSpielt die Struktur der Ablageorte im System eine Rolle?
Und wie ist das dann beim Einbinden der Dateien in der userChrome.css?
Sollte, muss man nicht da eine Reihenfolge beachten?
Macht es einen Unterschied, wenn z.B. erst zwanzig andere CSS-Dateien "eingelesen" werden
und dann erst die Variablen dazu?
im Speicher?
Gute Frage!
Da müsste vielleicht mal jemand wie Sören Hentzschel was dazu sagen.
Meine Vermutung wäre, dass idealerweise die CSS Datei mit den Hauptvariablen unten in der @import Liste von CSS Dateien steht, und damit zuerst eingelesen wird und Vorrang hat.
Oder direkt in der userChrome.css, die Vorrang hat vor importiertem CSS.
Was Ablageorte angeht, da bin ich überfragt - meine CSS Dateien sind alle im chrome Ordner.
Meine Vermutung wäre aber auch, dass es komplett schnuppe ist.
Ich benutze einige Variablen hier kreuz und quer durch meine importierten CSS Dateien, vor allem zum Testen, und hatte noch nie ein Problem.
Alles anzeigenBeispiel aus dem Link im obigen Link:
:root {--tab-line-color: #f9f9f9 !important;}
Das wird ab Firefox 60 nicht mehr funktionieren. Das müsste dadurch ersetzt werden:
#tabbrowser-tabs {--tab-line-color: #f9f9f9 !important;}
D.h., :root funktioniert evtl. nicht mehr überall.
Ich glaube da gibt es aber auch einen Unterschied zwischen Variablen die Fx selber benutzt, and welchen die man selber definiert.
Fx überschreibt seine eigenen :root Variablen in einigen Fällen, um sie je nach Einsatzort/Element anzupassen.
Zb ein Button in der tabbar und einer in der Lesezeichenleiste kann die gleiche Variable benutzen, wird aber für beide jeweils anders definiert.
D.h. für mein Verständnis, es ist am Besten diese Deklarationen direkt schon in der userChrome.css zu machen,
wenn sie definitiv "global" wirken sollen.
Denn wenn die Variablen in zig Dateien verstreut sind, blickt man da ja gar nicht mehr durch.
Richtig?
So wie ich sie benutze, scheint es egal zu sein wo du die Definition/Deklaration reinschreibst, sie wirken immer global - meiner beschränkten Erfahrung nach.
Doppelt solltest du sie natürlich nicht anlegen, dann ginge es nach Präferenzkette.
Zur Übersichtlichkeit kannst du natürlich alle in die userChrome.css reinschreiben, oder in eine separate importierte CSS Datei.
Toll, jetzt hast Du mich aber verunsichert!
Heißt das jetzt ich kann in allen anderen CSS-Dateien auch z.B. var(--uc-color-black-light) anstatt den Farbwert einsetzen?
Ist es dann nicht besser die Deklaration der Variablen direkt in der userChrome.css und eventuell,
wenn nötig auch in der userContent.css zu machen?
Solange du die Variable nicht anderweitig überschreibst, sollte eine einmal definierte Variable - in irgendeiner aktiven CSS Datei - für dein gesamtes CSS gelten, egal wo du sie reinschreibst, und in welcher Reihenfolge sie in userChrome.css importiert werden.
Also sollte sowas wie:
:root {
--uc-color-black-light: pink;
}...über dein gesamtes CSS als Variable verfügbar sein, mit zB color: var(--uc-color-black-light) !important; .
Funktioniert so jedenfalls bei mir.
Ob das auch für Java Scripts gilt, in denen solche CSS Variablen definiert werden, weiss ich allerdings nicht.
Hier ist ein Thema in dem wir etwas damit rumgespielt hatten; ist am Anfang etwas verwirrend, bietet aber eine Menge Möglichkeiten.
im chrome-Ordner müßte dies die Datei sein, oder?
Funktioniert auch bei mir in 115.3esr .
Mir ist nicht bekannt, dass es in CSS auch Variablen oder ähnliches gibt.
das sind die im Skript,
Das hier kennst du aber doch bestimmt, bei deiner Erfahrung?
Ist super praktisch, und man kann auch einiges mit Tricksen.
Es würde Sinn machen mal den CSS Code oder ein Script zu sehen, was immer du dafür benutzt....
Oder so etwas, evtl. einfacher?
Den Text gibt's ja schon, ist nur versteckt.
#bookmarks-menu-button {
list-style-image: url("chrome://global/skin/icons/folder.svg") !important;
}
:root:not([customizing]) #bookmarks-menu-button label {
display: flex !important;
}Mich wundert nur
Weil er das Lesezeichen-Menü selber auf die Lesezeichensymbolleiste über die Bibliothek verschoben/kopiert hat.
Ah, verstehe - man lernt nie aus, hatte ich noch nie probiert, danke. 
Also könnte Shelly im Prinzip das Ganze rückgängig machen, Lesezeichen-Menü Button rechts plazieren, und mit CSS Text einblenden und das Icon ändern?
Mal schauen.
Den Lesezeichen Menü Button kannst du in Symbolleiste anpassen nach rechts in die Lesezeichenleiste ziehen, falls das die Frage war.
Mich wundert nur dass bei dir der Button Text zeigt, und dass er überhaupt linksbündig zu den anderen Lesezeichen sitzt.
Falls du CSS Modifikationen in dem Bereich benutzt, solltest du die natürlich teilen.
Eine einfache CSS Variante ohne Script
Ich habe dieses CSS verwendet, es fügt Spaces hinzu, aber keine Separators. Das erwähnte Skript fügt sowohl Spaces als auch Separators hinzu, und im Customize Toolbar Menu sind sie so, wie sie im alten klassischen Firefox waren.
Der CSS Code kann beides machen, aber das Script macht vermutlich beides ohne extra manuellen Aufwand, und ist in der Anwendung bestimmt viel eleganter.
Mir gefällt die CSS Lösung vor allem, weil man kein aufwendiges Java-Script braucht, was eher Kompatibiltätsprobleme und evtl. Leistungseinbußen erzeugen könnte als reines CSS.
Benutzen tue ich es momentan so oder so nicht, war nur eine Fingerübung.
Grosse Worte!
Eine einfache CSS Variante ohne Script werfe ich in den Raum, gerade nochmal aktualisiert.
Eine aktualisierte Version von #7; die für einen verfügbaren Buttons muss man sich wieder raussuchen.
/* Fake button spacer / separator #3a */
/* mark fake separator buttons in customize window */
toolbarpaletteitem[place="toolbar"] :is(#library-button,
#home-button,
#characterencoding-button,
#sync-button,
#save-to-pocket-button) {
margin-inline: 4px !important;
background-color: powderblue !important;
outline: 1px solid orange !important;
outline-offset: -1px !important;
}
toolbarpaletteitem :is(#library-button,
#home-button,
#characterencoding-button,
#sync-button,
#save-to-pocket-button) .toolbarbutton-icon {
margin-inline: 4px !important;
background-color: lightblue !important;
outline: 2px solid orange !important;
outline-offset: 4px !important;
}
/* fake separator buttons */
:is(toolbarpaletteitem[place="toolbar"], toolbar) :is(#library-button,
#home-button,
#characterencoding-button,
#sync-button,
#save-to-pocket-button) .toolbarbutton-icon {
display: none !important;
}
:is(toolbarpaletteitem[place="toolbar"], toolbar) :is(#library-button,
#home-button,
#characterencoding-button,
#sync-button,
#save-to-pocket-button) {
pointer-events: none !important;
-moz-window-dragging: drag !important;
/* width */
width: 88px !important;
/* adjust height */
margin-block: 5px !important;
/* use for fake separator, comment out for fake spacer */
padding: 0 !important;
background-color: red !important;
}Zum 10000sten Mal: Ricky Lee Jones' Pop Pop, auf CD.
Alles anzeigenDas Theme heißt transparent orange. Wenn ich es deaktiviere, verändert sich die Anzeige nicht.
Dies Userchrome im Wurzelordner ist diese:
#TabsToolbar {
position: absolute;
display: block;
bottom: 0;
width: 100vw;
background-clip: padding-box;
color: var(--toolbar-color);
}
#tabbrowser-tabs {
width: 95vw;
}
#navigator-toolbox {
position: relative;
padding-bottom: calc( var(--tab-min-height) + 8px );
}
.titlebar-buttonbox-container {
position: fixed;
right: 0;
visibility: visible;
display: block;
}
#TabsToolbar .titlebar-buttonbox-container,
#TabsToolbar #window-controls {
display: none;
}
/*...................Ab hier nur Privater Modus...................*/
/*Das lila Icon für privaten Modus oben rechts eingefügt*/
#main-window[privatebrowsingmode=temporary] #PanelUI-menu-button::before {
margin-left: 0px!important;
margin-right: 0px !important;
content: '' !important;
display: block !important;
width: 19px !important;
height: 19px !important;
background: url("chrome://global/skin/icons/indicator-private-browsing.svg") !important;
background-repeat: no-repeat !important;
background-position: 0px 2px !important;
background-size: 15px 15px !important;
}
/*Der neue zusätzliche Eintrag: Privater Modus unter dem Tab entfernt*/
#private-browsing-indicator-with-label {
display: none !important;
}
Was willst du mit dem Code erreichen, Tabs unten und in voller Breite?
Es würde schon helfen einen Screenshot zu sehen, der nicht bis zur Unkenntlichkeit angeschnitten ist.
Den Code an sich würde ich persönlich in die Tonne klopfen; das alte Ding geistert hier zwar schon ewig rum, aber ich glaube das geht besser.
Alles anzeigenIst ja peinlich, sorry für den falschen Schrägstrich.
Mir ist noch etwas anderes aufgefallen:
Ist Zeile 86 ein Überbleibsel aus einem anderen Button?
Danke für den Hinweis!
Ja, habe den Code zum Teil aus einem bestehenden anderen Code genutzt.
Diese Zeile kann gelöscht werden.
Nur habe ich keinen blassen Schimmer, ob dieses Skript nun auch unter Linux und/oder auf einem Mac läuft.
Funktioniert am Mac ohne die Zeile, besteht auch Elchtest!
