[TB 102] userChrome.css anpassen: Beste Praxis

Hallo,

nichts anderes bekannt, als mit einem Texteditor (Windows Editor, Notepad++ o.ä.) entsprechende CSS Codes,

gespeichert im Format UTF-8 (ohne BOM) als userChrome.css oder userContent.css abzulegen. (Groß- Kleinschreibung wichtig)

Zitat von Andreas Borutta

Gibt es für TB 102 mittlerweile wieder einen Weg, dass ein normaler Nutzer mit einem Klick ein editierbares Textfeld für userchrome.css öffnen kann?

... die Vorgehensweise ist in allen und auch den derzeit aktuellen TB-Versionen gleich.

Nein, weil der Ordner chrome von dir explizit erstellt und dort die userChrome.css per Text-Editor erstellt werden muss.

Zudem muss im Konfigurationseditor

der Eintrag toolkit.legacyUserProfileCustomizations.stylesheets auf true gesetzt werden.

Mit einem Klick kenne ich es bisher nicht.

Ich selber habe die Erweiterung DevTools Button installiert, dann den Wert der Einstellung devtools.debugger.prompt-connection im Config-Editor auf false gestellt.

Dadurch wird beim Klick auf den DevTools Button der Entwickler-Werkzeugkasten direkt in einem neuen Fenster geöffnet.

Durch die zahlreichen und zudem redundant vorhandenen xxxxxxxxx.css Dateien im linken Panel ist die Suche nach der Datei userChrome.css sehr nervig, zudem die Dateien nicht alphabetisch geordnet sind. Die Suche lâsst sich aber erleichtern durch folgende Manipulation:

den folgenden CSS Code

@-moz-document url-prefix("chrome://devtools/content/styleeditor/index.xhtml") {
  ol.splitview-nav label[value="userChrome.css"],
  ol.splitview-nav label[value="userContent.css"] {
    background-color: red !important;
    color: white !important;
  }
}

in einen Text-Editor kopieren, die Datei unter dem Namen userContent.css speichern und im Profilordner in den Ordner chrome_debugger_profile verschieben.

Dadurch werden die Dateien userChrome.css und userContent.css im linken Panel des Entwicklerwerkzeugkastens optisch rot und blau hervorgehoben und fallen selbst beim schnellen Scrollen der Liste der css Dateien sofort auf:

Das macht insgesamt drei Aktionen, die ungefähr 5 Sekunden in Anspruch nehmen:

Klick auf den Button DevTools

Scrollen der Liste der Dateien im Tab Style-Editor

Klick auf userChrome.css zum Öffnen der Datei im Werkzeugkasten

Nachtrag: statt der dieser Manipulation kann man auch im Werkzeugkasten nach "userch...." filtern

NB: die Datei userContent.css wird derzeit aus unbekanntem Grund nicht farblich im Werkzeugkasten hervorgehoben, wahrscheinlich fehlt sie mal wieder völlig.

In der Erweiterung Phoenity Bottons gab es mal einen Button zum Öffnen des Profilordners, ich weiß aber nicht ob dieser noch mit TB 103 funktioniert. Sonst wäre er ein schneller Weg zur Datei userChrome.css, wobei aber zu beachten ist, dass der Entwickler-Werkzeugkasten den großenV orteil hat, dass TB nicht nach jeder Änderung des Codes neu gestartet werden muss.

Zitat von Andreas Borutta

Auf macOS nicht.

Da steckt der Ordner chrome im ordner permanent.

Wie bitte?

Und wo befindet sich dieser Ordner "permanent" ?

Unter Mojave befindet sich der Ordner "chrome" immer noch hier

Ein paar gute Skripte, OpenChromeDirectory.uc.js - Alt+C Hotkey öffnet den Chrome-Ordner; OpenProfileDirectory.uc.js - Alt+P Hotkey öffnet den Profile-Ordner.

Funktioniert in installiertem oder portablem Thunderbird v68-v102. Ich denke, der Assistent kann den Code ändern, um userChrome.css sofort zu öffnen, wenn das nach dem Öffnen des Chrome-Ordners Sinn macht.

// ==Userscript==
// @name Open Chrome Directory
// OpenChromeDirectory.uc.js
// Dieses Skript öffnet mit dem Hotkey "Alt + c" oder "AltGr + c" direkt den Chromeordner.
// @include *
// ==/Userscript==


(function(win){
Components.utils.import("resource://gre/modules/Services.jsm");


function openChromeDirectory() {
// Get the chrome directory.
let currUChrm = Services.dirsvc.get("UChrm", Ci.nsIFile);
let chromeDir = currUChrm.path;


// Show the chrome directory.
let nsLocalFile = Components.Constructor("@mozilla.org/file/local;1","nsIFile", "initWithPath");
new nsLocalFile(chromeDir).reveal();
}


if (typeof win.openChromeDirectory == 'undefined') {
win.openChromeDirectory = openChromeDirectory;
win.addEventListener('keydown', function(e) {
if (e.altKey == true && e.keyCode == 67) {
e.preventDefault();
openChromeDirectory();
}
}, false);
}


})(window);

// ==Userscript==
// @name Open Profile Directory
// OpenProfileDirectory.uc.js
// Dieses Skript öffnet mit dem Hotkey "Alt + p" direkt den Profilordner.
// @include *
// ==/Userscript==


(function(win){
function openProfileDirectory() {
Components.classes["@mozilla.org/file/directory_service;1"]
.getService(Components.interfaces.nsIProperties)
.get("ProfD", Components.interfaces.nsIFile)
.launch();
}
if(typeof win.openProfileDirectory == 'undefined') {
win.openProfileDirectory = openProfileDirectory;
win.addEventListener('keydown', function(e) {
if (e.altKey == true && e.keyCode == 80) {
e.preventDefault();
openProfileDirectory();
}
}, false);
}
})(window);

Zitat von Andreas Borutta

Im Profilordner existiert kein Unterordner chrome

Wenn ich nicht irre, musste der schon immer manuell angelegt werden. Das geht bestimmt bei den "Profis" vergessen, wenn diese seit Jahren mit den Möglichkeiten der userChrome.css arbeiten.

Zitat von Andreas Borutta

Ich habe nochmal ein neues Profil in TB 102 angelegt.
Im Profilordner existiert kein Unterordner chrome auf der obersten Ebene.

In sehr frühen TB-Versionen wurde automatisch direkt im Profilordner ein Ordner "chrome" mit den beiden Da-teien userChrome-example.css und userContent-example.css angelegt. Das ist aber schon seit Jahren nicht mehr der Fall.

Den chrome Unterordner im Ordner storage kannte ich bisher gar nicht. Dieser hat aber überhaupt nichts mit userChrome.css zu schaffen.