15 Reaktionen

Mozilla kündigt neues Themes-System für Firefox an

Geschätzte Lesedauer:

Gute Nachricht für Freunde der Browser-Anpassung: Mozilla hat heute offiziell sein neues Themes-System für Firefox angekündigt und gibt erste offizielle Auskünfte darüber, welche Möglichkeiten es in Zukunft geben wird, die Oberfläche von Firefox per Theme zu gestalten.

Firefox kennt derzeit zwei Arten von Themes: Lightweight Themes, oder kurz auch einfach nur Themes, welche lediglich eine Textur über die Browseroberfläche legen und zwei Farben ändern, sowie die komplexen Themes, welche auch als vollständige Themes bezeichnet werde. Ab Firefox 57 unterstützt Firefox nur noch WebExtensions als Erweiterungs-Architektur, auch die Unterstützung vollständiger Themes fällt damit weg. Aber wie aufmerksame Leser dieses Blogs wissen, stehen in diesem Jahr Themes bei Firefox im Vordergrund und Mozilla arbeitet an einer neuen Erweiterungs-Schnittstelle, welche sehr viel mächtiger sein wird als heutige Lightweight Themes, ohne die Nachteile der vollständigen Themes zu haben. Nachdem Ende des vorherigen Jahres bereits von Mozilla mit dem Prototyp einer neuen Themes-API experimentiert worden war, folgte nun die offizielle Ankündigung.

Wieso ein neues Themes-System?

Lightweight Themes sind sehr einfach zu erstellen, entsprechend viele solcher Themes gibt es. Mozillas Erweiterungsseite addons.mozilla.org zählt über 400.000 solcher. Das Tolle an den Lightweight Themes: sie besitzen eine garantierte Kompatibilität. Selbst vor acht Jahren erstellte Lightweight Themes funktionieren heute noch, ohne dass jemals eine Änderung seitens Theme-Ersteller notwendig gewesen wäre.

Auf der anderen Seite gibt es die vollständigen Themes. Diese erlauben sehr viel tiefgreifendere Änderungen an Firefox und sind daher bei allen beliebt, denen Lightweight Themes nicht weit genug gehen. Die Erstellung hat es allerdings in sich: CSS und Bilder müssen für den kompletten Browser bereitgestellt werden, Theme-Entwickler müssen Interna von Firefox kennen, mit kaum Dokumentation auskommen und vor allem mit jedem Firefox-Update Schritt halten, bei dem es wieder Änderungen gibt, welche Einfluss auf vollständige Themes haben. Die Wartung vollständiger Themes kostet vor allem eines viel, nämlich Zeit. Zeit, welche die wenigsten Entwickler bereit sind, aufzubringen – beziehungsweise aufbringen können. Das Resultat: von den ungefähr 500 vollständigen Themes, die es auf Mozillas Erweiterungsseite gibt, sind gerade einmal 60 überhaupt noch kompatibel mit aktuellen Firefox-Versionen. Und Mozilla kann dieses Problem nicht lösen, ohne dass dies negativen Einfluss auf die Weiterentwicklung von Firefox hätte.

Dazu kommt, dass vollständige Themes gerade einmal von 0,089 Prozent der Firefox-Nutzer überhaupt genutzt werden. Und das entspricht weniger als vier Prozent verglichen mit den Nutzern von Lightweight Themes. Darum wird Mozilla den Fokus nicht auf die Verbesserung der aktuellen Architektur legen, was zum Nachteil beinahe aller Firefox-Nutzer wäre, sondern auf ein neues Themes-System, welches mehr Möglichkeiten bietet als Lightweight Themes, dadurch für mehr Nutzer interessant ist und gleichzeitig nicht die ganzen Nachteile vollständiger Themes hat.

Mozillas Pläne basieren zum Teil auch auf den Ergebnissen der Umfrage, nachdem vor wenigen Monaten Firefox-Nutzer um Feedback zur Zukunft von Themes in Firefox gebeten worden waren. Diese Möglichkeit hatten etwa 250 Nutzer ergriffen.

Zunächst Chrome-Kompatibilität, dann mehr Möglichkeiten als Chrome

Was sind also Mozillas Pläne für Themes in Firefox? Vereinfacht gesagt: die Einfachheit heutiger Lightweight Themes mit den meistgenutzten Funktionen vollständiger Themes kombinieren.

