Forums : Xul, Xbl, JS...

J'ai déjà rencontré des problèmes de ce genre, voila une petite explication (personnelle, je ne sais pas si ca vient vraiment de la) et une solution (en tout cas chez moi :D)

Je pense que ton problème de style doit venir du binding. En effet comme tu l'as déclaré, tu as crée un nouveau tag mon-menu qui lui contient un tag menu. Du coup le style du menu ne s'applique pas à ton nouveau widget.

Essai de faire heriter ton element du menu, quelque chose du style pour le XBL :

<binding id="mon-menu" extends="chrome://global/content/bindings/menu.xml#menu">
       <content>
		<xul:menupopup id="portal-popup">
			<% if (user != null) { %>
			<xul:menuitem label="&portal.menu.disconnect;<%=user.getPrettyName()%>" oncommand='logout();'/>
			<% } else { %>
			<xul:menuitem label="&portal.menu.connect;" oncommand='window.location="/xulapps/common/content/front/login.jsp?app=<%=appCode%>";'/>
			<% } %>
			<xul:menuitem label="&about.menu.entry;" oncommand='window.open("/xulapps/common/content/front/about.jsp", about_menu_entry, "dependent=yes, menubar=no, location=no, resizable=no, scrollbars=no, status=no, width=350, height=200");'/>
		 </xul:menupopup>
        </content>
</binding>

Et dans ton XUL :

   <mon-menu id="portal-menu" label="&portal.menu.entry;"/>

Littéralement, cela ne fonctionne pas.

Il me semble avoir lu que dans le cas d'un "extends" il faut aussi modifier l'entrée dans la css et ajouter un attribut class sur l'élément.

Est ce que je me trompe ?

Le code que j'ai mentionné plus haut n'est pas du copier coller, c'est possible qu'il y ai des erreurs et qu'il ne fonctionne pas.

En revanche c'est la méthode que j'ai utilisé pour définir mes propres widgets de type tooltip, et cela fonctionne bien chez moi. Pas besoin non plus de changer au niveau du css.

Je fais quelques tests et je te tiens au courant

Effectivement la méthode que j'ai donné plus haut ne fonctionne pas du tout. En revanche avec le code que tu as posté en premier, j'ai le même résultat entre le code XUL direct et le menu XBL.

Problème a suivre, as tu plus de précisions ?

Tu es chanceux !

J'ai un comportement différent sur un autre xul, le "mon-menu" apparaît mais stylé encore différemment avec une flèche sur la droite, j'hallucine !

Je fais strictement les mêmes imports CSS.

Help SVP.

J'ai perdu un paquet de temps et mon code ne ressemble plus à rien. Je livre un demonstrateur demain, je vais donc faire un peu de ménage et les utilisateurs auront des menus stylés artistiquement !

Il y a qq chose que j'ai dû louper avec XBL, ou alors, j'ai fais l'erreur de penser que ça pouvait être simple !

Merci qd même papy et les autres aussi si vous avez une soluce ou conseils, je n'abandonne pas.

Aprés une pause clope, je pense avoir compris.

Le code CSS suivant ne doit pas s'appliquer pas dans le cas de mon binding :

menu > stack,
menuitem > stack,
.menu-inner-content{-moz-box-flex:1}
.menu-inner-content > hbox{-moz-box-pack:end}

menubar > menu:hover{background:#CCCCFF url("chrome://global/skin/menu-bg.png")}

Je ne connais pas cette syntaxe, si quelqu'un pouvait me briefer la dessus .....

moi oui.

menu > stack,
menuitem > stack,
.menu-inner-content{-moz-box-flex:1}

veut dire : les balises 'stack' filles direct d'une balise 'menu' ou d'une balise 'menuitem', ainsi que les balises dont l'id egal 'menu-inner-content' auront le style : {-moz-box-flex:1} appliqué.

.menu-inner-content > hbox{-moz-box-pack:end}

veut dire : les balises hbox filles direct d'une balise quelconque ayant l'id egal 'menu-inner-content' auront le style {-moz-box-pack:end}

enfin :

menubar > menu:hover{background:#CCCCFF url("chrome://global/skin/menu-bg.png")}

veut dire : les balises 'menu' filles direct de balises 'menubar' aurront le style suivant quand la souris les survolera. {background:#CCCCFF url("chrome://global/skin/menu-bg.png")}

soit une couleur dans les bleus je dirais, et une image en fond de l'element pris dans le chrome.

alors à part les -moz-box-*, c'est du css classique, pour les -moz-box-*, une recherche sous mozilladev t'eclairera surement.

Copy that.

Merci.