Script zu zuweisen einer CSS-Klasse gesucht

Zitat von HT-Frogger

Ich mache zwar einiges mit CSS, aber mit Scripten habe ich es nicht so gut drauf...

CSS und Skripte sind ja auch zwei verschiedene Paar Schuhe. Du meinst sicherlich CSS-Code.

Meinst du so etwas: https://www.camp-firefox.de/forum/viewtopic.php?f=16&t=122197 ?

milupo: HT-Frogger möchte CSS-Klassen per Script zuweisen. Dann kann er entsprechenden CSS-Code in CSS-Dateien verwenden, welche die zugefügten Klassen verwenden. Aber in dem Schritt, nach dem er hier fragt, geht es ihm um eine Script-Frage.

Zitat von HT-Frogger

milupo: Genau das meine ich.

Ah, das war für mich nicht so klar ersichtlich.

Zitat

Ich habe zwar auch schon ein paar mit JS-Scripte für die Webseite geschrieben, aber sich dann auch noch in den bestehenden FF reindenken - das ist was anderes...

Da bist du viel besser als ich ...

Ja, klingt nach dem, was ich in dem von aborix erwähnten thread getan habe, also ein CSS-Switcher.
Wenn du willst, kann ich dir das aktuelle Script nochmal komplett hier posten. :wink:

Zitat von HT-Frogger

Das könnte man sicherlich auch mit nachgeladenen CSS-Dateien realisieren. Ich bin aber an sich kein Freund davon Dateien (auch längere CSS-Dateien) ohne notwendigkeit zu zerstückeln (nur um mehr Plattenzugriffe zu erzeugen).

Wenn es sich um eine Website handeln würde, könnte ich dir ja noch bedingt zustimmen. (Wenn ich mal SASS und LESS aussen vorlasse.) Aber für den Browser?
Mehr Plattenzugriffe? Ich bitte dich... :roll:
Davon abgesehen kannst du das Script leicht so umschreiben, dass man es auch auf Klassen anwenden kann.

Zitat von HT-Frogger

EffPeh:
Merkt sich das Script auch die zuletzt gewählte Include-Datei und benutzt sie beim nächen Start? Ich weiß nicht wo man das speichern könnte, evt in about:config?

Meine aktuelle Version macht das. Da wird die zuletzt genutzte include-ID in einer einfachen Textdatei direkt in chrome gespeichert. Also nicht die Version aus dem von aborix verlinkten thread. :wink:

Hier mein aktuelles Script:

(function() {	
/**********************************************************************************************************************************/


Components.utils.import("resource://gre/modules/Services.jsm");
Components.utils.import("resource://gre/modules/NetUtil.jsm");
Components.utils.import( 'resource://gre/modules/FileUtils.jsm' );


var CI = Components.interfaces;
var CC = Components.classes;


const switchPrefix = 'fp-switch-';
const switchData = 'switchpref.txt';


var countSwitch = function() {
	let count = -1;
	let file = Services.dirsvc.get( 'UChrm' , CI.nsIFile );
	let entries = file.directoryEntries;
	while( entries.hasMoreElements() ) {
		let entry = entries.getNext();
		entry.QueryInterface( CI.nsIFile );
		let leafName = entry.leafName;
		let n = leafName.search( switchPrefix );
		if( n == 0 ) { count++; }
	}
	return count;
};


var writeSwitchID = function(data) {
	let file = Services.dirsvc.get( 'UChrm' , CI.nsIFile );
	file.appendRelativePath( switchData );
	let ostream = FileUtils.openSafeFileOutputStream(file);


	let converter = CC["@mozilla.org/intl/scriptableunicodeconverter"].createInstance(CI.nsIScriptableUnicodeConverter);
	converter.charset = "UTF-8";
	let istream = converter.convertToInputStream(data);


	// The last argument (the callback) is optional.
	NetUtil.asyncCopy(istream, ostream, function(status) {
		if (!Components.isSuccessCode(status)) {
			// Handle error!
			return;
		}
		// Data has been written to the file.
	});
};




var readSwitchID = function() {
	let file = Services.dirsvc.get( 'UChrm' , CI.nsIFile );
	file.appendRelativePath( switchData );
	if (file.exists()) {
		let data = "";
		let fstream = CC["@mozilla.org/network/file-input-stream;1"].createInstance(CI.nsIFileInputStream);
		let cstream = CC["@mozilla.org/intl/converter-input-stream;1"].createInstance(CI.nsIConverterInputStream);
		fstream.init(file, -1, 0, 0);
		cstream.init(fstream, "UTF-8", 0, 0); // you can use another encoding here if you wish


		let str = {};
		let read = 0;
		do { 
			read = cstream.readString(0xffffffff, str); // read as much as we can and put it in str.value
			data += str.value;
		} while (read != 0);
		cstream.close();
		let switchID = Number(data);
		if( typeof( switchID ) === 'undefined' ) { switchID = 0; }
		return switchID;
	} else {
		return 0;
	}
};
var switchID = readSwitchID();


var setCSS = function(sid) {
	let switchFile = switchPrefix + sid + '.css';
	let sss = CC["@mozilla.org/content/style-sheet-service;1"].getService( CI.nsIStyleSheetService );
	let ios = CC["@mozilla.org/network/io-service;1"].getService( CI.nsIIOService );


	let file = Services.dirsvc.get( 'UChrm' , CI.nsIFile );
	file.appendRelativePath( switchFile );


	let fileURL = Services.io.getProtocolHandler( 'file' ).QueryInterface( Ci.nsIFileProtocolHandler ).getURLSpecFromFile( file );
	let uri = ios.newURI( fileURL , null , null );
	sss.loadAndRegisterSheet( uri , sss.AGENT_SHEET );	


};


var myWidgetListener = {
	onWidgetAdded: function(aWidgetId, aArea, aPosition) {
		if (aWidgetId == 'fp-switch') {
			let sid =switchID;
			document.getElementById('fp-switch').classList.add("badged-button");
			document.getElementById('fp-switch').setAttribute('badge', sid);
		}
	}
};
CustomizableUI.addListener( myWidgetListener );


// Button > CSS Switch
try {
	CustomizableUI.createWidget({
		id: "fp-switch",
		sid: switchID,
		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; }
			writeSwitchID( this.sid );
			setCSS( this.sid );
			document.getElementById('fp-switch').setAttribute('badge', this.sid);
		},
		onCreated: function(aNode) {
			setCSS( this.sid );
		}
	});
} catch (e) {
	Components.utils.reportError(e);
};


