ShadowRoot: userChrome.css aus einem JavaScript heraus starten

  • Etwas OT:

    Laut Sören Hentzschel sollen ja immer mehr benutzerdefinierte Objekte in Shadow-Objekte umgewandelt werden.

    Ich habe mir überlegt, dass es doch recht einfach möglich sein sollte, eine CSS-Datei, mit dem exakt gleichen Inhalt wie die 'userChrome.css'-Datei innerhalb eines JavaScripts in einen String zu laden, der dann nach dem üblichen Schema im Script zur Ausführung gebracht wird. Die 'userChrome.css' wird dann natürlich vorher gelöscht oder eben umbenannt.

    Dann müsste man nicht den CSS-Code in das Script reinpfriemeln und verliert z.B. in Notepad++ nicht das Sysntax-Highlighting für 'css'. Das heißt man arbeitet genauso weiter wie vorher, kann aber jetzt die ganze '#shadow-root' Problematik umgehen.

    Ich werde es mal versuchen, ob ich das mit dem Laden der Datei hinbekomme :/

    ( aborix und Sören Hentzschel würde es wahrscheinlich nur ein 'Fingerschnipser' kosten... ;) )

    Das Script müsste dann ungefähr wohl so aussehen ( 'mockup' ;) )

    Edit: Ok, etwaige import-Befehle in der userChrome.css müssten natürlich noch berücksichtigt werden. :/

    Einmal editiert, zuletzt von BrokenHeart (12. Juni 2021 um 21:10)

  • BrokenHeart :

    zum Laden einer Datei in einem Skript:

    JavaScript
    //    Script01.uc.js
    
    (async function() {
    
      ...
            
              let path = OS.Path.join(OS.Constants.Path.profileDir, 'chrome', 'Test.css');
              let cssIn = await IOUtils.readUTF8(path);
    
      ...

    ( aborix und Sören Hentzschel würde es wahrscheinlich nur ein 'Fingerschnipser' kosten... ;) )

    Was mich betrifft, ich musste schon einiges recherchieren und testen: ;)

    Path manipulation

    IOUtils

    Einmal editiert, zuletzt von aborix (14. Juni 2021 um 03:39)

  • Hallo aborix,

    was soll ich sagen: es funktioniert tadellos... :thumbup::)

    Vielen Dank für diese Lösung!

    Selbst der '@import' wird durchgeführt, solange hier die richtigen relativen bzw. absoluten Pfade angegeben werden.

    Was mich betrifft, ich musste schon einiges recherchieren und testen: ;)

    "Per aspera ad astra" ;)

    Dass mit dem 'Fingerschnipsen' war relativ zu meinen Fähigkeiten gemeint. Ich wäre dann wohl, wenn ich es überhaupt hinbekommen hätte, bis Weihnachten damit beschäftigt gewesen...

    Ich glaube zwar nicht, dass dieses Thema arg viele Menschen interessiert. Wird sich aber spätestens dann ändern, wenn es immer mehr Probleme mit #shadow-root gibt. Dank deiner Hilfe, existiert ja jetzt ein einfacher Weg, dieses Problem zu umgehen. :)

  • Selbst der '@import' wird durchgeführt, solange hier die richtigen relativen bzw. absoluten Pfade angegeben werden.

    Kannst du bitte den Pfad als Beispiel mal zeigen, ich bekomme das nicht hin. Der Ordner bei mir heißt css, enthält alle Dateien.

    Grüße vom FuchsFan

  • Kannst du bitte den Pfad als Beispiel mal zeigen, ich bekomme das nicht hin. Der Ordner bei mir heißt css, enthält alle Dateien.

    Bei mir liegen die Dateien auch im Ordner 'css'. Ich habe einen absoluten Pfad gesetzt (relativ müsste aber auch gehen).

    Wenn du keinen portablen FF nutzt, müsstest du dann den Pfad zu deinem Profilordner unter 'AppDatat\Roaming' verwenden.

    So sieht's bei mir aus:

    CSS
    @import url('file:///D://Programme%20(Portable)//Firefox%20Portable//Firefox-Test//Profilordner//chrome//css//TestImport01.css');

    Hier übrigens das vollständige Script zum Aufruf der umbenannten 'userChrome.css' (hier'userChromeJS.css') :

  • BrokenHeart 18. Juni 2021 um 09:38

    Hat den Titel des Themas von „userChrome.css aus einem JavaScript heraus starten“ zu „ShadowRoot: userChrome.css aus einem JavaScript heraus starten“ geändert.
  • ist das nicht im endeffekt das selbe ?

    Pauschal gesagt, du/man muss gar nichts ändern.

    Fast alle Code funktionieren auf die alte Methode per userChrome.css oder eben per Import Funktion der Codes.

    Interessant wird die Script Version erst wenn es um ::part Einträge geht.

    Die funktionieren dann nämlich nur über die Version per Script.

    Also entweder alles so machen wie im Beitrag Nr. 5 beschrieben, oder wenn es erstmal nur einzelen Codes sind, wie im Beitrag Nr. 7 dann.

    Ich hoffe das hilft dir etwas weiter.

  • Na ja, wobei das Beispiel #tabbrowser-arrowscrollbox::part(scrollbutton-up) nicht unbedingt repräsentativ ist, wie man an meiner Frage sehen kann:

    .DeJaVu
    9. Juni 2021 um 18:03

    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!

  • Kann ich ohne Code schlecht beurteilen. In #8 steht, wie man prinzipiell hinkommt auch ohne ::part, das zweite CSS ist etwas spezieller. Wenn sich padding ändern lässt, dann auch ganz sicher margin und mehr. Dort wurde auch Scripting angesprochen. Wenn jemand meint, er müsse sich das per Script reinzimmern, ist mir das herzlich, es geht auch ohne. Allerdings würde ich das nicht pauschal schreiben, sondern würde mir jeden Anwendungsfall einzeln anschauen, nicht jeder möchte Script nutzen oder ist behände genug, das einzurichten.

    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!

  • Wenn jemand meint, er müsse sich das per Script reinzimmern, ist mir das herzlich, es geht auch ohne.

    Was deinen Fall betrifft, mag das so sein. Die grundsätzliche Problematik kann aber sein, dass ein Selektor, der auch ohne die spezielle Shadow-Syntax funktioniert, so unspezifisch ist, dass auch andere Stellen von Firefox vom gleichen Code betroffen wären. Und die Verwendung dieser Syntax erlaubt es, wirklich spezifisch einzugrenzen.

  • Die grundsätzliche Problematik kann aber sein, dass ein Selektor, der auch ohne die spezielle Shadow-Syntax funktioniert, so unspezifisch ist, dass auch andere Stellen von Firefox vom gleichen Code betroffen wären.

    Wobei gerade scrollbutton-up/scrollbutton-down von Deinem Einwand betroffen sind, denn die Toolbarbutton gibt es nicht nur in der Tableiste, sondern möglicherweise auch in der Lesezeichen-Symbolleiste und im Menü Lesezeichen. Deshalb bin ich tatsächlich dabei, darüber nachzudenken, nun doch Scripts zu verwenden.

    Es grüßt,

    Ralf

  • Obwohl BrokenHeart es in einem weiteren Thema nochmal explizit eingegrenzt hat deswegen (deswegen hatte ich ihn auch in dem von mir erstellten Thema erwähnt und bedankt deswegen). Mir wäre das wohl nie aufgefallen.

    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!

  • zum Laden einer Datei in einem Skript:

    Erstmal: Großartig! (Ping auch BrokenHeart wegen der Idee.) Wie wäre es aber, per Variablen potentiell einen anderen Namen für die Stildatei und ein Unterverzeichnis (oder einen ganzen weiteren Pfad …) zu ermöglichen? Schau mal, wie EffPeh das vor zweieinhalb Jahren bei einem sehr ähnlichen Skript gelöst hatte: Script für einzelne Datei, wobei ich vermute, dass eigene Variablen für den nicht so versierten Nutzer einfacher zu verstehen sind, weil sie häufiger vorkommen (also nicht wie bei EffPeh innerhalb eines Objekts).

    Mir ist klar, dass man innerhalb der Stildatei andere Dateien auch aus einem Unterverzeichnis importieren kann.