Das Herzstück neuer Themes wird eine Manifest-Datei im JSON-Format sein. In dieser können verschiedene Elemente der Browseroberfläche angesprochen und geändert werden, beispielsweise durch die Definition von Farben oder Bildern oder auch die Festlegung der Form von Tabs. Ein solches Manifest kann beispielsweise wie folgt aussehen:

[pastacode lang=“javascript“ manual=“%7B%0A%20%20%22manifest_version%22%3A%202%2C%0A%20%20%22name%22%3A%20%22Crazy%20Theme%22%2C%0A%20%20%22description%22%3A%20%22I%E2%80%99m%20going%20slightly%20mad…%22%2C%0A%20%20%22version%22%3A%20%221.3%22%2C%0A%20%20%22applications%22%3A%20%7B%0A%20%20%20%20%22gecko%22%3A%20%7B%0A%20%20%20%20%20%20%22id%22%3A%20%22it-finally-happened%40example.com%22%2C%0A%20%20%20%20%20%20%22strict_min_version%22%3A%20%2257.0%22%2C%0A%20%20%20%20%20%20%22strict_max_version%22%3A%20%2265.*%22%0A%20%20%20%20%7D%0A%20%20%7D%2C%0A%20%20%22icons%22%3A%20%7B%0A%20%20%20%20%2248%22%3A%20%22icon.png%22%2C%0A%20%20%20%20%2296%22%3A%20%22icon%402x.png%22%0A%20%20%7D%2C%0A%20%20%22theme%22%3A%20%7B%0A%20%20%20%20%22colors%22%3A%20%7B%0A%20%20%20%20%20%20%22accentcolor%22%3A%20%22%23d92215%22%2C%0A%20%20%20%20%20%20%22textcolor%22%3A%20%22rgb(224%2C%2041%2C%2029)%22%2C%0A%20%20%20%20%20%20%22background_tab%22%3A%20%5B%0A%20%20%20%20%20%20%20%20255%2C%0A%20%20%20%20%20%20%20%20255%2C%0A%20%20%20%20%20%20%20%20255%2C%0A%20%20%20%20%20%20%20%200.6%0A%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%22background_tab_inactive%22%3A%20%5B%0A%20%20%20%20%20%20%20%20255%2C%0A%20%20%20%20%20%20%20%20255%2C%0A%20%20%20%20%20%20%20%20255%2C%0A%20%20%20%20%20%20%20%200.2%0A%20%20%20%20%20%20%5D%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22images%22%3A%20%7B%0A%20%20%20%20%20%20%22theme_frame%22%3A%20%22sample.jpeg%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22properties%22%3A%20%7B%0A%20%20%20%20%20%20%22square_tabs%22%3A%20true%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D“ message=“manifest.json“ highlight=““ provider=“manual“/]

Mozilla stellt dabei sicher, dass das neue Themes-System sowohl gut dokumentiert als auch dauerhaft kompatibel ist. Das heißt, Updates von Firefox werden normalerweise keine Updates der Themes benötigen. Wer einmal ein Theme erstellt hat, soll die nächsten Jahre Ruhe haben – wie schon bei heutigen Lightweight Themes.

Theme-Entwickler können sich dabei auf simple Veränderungen beschränken und auch nur eine einzige Eigenschaft verändern, oder sie erstellen komplexere Themes, die jede mögliche Eigenschaft verändern.

Mozilla wird damit starten, die gleichen Eigenschaften zu unterstützen, die auch von Google Chrome unterstützt werden. Dies macht theoretisch direkt tausende von Chrome-Themes für Firefox verfügbar (sofern die Ersteller ihre Themes für Firefox bereitstellen wollen).

Allerdings ist es ein ausdrückliches Ziel von Mozilla, die Möglichkeiten in Firefox nicht darauf zu beschränken, so dass in Firefox später mehr Anpassungen möglich sein werden als in Chrome.

Heutige Lightweight Themes von Firefox werden auch weiterhin ohne Anpassung funktionieren.

