Forums : Xul, Xbl, JS...

Une idée: Dezip le chrome de la Web developper toolbar qui le fait, et chercher comment il le fait =) (quoique, il fait pour du html ... peut etre que je m'avance un peu trop)

Merci pour l'idée, je ne connais pas cette extension je vais pouvoir pousser mes investigations un peu plus loin.

Résultat des recherches, c'est bête et méchant comme on dit, cette extension lit le contenu du fichier et l'injecte dans une balise <style> dans le header de la page.

var inputStream      = Components.classes["@mozilla.org/network/file-input-stream;1"].createInstance(Components.interfaces.nsIFileInputStream);
var scriptableStream = Components.classes["@mozilla.org/scriptableinputstream;1"].createInstance(Components.interfaces.nsIScriptableInputStream);
inputStream.init(filePicker.file, 0x01, 0444, null);
scriptableStream.init(inputStream);
webdeveloper_userStyleSheet = scriptableStream.read(scriptableStream.available());
scriptableStream.close();
inputStream.close();
...
headElementList = pageDocument.getElementsByTagName("head");
styleElement    = pageDocument.createElement("style");
styleElement.setAttribute("id", "webdeveloper-add-user-style-sheet");
styleElement.setAttribute("type", "text/css");
styleElement.appendChild(pageDocument.createTextNode(webdeveloper_userStyleSheet));

Après quelques tests je dirais que ca ne peut pas marcher avec XUL, en effet il ne prend en compte ni la balise <style> ni la balise <link> (pour inclure le style avec un nom de fichier et non directement avec le contenu). Apparement ca marche uniquement avec le tag <?xml-stylesheet href='...' type='text/css'?> mais celui la je ne sais pas vraiment si je peux le rajouter dynamiquement.

Tu devrais trouver ce que tu cherches parmis les objets CSS.

Avec:

document.styleSheets

Tu peux obtenir la liste des feuilles de styles associées au document (HTML, XML ou XUL)

Ensuite tu devrais pouvoir en ajouter vu que c'est un tableau... A voir si ça fonctionne bien comme ça ?

Fabrice

Apparement ca marche uniquement avec le tag <?xml-stylesheet href='...' type='text/css'?> mais celui la je ne sais pas vraiment si je peux le rajouter dynamiquement.

bien sûr que si. c'est un noeud dom comme les autres. Une "processing instruction" pour être plus précis. Que tu peux créer avec document.createProcessingInstruction

Et ensuite ajouter à ton document comme n'importe quel autre noeud dom...

Par contre, est ce que gecko va charger la feuille de style ? sais pas... à tester.

J'ai testé les deux solutions proposées :

• la première via document.styleSheets ne fonctionne pas, c'est un tableau en readonly
• la seconde via la fonction createProcessingInstruction n'a pas l'air de fonctionner non plus, j'ai cherché sur le net pour voir la manière de l'utiliser, j'ai essayé comme ceci :

var css = document.createProcessingInstruction('xml-stylesheet', 'type="text/css" href="http://reggie/bradypus/test.css"');
document.appendChild(css);

ca n'a pas l'air de faire grand chose

Merci quand même pour vos propositions. J'ai pensé à une autre solution, mais elle n'est pas franchement jolie, ca ressemble plus a un hack qu'autre chose : créer un overlay vide avec juste la feuille de style et le charger lui dynamiquement...