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, :after). And on hover I want to give it cursor:pointer style. I also want to addEventListener('click', ...) it. However none of this works.

I even modified the XBL to inject my own stack element and then try this stuff on the stack element but it just doesn't work.

Inspecting the anonymous elements DOM Inspector add-on. (I'm trying to set point on this element and give it a pseudo element and give it onMouseDown functionality)

Screenshot

What is a "pseudo element"? How did you insert the elements in the DOM? Is there any code? — nmaier, Jun 25 '14 at 04:15
A pseudo element is the `:before` and `:after` element you can put on there with CSS. People use it to badge things. For example I accomplished this badge by using a `:before` pseudo-element on the toolbar button and translating it over to the icons position. [BADGED IMAGE](http://i.imgur.com/7HxM2d2.png). [CODE](https://gist.github.com/Noitidart/fe2f588cf89a3f70fb73). I modified the code so you can run it from scratchpad it will badge your sync button. — Noitidart, Jun 25 '14 at 04:21
Ah, gotcha! I was thinking in the context of XUL/XBL not CSS. — nmaier, Jun 25 '14 at 04:22
In the code above, if you change the line `#PanelUI-fxa-status:before` to `#PanelUI-fxa-status > .toolbarbutton-icon:before` you will see it won't work. The `.toolbarbutton-icon` is the anonymous target i want to give this functionality (pseudo el, cursor style, mousedown listener) too. — Noitidart, Jun 25 '14 at 04:22
Oh oh oh I did override the XBL to insert a stack element at the start and then tried to give it the same functionality but failed there too. The code I ran to override XBL is this addon here: [XBL Override](https://github.com/Noitidart/MatchWord/blob/b9dacd41c336ea9a09cdd367302bb28d634f5578/findbar.xml#L20). If you install profilist and then install this addon it will inject a `stack` element into all profilist toolbar buttons (as seen in DOM Insp img), I can edit it so it does to the sync button if you like. I gotta stop with the confusingness it's hard for me man! :( — Noitidart, Jun 25 '14 at 04:28

score 3 · Accepted Answer · answered Jun 25 '14 at 06:08

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:

<?xml version="1.0"?>
<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at 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 could either set the badge with CSS, as I did, or using <toolbarbutton ... badge="{url}"/> (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.

Thanks man!! I want just `cursor:pointer` over the 16x16 image element, and a sepearte `click`/'mousedown'/`mouseenter` on the image because I'm going to allow them to hover over that, show a nice animation of the `chrome://mozapps/skin/places/defaultFavicon.png`. I'll tyr messing with the binding of `display="xul:button"` i had no idea it was doing that. btw what debugger do you use? Thanks again man, I struggled with this for hours and had no idea that the display was the culprit and it was rejecting it, I thought I was doing something wrong, well I was but you know what i mean! :P — Noitidart, Jun 25 '14 at 07:59
For convenience, and because I already got such a setup and the necessary skills, I used Visual Studio 2010 + a self-built Nightly (I could have used a central checkout and the mozilla symbol server instead of an own build). It is a PITA to learn and set up, though. — nmaier, Jun 25 '14 at 08:07
Holy sht O_O............ yeah thats out of my league... by a little more than like this much |---| :S — Noitidart, Jun 25 '14 at 08:09
Btw, this might turn into a seperate topic so Ill make one if you prefer, but how did you unbind the XBL? I have a hard time with that: [ask.m.o :: Apply and Remove XBL Binding on Runtime](https://ask.mozilla.org/question/297/apply-and-remove-xbl-binding-on-runtime/) — Noitidart, Jun 25 '14 at 08:13
Can't answer this off-hand; if you want to pursue this then post a new question. — nmaier, Jun 25 '14 at 08:18
Hey man. Simply removing the `display="xul:button"` doesnt break anything but it doesnt do anything either :( Can it be something else that was what was preventing me from adding event listener to the icon button? Should I perhaps set display to something else? I couldnt find valid attributes for it so mxr'ed it and found `xul:box` `xul:...` all were xul prepended. — Noitidart, Aug 07 '14 at 00:21
I had to restart the browser, something to do with the way i was applying the xbl. So now cursor works over the icon with `display="xul:button"` removed, im going to test addEventListner now and report back — Noitidart, Aug 07 '14 at 05:59
wow you were right!!! removing `display="xul:button"` allowd me to style child elements and add `onclick` attribute. i couldnt get pseudo elements to work though :( can you please help me on that front — Noitidart, Aug 07 '14 at 15:10
Found something removing `display="xul:button"` broke, `command` addEventListener doesn't work on it anymore. But its no big ill just change it to `click`. Also I think it changed `box-sizing` to be `content-box` i set it back to `border-box` — Noitidart, Aug 15 '14 at 05:58

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

1 Answers1

Linked