the Idea Shower A launchpad for new ideas on the web.

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">

      <xul:image src="chrome://urextension/skin/buttonimage.png" />

      <xul:image src="chrome://urextension/skin/number_circle.png" />

      <xul:label value="" xbl:inherits="value=notifyNumber,allowevents" />

      </xul:stack>
    </children>
  </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.

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");
}