Chromatabs 2

I released an update to Chromatabs today… [Edit: It's no longer in the AMO Sandbox.]

This version adds the ability to color tabs based on the site’s favicon. (This is off by default; you can enable it in the extension’s preferences.]

Here’s what it looks like with a few select sites:

It’s just averaging the pixels in the favicon, which is why Flickr’s color is purple (a blend of the pinkish-red and blue in the icon). It would probably be better to build up a histogram, and then select the most prominent color… But averaging works fairly well and is easy. :-) The code is smart enough to ignore pixels that are almost white or black, which would otherwise pollute the average color. I’ve noticed that a surprising number of sites have black-and-white site icons (eg BBC), so Chromatabs will fall-back to the old method of picking a color for the site in such cases. [Grayscale confuses it sometimes, though.]

I’ve found that using the favicon to determine colors for tabs seems more useful, because the color actually has some relevance to the site. Of course, for sites without an favicon it doesn’t help at all.

 

Oh, and one more thing (as Steve Jobs is wont to say)…

I’ve been thinking about some ideas to improve the visibility of the foreground tab, which is sometimes hard to pick out (especially with colored tabs, although I think even the default theme is too non-distinct). Here’s a mockup of what I’m currently thinking about — subtle gradients on either side, vaguely as if the neighboring tabs are curving into darkness.

(*cough* I just noticed I styled the wrong tab in the mockup, as the URL bar clearly says “www.blogspot.com” and not “www.flickr.com.” Oh well, no one is prefect! [sic :)])

About Justin Dolske

Mostly harmless.
This entry was posted in Firefox, Mozilla Labs, PlanetMozilla. Bookmark the permalink.

