Einbindung von Icons in Skripts

  • ob man damit mit Kanonen auf Spatzen schiesst.

    Man könnte auch nur chrome://-Grafiken als Basissymbole anbieten. Und wenn ein Nutzer ein eigenes Symbol haben will, muss er dann eben nachfragen. Der Pfad zur Grafik ist dann aber anders und er muss sich eine Grafik nach chrome/icons abspeichern. Oder man bietet nur file://-Grafiken an, die aber als Voraussetzung in chrome/icons abgespeichert werden müssen, bevor man sie überhaupt sieht. Da kommen dann sicher auch einige Nutzer mit dem Aufschrei: „Hilfe, mein Skript funktioniert nicht!“

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress

  • Ich habe die OT mal wieder in einen eigenen Thread verschoben:

    Mira_Belle
    8. Mai 2025 um 16:34
  • Es ist besser, weil du am Ende trotzdem eine Bild-Datei einbindest und diese gecacht werden kann.

    Aha, danke! Das ist, was hier zählt.

    Inline-CSS sollte man, sofern möglich, eher vermeiden als dass es eine sinnvolle Empfehlung ist.

    Da sind wir ja einer Meinung, aber ich wollte das nicht einfach so schreiben, sondern suchte nach externen Belegen.

    Aber Google interessiert es weder, wie das CSS eingebunden wird (ich kann mir höchstens indirekte Faktoren vorstellen, wie dass tausende Zeilen CSS in einer HTML-Datei das Dokument größer machen), noch sind Googles Suchmaschinen-Algorithmen für Firefox-Scripts relevant.

    Du hast ja sowas von Recht – speziell an den letzten Teilsatz hätte ich auch selbst denken können, allerdings ging es mir um das Cachen der Symbolbilder – nur fand ich dann solche Seiten und genau darauf bezog ich mich:

  • nur fand ich dann solche Seiten und genau darauf bezog ich mich

    Das ist zwar jetzt nicht für die Script-Erstellung relevant, aber um ein bisschen aus dem Nähkästchen zu plaudern: Dass das Laden einer CSS-Datei das Rendern blockiert, ist soweit richtig. Und darum stimmt es schon, dass es besser für die Performance sein kann, wenn man CSS in der HTML-Datei hat. Aber sämtliches CSS im HTML zu haben, macht die HTML-Datei riesig und das CSS kann dann nicht über mehrere Seiten hinweg gecacht werden, was auch wieder kontraproduktiv für die Performance ist. Und für die Wartung tut man sich auch keinen Gefallen.

    Was ich bei Kunden-Projekten mache, ist Folgendes: Sämtliches CSS wird ganz normal über externe CSS-Dateien eingebunden. Es gibt ein System, das erkennt, welches CSS tatsächlich genutzt wird - und zwar nur im oberen Bereich der Website, den man sofort sieht. Nur dieses CSS wird dann automatisch ins HTML eingefügt (nicht als Inline-Attribute, sondern im head-Bereich). Und die CSS-Dateien werden dann via JavaScript geladen, ohne das Laden der gesamten Website zu verzögern. Das kombiniert alle Vorteile. So hat man weiter alle Vorteile externer CSS-Dateien, blockiert aber nicht den Rendering-Vorgang und muss gleichzeitig für das, was man sofort sieht, nicht auf das Laden der CSS-Dateien warten. Das ist dann natürlich ein Extra-Schritt im Build-Prozess, der für jedes Dokument individuell gemacht werden muss, und an der Stelle Zeit kostet. Das wird daher auch nicht für jede Unterseite gemacht, sondern nur für die wichtigen Seiten, für die zum Beispiel Werbekampagnen laufen.

  • Und die CSS-Dateien werden dann via JavaScript geladen, ohne das Laden der gesamten Website zu verzögern. Das kombiniert alle Vorteile. So hat man weiter alle Vorteile externer CSS-Dateien, blockiert aber nicht den Rendering-Vorgang und muss gleichzeitig für das, was man sofort sieht, nicht auf das Laden der CSS-Dateien warten.

    Hättest du dafür einen Tip, oder simple Lösung?
    Ich hab schon gesucht, aber stosse da an meine Grenzen...

    Sagen wir mal wir haben DasScript.us.js , was im Profil/chrome Ordner liegt, und eine extra CSS Datei DasScript.css, im gleichen Ordner.
    Wüsstest du eine schlanke Lösung, idealerweise mit relativem Dateipfad, um die CSS Datei via das Script zu laden? :/

    Ich dachte schon öfter an ein Paket mit JS Script, CSS Datei und Icon, das der User nur in den chrome Ordner kopieren muss, und es läuft sofort.
    Man kann auch einfach über die userChrome.css das CSS importieren, aber dann müssen die User halt wieder anfangen im Code rumzuschreiben.

  • Wie gesagt, was ich meinte, ist für die Script-Erstellung nicht so relevant. Ich hatte mich damit auf den Artikel bezogen, bei dem um die Website-Optimierung ging. Das ergibt dort ja auch nur Sinn, weil das CSS für die Elemente, die man sofort sieht, direkt im HTML steht. Verzichtet man darauf und lädt nur das CSS via JavaScript, hat man eine sichtbare Verzögerung und das ist dann keine gute Nutzungserfahrung. Bei Websites sprechen wir oft ja auch von vielen tausend Zeilen CSS, wo es dann mehr Einfluss hat, wenn man den Großteil des nicht benötigten CSS auslagert, als bei zehn Zeilen CSS für ein Firefox-Script.

  • Hmm, ich hab da mal weiter gegoogelt, und bin darauf gestossen.

    Und das ganze habe ich mal - eher unelegant - in ein einfaches Script gewürgt.

    Das erhoffte Ergebnis: die .zip Datei runterladen, das enthaltene Script und Ordner in den chrome Ordner packen, Restart mit Cache löschen, wie immer bei Script Installationen, und fertig.

    Enthalten sind JS Script, CSS und Icon, keine Anpassungen nötig.

    Benutztes Script:

    Benutztes CSS:

    CSS
    #Profiles_button .toolbarbutton-icon {
        list-style-image: url("icons/LettersP-1.png");
    }

    Alles zusammen als Paket:

    ProfilesButton.zip

    Einmal editiert, zuletzt von Horstmann (9. Mai 2025 um 15:09)

  • Wir haben ja noch etwas "Redebedarf" und so wird das auch noch ein Weilchen dauern!

    Ohne jetzt alles durcheinander bringen zu wollen, aber zum Thema Fallback Icon ist mir noch etwas über den Weg gelaufen; absolut kein AI war dabei involviert! :whistling:

    Der Vorteil wäre evtl. dass der Code schlank ist, keine Funktionen benötigt, und daher nicht durch die Gegend geschoben werden muss.

    Das Einzige was ich nicht schaffe, ist dass der eigene Icon Name nicht 2mal eingetragen werden muss, wie hier in Zeilen 15 und 22. :/

    Nur ein TEST:

    Icon:

    LettersC-1.png.zip

  • Hatte einfach ins "blaue" ....

    Später auch getestet und es funktioniert nicht:!:

    Und hier nun eine Variante Deines Skripts, bei der nur einmal der Iconname inkl. Dateiendung
    angegeben werden muss.

    Ich bau' aber jetzt nicht meine ganzen Skripte um, obwohl mir diese Version des Fallbacks viel besser gefällt.
    Aber vielen Dank für diese tolle Idee.

    Mit <3lichem Gruß

    Mira

    Einmal editiert, zuletzt von Mira_Belle (13. Mai 2025 um 20:35)

  • Und hier nun eine Variante Deines Skripts, bei der nur einmal der Iconname inkl. Dateiendung
    angegeben werden muss.

    ----------

    Ich bau' aber jetzt nicht meine ganzen Skripte um, obwohl mir diese Version des Fallbacks viel besser gefällt.
    Aber vielen Dank für diese tolle Idee.

    Schweet, dankeschön! :):thumbup:.

    Ich denke nicht dass es einen zwingenden Grund gibt deine Version zu ändern, ich war nur auf der Suche nach dem einfachst möglichen Code.
    Auf der Suche bin ich auch mehrfach über Varianten deiner Version gestolpert, kann sein wir haben eine Freundin gemeinsam. ;)

  • Ehrlich gesagt bin ich der Meinung, dass ihr hier ein „Problem“ sehr viel größer macht, als es tatsächlich ist, was nicht unbedingt zu einer besseren Lösung führt, sondern im Gegenteil sogar eher nachteilig ist.

    Wenn ein Icon fehlt, sieht man das sofort und kann es dann auch sofort beheben. Ihr versucht, eine unnötig komplexe Logik in das Script einzuführen, die dann bei jeder Verwendung von Firefox und für jedes einzelne Fenster in Firefox ausgeführt werden muss, obwohl sich am Icon, sobald es korrekt gesetzt ist, nie wieder etwas ändern wird. Dafür gibt es auch den schönen „neudeutschen“ Begriff „Over-Engineering“.

    Wo ich die Scripts sehe, frage mich auch, wieso so wahllos mitten in den Scripts zwischen einfachen und doppelten Anführungszeichen gewechselt wird. Eine Folge des Zusammenkopierens aus verschiedenen Quellen? ;)

    kann sein wir haben eine Freundin gemeinsam. ;)

    Ich bin ernsthaft am Überlegen, ob ich hier keine KI-Richtlinie einführen soll, die eine entsprechende Kennzeichnung bei Verwendung verpflichtend macht, da KI-Einsatz massiv auf Kosten der Code-Qualität geht …

  • ob ich hier keine KI-Richtlinie einführen soll,

    Ich sag mal so. Das Stichwort KI ist hier nicht neu -> GPT. Wenn man kein Javascript kann, dann sollte man es auch keiner KI überlassen, die davon eh keinen Plan hat, weil sie nichts davon kennt. So bzw ähnlich hast du es schon mal ausgedrückt.

    Es ist schön, dass wenige hier Scripte per KI "verbessen" konnten, aber deshalb können diejenigen dennoch kein oder kaum Javascript, das ist ein himmelweiter Unterschied. Und persönlich angemerkt: ihr hockt gefühlt die Richtung 24/7 vorm Rechner, dann macht endlich auch was draus, statt euch über Bingo-Bongo-Dingeskirchen aufzuregen. Ihr seid für mich gefühlt omnipräsent, ohne die Thematik wirklich weiterzubringen. Es macht so keinen Spass, euch zu lesen. "probier mal hier" "probier mal da" ist NICHT hilfreich.

    Wir sind keine Beschwerdestelle, hier gibt es nur Lösungen! Meine Glückszahl hier: 96.

  • Es macht so keinen Spass, euch zu lesen. "probier mal hier" "probier mal da" ist NICHT hilfreich.

    1. Musst Du auch nicht.
    2. War ein separater Bereich ja nicht gewünscht.

    Aber klar, ich kann es auch sein lassen, ja sogar die Hilfe ganz einstellen, wenn das so gefordert wird.
    Hier in diesem Thread probiere ich aus, teste und tausche mich aus.

    Sören Hentzschel Das mit dem Fallback-Icon ist, war eine "nette" Idee, geboren aus der Vorstellung, dass jeder
    ganz einfach so ein Skript einfach nutzen kann.
    Z.Z. dachte ich aber auch darüber nach, ob "wir" da nicht über's Ziel hinausgeschossen sind.
    So ein Skript sollte doch ganz einfach gestrickt sein.
    Einen Configbereich ganz am Anfang des Skriptes gestellt, es sollte doch nun jeder in der Lage sein
    den Namen einer Grafik einzutragen, sollte wohl ausreichen.
    :/ Oder?

    Mit <3lichem Gruß

    Mira

  • Ehrlich gesagt bin ich der Meinung, dass ihr hier ein „Problem“ sehr viel größer macht, als es tatsächlich ist, was nicht unbedingt zu einer besseren Lösung führt, sondern im Gegenteil sogar eher nachteilig ist.

    Wenn ein Icon fehlt, sieht man das sofort und kann es dann auch sofort beheben. Ihr versucht, eine unnötig komplexe Logik in das Script einzuführen, die dann bei jeder Verwendung von Firefox und für jedes einzelne Fenster in Firefox ausgeführt werden muss, obwohl sich am Icon, sobald es korrekt gesetzt ist, nie wieder etwas ändern wird. Dafür gibt es auch den schönen „neudeutschen“ Begriff „Over-Engineering“.

    Tatsächlich bin ich völlig deiner Meinung, der User von JS Scripts sollte das Problem selber erkennen und lösen können.

    Du hast aber nicht mitgelesen; was du verpasst hast, ist das konstante Bemühen darum darum dass jeder User sofort ein Script benutzen kann, ohne eine einzige Zeile ändern zu müssen, aber gleichzeitig eine möglichst simple Lösung für - in diesem Fall - die Einbindung eines eigenen Icons zu ermöglichen.

    Das ist nämlich der Status Quo für nicht nur, aber auch dieses Forum - Fertiglösungen zu liefern.
    Deshalb schleppen sich die base64 Icons noch immer durch die Gegend, und die Monsterscripts mit den unmöglichsten Style Einbindungen, nur damit jeder irgendwie ganz oben Präferenzen einfacher ändern kann.

    Ich habe selber die Schnauze voll davon so langsam, und werde das auch nicht mehr weiter verfolgen.
    Aber nochmal - du scheinst hier nur quer zu lesen, und Einiges zu vermissen; was mich angeht, würden wir dem User ein Mininum mehr an Eigeninitiative abverlangen, wie wiederholt erklärt.

    Ich bin ernsthaft am Überlegen, ob ich hier keine KI-Richtlinie einführen soll, die eine entsprechende Kennzeichnung bei Verwendung verpflichtend macht, da KI-Einsatz massiv auf Kosten der Code-Qualität geht …

    Was an meinem obigen Code - und zum ersten Mal - aus AI kommt, ist umgeschrieben, ergänzt durch massive Recherche und die AI Lösung wurde nur als Richtlinie benutzt; eine einzige Zeile ist davon noch aus AI, und das ist die für welche ich nachgefragt hatte.

    Was hiesige Code Qualität angeht, bleiben wir mal geschmeidig. ;)
    Es steht jedem frei zu Themen beizutragen, aber der Respons ist nicht immer überwältigend.
    Das ist es was massiv die Code Qualität beeinträchtigt.

  • Ich sag mal so. Das Stichwort KI ist hier nicht neu -> GPT. Wenn man kein Javascript kann, dann sollte man es auch keiner KI überlassen, die davon eh keinen Plan hat, weil sie nichts davon kennt. So bzw ähnlich hast du es schon mal ausgedrückt.

    Es gibt hier nur wenige User die von JS Ahnung haben, und viele davon beteiligen sich nur sporadisch .
    Machen wir den Laden dann einfach dicht, schliesslich ist diese Sub ist 80+% JS?

    ihr hockt gefühlt die Richtung 24/7 vorm Rechner, dann macht endlich auch was draus, statt euch über Bingo-Bongo-Dingeskirchen aufzuregen. Ihr seid für mich gefühlt omnipräsent, ohne die Thematik wirklich weiterzubringen. Es macht so keinen Spass, euch zu lesen. "probier mal hier" "probier mal da" ist NICHT hilfreich.

    a) 24/7 => Touche ?(

    b) Wenn du keine Diskussion zu Themen willst, in einem Diskussion Foren Sub über Coding, sondern ein Fertigprodukt, dann geh nach Mozilla und hol dir eine fertige Erweiterung.

    Ich weiss du weisst es besser - die Codes von hier und sonstwo kommen nicht von jungfräulicher Geburt - es ist immer ein Entwicklungsprozess.
    Und manchmal dreht sich eine Diskussion im Kreis, das stimmt, aber Stagnation ist auch ein Problem.

    Einmal editiert, zuletzt von Horstmann (13. Mai 2025 um 22:09)

  • Einen Configbereich ganz am Anfang des Skriptes gestellt, es sollte doch nun jeder in der Lage sein
    den Namen einer Grafik einzutragen, sollte wohl ausreichen.
    :/ Oder?

    Meiner Meinung nach: Ja. Ich meine, die ganze Script-Vorbereitung ist doch schon viel komplizierter als das. ;)

    Du hast aber nicht mitgelesen […] Aber nochmal - du scheinst hier nur quer zu lesen, und Einiges zu vermissen

    Nö, das stimmt überhaupt nicht. Ich habe die Problemstellung sehr wohl verstanden. Es wurde ja auch schon irgendwann der Input gebracht, dass man einfach ein Firefox-internes Icon als Standard referenzieren kann. Und wie der Pfad mit einem lokalen Icon aussieht, kann man ja per Kommentar ergänzen. Teilweise werden ja sogar alte Code-Pfade, die nicht mehr funktionieren, als Kommentar im Code hinterlassen, was keinen tieferen Sinn hat. Das mit dem Icon-Pfad wäre dagegen tatsächlich eine sinnvolle Verwendung von Kommentaren.

    ohne eine einzige Zeile ändern zu müssen

    Das ist doch aber eine völlig unnötige Anforderung, die es in den letzten 22 Jahren (so lange gibt es dieses Forum schon) nicht gebraucht hat. So ziemlich jeder hat das in all den Jahren hinbekommen. Woher kommt diese Anforderung auf einmal? Ist es durch irgendwelche technologischen oder gesellschaftlichen Entwicklungen mittlerweile wirklich zu schwierig geworden, auf Anweisung ein Icon zu hinterlegen?

    Es steht jedem frei zu Themen beizutragen, aber der Respons ist nicht immer überwältigend.
    Das ist es was massiv die Code Qualität beeinträchtigt.

    Es sind nun einmal nur wenige Menschen in diesem Forum dazu in der Lage, beizutragen. Das sehe ich nicht als großes Problem für die Code-Qualität. Zumal die Tipps, die ich durchaus ab und an gebe, ja auch nicht nachhaltig umgesetzt werden, sondern gefühlt nach fünf Minuten schon wieder vergessen wurden. Wieso sollte das durch mehr Menschen, die etwas schreiben, anders sein?

    Das realere Problem für die Code-Qualität ist, wenn man sich durch eine KI beeinflussen lässt, die falsche Dinge behauptet und ineffiziente Lösungen bereitstellt, was mit sehr viel geringerer Wahrscheinlichkeit passiert, wenn man sich ernsthaft mit einem Thema beschäftigt und eigene Recherchen anstellt. Das kostet natürlich mehr Zeit, hätte aber einen nachhaltigen Lerneffekt und stärkt die Qualität des eigenen Codes, statt diese zu vermindern. Wenn du sowieso auch eigene Recherche investierst, musst du dich bei diesem Teil nicht angesprochen fühlen. Ich will damit nur grundsätzlich sagen, dass KI und Programmierung im Jahr 2025 immer noch sehr schlecht funktioniert, das aber teilweise so glaubwürdig transportiert wird, dass jemand, der nicht tief im Thema steckt, KI-Antworten sehr leicht mit Best Practices verwechseln kann, was es halt echt nicht ist.

    Nicht grundlos ist mittlerweile in einigen Open Source Projekten der Einsatz von KI strikt verboten. So weit möchte ich gar nicht gehen. Aber zumindest sollte der Umgang mit KI transparent sein. In der Europäischen Union gibt es ab kommenden Jahr ja auch eine Kennzeichnungspflicht für KI-generierte Inhalte - aber leider ist das mal wieder ein Gesetz, welches nur für größere Unternehmen und nicht im Privatumfeld gilt. Ich bin der Meinung, dass auch im Privatumfeld der Anwender diese Transparenz verdient hat. Darum ging es mir bei dieser Aussage.

  • Liste auf Wunsch gelöscht.
    Ich würde ja am liebsten alle Beiträge von mir hier löschen, so sauer bin ich gerade.
    Aber dann würde hier so manches nicht mehr passen, deshalb lasse ich es.

    ----------------------------------------------------------------------------------------------------------------------------------------------------------

    Nur so als Vorschlag.

    Ich denke, das sollte für unerfahrene doch machbar sein, oder?
    Zur Vereinfachung kann man ja bei "let ButtonIcon" einfach ein internes Icon setzen,
    z.B. 'chrome://global/skin/icons/warning.svg' und die Farbe auf "ROT". ('#ff0000')
    Dann hat man auf jeden Fall ein Icon und sieht sofort, das sieht nicht schön aus,
    weil ein rotes "Achtung". ;)

    Wäre das ein Kompromiss?

    Und wir sollten einen angepinnten Thread schaffen, damit man "basteln" und sich austauschen kann.
    Dann muss kein User Beiträge lesen, die keinen Spaß machen.

    Mit <3lichem Gruß

    Mira

    2 Mal editiert, zuletzt von Mira_Belle (15. Mai 2025 um 09:50)