My only trouble with XUL at this time is the same trouble I have with CSS; that is, the problems associated with HTML+CSS translate almost perfectly to XUL+CSS. It's still a pain in the ass to make your CSS pixel-perfect. Unless you are some form of CSS demigod who knows all of the ins-and-outs of both CSS and the HTML/XUL box models, you're going to spend a good deal of time making your application look "purdee".
My first example is Firefox's "tabbrowser
" widget. This XUL element is not included in XULRunner, since it is specific to Firefox. So, if you want "closable tabs", you're going to have to make them yourself. When I attempted to do this, I was taking advantage of the very box model which caused me so much grief; you can put almost any XUL element inside almost any other element, a lot like HTML. But placing a button inside a tab element meant that the button couldn't be clicked, nor would it receive any other events; even the CSS :hover pseudo-element wasn't working.
A simple work-around is placing the button outside of the tab, and then using nasty CSS hacks to position the button inside it, while making some room for the button and moving the tabs closer together. It's not "purdee" XUL or CSS, but it can be made to work the way you would expect. C'est la vie.
Now, while closable tabs written this way work great for mouse navigation, they explode under keyboard navigation circumstances.
Not to mention having buttons and tabs mixed inside a "tabs
" element screws up XUL's automatic selection of tabpanels
as you click through your tabs. For these reasons (and others) it is probably best to re-implement your tabs with styled box
elements and a deck
, instead of basing them on XUL tabs.
And so, I did exactly this. I am mainly a Mac OS X user (as many of you know, by now) so I decided to style mine based on Firefox 3.5's tabbrowser under Mac OS X. the styling was pretty easy. I used background images from the Open Komodo
Mac skin (SVN repository; also useful for example XUL and XBL!) and wrote some XBL
magic to bring it all together. Speaking of the skin, I decided not to use all
of the images from Open Komodo. Instead, I used CSS3 for the rounded borders and drop shadow.
(A slight tangent, if I may: My first research into XBL landed me squarely in the XBL 2.0 Primer
In this initial closable tabs implementation, I have everything working with the exception of keyboard navigation (CTRL-Tab: forward one tab, CTRL-Shift-Tab: backward one tab, CTRL-W: close tab, etc. Basically just keyboard shortcuts to managing your tabs). There is also some funkiness in the way I'm handling the close button. The event phases
aren't working out so well for me, so I've settled [temporarily] on using the mousedown event for the close-tab-buttons. This just means the tab closes immediately when you begin clicking on the close button, rather than waiting until you've released your mouse. The reason for this in the first place is that clicking on a close button will first switch to that tab, then close it. This breaks my idea that you should be able to close a tab without switching away from the one you are currently viewing; if I didn't want that
, I wouldn't have gone to so much trouble giving each tab its own close button!
After those problems are solved, the only thing remaining is allowing scripts to capture tab-close-requests. Useful (for example) if you are working on something in a tab that hasn't yet been saved; the application should ask to save before allowing the tab to close. And those are the only problems I can think of. (Not including missing features, like a right-click context menu, or the linkedpanel
With that, here's a screenshot (tab 1 selected, tab 3 close button hovered):
ctabs_osx.png [ 14.07 KiB | Viewed 9178 times ]
I briefly worked on a Windows theme, as well. It was just slightly modified to include the red "x" close button from the Firefox tabbrowser. It was kind of nice looking, but it really didn't "fit in" ... which is the point to theming XUL, in my opinion; make it look native first ... leave it to the users to make it strange but sexy.
If anyone is interested in the XUL/CSS/XBL for this sample project, I'll post it here.