Ähnlich wie bei WebExtensions mit den WebExtension-Experimenten wird es auch eine experimentelle Sektion im Theme-Manifest geben, um direkte CSS-Manipulationen zu erlauben. Was sind Experimente im Zusammenhang mit WebExtensions? Erweiterungs-Entwickler können via WebExtension-Experimente eigene APIs bereitstellen und so Erweiterungen Zugriff auf Funktionen geben, die es für WebExtensions sonst nicht gibt. Das soll vor allem das Experimentieren mit APIs erlauben, um diese schließlich Mozilla zur direkten Implementierung in Firefox vorzuschlagen. WebExtension-Experimente sind auf Nightly-Versionen sowie die Developer Edition beschränkt und funktionieren nicht in Beta- oder finalen Versionen von Firefox. Gleiches wird auch für die experimentelle Sektion zur direkten CSS-Manipulation im neuen Themes-System gelten. Eine solche experimentelle Sektion kann beispielsweise wie folgt aussehen:

[pastacode lang=“javascript“ manual=“%7B%0A%20%20%2F*%20%E2%80%A6%20*%2F%0A%20%20%22theme%22%3A%20%7B%0A%20%20%20%20%2F*%20%E2%80%A6%20*%2F%0A%20%20%20%20%22experimental%22%3A%20%7B%0A%20%20%20%20%20%20%22icons%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22overflow_arrow%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22selector%22%3A%20%22%23overflow-button%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22properties%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22list-style-image%22%3A%20%22custom-overflow.svg%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22-moz-image-region%22%3A%20%22rect(0%2C%2018px%2C%2018px%2C%200)%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22selector%22%3A%20%22%23overflow-button%20%3E%20.toolbarbutton-icon%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22properties%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22margin%22%3A%20%223px%202px%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D“ message=“manifest.json“ highlight=““ provider=“manual“/]

Dynamische Themes dank WebExtension-API

Per WebExtension-API wird Mozilla dynamische Themes erlauben. Das heißt, dass Themes ihr Verhalten zur Laufzeit verändern können. Denkbare Anwendungsfälle sind die Anpassung von Farben, basierend auf der Tageszeit oder Anpassungen an das aktuelle Wetter.

Rechtzeitig vor Firefox 57 verfügbar

Mozilla hat bereits die Implementierung des neuen Themes-Systems begonnen. Dieses soll in einer ersten Version rechtzeitig vor Firefox 57 und dem Ende traditioneller Themes bereitstehen.

Fragen und Feedback

Fragen und Feedback bittet Mozilla, auf der entsprechenden Mailingliste zu stellen. Eine Sammlung häufig gestellter Fragen gibt es hier, ein Engineering Plan gibt detailliertere Einblicke.

Dieser Artikel wurde von Sören Hentzschel verfasst.

Sören Hentzschel ist Webentwickler aus Salzburg. Auf soeren-hentzschel.at informiert er umfassend über Neuigkeiten zu Mozilla. Außerdem ist er Betreiber von camp-firefox.de, der ersten Anlaufstelle im deutschsprachigen Raum für Firefox-Probleme aller Art. Weitere Projekte sind firefox.agenedia.com, mozilla.de, firefoxosdevices.org sowie sozone.de.

15 Kommentare - bis jetzt!