31 Responses to Chromatabs 2

  1. dria says:

    I’m having a heck of a time finding it in the sandbox. Do you have a direct URL for it in there?

  2. I’d recommend putting a vertical gradient, dark on the bottom, fading out toward the top, on each of the background tabs – (very) roughly illustrated in this quick mockup: http://actsofvolition.com/images/screenshots/firefox/chromatabs2.png

  3. Collin Grady says:

    It doesn’t seem to be present anywhere on the site at all, not even in sandbox…

  4. Dao says:

    I suggest to force the selected tab to be white, so that it connects with the strip underneath.

    Nevertheless, implementing the gradients could be worth a try. I’m eager to do it, unless it’s already on your agenda :)

  5. Haha! It has been freed from the sandbox!

  6. Dao says:

    I filed bug 376435 for Winstripe.

  7. mountainspeaks says:

    Hmmm, i love TBE. Its got everything i need. And it also have a way of coloring tabs in the Tab appereance menu. Using tab groups and colors is a nice feature. Coloring tabs opened from links in the same color as the original tab. Thus making colored groups………

    Besides that it can become to much colors too….

  8. john p baker says:

    Here is a fun combination:

    In an experimental profile – until API changes and database tables are stabilised – install Chromatabs, Content Preferences ( https://addons.mozilla.org/firefox/4066/ ), and HashColouredTabs+ 0.4.10 from http://seis.bris.ac.uk/~ccjpb/ . Chromatabs can set the tab from the icon, HashColouredTabs+ will provide an icon is there isn’t one from the site, Content Preferences can set the colour of the that icon, and Chromatabs will use that new colour…

    And to think I said on your blog, last year, that people would want one or the other.

  9. Cameron says:

    How’s about making it use the old hashing system if the site doesn’t have a favicon?

  10. Nice option, but it seems to be working a lot more slowly for me. That is, it doesn’t seem to apply the color until the page finishes loading. Grey tabs are kind of drab. :-/

    @Steven: Amen! Personally, the Fx2 theme has been hard for me to adjust to, due to the lack of sharp contrast for the active tab. I had to add the final close tab button back, as I’d routinely middle-click the wrong tab, thinking it looked like the focused one. (It’s also better w.r.t. Fitt’s Law, IMHO.) I really liked the colored bar at the bottom of the active tab! I just discovered the pref in Chromatabs to change opacity for the active tab, and this helps, but is still imperfect.

  11. John:

    It’s a bit of a tricky problem… With a color based on hashing the site name, I can color the tab immediately. But when using a favicon, I can’t color the tab until after the page loads, specifies an icon, and that icon loads.

    I added caching so that the last step (loading the icon, and parsing a color from it) only needs to be done once. But the code is still conservative, and waits for the page to specify a favicon. I should probably loosen this, so that it assumes that a site’s icon doesn’t change. [It can, but I've not seen this in practice.]

    There’s a further optimization, in that the tab color won’t be reset/recomputed if you’re just loading another page on the same site. But if you navigate from Site A to Site B and then back to Site A, you’ll see the tab flash gray before loading the site.

  12. Rich says:

    the new version still doesn’t seem to work with TMP (Tab Mix Plus)
    is there something i have to do to make ChromaTabs work?

  13. Justin,
    No…I tried that feature and went back to the domain hashing function. It seems to not take the color until I either click or hover over the tab, or some magic happens. As it stands, this feels like a massive regression. :-/

    Maybe it’s worth noting that this lag is from the point when I middle-click links? I’m not sure why that’d be different from something else, but just a comment.

  14. shy says:

    Justin,

    On firefox 2.0.0.3 (Win XP) with ChromaTabs 2.0 and nothing else, if I open a tab via:

    * Control + Click
    * Middle-Click, or
    * Right-Click, “Open Link in New Tab”

    The tab will remain the standard gray until either:
    a) The tab is selected via Control-Tab scrolling, or
    b) I mouse over the tab

    This problem does not exist with colors generated via favicon, only on the hash function.

  15. onemen says:

    i think there is small bug…
    when Firefox start with more then one tab only the selected tab get colored. all other tabs get colored when they hover or select

  16. shy says:

    i’ve reverted back to chromatabs 1.0 for the time being. justin — are you out there? can you at least confirm this issue exists?

  17. stingray says:

    People also seem to be reporting various problems with it on the Mozilla add-ons page for Chromatabs. Perhaps Justin’s gone on an easter vacation?

  18. john p baker says:

    [I am resending this as I first sent it when the cluster had problems last week...]

    Here is a fun combination:

    In an experimental profile – until API changes and database tables are stabilised – install Chromatabs, Content Preferences ( https://addons.mozilla.org/firefox/4066/ ), and HashColouredTabs+ 0.4.10 from http://seis.bris.ac.uk/~ccjpb/ . Chromatabs can set the tab colour from the icon, HashColouredTabs+ will provide an icon if there isn’t one from the site, Content Preferences can set the colour of the that icon, and Chromatabs will use that new colour…

    And to think I said on your blog, last year, that people would want either one or the other.

  19. Very nice, I like it. I also like the mockup. Seems like that could work well.

  20. Dfg says:

    While the color-depending on icon is nice, I still prefer the old-style one. Still, I would really appreciate an option to choose the color only on the domain and not the full site name, i.e. have the same color for blog.mozilla.org, http://www.mozilla.com, and mozilla.com.

  21. frans says:

    I really like the Chromatabs extension!

    As you say “a surprising number of sites have black-and-white site icons”. I’ve noticed a lot of sites have grayscale icons (eg Digg) which results in gray tabs that aren’t in the spirit of Chromatabs. ;-)

    I’ve added the following line to function getFaviconColor right after “if (pixels[p] > 230 && pixels[p+1] > 230 && …”:

    if (Math.abs(pixels[p] – pixels[p+1]) < 10 && Math.abs(pixels[p] – pixels[p+2]) < 10 && Math.abs(pixels[p+1] – pixels[p+2]) < 10) { continue; } // ignore gray pixels

  22. frans says:

    The following code builds up a histogram of the pixel colors in the favicon, and then selects the most prominent color. It is even easier than averaging and results in brighter colors.

    line 348:
    < if (color == “rgba(0, 0, 0, 1)” || color == “rgba(255, 255, 255, 1)”) {

    > if (color == null || color == “rgba(0, 0, 0, 1)” || color == “rgba(255, 255, 255, 1)”) {

    line 451-488:
    < // We’ll use pixel (0,0) as a workpixel for compositing.

    < var color = “rgba(” + pixels[0] + “, ” + pixels[1] + “, “+ pixels[2] + “, 1)”;

    > var colormap = new Object();
    > for (var i = 0; i < 16*16; i += stride) {
    > var p = 4*i;
    > if (pixels[p+3] < 192) { continue; }
    > if (pixels[p] + pixels[p+1] + pixels[p+2] < 100 ) { continue; }
    > if (pixels[p] > 230 && pixels[p+1] > 230 && pixels[p+2] > 230) { continue; }
    > if (Math.abs(pixels[p] – pixels[p+1]) < 10 && Math.abs(pixels[p] – pixels[p+2]) < 10 && Math.abs(pixels[p+1] – pixels[p+2]) < 10) { continue; }
    > var x = “” + (Math.round(pixels[p] / 17) * 17) + “_” + (Math.round(pixels[p+1] / 17) * 17) + “_”+ (Math.round(pixels[p+2] / 17) * 17) + “”;
    > colormap[x] = (colormap[x] ? colormap[x] : 0) + 1;
    > }
    > var maxcolor = null, maxcount = 0;
    > for (var c in colormap) {
    > if (colormap[c] > maxcount) {
    > maxcolor = c;
    > maxcount = colormap[c];
    > }
    > }
    > color = “rgba(” + maxcolor.replace(/_/g, “,”) + “,1)”;

  23. frans: Interesting, I’ll have to try that out. I had considered building up a histogram, but thought it might be slow. A simple average was also very simple to implement. :)

  24. Can’t seem to get it to work at all.

    Using Firefox 2.0.0.8 with Default Theme. I am not using TMP, so that’s not the problem.

    Extensions:
    Chromatab 2.0
    Colorzilla
    Web Developer Toolbar
    Firebug
    Foxmarks Bookmark Synchronizer
    FoxyTunes
    Google Toolbar
    HTML Validator
    IETab
    ShowIP
    SnapShots
    Talkback
    VideoDownloader
    YSlow
    Zoho Notebook Helper
    Thoughts?

  25. None says:

    hey can i make a suggestion,

    how about getting this to recognize local addresses, as i store my java api docs on the local hdd, no color is shown for them which is slightly disappointing.

    thanks

  26. Perhaps white-fading gradient would be more suitable for the non focused neighbour tabs.

  27. Roman says:

    Please refresh Chromatabs for compatibility with FireFox 3.

  28. yorf feix says:

    I check every day to see if there is a version for ff3. what is the problem?

    please….

    thanks

  29. Steve says:

    Please, please, please change your decision not to update Chromatabs for Firefox 3. At the very least please release your source so another programmer can adapt it.

  30. Gary Calpo says:

    The beauty of Firefox extensions is that for the most part, the source is already included!

    That said, I updated Chromatabs myself to work with Firefox 3 :)

    Please give it a try and let me know how it works. The feedback so far has been very positive.

    https://addons.mozilla.org/en-US/firefox/addon/8004

    My ChromaTabs Plus homepage: http://garycalpo.wordpress.com/chromatabs-plus/

Comments are closed.