How To Animate A Panel in XUL For Firefox Add-On

Question

I have written a nice little Firefox Add-On for the company I work for as an IT Ticket System. What it does is notifies managers of new tickets or notifies users of changes to their tickets.

I started out using the built in notifer for Firefox on Windows with:

var alertsService = Components.classes["@mozilla.org/alerts-service;1"].getService(Components.interfaces.nsIAlertsService);

This worked really well. However, the problem with that service is that you don't really have any control over it's speed, timing, styling, or the way content is presented. I decided to switch to using a panel, which works great and display what I want, where I want.

However, I would quite like to make it a little more obvious in the same way the notifications are by animating the panel to move up and go from transparent to almost solid. Does anyone have methods by which to do that? I've found some little JavaScript code snippits, but not found anything that really works properly.

Answer 1

There aren't any built in methods to do animations, so you'll need to roll your own timer and update the position of the panel.

You can try calling panel.moveTo method for repositioning.

https://developer.mozilla.org/en/XUL/panel#m-moveTo

You could also make the panel a seperate window and update the window's top/left. The alert service does a "swipe" type animation where they tweak the window unrolls upwards. You can get that from here.

http + ://mxr.mozilla.org/mozilla1.9.2/source/toolkit/components/alerts/resources/content/alert.js

(Sorry to mangle the url, I'm not allowed to post more than one url per msg)