Layer XUL Elements/Images/Backgrounds in Firefox 3 Extensions Using Stack

This is an old archived post from my former blog The Idea Shower. It's where I cataloged my product explorations and releases, one of which ultimately became Pocket.

This post was published back in 2008. It may not function as originally intended or may be missing images.

Layer XUL Elements/Images/Backgrounds in Firefox 3 Extensions Using Stack

July 30, 2008

While working on the Read It Later Firefox Extension, I wanted a way to layer multiple background images on a toolbar button so I could create a nice looking notification indicator like on the iPhone. (Note I opt-ed later to use a simpler look, but this method might still be helpful for other applications).

In order to make this work you'll need to familarize yourself with XBL and XUL Stacks. XBL allows you to essentially reconfigure how an XUL element works/looks.

In this case, we'll use XBL to replace a normal ToolbarButton into a Stack Element.

So first you'll need your toolbarbutton added to your XUL overlay:

Next we need to create the XBL Binding (complete the tutorial linked about XBL if you don't know what XBL is):

<?xml version="1.0" encoding="UTF-8"?>
<bindings xmlns="http://www.mozilla.org/xbl"
xmlns:xbl="http://www.mozilla.org/xbl"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<binding id="toolbarbutton"
display="xul:menu"
extends="chrome://global/content/bindings/button.xml#menu-button-base">
<resources>
<stylesheet src="chrome://global/skin/toolbarbutton.css" />
</resources>
<content>
<xul:toolbarbutton
class="buttonstack"
anonid="button"
flex="1"
allowevents="true"
xbl:inherits="disabled,crop,image,label,accesskey,command,align,
dir,pack,orient,toolbarmode,buttonstyle,status,notifyNumber" />
</content>
</binding>
<binding id="buttonstack">
<content>
<children>
<xul:stack
align="center"
pack="center"
xbl:inherits="allowevents">
  &lt;xul:image src="chrome://urextension/skin/buttonimage.png" /&gt;

  &lt;xul:image src="chrome://urextension/skin/number_circle.png" /&gt;

  &lt;xul:label value="" xbl:inherits="value=notifyNumber,allowevents" /&gt;

  &lt;/xul:stack&gt;
&lt;/children&gt;

</content>
</binding>
</bindings>

What we have here is 3 layers. The first is the main button icon (for example with the iphone button it'd be the rounded blue envelope button. The second is the image that's behind the number (for example the red circle on the iphone button). And the last layer is the actual number you are using to show the notication of (in the iPhone's case, it's 3).

You will need to apply left/top attributes to the second and third layers to position the numbered circle where you'd like it. Follow the Stack tutorial (linked above) for more information about positioning the elements inside of a stack.

To change the number in the notification, simply change the attribute 'notifyNumber' on your toolbar button.

document.getElementById('tButton').setAttribute('notifyNumber', 3);

If you look at the XBL code, make note of where 'notifyNumber' is inherited. This is how XBL knows to send the attribute down the chain. You can make the attribute anything or add other attributes as well.

Finally, you need to apply the bindings to your toolbar button. In your stylesheet add the following lines:

#tButton {
-moz-binding: url("chrome://urextension/content/yourxblfile.xml#toolbarbutton");
}
.buttonstack {
-moz-binding: url("chrome://urextension/content/yourxblfile.xml#buttonstack");
}