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

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

i have anonymous element in toolbarbutton xul element. it's xul:image. want give pseudo element (:before, :after). , on hover want give cursor:pointer style. want addeventlistener('click', ...) it. none of works.

i modified xbl inject own stack element , seek stuff on stack element doesnt work.

please help me accomplish this.

inspecting anonymous elements dom inspector add-on. (i'm trying set point on element , give pseudo element , give onmousedown functionality)

it doesn't seem these nested, anonymous xul:image nodes back upwards (::before) pseudo-elements @ all. or maybe because toolbarbutton binding display="xul:button"... somewhere deep within layout engine parent element outright refused adopt generated ::before pseudo-element, debugger says. remember xul != html.

however, can bind and/or rebind stuff new binding.

i used css re-bind , style sync button (analog illustration question comments, not meant 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 new binding, based on default binding:

<?xml version="1.0"?> <!-- source code form subject terms of mozilla public - license, v. 2.0. if re-create of mpl not distributed - file, can obtain 1 @ http://mozilla.org/mpl/2.0/. --> <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:xbl="http://www.mozilla.org/xbl"> <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=bage,label"/> <xul:image class="toolbarbutton-badge" xbl:inherits="validate,src=image,label"/> </xul:stack> <xul:label class="toolbarbutton-text" crop="right" flex="1" xbl:inherits="value=label,accesskey,crop,wrap"/> <xul:label class="toolbarbutton-multiline-text" flex="1" xbl:inherits="xbl:text=label,accesskey,wrap"/> </content> </binding> </bindings>

you either set badge css, did, or using <toolbarbutton ... badge="{url}"/> (i.e. src=badge inheritance in binding).

regarding addeventlistener/cursor stuff: not quite clear here asking for?

you can utilize usual methods toolbar button (addeventlistener, command=/oncommand=, ...), not kid elements of it.

you can utilize cursor: styles toolbarbutton, not kid elements of it.

both due display="xul:button" in binding. if don't want that, you'll need modify binding not utilize display= , prepare stuff breaks.

javascript firefox-addon xul xbl