Unified Toolbar for Firefox

Tuesday, October 30th, 2007

So I finally got to land bug 303110 earlier tonight. What a long road it’s been since my initial demo app that I hacked together in April!

The Bugzilla bug above is quite long and very technical, so I’ll lay out what it means a few different groups of people (feel free to skip section that don’t apply to you):

End Users

There are immediate visual changes as a result of this patch. The default titlebar appearance now defaults to the same style as iTunes or Leopard, which is a much darker gray than normal Tiger windows. It doesn’t look so hot with Pinstripe, unfortunately, but you’ll have to bear with me.

Fortunately, good news is on the horizon. When bug 397723 lands, Firefox users will, for the first time in a while, have an interface that looks more or less at home on the Mac platform. Even better news is that it’s (as far as I know) going to happen for beta 1, so you’ll only have to wait a couple of days.

Thee changes will be a huge win for visual integration on Mac OS X, especially on Leopard. I definitely think it was worth doing.

Theme Authors

If you’re writing a Firefox theme on the Mac, you can now set the titlebar color of a window to be a flat, uniform color. There’s a new attribute for top level XUL elements, titlebarcolor. It only works on Mac, but shouldn’t cause too many problems.

Here’s an XBL trick you can use (courtesy of Boris Zbarsky) to apply this attribute to an existing top level element:

<binding id="unified">
    <content titlebarcolor="orange">

Then in your css you set the -moz-bidnding rule as usual, e.g.

window {
    -moz-binding: url(chrome://some/chrome/url/here/unified.xml#unified)

Mac Developers

For the curious, the technique I’m using here is a bit more advanced than the usual “set the background color of a metal window” trick that made the rounds on blogs in 2005 or so. Here’s a summary:

  • First, we create a custom NSColor subclass that knows about our window, a titlebar color, and a background color, and override set.
  • From the set method, we create a CGPattern with a tile size as tall as the window and one pixel wide (YMMV), and set it as the pattern fill.
  • In the pattern’s draw callback, we draw our titlebar color in the upper 22 pixels of the tile and the background color everywhere else. This allows us to do neat things like have a transparent content area with our custom titlebar, which is needed for Gecko platform parity.
  • In the case where we don’t want our own custom titlebar, but want the default appearance, there’s code that draws a Leopard-style titlebar, (since you can’t change the window mask of a window after it’s ben created).

You can check the code out here. It’s available under the terms of the MPL/LGPL/GPL, whichever you choose — contact me directly if you need help understanding the licenses.

The Future?

If all of this seems a little bit extreme and evil, don’t worry too much! Asaf Romano and I are scheming about implementing the titlebar completely in XUL, so themes could then style it however they wanted. It’s a much cleaner way to implement this than having a huge widget-leve API.

To do it though, we need bug 307204 to land. If anyone can give Håkan a hand getting his patch to work, many people would be very thankful :)