Radial Tabs Implementation Progress

We are making progress on the way of implementing our Radial Tabs visualization as an extension for Firefox and this is a little update about what we have done so far:

Since we have to draw a lot of dynamic round shapes we couldn’t use regular HTML/CSS/XUL for our extension but needed a more flexible way  to draw graphics.  The two possible alternatives were the HTML Canvas element or SVG (Scalable Vector Graphics).  Since SVG allows for richer interaction with the drawn objects we decided to use that.

To actually create the SVG elements we are using the jQuery SVG plugin, which makes creating dynamic SVG a lot easier.

One major challenge that we haven’t fully solved yet is how to integrate the created SVG into the browser’s chrome through and extension.  Therefore we are testing the drawing capabilities with a regular XHTML version for right now.  You can check out the latest version here: http://jkwebs.de/tabviz/svg_test.xhtml

The other big part that is yet unsolved is the collection of the necessary data for the visualization.  We created a dummy XML file with the data that we need, but we are not entirely sure yet how to get at all of the pieces of data.  A great resource that we can hopefuly use as inspriation for this will be Patrick Dubroy’s tlogger extension.

If you have some deeper knowledge about integrating SVG into Firefox extensions, working with Firefox tab internals and similar areas we are always open for tipps and feedback.