Ich wäre auch verbunden, wenn die Nebendiskussion über "Shadow-Dingens" woanders weitergeführt würde
Was soll diese Bemerkung? Ist dir klar, dass es mit dem entsprechenden CSS-Code zusammenhängt? Bloß, weil du das nicht verstehst und alles perfekt auf dem Silbertablett haben willst, verzichten wir nicht auf Diskussionen, die notwendig sind.
Ich halte das auch für keine Nebendiskussion, ganz im Gegenteil. Der betroffene Code ist Teil des Shadow DOMs. Und die von mir gezeigte „Lösung“ ist so unspezifisch, dass es ausnahmslos jedes slot-Element (welches wiederum nur im Shadow DOM existiert) betrifft. Es ist nicht absehbar, was für unerwartete Konsequenzen das hat. Deswegen war ja auch meine dringende Empfehlung, meinen Code eben nicht einfach so in die userChrome.css zu schreiben, sondern das näher zu spezifizieren, wofür eine andere Methode erforderlich ist.
Ich wäre auch verbunden, wenn die Nebendiskussion über "Shadow-Dingens" woanders weitergeführt würde, auch das Design von Scrollbuttons ist für mich nicht relevant. Danke!
Eine Option für das Ansprechen deiner Tabs ist für dich aber relevant, was der Sinn der Diskussion war.
Du musst nicht kapieren wie das alles funktioniert, aber solltest dann evtl. nicht entscheiden wollen was relevant ist und was nicht.
Was soll diese Bemerkung?
Ergänzend dazu:
Ich empfehle hier wirklich dringend, den Weg über userChromeShadow.uc.js zu gehen
Ich habe gerade festgestellt, dass ich eine falsche Vorstellung vom Status der userChromeShadow.css hatte. Für mich war das analog der userChrome.css eine CSS-Datei, die direkt von Firefox eingelesen wird. Aber der Inhalt wirkt nur, wenn ich die Datei in die userChrome.css importiere.
Deswegen war ja auch meine dringende Empfehlung, meinen Code eben nicht einfach so in die userChrome.css zu schreiben, sondern das näher zu spezifizieren, wofür eine andere Methode erforderlich ist.
Ich nutze die userChrome.css nicht für das Eintragen von CSS-Code, siehe #46. Hier wird jeder CSS-Code im Unterordner CSS vom Chromeordner abgelegt und via UserCSSloader in den Fuchs gespritzt, möglich, dass dies irgendwann nicht mehr geht, dann werde ich mich mit der Shadow-Geschichte beschäftigen müssen.
Habe gerade das Skript Shadowbutton.uc.js wiedergefunden – zumindest habe ich es so benannt –, dass die userChromeShadow.css einliest und dafür ein Symbol in der Symbolleiste abgelegt. Ich habe mal versucht, es etwas zu ESMfizieren:
// ruft die Datei userChromeShadow.css direkt auf per neuem Shadowbutton.uc.js
(function() {
if (location != AppConstants.BROWSER_CHROME_URL) return;
try {
ChromeUtils.defineESModuleGetters(this, { CustomizableUI: "resource:///modules/CustomizableUI.sys.mjs",});
CustomizableUI.createWidget({
id: "Shadowbutton",
defaultArea: CustomizableUI.AREA_NAVBAR,
removable: true,
label: "Shadowbutton",
tooltiptext: "userChromeShadow.css",
onClick: function() {
var dir = Services.dirsvc.get('UChrm', Ci.nsIFile);
dir.append('userChromeShadow.css');
dir.launch();
},
onCreated: function(aNode) {
aNode.style.listStyleImage = 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAA3NCSVQICAjb4U/gAAACGElEQVQokYWRT0iTcRjHv7+3vW5rbrmxvSZjEjmITupldrEOUWF0ELzULQhhlaekMlIoDwVBHYzq0MVAWkVg3QrSsiiYh4ZRk7nm2DvXnG3p3j9u794/vw5bK8Pyc3j4Pjx84fs8D6GUyg+78Qs5LwGwuRvlvFSv+APTbLqyKy8polLtd1z4IkYm1wDHsX0fx4f39A6mF97ZwmPVqdluJmFe4a5asZHy8TuWR2exGSTMK8nonN3KbDr+C7FkkDCvBHwN6zo0gwIwMUQzaLVuiM4QAJpBGQCqgeyqemhk3sGSxw/uh0b7pcSUyJLQaP/cvVPlbNTBkpSKlAoxMokwr8gajSxkcoJKKS1ImlDMVPSayAlqLvW5IGnFiiFrNCeoZDomdLXZpXXt/+mlUqkqGJvVnC+qA8HgQDBosWyrx63y+kOkKnxu+27OfuJWmgGgaeVEkk8keRNDGrebhq9c6zlyVDXI85dvZl69+La8ohoEANdzI3TOR6ZjQqvLEot+AtDe3qHrxo/Cdw/XrOsGgKln4wd7TwJoaWJZBp2HT9cMW34gk8nW7gugUKLv5zM7PVzA1/Avg9fb8tsgl5TYV36pUA74/LPpCoC9XtuTy32Xbt4+PxF3RcYSi4v+7r5VmQ5eHGKWZcZJRJuTS6fiALq8Rpub9XAYuvt0peIZOXNgranjeuitv7XZ6XIDIBMz8f2d/i13qPMTIMz9uyOVOjQAAAAASUVORK5CYII=)';
return aNode;
}
});
} catch (e) {
ChromeUtils.reportError(e);
};
})();Dafür braucht es doch keinen Button... 
// userChromeShadow.uc.js by aborix
// 28.07.2022 FF104+ Fix: using PathUtils.join (Sören Hentzschel)
(async function() {
if (location != 'chrome://browser/content/browser.xhtml') return;
try {
let path = PathUtils.join(PathUtils.profileDir, 'chrome', 'userChromeShadow.css');
let cssIn = await IOUtils.readUTF8(path);
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) {
console.log("UserChromeShadow-Error: " + e.name + ': ' + e.message );
};
})();Mittels dieses Scripts wird die userChromeShadow.css automatisch beim Start des Fuchses eingelesen...
Mittels dieses Scripts wird die userChromeShadow.css automatisch beim Start des Fuchses eingelesen...
Und wenn du aber wissen willst, was in der userChromeShadow.css drin steht? Dafür ist das Skript da, es geht nicht um das Einlesen. Eine kleine Beigabe also.
Man könnte den Aufruf der userChromeShadow.css sicherlich auch in das ExtraConfig-Skript einbauen, ist dann aber ein Klick mehr.
Dafür braucht es doch keinen Button
Damit kannst du die Datei gleich öffnen per Klick auf den Button:
automatisch beim Start des Fuchses eingelesen..
Ohne das Skript kannst du die Shadow gar nicht nutzen.
Das weiß ich - ich nutze es ja selber... 
sicherlich auch in das ExtraConfig-Skript einbauen,
Siehe hier in Beitrag 1 ganz unten
Das weiß ich
Ok
Generell sind aktuell im Bereich der Tabs praktisch täglich Änderungen zu erwarten, da mit sowohl vertikalen Tabs als auch Tab-Gruppen, deren Implementierung gestartet ist, gerade zwei große Baustellen bestehen, welche ganz direkt die Tabs betreffen. Und dann kommt noch allgemeines Aufräumen dazu, welches die Implementierung dieser neuen Features begünstigen soll, wozu die Änderung zählt, welche das Problem verursacht hat:
https://bugzilla.mozilla.org/show_bug.cgi?id=1913322
Es ist gerade nicht die Zeit, um Firefox Nightly zu verwenden und sich darauf zu verlassen, dass individuelle Anpassungen des Tab-Codes stabil bleiben.
Leicht OT:
Oh, je 
. Schon passiert. In der aktuellen Nightly funktionieren die MultiRowTabs nicht mehr. Das hängt wohl direkt mit dem neuen 'overflow'-Verhalten der 'arrowscrollbox' zusammen. 'scrollbox-clip' ist schon rausgeflogen , aber ich habe bisher nicht herausgefunden, wie jetzt das vertikale overflow-Verhalten gesteuert wird. Das im Bugzilla-Ticket angegebene Element konnte ich nicht finden...
Aber wie du sagst, ist es jetzt wohl noch nicht der richtige Zeitpunkt um große Anpassungen zu versuchen. Scheint wirklich alles noch eine Baustelle zu sein...
Mit der Ergänzung funktioniert der Code auch in Firefox Nightly:
CSSslot { display: contents !important; }Nur ist das halt sehr unspezifisch und ich weiß nicht, an welchen Stellen sich das ggf. negativ auswirkt. Ich empfehle hier wirklich dringend, den Weg über userChromeShadow.uc.js zu gehen und den Code spezifischer zu schreiben, damit sich das nur in der Tableiste auswirkt.
Ich habe mal kurz meinen Franken-Mac mit Nighly 131 angeworfen, da scheint das Prinzip mit dem Variablen Umweg auch für slot zu greifen.
#tabbrowser-tabs:not([overflow], [orient="vertical"]) {
--ug_tabs_position: center;
--ug_slot_display: contents;
}
scrollbox {
justify-content: var(--ug_tabs_position) !important;
}
slot {
display: var(--ug_slot_display) !important;
}Der Vollständigkeit halber müsste sowas auch noch funktionieren für mittige Tabs:
#tabbrowser-tabs:not([overflow], [orient="vertical"]) .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
margin-left: auto !important;
}
#tabbrowser-tabs:not([overflow], [orient="vertical"]) #tabbrowser-arrowscrollbox-periphery {
margin-right: auto !important;
}Damit sind dann nur die nicht gepinnten Tabs und der Plus Button mittig.
Nur ganz kurz in der Nightly getestet, die Bedienung ist eine Qual am Franken Mac, mit einem OS auf externer Platte.
Ich habe mal kurz meinen Franken-Mac mit Nighly 131 angeworfen, da scheint das Prinzip mit dem Variablen Umweg auch für slot zu greifen.
Ich denke nicht, dass dieser Umweg einen großen Mehrwert bietet. Zur Erklärung möchte auf eine grundsätzliche Gefahr bei diesem Ansatz aufmerksam machen: Eine nicht definierte Variable kann zu unerwarteten Resultaten führen, weil dann eben nicht der Wert greift, der an anderer Stelle, in dem Fall also im originalen CSS der Firefox-Oberfläche, definiert ist, sondern der Standard-Wert, wie er in der CSS-Spezifikation definiert ist. Sofern das slot-Element überall sonst in Firefox seinen Standard-Wert contents für die display-Eigenschaft hat, ist alles gut. Wenn es aber noch ein anderes slot-Element in Firefox gibt, welches beispielsweise display: flex gesetzt hat, würde das bei diesem Ansatz genauso auf display: contents gesetzt, weil du display damit auf undefiniert stellst, was den Standard-Wert laut CSS-Spezifikation zur Folge hat. Gleiches gilt natürlich auch für das Szenario mit der scrollbox und justify-content.
Letztlich hast du damit also exakt das gleiche Problem wie wenn du direkt scrollbox und slot ohne Variablen in die Datei userChrome.css schreibst, ohne es näher zu spezifizieren. Es sieht zwar auf den ersten Blick so aus, als würdest du das CSS damit nur für die Elemente überschreiben, für welche du die Variable definiert hast. Du übersiehst dabei aber, dass du damit trotzdem das CSS aller Elemente überschreibst, bloß halt nicht für alle Elemente auf den Variablen-Wert, sondern für die anderen Elemente auf ihren Standard-CSS-Wert, der nicht berücksichtigt, ob seitens Firefox ein anderer Wert definiert wurde.
Die risikoärmste Variante bleibt am Ende, wirklich nur das CSS zu überschreiben, welches man tatsächlich verändern möchte. Dazu braucht es die ::part-Syntax und die wird via userChrome.css nicht unterstützt.
Dank an alle Beteiligten, alles wieder hübsch. 
Dazu braucht es die ::part-Syntax
Hallo Sören..
ich bin am basteln...
(denn sie wissen nicht was sie tun)
Meinst du das so:
#tabbrowser-arrowscrollbox {
&::part(scrollbox) {
display: grid !important;
justify-items: center !important;
}
}Wenn ja, dabei werden die Tabs dann aber schmaler
Ich muss das dann zusätzlich einfügen:
.tabbrowser-tab:not([pinned]) {
min-width: 225px !important;
}Das geht doch mit Sicherheit auch anders
Danke für jegliche Hilfe
Edit:
Siehe Beitrag 81, es lag an den Entwickler-Werkzeugen.
Wenn ja, dabei werden die Tabs dann aber schmaler
Verzeih, ich mische mich mal ein, hier nicht. Die Breite bleibt unverändert, liegt wohl am gesamten Code.
hier nicht.
Du hast recht
Ich hatte das in den Entwickler-Werkzeugen getestet...in der Shadow.css passt alles.
Danke für den Test
Ich denke nicht, dass dieser Umweg einen großen Mehrwert bietet. Zur Erklärung möchte auf eine grundsätzliche Gefahr bei diesem Ansatz aufmerksam machen: Eine nicht definierte Variable kann zu unerwarteten Resultaten führen, weil dann eben nicht der Wert greift, der an anderer Stelle, in dem Fall also im originalen CSS der Firefox-Oberfläche, definiert ist, sondern der Standard-Wert, wie er in der CSS-Spezifikation definiert ist.
Das ist ein sehr guter Punkt, das Problem hatte ich auch schon vor mir ...
Bei überschaubarem und einzel testbarem Einsatz von bestimmten Elementen kann man das über einen Alternativwert halbwegs regeln, oder der Defaultwert passt zufällig; aber bei etwas wie slot wird's unübersichtlich.
ZB hatte ich ursprünglichscrollbox[orient="horizontal"] {justify-content: var(--ug_tabs_position, initial) !important;} in Gebrauch, weil ich zu der Zeit nur noch eine andere horizontale scrollbox im Code finden konnte (in der Lesezeichenleiste), und die hat damit noch gepasst.
Aber jetzt mit den vertikalen Tabs und allem...
Davon abgesehen, der andere Code mit den Automargins wäre viel einfacher für das spezielle Anliegen; aber wenn's keiner testen oder benutzen will... 
