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

  • 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!


    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:

    Kurzanleitung: User-Skripte für den FireFox

    1.) firefox-anpassungen.zip herunterladen und entpacken.

    2.) Entpackte Dateien/Verzeichnisse in folgende Verzeichnisse verteilen:

    - Datei config.js und das gesamte Verzeichnis userChromeJS werden in den Firefox-Installationsordner (standardmäßig unter Windows(!) ist das 'C:\Programme\Mozilla Firefox' ) kopiert.


    - Datei config-prefs.js wird im Firefox-Installationsordner(s.o.) in das Unterverzeichnis '\defaults\pref' kopiert.

    - Datei userChrome.js (befindet sich in der entp. zip-Datei im Ordner 'chrome') wird in das 'chrome' Verzeichnis des Profil-Ordners kopiert (an die Stelle, wo sich auch die 'userChrome.css' befindet).

    3.) Danach unbedingt den FireFox neu starten!

    4.) Fertig!

    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:

    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));

    12 Mal editiert, zuletzt von BrokenHeart (12. Oktober 2023 um 00:36) aus folgendem Grund: Update Hinweis für FF 104 entfernt

  • 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 (22. Juni 2021 um 10:28) aus folgendem Grund: Ein Beitrag von 2002Andreas mit diesem Beitrag zusammengefügt.

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

  • dann als Basis nehmen

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

    Also so:

  • 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 ;)

    Wenn du weinen möchtest, bist du falsch hier. Hier gibt es nur Lösungen!
    Oh Herr, wirf Hirn, oder Steine - Hauptsache, du triffst endlich.
    Zu viele Goofies und Dulleks vom Dienst. Schlabokka!

  • 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