Yoono Community

Yoono Tips

Dec 11

Introducing XUL Profiler : our contribution to Mozilla’s ecosystem developer tools

Non-developers please forgive us; it’s rather seldom but this post contains technical gibberish that may phase some of you.

While developing Yoono, we are unsurprisingly confronted with the usual performance-improvement issues that are the daily chore of most developers.

Although some tools are available to investigate these problems, some of them did not suit our needs because of our technical implementation as an add-on (versus implementation in a web page), while some were incomplete, and others cumbersome or difficulty to make work, and certainly not to be used on an every day basis.

Something we never found was a tool that could graphically show the hot spots of our UI, by which I mean the ones that require heavy work from the browser in terms of refreshing parts of the canvas…

Thanks to Alex at yoono, these dreadful times are now over, and XUL Profiler is born, and available to anyone for use.

First, the execution profile, that details the average and total time consumed in each method, how many time they were called, with a nice graph layout where each method can be deployed according to the stack calls, and a link to display the source file at the given line.

All you need to do is click on the XUL Profiler button, and it will start to record what’s happening. One more click, it will stop and the result will be available:

Callgraph from XUL Profiler, by Yoono

These graphs can be saved in GDF format and used in third party graph tools that read this format.

The next feature is yet more fantastic (but only available with Firefox 3.1b2 or more) : the animated graphical display of how the canvas was refreshed by the browser during the recording session.

It will build an animation that you will be able to play and replay, showing the browser, your mouse movements, and the canvas areas that are refreshed. An opacity layer scale will clearly show what canvas areas most refreshed, they will appear with a red layer that goes darker with each refresh, while the mouse movements across the UI are shown with a small blue dot.
The UI screenshot on the back is not updated with every refresh, but just helps locating the refreshed zones.