Eigenen Kommentar verfassen
  1. schrieb am :

    Und was werden die meisten User machen: sie werden das Standardtheme so lassen, weil es eben da ist. Und sich in OS "integriert"…

    Aber ich nicht, ich nicht – ich will den FF "in schön". G.s.D. lassen die Mozillas da nicht nach!

  2. schrieb am :

    Ich bin mit dem Standard-Theme sehr zufrieden. Zwei kleine Änderungen habe ich aber an meinem Firefox mithilfe der Datei userChrome.css erledigt, nämlich

    /* rechte Hälfte der Lesezeichen-Schaltfläche ausblenden, nur Stern übrig lassen */
    #bookmarks-menu-button .toolbarbutton-menubutton-dropmarker { display: none; }

    /* Lade-Wirbel von blau zu orange umfärben  */
    .tab-throbber { filter: hue-rotate(-180deg); }

    Würden mir weitere Dinge einfallen, die man sinnvollerweise ändern könnte, kann ich mir durchaus vorstellen, selbst mal ein Theme zu entwickeln. Bin gespannt, auf welche Ideen andere Themes-Programmierer kommen.

  3. schrieb am :

    @Gerhard: "Ladewirbel", na das ist klar. der gefällt mir aber in blau ganz gut – außerdem ist der klein und kommt nicht lange.  

    Aber was ist "rechte Hälfte der Lesezeichen-Schaltfläche ausblenden, nur Stern übrig lassen"???

    Meinst du die Lesezeichen in der Bookmarks-Bar? Hmm, hmm… ❓ 

  4. Christoph
    schrieb am :

    oder auch die Festlegung der Form von Tabs.

    Da kann ich im englischen Original nicht finden, dort ist lediglich allgemein von "underlying UI elements" die Rede und von  der Möglichkeit, "colors, icons, and background images" zu kontrollieren. Ist die Formulierung mit der "Form von Tabs" eine Vermutung, oder gibt es da noch irgendwo weitere Informationen?

    Hab leider keine Ahnung, welches Ausmaß an Styling Chrome zulässt, werde mich da gleich mal schlau machen.

    Prinzipiell finde ich es ungeschickt, so viel von Chrome zu reden: "wir haben nur noch 60 funktionierende Themes, aber wir arbeiten daran, die tausende von Chrome-Themes verfügbar zu machen" – klasse PR, Freunde.

  5. Sören Hentzschel Verfasser des Artikels
    schrieb am :

    oder auch die Festlegung der Form von Tabs.

    Da kann ich im englischen Original nicht finden, dort ist lediglich allgemein von "underlying UI elements" die Rede und von  der Möglichkeit, "colors, icons, and background images" zu kontrollieren. Ist die Formulierung mit der "Form von Tabs" eine Vermutung, oder gibt es da noch irgendwo weitere Informationen?

    Das findest du im Code-Beispiel:

    'properties': {
    'square_tabs': true
    }

    Und das Code-Beispiel stammt aus dem Engineering Plan, der Teil der Ankündigung war. Das war außerdem bereits ein Feature des Prototyps, den man in diesem Video sieht:

    https://vimeo.com/190708433

    Prinzipiell finde ich es ungeschickt, so viel von Chrome zu reden: "wir haben nur noch 60 funktionierende Themes, aber wir arbeiten daran, die tausende von Chrome-Themes verfügbar zu machen" – klasse PR, Freunde.

    Ich verstehe dein Argument nicht. Was hat das eine mit dem anderen zu tun? Das sind doch zwei Dinge, die überhaupt nichts miteinander zu tun haben und auch weder von Mozilla noch von mir in meinem Artikel in einen gemeinsamen Zusammenhang gebracht worden sind.

    Das nur 60 der hunderten vollständigen Themes für Firefox überhaupt noch funktionieren, macht es offensichtlich, dass das derzeitige System nicht funktioniert. Das hat mit Chrome nichts zu tun.

    Auf der anderen Seite unterstützt man im neuen System mehr als Chrome (das ist selbstverständlich eine wichtige Information!), aber zuerst das, was Chrome unterstützt, weil man nunmal irgendwas zuerst unterstützen muss. Und wenn man es sich aussuchen kann, dann nimmt man natürlich das, was Chrome unterstützt, weil nur das Sinn ergibt. Erstens, weil Chrome eben diese Eigeschaften auch unterstützt, weil sie sinnvoll sind (es wäre im Gegenteil sinnlos, nur anderes zu unterstützen, alleine um es anders als Chrome zu machen), zum anderen macht dies bereits tausende Themes für Firefox verfügbar, die nicht neu erstellt werden müssen. Auch der Vorteil lässt sich nicht von der Hand weisen. Wieso sollte man denn zuerst Dinge unterstützen, welche diese Vorteile nicht nutzen? Das wäre doch dumm von Mozilla.

  6. Anon
    schrieb am :

    Und das entspricht weniger als vier Prozent verglichen mit den Nutzern von Lightweight Themes.

    Vermutlich Prozentpunkte 😉

    'selector': '#overflow-button',
    'properties': {
    'list-style-image': 'custom-overflow.svg',
    '-moz-image-region': 'rect(0, 18px, 18px, 0)'
    }

    Sieht erstmal unnötig aufwendig / ausführlich im Vergleich zu echten CSS aus. Gibt es einen Grund, warum das CSS in json gepresst wird?

  7. schrieb am :

    @Herr Hugo (15:46 Uhr): Ich meine das Sternsymbol in der Icon-Leiste, mit dem man eine Website sehr schnell als Lesezeichen setzen kann. Leider kommt es nur in Form eines Doppel-Buttons, mit dem man dann seine Lesezeichen verwalten kann. Was meine Anpassung bewirkt, siehst du auf diesem Bild (links verändert, recht Original-Button). Das hat aber mit meiner Nutzung zu tun. Ich verwende den Stern wie ein Eselsohr, dass ich auch einfach schnell wieder löschen kann – nicht als Vorschlaghammer fürs gesamte Lesezeichenmanagement.

  8. schrieb am :

    @Gerhard G.: ach sooo, den Stern. Na, bei mir sieht der Fox etwas anders aus, da ich "Classic Theme Restorer" und einige andere Add-Ons nutze. 

    Ich bin auch ein "Sondernutzer": 2x Win7, 2x Win10, 1x ElCapitan im Wohnzimmerchen. Überall wird der FF am häufigsten benutzt, überall ist Chrome als Standard gesetzt.

    Und überall sind Apple-Tastaturen – am iMac natürlich eine Maus von…Microsoft. Warum ich das so mache? Ja nun – mich hält keiner ab, grins. Und ich komme auch sehr gut mit den Apple-Tastaturen an Win-Rechnern zurecht.

  9. Sören Hentzschel Verfasser des Artikels
    schrieb am :

    Sieht erstmal unnötig aufwendig / ausführlich im Vergleich zu echten CSS aus. Gibt es einen Grund, warum das CSS in json gepresst wird?

    Du kannst in einer JSON-Datei nun einmal kein CSS auf konventionellem Weg schreiben. Das JSON-Format ist sehr strikt, was die Einhaltung der Syntax betrifft. 😉

  10. Anon
    schrieb am :

    Du kannst in einer JSON-Datei nun einmal kein CSS auf konventionellem Weg schreiben. Das JSON-Format ist sehr strikt, was die Einhaltung der Syntax betrifft. ?

    Naja als ein großer String würde es doch ohne Probleme gehen
    {/*...*/,css:"#overflow-button {list-style-image: 'custom-overflow.svg'; -moz-image-region: rect(0, 18px, 18px, 0);"}

  11. Sören Hentzschel Verfasser des Artikels
    schrieb am :

    Übersichtlicher finde ich das aber nicht. 😉

  12. schrieb am :

    So wie ich Anons Frage verstanden habe, geht es ihm vor allem darum, warum man für CSS-Anweisung denn nicht einfach das CSS-Format verwendet. Warum müssen alle CSS-Anweisungen einzeln aufgedröselt und in (fürs CSS völlig unnötige) JSON-Elemente gesteckt werden? Sein Alternatvievorschlag, alle CSS-Befehle in einen einzigen String zu packen, wäre insofern natürlich übersichtlicher, weil man bis auf einen einzigen alle 'selector': '' und 'properties': {} spart. Wenn man jetzt noch Zeilenumbrüche einsetzen würde/könnte, hätte man beinahe eine völlig normale, aufs wesentliche reduzierte CSS-Datei.

  13. Sören Hentzschel Verfasser des Artikels
    schrieb am :

    Weniger Zeichen != übersichtlicher. 😉 Und JSON erlaubt nun einmal keine Zeilenumbrüche, das Format kann Mozilla nicht ändern.

  14. Michael M.
    schrieb am :

    Die JSON-Beispiele sind übrigens syntaktisch falsch: In JSON ist nur das doppelte Anführungszeichen als String-Begrenzer erlaubt, das einfache wie in den Beispielen fehlerhaft.

  15. Sören Hentzschel Verfasser des Artikels
    schrieb am :

    Danke, ist korrigiert. Das muss an irgendeiner Stelle automatisch konvertiert worden sein, denn in der Quelle, aus der ich das kopiert habe, steht es auch korrekt.

Und jetzt du! Deine Meinung?

Erforderliche Felder sind mit einem Asterisk (*) gekennzeichnet. Die E-Mail-Adresse wird nicht veröffentlicht.
  1. Nach Absenden des Kommentar-Formulars erfolgt eine Verarbeitung der von Ihnen eingegebenen personenbezogenen Daten durch den datenschutzrechtlich Verantwortlichen zum Zweck der Bearbeitung Ihrer Anfrage auf Grundlage Ihrer durch das Absenden des Formulars erteilten Einwilligung.
    Weitere Informationen