Tableisten CSS anpassen

Ach das, danke, hatte ich schon wieder verdrängt wegen 115.

Zitat von Boersenfeger

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.

Zitat von Boersenfeger

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.

Zitat von milupo

Was soll diese Bemerkung?

Ergänzend dazu:

Zitat von Sören Hentzschel

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.

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...

Zitat von grisu2099

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.

Zitat von grisu2099

Dafür braucht es doch keinen Button

Damit kannst du die Datei gleich öffnen per Klick auf den Button:

Zitat von grisu2099

automatisch beim Start des Fuchses eingelesen..

Ohne das Skript kannst du die Shadow gar nicht nutzen.

Das weiß ich - ich nutze es ja selber...

Zitat von milupo

sicherlich auch in das ExtraConfig-Skript einbauen,

Siehe hier in Beitrag 1 ganz unten

Beitrag

ShadowRoot: Neue Aufruf-Methode für CSS-Regeln

Damit das alles so funktioniert, wie weiter unten beschrieben, muss in erster Linie @aborix erwähnt werden, der mit seinem Lade-Skript die neue Aufruflogik überhaupt erst möglich gemacht hat und  @2002Andreas , @Sören Hentzschel für ihre Hilfe und den beigesteuerten Code. Vielen Dank!



Um auch weiterhin alle Elemente der Firefox-Oberfläche mittels 'css' gestalten zu können, ist es notwendig, eine zusätzliche Aufruflogik für bestimmte 'css'-Regeln zu benutzen.

Bei diesen Elementen…

BrokenHeart

18. Juni 2021 um 09:36

Zitat von grisu2099

Das weiß ich

Ok

Zitat von Sören Hentzschel

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...

Zitat von Sören Hentzschel

Mit der Ergänzung funktioniert der Code auch in Firefox Nightly:

CSS

slot {
  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.

Zitat von Horstmann

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.

Zitat von Sören Hentzschel

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.

Zitat von 2002Andreas

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.