Einbindung von Icons in Skripts

Zitat von Horstmann

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

Zitat von Sören Hentzschel

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.

Zitat von Sören Hentzschel

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.

Zitat von Sören Hentzschel

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:

• Improve site performance by inlining your CSS - LogRocket Blog
• Inline CSS Definition – Verstehen Sie die Basics
• Inline CSS vs. CSS-Datei » fastWP

Zitat von Speravir

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.

Zitat von Sören Hentzschel

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

//profile-button tester icons separates CSS

  (function() {

   if (location.href !== 'chrome://browser/content/browser.xhtml')
    return;

    try {
        CustomizableUI.createWidget({
            id: 'Profiles_button',
            type: 'custom',
            defaultArea: CustomizableUI.AREA_NAVBAR,
            onBuild: function(aDocument) {
                let toolbaritem = aDocument.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'toolbarbutton');
                    let props = {
                    id: 'Profiles_button',
                    class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                    label: 'Profiles',
                    tooltiptext: 'about:profiles',
                };
                for (var p in props)
                    toolbaritem.setAttribute(p, props[p]);
                return toolbaritem;
            }
        });
    } catch(e) { }

      document.getElementById('Profiles_button').addEventListener('click', event => {
        if (event.button === 0) {
          openTrustedLinkIn("about:profiles", "tab");
        }
      });

      // Create references to APIs we'll use
      let ss = Cc["@mozilla.org/content/style-sheet-service;1"].getService(Ci.nsIStyleSheetService);
      let io = Cc["@mozilla.org/network/io-service;1"].getService(Ci.nsIIOService);
      let ds = Cc["@mozilla.org/file/directory_service;1"].getService(Ci.nsIProperties);

      // Get the chrome directory in the current profile
      let chromepath = ds.get("UChrm", Ci.nsIFile);

      // Specific file: userChrome.css or userContent.css
      chromepath.append("profilesbutton_style");
      chromepath.append("profilesbutton_external.css");

      // Morph to a file URI
      let chromefile = io.newFileURI(chromepath);

      // Load the sheet
      ss.loadAndRegisterSheet(chromefile, ss.USER_SHEET);

})();

Benutztes CSS:

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

Alles zusammen als Paket:

ProfilesButton.zip