I have this xbl binding:
<binding id="toolbarbutton" display="xul:button" role="xul:toolbarbutton"
extends="chrome://global/content/bindings/button.xml#button-base">
<resources>
<stylesheet src="chrome://global/skin/toolbarbutton.css"/>
</resources>
<content>
<children includes="observes|template|menupopup|panel|tooltip"/>
<xul:stack>
<xul:image class="toolbarbutton-icon" xbl:inherits="validate,src=image,label"/>
<xul:image class="profilist-badge" xbl:inherits="validate,src=badge,label"/>
</xul:stack>
However when list-style-image is set on the toolbarbutton (which is the parent of the stack these images are in, the image.profilist-badge element is taking this list-style-image when i want it to be blank :( my current workaround is to set the badge property of the toolbarbutton to an image that doesnt exist.
this is low priority question. just asking so i can document this some day on mdn. in my addon i default the list-image to chrome://mozapps/skin/places/defaultFavicon.png by setting the class of the badge anon node:
.PanelUI-profilist .profilist-badge {
list-style-image: url(chrome://mozapps/skin/places/defaultFavicon.png);
}
Yeah, XUL/XBL is a bit special when it comes to list-style-image and inheritance.
Only way I know is adding list-style-image: none to avoid a sub-tree xul:image taking over an list-style-image value of a parent element.