ShadowRoot: Neue Aufruf-Methode für CSS-Regeln (!Wichtiges Update für FF-Versionen ab 104!)

  • Firefox-Version
    FF90+
    Betriebssystem
    *

    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!



    ____________________________________


    Update 28.07.2022:


    Update der Datei userChromeShadow.uc.js für alle Versionen ab Firefox 104.


    Es muss ab Version Firefox 104 zwingend dieses angepasste Skript verwendet werden:


    ____________________________________



    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 handelt es sich um sogenannte 'ShadowRoot'-Objekte, die getrennt von dem übrigen Objekt-Baum existieren und in sich geschlossen sind. 'ShadowRoot'-Objekte werden an immer mehr Stellen im Firefox-Code für die Benutzerschnittstelle eingesetzt und es wird immer schwieriger dafür Anpassungen vorzunehmen, da über die klassische 'userChrome.css' kein direkter Zugriff auf Teile dieser 'ShadowRoot'-Objekte möglich ist.



    Wichtig:

    Die neue Methode um 'css'-Regeln anzuwenden, wird nur für Regeln benötigt, die einen ::part() Selektor beinhalten.

    Diese Regeln werden in einer neuen, zusätzlichen 'css'-Datei gespeichert und dann über ein User-JavaScript geladen und zur Anwendung gebracht. An der bestehenden 'userChrome.css' und etwaigen importierten '.css'-Dateien ändert sich nichts!


    Folgende 3 Schritte müssen dafür durchgeführt werden:


    1.)

    Falls noch nicht geschehen: es muss sichergestellt sein, dass User-JavaSkripte für den Firefox funktionieren. Dafür sind ein paar wenige Dateien in die entsprechenden Verzeichnisse zu kopieren. Bei den angepinnten Themen findet man reichlich Infos dazu und mittlerweile gibt es sogar eine Videoanleitung von Zitronella.


    Hier eine Anleitung, die auf das absolut Notwendigste reduziert ist:


    2.)

    Als zweites muss eine neue Datei 'userChromeShadow.css' im 'chrome'-Verzeichnis angelegt werden, welche hier beispielhaft aus zwei Regeln besteht, welche im Forum schon auf andere Weise, nämlich mittels Workaround, "gelöst" wurden.

    (Die Beispiele sind auskommentiert, da sie nur der Veranschaulichung dienen - können aber auch zum Testen benutzt werden, ob alles richtig verarbeitet wird.)

    3.)

    Als dritten Schritt muss eine Datei 'userChromeShadow.uc.js' im 'chrome'-Verzeichnis angelegt werden, welche die Datei 'userChromeShadow.css' lädt und in den DOM-Baum einfügt:


    Info: Diese Skript funktioniert nur bis einschließlich Firefox Version 103 (siehe Update 28.07.2022 ).


    Das war's schon... ;)


    ---

    Zur Info noch für Entwickler,Bastler,Hacker...etc.:

    Um folgende markierte Elemente geht es z.B. bei dem obigen Beispiel mit dem Rahmen um den 'Lesezeichen hinzufügen'-Panel:


    "



    2002Andreas hat zusätzlich noch ein Script für die einfache, direkte Zugriffsmöglichkeit auf die Datei 'userChromeShadow.css'  geschrieben.



    Hier der Code:


    Alternativ für die, die das Script extras_config_menu.uc.js benutzen:


    Zwischen Zeile 92 bis 98 diesen Text einfügen:

    menupopup.appendChild(this.createME("menuitem","userChromeShadow.css","uProfMenu.edit(0,'userChromeShadow.css');","uProfMenu_edit",0));

    10 Mal editiert, zuletzt von BrokenHeart () aus folgendem Grund: Code/Screenshot für Rahmen um 'Lesezeichen-Hinzufügen'-Panel wegen neuer Bezeichner aktualisiert.

  • Alternativ für die, die das Script extras_config_menu.uc.js benutzen:


    Zwischen Zeile 92 bis 98 diesen Text einfügen:

    Das habe ich getan, aber da gibt es ein Problem, dass ein Icon dann nicht mehr angezeigt wird.

    Jetziger Zustand:


    Mit neuem Eintrag:


    Was kann dafür die Ursache sein? Hier das Script:


    Grüße vom FuchsFan

  • Poste den doch bitte mal.

    Grüße vom FuchsFan

  • Alle klar.

    Das liegt daran, dass du immer diese Endungen (...) hast:


    Code
    menuitem:nth-child(10),

    Und jetzt ist eben ein Eintrag mehr, und die anderen verschieben sich.


    Teste bitte:


    Außerdem ist dein Text falsch:


    So muss der sein:

    startupCache-Ordner


    und du hast:


    Startup-Cacheordner

    Mit freundlichem Gruß
    Andreas
    Mein Laptop    Meine Add-ons

    Einmal editiert, zuletzt von 2002Andreas () aus folgendem Grund: Ein Beitrag von 2002Andreas mit diesem Beitrag zusammengefügt.

  • Und jetzt ist eben ein Eintrag mehr, und die anderen verschieben sich.

    Ich habe es geahnt, wusste aber nicht wie ich es verschieben soll.

    Jetzt ist wieder alles hübsch. Ich bedanke mich bei dir, Andreas. :thumbup: :)

    Grüße vom FuchsFan

  • Ich bedanke mich bei dir,

    Gerne doch.

    Ich nutze den Code so, dann kannst du Einträge löschen oder hinzufügen, trotzdem bleiben die Icons erhalten alle.


  • Ich nutze den Code so, dann kannst du Einträge löschen oder hinzufügen, trotzdem bleiben die Icons erhalten alle.

    Danke, für diesen Code, den werde ich dann als Basis nehmen. Sehr schön! :)

    Grüße vom FuchsFan

  • dann als Basis nehmen

    Oben bei den bunten Einträgen am besten den jeweiligen Text nehmen, unten bei hover dann auch.


    Also so:


  • Du musst bei dir prüfen, ob du die Einträge Zeile 1 bis einschl. Zeile 28 überhaupt brauchst

    Danke, für den Hinweis, da habe ich schon drauf geachtet. Jetzt nur zur Probe, später dann das Finale.

    Grüße vom FuchsFan

  • Im Überhangmenü versuche ich über die userChromeShadow.css die runden Ecken weg zu bekommen.


    Will mir nicht gelingen, wer kann helfen?

    Grüße vom FuchsFan

  • Für diverse Dropdowns

    CSS
    :root
    {
        --arrowpanel-border-radius: 2px !important;
    }
    
    :is(menupopup, panel)[type="arrow"]
    {
        --panel-border-radius: 2px !important;
    }

    2px kann man natürlich ändern ;)

    Hier sollte etwas stehen, aber ich befürchte, du könntest es nicht ertragen. Daher ist dein Einfallsreichtum gefragt, überrasche mich.

  • Eventuell noch auf dieses eine Popup begrenzen...

    Das habe ich getan:

    CSS
    :is(panel, widget-overflow-mainView)::part(content) {
        border-radius: 0 !important;
    }

    Ich bedanke mich , funktioniert perfekt. :thumbup: :)

    Für diverse Dropdowns

    Das habe ich mir gleich mit abgespeichert, auch das funktioniert. Danke dafür. :thumbup: :)

    Grüße vom FuchsFan

  • Dafür reicht auch ein Eintrag in die userChrome.css.

    Danke für die Aufklärung, Andreas. Ich habe da schon immer dran rumgebastelt, aber es nicht hin bekommen. Deshalb ging ich davon aus, dass es wie beim AppMenu gemacht werden muss. :/

    Trotzdem weiß ich nicht, wie und wo ich das auslesen kann. :rolleyes:

    Grüße vom FuchsFan