CSS Switch

EffPeh

Hallo...

Ich habe sämtliche Farbvariablen meiner Anpassung in einer gesonderten CSS-Datei.
Nun dachte ich, es wäre doch nett, wenn ich per Button(s) eine Funktion aufrufen könnte, über die ich nachträglich CSS-Files mit Farb-Varianten laden lassen kann. Ich bin mir allerdings nicht sicher, ob so dynamisch geladenes CSS auf die Browser-Styles eine Auswirkung hätte oder einfach ignoriert werden.
Weiss jemand von euch, ob es per Script möglich ist, einen solchen CSS Switch zu verwirklichen?
Oder hat das eventuell sogar schon mal jemand gemacht?

aborix

Hallo auch ,

das ist möglich, siehe MDN - nsIStyleSheetService
und wurde hier bereits gemacht: User CSS Loader

EffPeh

Sehr geil, aborix. Bist mein Held...
nsIStyleSheetService, das war's.
Ich bin da neulich schon mal drüber gestolpert, habe es blöderweise aber vergessen zu bookmarken.
Na, dann werde ich mir das mal am WE anschauen.
Vielen Dank dafür!...

EffPeh

So, ich habe meinen Switcher soweit jetzt fertig. Funktioniert ganz gut und ist auch zum Testen von Styles sehr geil. Mein grösstes Problem bei der Geschichte war es, herauszufinden, wie man den Pfad zu den CSS-Dateien zu einer file://-URI umwandeln kann. Dabei hat mir das UserCSSLoader-Script geholfen. Ansonsten läuft das Beispiel-Script aber bei mir in Version 57 nicht. Also das Menü wird erstellt, aber alle Funktionen sind ohne Wirkung.

Für alle, die es interessiert, hier der Code des Switchers.
Das Javascript für den Button und der Funktion zum Switchen der Styles:

Code

// Button > CSS Switch
try {
	CustomizableUI.createWidget({
		id: "fp-switch",
		sid: 0,
		sidMax: 2,
		defaultArea: CustomizableUI.AREA_NAVBAR,
		removable: true,
		label: "Switch Browser Color Scheme",
		tooltiptext: "Switch Browser Color Scheme",
		onClick: function() {
			this.sid++;
			if( this.sid > this.sidMax ) { this.sid = 0; }


			var switchFile = 'fp-switch-' + this.sid + '.css';


			var sss = Components.classes["@mozilla.org/content/style-sheet-service;1"]
							.getService( Components.interfaces.nsIStyleSheetService );
			var ios = Components.classes["@mozilla.org/network/io-service;1"]
							.getService( Components.interfaces.nsIIOService );


			Components.utils.import( 'resource://gre/modules/FileUtils.jsm' );
			let file = Services.dirsvc.get( 'UChrm' , Components.interfaces.nsIFile );
			file.appendRelativePath( switchFile );

			var fileURL = Services.io.getProtocolHandler( 'file' ).QueryInterface( Ci.nsIFileProtocolHandler ).getURLSpecFromFile( file );


			var uri = ios.newURI( fileURL , null , null );


			sss.loadAndRegisterSheet( uri , sss.AGENT_SHEET );			
		}
	});
} catch (e) {
	Components.utils.reportError(e);
};

Alles anzeigen

Das CSS für den Button:

CSS

#fp-switch {
	list-style-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAbpJREFUeNqkU01LQkEUvTPviaLicxGvXos2/gmXrUKIhDb9hraltI0CNyW0bdlPCNpEG39Bj/wD4kozgtQ039P30Zyb76UEkTRwYe7MOeeeuTMjwjCk/wxxfH5JQog9NbdW5HZV8Ts9CAIkm1enJ9d/NSME0dHZxSHm0vM8UiFcn+jm9p7eZ/RrADNRWHDA1WezGQthcX+3RAPXo9FoxLE4stksBzAQUjyJ9UhAfHhhTOr3+1Sr1ZYEKpUK5fN5etM0SqfTEBCLAnI6nZLrugz2fZ+SySRVq1XO6/U6DYdD0hQZA7jYAYhwgGYisIk1VDEMgwmYY01K5jBO5V8O5lW5mY7j8CYq4bzNZjM+P3CRA3XtyOWigEAFbACUSCSYdFDaZoJt27DMDoCZC4jFI0hUjixGDl6c7xvAgEgqleK54i07iKqzmhKyLIva7TbnuVyOdF3nY2QymaiR7ECOx2NSISHQaDRYBOBisUi9Xo9arRaZpsmiaGaEAQdc/cl+JHPDYrVyuUyTySS++0Kh8OMZR5hOpyNenrsE4pYw1ndIamsrfaXAfw0HvQcI4LLRGW3F36gePzmfAgwATxH6b1wdl1wAAAAASUVORK5CYII=') !important;
}

