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.
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.