Anpassungen der CSS- und JS-Codes ab Firefox 68 bzw. 69

Mal ein Beispiel.

Der Eintrag Alles auswählen im Rechtsklick Kontextmenü wird zu Zeit so angesprochen:

menuitem[label="Alles auswählen"]{

-moz-binding:

url("chrome://global/content/bindings/menu.xml#menuitem-iconic") !important;

list-style-image: url...

In Zukunft muss das dann so ausssehen:

menuitem[label="Alles auswählen"]{

-moz-appearance:none!important;

background: url .....

Und damit dann bei hover ein farbiger Hintergrund erscheint, muss immer ein weiterer Code eingefügt werden:

menuitem[label="Alles auswählen"]:hover{

-moz-appearance:none!important;

background: red url .....

Ab Fx 69!

Wenn jemand über einem CSS - Code diesen Eintrag hat:

@-moz-document url(chrome://browser/content/browser.xul){

der muss ihn ändern auf:

@-moz-document url(chrome://browser/content/browser.xhtml){

Das gilt auch für Scripte, wo oben dieser Eintrag ist:

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

Der muss dann auch geändert werden in:

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

Als Änderung zu den Benutzerskripten hatten wir bereits die Umbennung der JavaScript-Methode createElement (nicht createElementNS!) in createXULElement. Diese Skript-Methode dient der Erschaffung eines JavaScript-Elements. Wenn ihr mal in solch ein Skript hineinschaut, werdet ihr bemerken, dass damit Elemente der Firefox-Oberfläche gemeint sind, wie z. B. menuitem für einen Menüeintrag.

Hierzu muss man sagen, dass diese Methode nach Abschluss der Umstellung nach XHTML wieder in createElement rückbenannt werden muss. createXULElement gibt es nur so lange, wie XUL und XHTML nebenher existieren.

Eine weitere Änderung, die im Rahmen der Umstellung von XUL auf XHTML vorgenommen wird, ist der Ersatz des XUL-Textfeldelements textbox durch die XHTML-Textfeldelemente input (einzeiliges Textfeld) und textarea (mehrzeiliges Textfeld). Auch dies ist bereits in einem Benutzerskript vorgekommen, und zwar in BuildIDToAboutDialogue.uc.js. Dieses Skript fügt den Useragent in das Fenster aboutDialog ein (Hilfe --> Über Firefox/Nightly). Hier ein Bildschirmfoto:

Das große Textfeld mit dem Useragent ist im Bildschirmfoto durch einen dicken roten Rahmen hervorgehoben.

Hier sollen im Code-Fenster nur die Zeilen 29 bis 40 des Skriptes dargestellt werden, die das Textfeld anlegen und definieren.

addBuildid: function () {
    var ua = this.convUA() + " ID:" + this.buildid();

    var userAgentField = document.getElementById("userAgent");
    if (!userAgentField) {
      userAgentField = document.getElementById("rightBox");
      var label = document.createElementNS("http://www.w3.org/1999/xhtml", 'textarea');
      userAgentField = userAgentField.appendChild(label);
      userAgentField.id = "agent";
      userAgentField.value = navigator.userAgent;
      userAgentField.multiline = true;
      userAgentField.rows = "5";
  }

Wichtig ist oben die Zeile 7, die mit var label beginnt. Am Ende wird jetzt das XHTML-Textfeldelement textarea angegeben, statt des früheren textbox.

Außerdem muss dort mit document.createElementNS der neue XHTML-Namensraum http://www.w3.org/1999/xhtml angegeben werden, der alte Namensraum für XUL-Dateien ist http://www.mozilla.org/keymaster/gate…ere.is.only.xul.

Würde man ab Firefox 68 diese beiden Änderungen nicht vornehmen, sprich weiterhin den XUL-Namensraum und das XUL-Textfeldelement textbox verwenden, könnte das Textfeld nicht mehr mehrzeilig angezeigt werden, und der Text (der String des Useragent ist sehr lang) wird nicht mehr umbrochen .

Die farbige Gestaltung oben im Bildschirmfoto hat mit dem Skript nichts zu tun, sondern mit der CSS-Datei about-dialog.css.

Zitat von BarbaraZ-

Es wenn es nicht klappt[....]

Vielleicht kann dieser Tippfehler auch noch korrigiert werden.

Da angepinnt, fällt es doch immer wieder ins Auge...

Ab Firefox 69 können im CSS-Code für about:-Seiten wie z. B. about:about, about:addons, about:support usw. keine Grafiken im Base64-Code mehr verwendet werden. Grund ist, dass Mozilla nun die sogenannte Content Security Policy (Richtlinien zur Inhaltssicherheit) auf diese internen Seiten von Firefox anwendet. Content Security Policy beinhaltet Richtlinien, die Cross-Site-Scripting (XSS) und andere Methoden der Dateneinspritzung (Englisch: data injection) verhindern sollen. Mit Base64-Grafiken wurden/werden Symbole im CSS-Code eingebunden.

Diese neue Sicherheitsmaßnahme bedeutet aber nicht, dass sich zukünftig keine Symbolgrafiken mehr in die about:-Seiten einbinden lassen. Ihr könnt jetzt die Grafiken direkt einbinden. Dazu müsst ihr im Ordner chrome eures Profilverzeichnisses einen Unterordner icons anlegen.

Eine Grafik im Base64-Code wurde bisher wie folgt eingebunden:

background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACmElEQVQ4jZXP20tTARwH8EP/RA+996L2ohOC3oWgN6M3K/WhoCB8a1jN3MWHNeduKmelY22QhZZjUWgpq6lrmOPMbceju8Wcm7q2nV3OZTvn20uJCZX94Avfl+8HfgRxyrPb7b12uz1HkqQwMTFhOu2OIAiCGB8fP0eSZCadToOiKFit1pf/BZAk2e31epHNZmE2m4smk2ludHTUrdfrjacCbDbb1fn5eUSjURiNRsZgMNSWl5cxMjIi/XOsUqnOWCwWfzAYBEVRCAQCoCgKKysr0Gg0OWLL0x5K+XrE9Kcbx3JdZLyX4tY3Yb1+Zkdwzn1GJBLBwsIC3G43pqenoVarMyqVqpdgPApeliUAMiDLwM8eiO5B9yKF16sHGHTEYXUtwvV0uPlhVnnoNPcZlErlWYIgCIKZ7SjJTQ58xoBaYgy11BR8q34Mu5LwrBXwbr0A58c8+g0RyI3vgCQKzKxi8+jHrZlOVhLLqCUsqO6YsbT0CsapRWw4+sFYFH/MMaBDbNRz2Pc/RNJ5Gb7xHiScV1AoszgsVpDcLSB3UIAklCEJJQA4Abg6RUAGJB6Q6mCrVchiDnTsLfyrM8jQJnCpB6jHB1DbvgVJyJ8AHApBbtbRZNfQKL5HMWkBn9Ej/HUSdGgMXPox6vG7qDE3UY1dg8Tv/Q4wkwpeElmIBQ+E/HPwWSu4bxpw6SFwKSW41CBqTC8q0W6w4S5IQu4EYFFwsliEkHeA3x0Dlx5CPTGAGtOHaqwblXAX2NBFlNcvoBQ8jwb7BYxFwR0BtKE9KxZ3StW4W6puP0OFsaFCG1CJacFuPgIbvo8yNYBy6A7KG7fB7/vkrSftpSMgqm65F9O1uWlt2z6ta+X+Gm0rR+tayzFti/nX/gcwUkLfFByGBgAAAABJRU5ErkJggg==")

Um eine Grafik im Base64-Code zu verwenden, musste sie immer erst in den Base64-Code umgewandelt werden und das Ergebnis war eine sehr lange kryptische Zeichenkette, wie ihr hier im Beispiel seht.

Eingeleitet wird die Code Zeile mit background: url(data:image/png;base64, ... Es handelt sich also um eine URL, einen Pfad zur gewünschten Grafik. data:image/png kennzeichnet den sogenannten MIME-Typ, hier in diesem Fall handelt es sich also um eine Bilddatei im PNG-Format.

Die neue Angabe ist einfacher:

background: url(../icons/2.png)

Wie ihr seht, fällt dieser lange Code-String weg und deswegen lädt die Grafik auch schneller. Das ist ein weiterer Vorteil.

Wenn ihr eine Grafik neu einbindet, war es das auch schon. Die Ordnerstruktur muss dann in eurem Profilverzeichnis wie folgt aussehen:

Profil
     chrome
     CSS
     CSSWeb
     icons
        2. png
     userChrome.css
     userContent.css

Profil bezeichnet eurer Profil, in dem es die Ordner CSS und CSSWeb mit euren CSS-Dateien und den Ordner icons mit eurern zukünftigen Grafiken gibt. In diesem Fall enthält der Ordner icons die Datei 2.png. Außerdem natürlich die Dateien userChrome.css und userContent.css direkt im Ordner chrome.

Was ist aber, wenn ihr schon eine CSS-Datei für die about:-Seiten habt und ihr vielleicht gar nicht wisst, wie ihr zur eigentlichen Grafik kommt, die ja bis dato nur als Base64-Code vorliegt?

Es gibt eine einfache Methode, die eigentliche Grafik zu erhalten: Markiert die ganze Zeichenkette einschließlich des MIME-Typs, aber ohne die Anführungszeichen, und kopiert sie in die Adressleiste von Firefox, also oben

data:image/png;base64,iVBORw0KGgoAAAANSUhEUg ... yGBgAAAABJRU5ErkJggg==

Da die Zeichenkette sehr lang ist, habe ich sie hier verkürzt dargestellt.

Nach Enter zeigt euch Firefox die Grafik an. Klickt nun mit der rechten Maustaste auf die Grafik und wählt "Grafik speichern unter..." aus dem Kontextmenü. Speichert die Grafik nun in den Unterordner icons im Ordner chrome eures Profilverzeichnisses. Natürlich könnt ihr die Grafik auch vorerst irgendwoanders zwischenspeichern, sie sollte aber der Einheitlichkeit mit dem Forum wegen im Ordner icons sein. Einen Namen für die Grafikdatei könnt ihr selbst vergeben.

Dem oben angegebenen Base64-code entspricht folgende Grafik:

Ein Beispiel. In der CSS-Datei about-about.css, die eine Übersicht aller about:-Seiten angezeigt, wird an vier Stellen immer das gleiche Symbol eingebunden. Mit der Datei about-about.css gestaltet, sieht dann die Seite about:about wie folgt aus:

Die Symbole sind rot bzw. blau senkrecht eingerahmt.

Ergänzend dazu.

Man kann sich diesen Ordner Icons neu anlegen, muss es aber nicht. Dann muss nur der Pfad zur Grafik genau angegeben werden.

Der Vorteil durch den Ordner Icons liegt:

1. Bei Nutzung eines portablen Firefox, dann hat man die Icons immer dabei.

2. Bei einer Profilsicherung werden sie gleich mitgesichert.

Danke, Andreas, für die Ergänzung.

Zitat von milupo

Wie ihr seht, fällt dieser lange Code-String weg und deswegen lädt die Grafik auch schneller. Das ist ein weiterer Vorteil.

Jain. Da referenzierte Bilder das Rendering nicht blockieren, Stylesheets jedoch schon, ist eine kürzere CSS-Datei sicher vorteilhaft. Aber der große Unterschied ist, dass der Browser bei base64-kodierten Bildern diese zunächst in richtige Bilder umwandeln muss, und das ist das, was CPU-Leistung kostet (und bei Notebooks auf den Akku geht). Und wird eine Grafik mehrfach eingebunden, multipliziert sich das auch noch. Denn während Bilder gecacht werden können und der Browser die Arbeit nur ein einziges Mal machen muss, müssen data:-URIs in CSS-Dateien überall, wo sie eingebunden sind, neu dekodiert werden, selbst wenn es zehn Mal exakt die gleiche Grafik ist.

Noch was zur Verwendung von Grafiken: Man kann hier enorm an der Dateigröße optimieren, ohne an Qualität zu verlieren. Wenn man sich Bilder aus dem Internet lädt, sind diese ganz häufig nicht für eine geringe Dateigröße optimiert. Die oben angehängte Grafik habe ich jetzt auch "nur" mit einem Klick von 721 auf 667 Bytes runtergebracht, ohne dass man einen Unterschied sieht, aber ich hatte schon viele Fälle, wo die Dateigröße nach einer Optimierung über 90 Prozent geringer war. Also falls jemand ein paar Grafiken optimiert braucht, einfach melden…

In diesem Thema steht ein für mich wichtiger Hinweis auf Änderungen an JS-Skripten. Könnte der Titel vielleicht ergänzt werden?

Z.B. Anpassungen der CSS- und JS-Codes ab Firefox 68 bzw. 69

Seit dem 19.07.2019 können 70er Nightlies bei Verwendung bestimmter Benutzerskripte abstürzen, nämlich solcher Skripte, die die JavaScript-Funktion eval() verwenden. Firefox stürzt dabei sofort beim Start ab, ohne dass ihr etwas tun könnt.

Als erstes solltet ihr euch davon überzeugen, was den Absturz verursacht. Startet einen Texteditor und öffnet darin euer Profilverzeichnis. Im Profilverzeichnis gibt es einen Ordner crashes und darin einen Unterordner events. Im Ordner events gibt es eine Datei oder mehrere Dateien mit einem kryptischen Dateinamen ohne Dateiendung. Dieser kryptische Dateiname ist eigentlich die Absturz-ID, z. B. f45a4550-7bea-480a-92fa-9d3a550398f7. Diese Dateien sind reine Textdateien, die ihr jedoch, weil sie keine Dateiendung haben, nicht einfach mit Doppelklick öffnen könnt. Allerdings fragt euch Windows dann, mit welchem Programm ihr sie öffnen wollt, dann solltet ihr immer einen/euren Texteditor auswählen, z. B. Notepad++.

In der Datei scrollt ihr dann hinunter bis fast zum Ende und es kommt dann folgende Zeile:

MozCrashReason=do not use eval with system privileges: file:///c:/users/lenovo%20m58/appdata/roaming/mozilla/firefox/profiles/n8ilmaz4.testnightly69-5/chrome/speicherort_aendern-hsb.uc.js

MozCrashReason bezeichnet die Absturzursache. Hier ist do not use eval with system privileges als Ursache angegeben, also „Verwenden Sie eval nicht mit Systemrechten“. Das ist genau das in diesem Beitrag benannte Problem. Hinter dem folgenden Doppelpunkt ist der Pfad zum betroffenen Skript angegeben, hier also

file:///c:/users/lenovo%20m58/appdata/roaming/mozilla/firefox/profiles/n8ilmaz4.testnightly69-5/chrome/speicherort_aendern-hsb.uc.js.

Es kann aber noch weitere Skripte betreffen, denn Firefox stürzt sofort nach dem ersten betroffenen Skript ab und kommt gar nicht erst zu weiteren betroffenen Skripten.

Für dieses Problem mit der Funktion eval() gibt es zwei Lösungen:

1. Die Skripte entfernen, also nicht mehr nutzen. Das bietet sich vor allen Dingen an, wenn sie sowieso nicht mehr richtig funktionieren.
2. Oder ihr geht in about:config, sucht nach der Einstellung security.allow_eval_with_system_principal und setzt deren Wert auf true. Dann lassen sich die betroffenen Skripte dennoch verwenden, ohne dass Firefox abstürzt.

Damit ihr die Einstellung ändern könnt, müsst ihr erst das Skript im Profil deaktivieren, das heißt, die Datei umbenennen, z. B. benutzerskript.uc.js in benutzerskript.txt oder ganz aus dem Profil entfernen. Ansonsten stürzt Firefox wieder ab. Das ist sowieso noch möglich, wenn es noch weitere betroffene Skripte gibt. Dann könnt ihr die Skripte wieder zurückumbenennen.