/**********************************************************************************************************************************/
})();

Und so sehen die CSS-includes in etwa aus:

/***************************************************************/
:root {
	--uc-grad-1: rgba(74,110,66,1) !important;
	--uc-grad-2: rgba(169,192,149,1) !important;
	--uc-grad-3: rgba(200,219,177,1) !important;
	--uc-grad-4: rgba(169,192,149,.1) !important;
	--uc-grad-5: rgba(137,164,122,1) !important;
	--uc-grad-6: rgba(74,110,66,.5) !important;
	--uc-grad-7: rgba(106,137,94,1) !important;
}
/***************************************************************/

Da sind bei mir allerdings nur Farbvariablen drin.
Und wie in dem anderen thread bereits geschrieben:
Die CSS-includes 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.
Für den Switch-Button musst du dir dann im CSS noch eine Grafik anlegen. Oder direkt in den JS-Code einbauen.
Der Button bekommt im Script dann noch einen Badge, der die ID der aktuell eingebundenen CSS-Datei anzeigt.
[attachment=0]switch-shot.png[/attachment]

Klar sind Ziffern in Variablennamen erlaubt. Der Variablenname darf nur nicht mit einer Ziffer beginnen. Also im Prinzip die gleichen Regeln diesbezüglich wie bei so ziemlich jeder anderen Sprache auch.

Zitat von HT-Frogger

Die Dateinamen sind ja einfach anzupassen, nur wenn man die "Merkdatei" genauso beginnen läßt wie die CSS-Dateien - dann kommt die Zählung der Anzahl durcheinander, die wird dann halt mitgezählt. Aber mit solchen Feinheiten kann man gut leben.

Es ist natürlich auch nicht sinnvoll, dieser Datei denselben Präfix zu vergeben und entspricht auch nicht der Logik des Scripts. Es geht ja darum, die Anzahl der include-Dateien zu ermitteln.
( siehe diese Zeile der Funktion countSwitch() > let n = leafName.search( switchPrefix ); )

Zitat von HT-Frogger

Die Funktion "setCSS" macht dann vermutlich letztendlich die Aktualisierung der Variablen, also die Einbindung und Aktualisierung des Codes?
Sehr gut ist, daß die neuen Daten ohne Neustart wirksam werden.

Richtig. Diese Funktion bindet die entsprechende include-Datei ein. Und natürlich wird das live umgesetzt, sonst wäre das ganze Script sinnlos, denn ansonsten könnte man das Einbinden dann auch manuell machen.

Zitat von HT-Frogger

Fazit: Wenn es kein Script geben wird um eine Klasse an eine bestehende ID anzufügen ist dieses Script für mich zwar nur die zweite, aber eine gut funktioniernde Wahl.

Wie gesagt: Man kann das Script relativ leicht dem entsprechend anpassen. :wink:

Zitat von HT-Frogger

Ich sehe gerade in Deinem Beispiel, daß Du auch Ziffern in den Variablennamen verwendet hast. Bei mir meckert der Editor das an, daher dachte ich es sei nicht so richtig erlaubt?

Sicher ist das erlaubt. Welchen Editor benutzt du denn und reagiert der Editor auch entsprechend auf die aktuell genutzte Sprache, in diesem Fall CSS?

Zitat von HT-Frogger

Du sagst das ist einfach anzupassen, aber für mich wohl doch zu viel. Man müßte dann ja auch ein Array mit den möglichen Klassennamen und evt einem ergänzenden Anzeigetext (Datei?) zur Auswahl haben. So mit dem durchtackern ist es schon gut, die Zählerei wäre dann halt die Zeilenanzahl in der Hilfsdatei. Und wenn die Maus drüber ist dann den ergänzenden Text anzeigen... Das beeinflußte Element kann hingegen fest sein (#main-window). Hast Du denn irgend ein Muster für mich? Aber es geht auch so. Ich denke ich gewöhne mich mit der Zeit an die ausgelagerten Dateien... Zuviel Arbeit ist es auch nicht wert.

Dazu kann ich dir nicht wirklich etwas sagen. Du hast die Idee. Wie eine passende Struktur dazu ausschaut, kannst also auch nur du wissen bzw. dir überlegen.
Aber davon abgesehen bin ich der Meinung, dass man mit include-Files am flexibelsten ist. Ich persönlich nutze das Script momentan nur, um die Farbe meiner Layout-Anpassung zu variieren. Aber theoretisch gesehen könnte man auf diese Weise auch zwischen vollständigen Layout-Designs wechseln.

Zitat von HT-Frogger

Dem Button habe ich noch einen bunten Hintergrund gegeben, kann dann ja auch je nach Design unterschiedlich sein

Ja, wie bereits geschrieben: Den Switch-Button muss man sich selbst stylen. Da ist bei mir im CSS eine Hintergrundgrafik drin. Und die Badget diverser Extensions sind sowieso bereits irgendwo definiert.