Forums : Xul, Xbl, JS...

Salut à tous,

Pour une extension à firefox, je souhaite comme indiqué dans le titre de ce sujet afficher une image en background à un listitem d'une listbox.

Voici la stratégie adoptée :

Dans une fenêtre "options", une listbox charge les identifiants d'un domaine de la base signons.sqlite via myLoginManager.findLogins.

L'utilisateur sélectionne le login qu'il souhaite (celui ci s'enregistre dans les préférence via branch.getCharPref)

Lors de la réouverture de la fenêtre "options", je souhaite que la sélection précédente soit mise en avant avec une image de fond. Ceci fonctionne qu'à moitié.

Lorsque la fenêtre s'ouvre, l'image n'apparait pas, seul la police en gras est prise en compte (et indique le login sélectionné précédemment)

Par contre si on clique à nouveau sur la sélection identique, l'image apparait.

A force d'avoir la tête dans le guidon, je dois passer à côté de l'évidence. Je vous mets les codes afférents.

Le XUL :

<groupbox align="start">		
		<caption style="font-weight:bold;" label="choisir l'identifiant pour le forum:"/>			
		<listbox id="boost-Option-LogWithForum" onselect="SetLogWithForum();">
		</listbox>		
</groupbox>

La fonction Javascript (appelée dans un onload de la fenêtre "options")

function GetLogWithForum(){
 var hostname = 'https://www.google.com';
 var formSubmitURL = 'https://www.google.com';
 var httprealm = null;
 try {   
      var myLoginManager = Components.classes["@mozilla.org/login-manager;1"]
                            .getService(Components.interfaces.nsILoginManager);	  
      var logins = myLoginManager.findLogins({}, hostname, formSubmitURL, httprealm);
      var mylist = document.getElementById("boost-Option-LogWithForum");
      mylist.setAttribute("rows", logins.length);             
        for (var i = 0; i < logins.length; i++) {                       
              var list = document.createElement("listitem");          
              list.setAttribute("label", logins[i].username);
              var isSelected =  logins[i].username; 
      const prefService = Components.classes["@mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefService);
      const branch = prefService.getBranch("boost.");
      var selectedLog = branch.getCharPref(boost_PrefName_LogWithForum);
      if(selectedLog == isSelected){        
              list.setAttribute("class", "selected");
           }else{
              list.setAttribute("class", "unselected");
           }                                           
              mylist.appendChild(list);                      
          }
     }
 catch(ex) {   
 }
}

La function Javascript qui enregistre dans les préférences :

function SetLogWithForum()
{  
 var listBox = document.getElementById("boost-Option-LogWithForum");
 var selectedItem = listBox.getSelectedItem(0);  
 var newText = selectedItem.getAttribute("label");  
 var dataToStore = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
 dataToStore.data += newText;
 boost_Branch.setComplexValue(boost_PrefName_LogWithForum, Components.interfaces.nsISupportsString, dataToStore);
}

Les class Css :

.selected{background-image: url("chrome://boost/skin/checked.png");background-position:right;background-repeat:no-repeat;font-weight: bold;}
.unselected{font-style:italic;}

Ce que je trouve étonnant, c'est que l'attribut font-weight de la class selected passe, mais pas l'image. (j'ai essayé avec des !important sans résultat).

Une idée ?

Merci d'avance pour les conseils. :)