To anonymous element add pseudo element and cursor style and event listeners

Question

I have this anonymous element in the toolbarbutton xul element. It\'s a xul:image. I want to give it a pseudo element (:before, :aft

Answer 1

It doesn't seem like these nested, anonymous xul:image nodes support (::before) pseudo-elements at all. Or maybe it is because the toolbarbutton binding is display="xul:button"... Somewhere deep inside the layout engine the parent element outright refused to adopt the generated ::before pseudo-element, my debugger says. Remember that XUL != HTML.

However, you can bind and/or rebind stuff to a new binding.

I used this CSS to re-bind and style the sync button (analog to your example from the question comments, but not meant to be a pixel-perfect reproduction):

#PanelUI-fxa-status {
  -moz-binding: url(toolbarbutton.xml#toolbarbutton);
}
#PanelUI-fxa-status .toolbarbutton-badge {
  list-style-image: url(chrome://browser/skin/places/query.png);
  transform: translate(8px,8px) scale(0.7);
  border: 1px solid red;
}

And the new binding, based on the default binding:

You could either set the badge with CSS, as I did, or using (i.e. the src=badge inheritance in the binding).

Regarding the addEventListener/cursor stuff: It is not quite clear here what exactly you are asking for?

You can use all the usual methods with the toolbar button (addEventListener, command=/oncommand=, ...), but not with child elements of it.

You can use cursor: styles with the toolbarbutton, but not with child elements of it.

Both are due to display="xul:button" in the binding. If you don't want that, you'll need to modify the binding not to use a display= and fix any stuff that breaks.