This idea came from the need to always have see the status of the AliEn Grid without having to keep several windows with the repository pages open all the time. After some googling around I found this excellent tutorial that made everything clear. The principle is very simple, you have a layout specified in XML, add some JavaScript for the actual work and make everything nice with CSS.

The functionality I was looking for was to have dynamic values for the buttons. This is not in the tutorial, but since the JavaScript is completely functional you can make Ajax requests to the base site and retrieve the values from there.

Here are some issues that consumed most of the development time for this cookie:

  • Only the chrome/content folder was visible from JS, CSS and so on. Following the tutorial I tried to put the images under chrome/skin but for unknown reasons they were not displayed. Moving everything to chrome/content solves the problems
  • Have all the images of the same height, 16px if possible, 18px if you must
  • The API is available for Firefox 1.5, but the implementation has small issues (distorted images, drop down menus with two down arrows instead of the normal single one). Upgrading Firefox to 2.0 solves everything.

Tips and tricks
For the toolbarbutton elements you can directly give the attribute image="chrome://<packagename>/content/<imagefile>". It is easier to dynamically change the image at a later time if you use this form instead of following the CSS path.

Very useful was also the official XUL documentation, particularly interesting being the spacers part. It is very important to keep in mind that you can use any XUL elements, not only the toolbar-specific ones.

The final result is this toolbar that has some nice features:

  • Grabs the number of running jobs from a JSP page from the repository, changes the weather-like icon according to this number
  • Grabs the list of open issues and dynamically adds them to the drop-down button. The JSP page that provides the list returns a line-based response, each line starting with the attribute of the menuitem to be created and then having the value for it. This way the repository can quickly change what the toolbar displays in the menu and how the entries behave. Now each entry takes the user to a different page, depending on the problem that is presented.
  • It periodically checks for updates and when a new version is released asks the user whether or not it should update itself

For the actual implementation you can just download the file and look at the contents, it’s a zip archive and everything is in plain text 🙂