You are in a maze of twisty little tabs, all alike.

I had this idea for tweaking tabs floating around my head for a while, and last week I finally decided to implement it. The result is Chromatabs, and the UI aspects of it are discussed on today’s labs.mozilla.org posting.

I thought I’d write a bit more here about how it’s implemented, because it’s doing a few interesting things under the hood…

My first proof-of-concept at colorizing tabs was to just set a background color on the tab, and adjust the tab’s opacity to allow the color to show though. This early result was, well, crap:

The positioning of the elements that comprise the tab’s internal structure caused some white lines, the opacity affected the text and favicon (they got colorized too), and the background color was visible around the tab’s curved borders. I could probably have worked around the first few issues, but the tab’s curves were an interesting problem… In Firefox 2, the default theme uses chrome images to make the tabs look nice and stylish (curved ends, and a bit of a shiny vertical gradient). You can simulate coloring an image by lowering its opacity and allowing a background color to bleed-though — but if the image already has transparent regions the background color comes through at full-strength.

So, to make a colored tab look nice that approach won’t work. Drat. It would be really easy to colorize a tab with Photoshop, but you can’t do that in the browser. …or can you? The thought struck me that the <canvas> tag, which Firefox supports, gives you a pixel region upon which you can draw things, and it has a compositing mode that allows you to draw only on regions that already have content (ie, that are not transparent). So, that’s what Chromatabs is doing. It dynamically renders new colorized chrome images for each tab. First, it uses the tab’s original chrome image to produce solid-color version via compositing, and then blends it back into the original chrome image by overdrawing with reduced opacity (ie, partial transparency). And it’s all driven by Javascript!

This might also be an interesting technique for themes to use. Currently, if a theme wants to have versions with different colors, the author must create each as separate themes. If the theme could colorize itself at runtime, you’d just need one version of the theme. Plus, the user would be able to pick the exact shade of color they want. Everyone wins.