Das CSS der Switch-Files schaut von der Struktur her eigentlich immer gleich:

CSS

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


:root {
	--uc-color-1: rgba(255,128,0,1) !important;
	--uc-color-2: rgba(255,255,0,1) !important;
	/* ... usw ... */
}


};

Alles anzeigen

Die Files sind mit einem Präfix benannt und bekommen eine ID-Nr angehängt.
Also in meinem Fall etwa fp-switch-0.css, fp-switch-1.css, fp-switch-2.css, usw.
Das erste File - hier die fp-switch-0.css - wird in der userChrome.css included, alle anderen werden bei Bedarf über das Script dynamisch geladen.

Momentan muss ich dem Script noch manuell mitteilen, wie die letzte ID-Nr lautet (= sidMax). Doch da gibt es sicher auch noch andere Möglichkeiten, wie man die Anzahl von Dateien mit dem Präfix X automatisch zählen kann.

EffPeh

Ich habe das Script jetzt noch so angepasst, das automatisch ermittelt wird, wieviele Switch-Files im chrome-Verzeichnis des Profils liegen.

Code

const switchPrefix = 'fp-switch-';


var countSwitch = function() {
	let count = -1;
	Components.utils.import( 'resource://gre/modules/FileUtils.jsm' );
	let file = Services.dirsvc.get( 'UChrm' , Components.interfaces.nsIFile );
	let entries = file.directoryEntries;
	while( entries.hasMoreElements() ) {
		let entry = entries.getNext();
		entry.QueryInterface( Components.interfaces.nsIFile );
		let leafName = entry.leafName;
		let n = leafName.search( switchPrefix );
		if( n == 0 ) { count++; }
	}
	return count;
};


// Button > CSS Switch
try {
	CustomizableUI.createWidget({
		id: "fp-switch",
		sid: 0,
		defaultArea: CustomizableUI.AREA_NAVBAR,
		removable: true,
		label: "Switch Browser Color Scheme",
		tooltiptext: "Switch Browser Color Scheme",
		onClick: function() {
			this.sid++;
			if( this.sid > countSwitch() ) { this.sid = 0; }


			var switchFile = switchPrefix + this.sid + '.css';


			var sss = Components.classes["@mozilla.org/content/style-sheet-service;1"]
							.getService( Components.interfaces.nsIStyleSheetService );
			var ios = Components.classes["@mozilla.org/network/io-service;1"]
							.getService( Components.interfaces.nsIIOService );


			Components.utils.import( 'resource://gre/modules/FileUtils.jsm' );
			let file = Services.dirsvc.get( 'UChrm' , Components.interfaces.nsIFile );
			file.appendRelativePath( switchFile );

			var fileURL = Services.io.getProtocolHandler( 'file' ).QueryInterface( Ci.nsIFileProtocolHandler ).getURLSpecFromFile( file );


			var uri = ios.newURI( fileURL , null , null );


			sss.loadAndRegisterSheet( uri , sss.AGENT_SHEET );			
		}
	});
} catch (e) {
	Components.utils.reportError(e);
};

Alles anzeigen

Die Konstante switchPrefix legt den Präfix der Switch-Files fest. Die Funktion countSwitch() ermittelt die Anzahl der Switch-Files. Es muss also ggfs. nur noch die Konstante des Präfix angepasst werden. Ich rufe die countSwitch()-Funktion übrigens bewusst in der onClick-Funktion auf, damit man ohne Neustart des Browsers neue Switch-Files anlegen kann.