Ein grosser Unterschied wäre noch die Möglichkeit, separate CSS Dateien live editieren und speichern zu können in den Browser Werkzeugen, und auch sofort ein Ergebnis zu sehen.
Geht wohl fast hiermit:
JavaScript
// cssLive.uc.js
(function() {
if (location.href !== 'chrome://browser/content/browser.xhtml') return;
//if (location !=AppConstants.BROWSER_CHROME_URL) {
// return;
/*** OPTIONEN START *******************************************************/
var cssLiveOptions = {
/* Falls sich die Testdatei in einem Unterverzeichnis von "chrome"
befindet, bitte hier zwischen Anführungszeichen eintragen, ansonsten
nur die Anführungszeichen */
subdir: 'css',
/* Name der Testdatei */
file: 'Test.css'
};
/*** OPTIONEN ENDE ********************************************************/
var buttonPath = '';
var testFile = Services.dirsvc.get('UChrm', Ci.nsIFile);
if( cssLiveOptions.subdir != '' ) {
testFile.append( cssLiveOptions.subdir );
buttonPath += cssLiveOptions.subdir + "/";
}
testFile.append( cssLiveOptions.file );
buttonPath += cssLiveOptions.file;
var buttonTxt_1 = buttonPath + " aufrufen";
var buttonTxt_2 = buttonPath + " ausführen";
var errorTxt = "Die Datei \n" + testFile.path + "\n existiert nicht.";
ChromeUtils.importESModule("resource:///modules/CustomizableUI.sys.mjs");
try {
CustomizableUI.createWidget({
id: "fp-get-css-file",
defaultArea: CustomizableUI.AREA_NAVBAR,
removable: true,
label: buttonTxt_1,
tooltiptext: buttonTxt_1,
onClick: function() {
if( testFile.exists() ) {
testFile.launch();
} else {
alert( errorTxt );
}
},
onCreated: function(aNode) {
aNode.style.listStyleImage = 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAADJklEQVR4Xi3Pb0yVdRjG8e/ze57ncDrAOWwRhDQ7xYAMlAgIBW2txaio5TvMzZa68oWtzRdKbXbIpWyOzcWLWqXkFjUtsIksW72wuTVx+EJHCxhkSCNoKLYDwuH8e66eNV98dr24t/u+LwsAoKsucqg4tFS4kiTtge4PFAkRksADGdsyua4JXJ7ITH0yQw+ABTB3sHGipGNjJX8MgzGw6oEBQi5kPYinQBYEbDDAX5PEulJXPhqn2bQE2Fayfa2S8THOfu/wzTkDzmOQV8nAkOHMoIFgmS9K3w/i5DmP1fwqdrbRFIR6euqJ6btc2Y4jsGWM0emOWrU2FAtQRTSiid7n9EJtkQCVlebrUle9lnuLVA3v09/G8diLCFxp+DVprF2a2KHqsrACtqVbQy9L8T2qq4goaKOpz5uka22Kn1yn2gBHOPMSx9o3obJokbS8R/p3txTfK918Q+2tjwrQYPcWaW6Xdj5fKkB9B2uks+v1VICYSWXQjia4eWuB8z2/0//pGMMD04yP3qFzfzXBoE3sszGmR27Tubuc3KDDsf4ZsME2iO4GjuqXQh1orxDwv1OxBsX2VQlQcWGObnzdog/3bhCg0uIHNPLFVqnf/8DlA2ctDSTgxNFnOHFgE7jAg7kQcjnS8TRgQcCiprGQzncrIZ0i/u0so7lLODlgsh6QSMNCAix8BhJJNH6b5NwyFNhwLwWuB/NxEoemudi9wMT8Cq4LBrDwgLUULK/BPR9+jC4ytPUC17/8DR6CpYEplt+eJTX7OH9HbEL5NvKwjGvj4AHprC8DSZ+/zHJgI+uI+xdvbL9E+JRLJr+Sr5LXKd8foqY8QjqN7fxzlzhaAy8LGYHnQTxJ3hNhFlptCi4XsP7PEoaD4mr4KlveeZjNG4qYvDbKyipJolCXOI70U630Y6uvRfrZzyuvSKOvavK9Kp2OFqv3zagWLzb7s21aubBZ519HFjzrg8NP8utbu2hWMIyyHpYBYwyOa2Hn2cwuJAiHAthp+e087s4n6e5LjwzeodECAKiAffk5PJLOkJKFACzLZ8B27jfMYgUM7mKSuzPwMcB/6Jh/V5xUni0AAAAASUVORK5CYII=)';
return aNode;
}
});
} catch (e) {
Components.utils.reportError(e);
};
try {
CustomizableUI.createWidget({
id: "fp-register-css-file",
defaultArea: CustomizableUI.AREA_NAVBAR,
removable: true,
label: buttonTxt_2,
tooltiptext: buttonTxt_2,
onClick: function() {
if( testFile.exists() ) {
var CI = Components.interfaces;
var CC = Components.classes;
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 fileURL = Services.io.getProtocolHandler( 'file' ).QueryInterface( Ci.nsIFileProtocolHandler ).getURLSpecFromFile( testFile );
let uri = ios.newURI( fileURL , null , null );
sss.loadAndRegisterSheet( uri , sss.AGENT_SHEET );
} else {
alert( errorTxt );
}
},
onCreated: function(aNode) {
aNode.style.listStyleImage = 'url(data:image/gif;base64,R0lGODlhEAAQAPcAAAQCVISChMTCtOTizNTSxERCRAQCZJSW1MzGzNTW1Ozq7CwqdKyqlMzKxERCjMTCxNzavLy6vMzKzPz67HRypCQiJJyahAQCdOTe1CQinLy65Pz2/PT23NTSzNzW3Ly6tExGnMTGxMS+xMzK1JSWpAQCXMTGvOzmzAQCbMTC1Nza1DQ2dKyqnNTOxExOfOTezLy+vMzOzPz+7Hx+rDQyNKSehAQCfCwqlPz+/NzWzMzGxAD/AOQA2C8A6iQAEgAAAACAAAAAAAAAAAAAAAACAAAAAAAAAAAAAADMAkPpACYSAAAAAKAVCC+LACQ/AAB3AADQhADq7QASEgAAAACwTkPqACYSAAAAAOgACAcAACgACgAAAACwnADqjAASPwAAd/8CBP8AAP8AAAAAAABwAADqAAASAAAAADB6QwSBAAA/OgB3AIQSXAGSAAE/UAF3ABDUcugdABITbwB3AHQAZ40AADQAcnYAAMwIYfsCABIAbQAAAPo4X5m1jDknN3cAdlQASLoA7z8AnAAB1f4sAP/pAP8SAP8AABIAB3UAAD8AAHcAAEWEAHXtAD8SAHcAAABOAAAAEABQKAAAAACwAENDACYmAAAAAAD+AEP/ACb/AAD/AHA4AGbqAD8SAHcAADQAAAAAAAAAAMAAAAQANOoBiBIAuQAAo29l/ogm/zQ0/3Z2/wA4XwDqjCQSNwAAdgBPJQAgAAA0AAB2APhcJULqACYSAAAAAAAAoAABuwAAUAAAAGVl/yYm/zQ0/3Z2/wAAAAEAAAAAAAAAAKAYZB0A6xMAEncAAADnRgAlgyQ0TAB2AAAARAAA6wAAEgAAAKRgdwPrUCQSTwAAAEgieAEm6yQ0EgB2AA/U5wBsJQBPNAAAdh7gHQB37QBPEgAAAHQA2QEB/yQA/wAAfy1c+ADq7AASEgAAAEgAAAEBACQAAAAAAABD5wAmJQA0NAB2dg4BAAAAAAAAAAAAAAAAPAAA7wAAnAAB1Ui4GAHtFCQSKAAAAFP6AQCZLQA5SAB3ACH5BAAAAAAALAAAAAAQABAABwi3AAsEGEiwYEEaARQk8MCQ4UIPCxNsEJhABIwIGE08wAhDxAMFFB/gGCkjhkgcEwh8DEkBQIkSAkzMcPlhZYAEDwjguLCCgw4cIGrgBBnAwwMRAzKggNBCgwsVIWxWzDkCBQkcNxhIeCCV6wMZBlDgKIEhqgiiUx+8OIBiAYsOXoka5dogBQoHJhDEpejxQYgTNizk8NrVK4EcH6JyPRuyb9/FXIluUEC5smXKOArQKMC5s2fPFQICADs=)';
return aNode;
}
});
} catch (e) {
Components.utils.reportError(e);
}
})();
