Strange things happen during the holidays. Maybe it’s because I am more relaxed and less busy, but it seems that each time, a crazy idea about some web technology will cross my mind and I’ll end up spending hours exploring it.

This time, I was thinking about the interface for the next version of the Form Builder (I know, somehow it’s always work related) and I was wondering if XUL could be of any help here.

A couple days later, I had this working: tabbed panel example.

If you are not using the Firefox browser, you will not see anything interesting, so here’s a screenshot of the second panel, viewed in Firefox (XUL powered).

The first panel in the example uses HTML+Javascript (a.k.a DHTML). It is very basic, there are better DHTML panel widgets of course. The idea is that you could enhance an existing javascript UI library to render widgets with XUL on XUL-compatible browsers…

You can check out the source code if you want to see how it’s done.

Update: As whoughton pointed out, it doesn’t degrades to DHTML as it should in Safari. I will fix that soon, it’s probably not a serious bug.

Update 2: The problem in Safari is caused by its user-agent. To detect whether I should render with XUL or DHTML, I look at the user-agent string. If it contains the word “gecko”, I assume the browser uses the Gecko rendering engine and therefore supports XUL… Well it turns out Safari’s user-agent string includes “Gecko” even though it’s not based on Gecko at all. Weird. Anyway, I’ll just have to fix the detection code.

Update 3. It’s fixed in Safari, thanks to Boris tips.