| Related sites for http://labs.mozilla.com/2006/11/chromatabs/ |
| Linux_Consulting Linux Consulting, network, server, hardware, software, middleware. Web planning. Santa Clara, California. | | RFC_2585 Internet X.509 Public Key Infrastructure Operational Protocols: FTP and HTTP. R. Housley, P. Hoffman. May 1999. | | KPrayerTime_Applet This KDE applet provides a schedule of prayer times for the day. Software download and a few screenshots. | | The_Windows_Registry_Experts Information and software utilities to fix most Windows errors: Registry and file errors, Windows tweaks and optimizing memory and disk space. | | Agni_Computer_Security_Technologies Password Recovery Solutions for todays most used software as well as Enterprise Security Auditing Solutions to meet the needs of todays IT Industry. | | Boimorto_Whois All whois in one page. Now support multilingual domain names. | | HTML_Help A list of HTML tutorials, image map tutorials, graphics pages, and cross browser help. | | SmartParser A powerful and easy configurated package that includes Object oriented Template Engine with its own Macrolanguage SP.TE and Database Engine (HTML forms input interface) SP.DE (FCSS sequel), designed t | | ILIAS A platform for Web-based training, developed at the University of Cologne/Germany. (PHP4) | | Fading_in_text_using_the_DOM Learn how to utilize DHTML and the new DOM of IE5/NS6 to fade in text. | | IBM_VisualAge_Smalltalk Powerful vision of programming: gives developers a set of visual programming tools to develop robust solutions to real business needs in client/server and transaction system environments. Free CD, cod | | Radified_Windows_XP_Installation_guide Step-by-step guide to installing Windows XP, including partitioning, from blank hard drive to Ghost image. | | jGuru_JavaScript_FAQ Answers to common and not so common JavaScript-related questions. | | Back_To_Font Stylesheet color picker for background and fonts. Written in Javascript. | | Amazing_Creation Offers web site development, graphic design, translation, and film production services. | | Co-Op_Cache_Consulting Offers design and consulting, and co-operative advertising. | | Bangladesh_Chat Website features network information, a web chat connection applet, and information about Bangladesh. | | Attach_Web_Design Web design solutions, Multimedia, e-business and e-commerce solutions, wireless applications, hosting, and marketing strategy. | | Vircom Makers of VOP Radius server. Key benefits and customer comments. | | INXBuilder A .Net rendering tool that allows one to create XML files in Adobe InDesign Interchange (INX) format. INXBuilder manage pages, multi-column layouts, texts, tables, lists and images. |
|
Mozilla Labs » Blog Archive » Chromatabs: Leveraging Human Perception for Happier Tabbing
 Projects Blog Discussions About Blog Hot off the press — what’s fresh at the Labs. Entries Comments 11.08.2006 Alex Faaborg Extension Firefox Idea Comments (36) Chromatabs: Leveraging Human Perception for Happier Tabbing Today we are featuring a Firefox extension that Justin Dolske just whipped up called Chromatabs. It colorizes each browser tab to provide a strong visual indication of which site is loaded. Here’s a screen shot of it in action: Let’s first take at the fundamental principle of why colors are useful. In the image below, try to do these two things:1) Find all the red letters2) Find all the K’s You likely found the first task an order of magnitude easier than the second task [1]. This is because of difference in the way our visual system processes color compared to the way that it processes shapes. You can view all of the red letters with a single glance, or even spot them with your peripheral vision. Finding all of the K’s requires a close visual scan.What does this have to do with tabbed browsing? Well, tabs use the same two visual variables (color and shape) to differentiate themselves from each other. Favicons provide a small amount of color, and the title text of the page consists of a series of shapes. Unfortunately some sites don’t have a favicon, or the favicon they do have isn’t sufficiently unique. Without favicons, you have to do a visual scan to find the correct tab — you can’t spot it with your peripheral vision.This problem has attracted some interest from the community already. Many of you may be familiar with the popular Firefox extension Colorful Tabs. Its solution is to simply assign each new tab a color from a fixed list, in sequence. First example, the first tab will be blue, the second is yellow and the third green. The tab remains that color until it is closed. Each time you browse the web, you’ll have to remember what a particular color means at the moment:  Chromatabs’ approach to coloring tabs is different. Instead of assigning an essentially-random color to a tab when it is opened, a color is derived from the site currently loaded in the tab. For instance, this means that blog.mozilla.com will always be red, and engadget.com will always be purple:So, how does it do that? Well… It takes the hostname from the URL, converts it to a number via a simple hash function, and then uses the number as a hue in HSL colorspace to obtain a final color. Justin has a blog entry discussing this and other technical details of Chromatabs’ operation in greater detail.By keeping each site’s tab color consistent, the user can build up a mental model of what colors are associated with their favorite sites.Future WorkChromatabs was built as an experiment to test a concept. There are a number of directions someone could take this prototype to improve it and try new ideas. Here’s a few possibilities that might be interesting:It might be more intuitive if Chromatabs analyzed each page to determine the most prominent color on the page, and then used that color for the tab. You would then see Slashdot tabs in their distinctive green, Fark tabs in purple, and Zombo.com tabs in, uhhh… oooooo….Unfortunately not everyone likes rainbows and unicorns. In the process of converting a domain name into a RGB value, perhaps Chromatabs should also base the color on an aesthetically pleasing color pallet. Does anyone know a good algorithm to create beautiful color pallets?A similar problem area is coloring groups of tabs. Here the focus would be on coloring groups of tabs in a unique color, which could be ephemeral and not based on the site’s address.Give the user greater control over their browsing experience by allowing them to customize the color for a site. This might have some anti-phishing benefits as well (for example, expecting your bank’s web site to have the bright green color you assigned to it).The Chromatabs extension is open source, so it’s a good starting point for anyone wanting to try out their own variation.Discussion TopicsWhat if instead of just providing a favicon.ico, Web designers were able to design the surface of the tab?What other ways could the browser provide a richer and more dynamic tabbed interface? For instance, Aging Tabs is really creative, bringing temporal information into the mix.[1] From an HCI lecture (PDF) by professor Rob Miller Comments 11.08.2006 Boris Anthony Very cool, I feel justified. :)I do something almost identical in a web-based aggregator system I have been working on, where each source’s feed URI is MD5′ed, and I simply grab the first 6 characters from that hash and pretend it’s an HTML/Hex color.(I need to do a brightness check to avoid having, say, bright yellow show up on a white background)I’d also like to point out that in your explanation above, nevermind that that color recognition is easier than shapes; your example uses roman letters: that causes the language centers to kick in, further slowing things down! :)I like the aging idea. Will research this too. 11.08.2006 John Lilly testing this now — it’s interesting. i think, visually, i’d sort of prefer the colors on each tab to be related to the dominant coloring of the favicon — would love my mozilla tabs, for example, to be a less saturated version of the dino-head red. or for my skype tab to be a little less saturated version of that sky blue color. 11.08.2006 Dao I’ve tried to comment over at Justin’s place, but I’m not sure if it worked. So let me repeat this here:With the default Windows / Linux theme, it [tab coloring] is all dead easy. The images are semi-transparent, the borders are rounded. You can apply any color. That’s how I did it with Aging Tabs. If you could encourage that the Mac theme gets updated with 2.0.0.x, that would be great. 11.08.2006 Boris Anthony Forgot to mention that the Mac desktop aggregator app “endo” also derives a color for a feed, but it does so based on the favicon, using some OS X color compositing whizzbangery. 11.08.2006 dolphinling Does it really not work with Minefield? I’d like to try it out… 11.08.2006 Perry Lorier this is also a strong antiphishing measure — if you goto your bank and todays it’s blue when yesterday it was yellow you suddenly start thinking “why?” 11.08.2006 dria This is pretty slick. I’ve installed it and will see how it works out over a few days. 11.09.2006 HÃ¥kan Waara It would be interesting to see the same algorithm applied to the bookmarks in the bookmarks toolbar!This would help those with chaotic toolbars like me (I have the bm toolbar set to wrap to multiple lines because I have so many of them, and I want them all visible and easily accessible). 11.09.2006 Richard I think ChromaTabs has huge potential and certainly hope it continues to get developed. Thank you Justin for bringing to life such a superb idea. 11.09.2006 FishCop ChromaTab is really cool…as long as I deactivate Tab Mix Plus. When Tab Mix Plus is active, ChromaTab won’t colour the tabs. 11.09.2006 Taters I like it, but it doesn’t work with tab Mix Plus. 11.09.2006 john f mcdermott This works with TMP[url=https://addons.mozilla.org/firefox/1523/previews/]PageStyle2Tab[/url] 11.09.2006 Faaborg After writing the post I saw this extension called PageStyle2Tab: https://addons.mozilla.org/firefox/1523As usual, our extension development community rocks. 11.09.2006 Sam Hasler I like munsell pallets because they use a perceptually uniform color space (colours have): http://www.triplecode.com/munsell/The flash app on that site is a pain to extract colours from so I’ve got a few I already extracted here: http://www.hiddenisland.plus.com/Munsell.htmlI used them in my UserChrome.css to customise ChatZilla’s tabs so that each server had it’s own colour and used darker shades to indicate the current tab: http://www.hiddenisland.plus.com/chatzilla/images/CZ-FlatTabs-2.png 11.09.2006 Greg K Nicholson It’d be nice if Bookmarks, History and (especially) the tab list were also coloured. 11.09.2006 Jeff Carlsen I’ve used it for a day now, and here is what I find.I like the concept of colored tabs, but it turns out that I don’t want all of them to be colored, only a select few. For example, if I’m at Slashdot, I want that to be colored, but when I open five different news stories in tabs, I don’t want all of those colored, as the various colors distract, and slow down my ability to return to the parent.Some possible solutions:*Only color tabs for sites I have bookmarked*let me decide when to color a tab through the context menu*Only color a tab when I open a new tab from it (in other words, color parent tabs)I do believe that all of these are viable options, and perhaps all of them could be implemented simultaneously. I particularly think that the last one has the most potential. Imagine that when you open a child tab, it colors the parent one of a handful of attractive colors, and then subtlety colors the child tabs in a lighter version of the same color, immediately showing the parent/child relationship of tabs, while immediately pointing back to the parent for easy reference. 11.10.2006 vdc Nice idea !A enhancement would be to colorize the tab only when it is completely loaded, or to colorize the tab as it is loading :“Grey” -> not loaded“final-color” -> completely loaded with a gradient while it is loading. 11.10.2006 Mickaël Very interesting extension. I’m testing it…I just have a remark : it is sometime hard to see which of the tabs is the current. Perhaps the grey line between the page and the tab line should be of the tab’s color, or the separation between this line and the non-active tabs should be more marked. I don’t know… 11.10.2006 Andrew Conkling I was just posting exactly what Mickaël just said. :) My thought was to make the inactive tabs significantly less saturated (i.e. more gray, I’m not sure of the terminology). 11.11.2006 Dao Andrew Conkling, see extensions.chromatabs.color.saturation and extensions.chromatabs.color.luminance (although I guess this also affects the active tab). 11.11.2006 Sam Hasler less saturated background tabs worked for me in Chatzilla, see http://www.hiddenisland.plus.com/chatzilla/images/CZ-FlatTabs-2.png 11.11.2006 Kevin Charmon Same as HashColouredTabs:https://addons.mozilla.org/firefox/437/http://hashcolouredtabs.mozdev.org/Which unfortunately only supports Firefox 1.0 ~ 1.5. It also has a brightness selecter and minimum tab count trigger. 11.12.2006 onemen in allowed Chromatabs to work if tabmix installed replace colorizeTab function in chromatabs.js with this: colorizeTab : function (tab) { var doc, i, hashstring, hashvalue, node; var color = CHROMATABS.computeTabColor(tab); if (!color) { return; } doc = tab.ownerDocument; if (0) { tab.style.backgroundColor = color; node = doc.getAnonymousElementByAttribute(tab, “class”, “tab-image-left tab-startcap tab-left tab-left-border”); node.style.opacity = 0.8; node = doc.getAnonymousElementByAttribute(tab, “class”, “tab-middle box-inherit tab-image-middle tab-body”); node.style.opacity = 0.8;// node = doc.getAnonymousElementByAttribute(tab, “class”, “tab-close-button”);// node.style.opacity = 0.8; node = doc.getAnonymousElementByAttribute(tab, “class”, “tab-image-right tab-endcap tab-right tab-right-border”); node.style.opacity = 0.8; } if (1) { node = doc.getAnonymousElementByAttribute(tab, “class”, “tab-image-left tab-startcap tab-left tab-left-border”); CHROMATABS.renderImage(tab, node, color, false); node = doc.getAnonymousElementByAttribute(tab, “class”, “tab-middle box-inherit tab-image-middle tab-body”); CHROMATABS.renderImage(tab, node, color, false);// node = doc.getAnonymousElementByAttribute(tab, “class”, “tab-close-button”);// CHROMATABS.renderImage(tab, node, color, false); node = doc.getAnonymousElementByAttribute(tab, “class”, “tab-image-right tab-endcap tab-right tab-right-border”); CHROMATABS.renderImage(tab, node, color, false); } }, 11.14.2006 Moosh I’m color blind 11.15.2006 Itai Seggev What’s really needed is to colour code tab groups like TBE does. 11.17.2006 Komodo I feature I’d like to see is the ability to have a tab colored by it’s referrer. If this were implemented, all of those tabs I opened from digg would be colored the same. Now I would know which sites I opened independently and which tabs I opened from digg. If a site is typed in the address bar, obviously its referrer would be itself, and the normal algorithm would apply 11.19.2006 arielb I’m in favor of color coding based on category and not the arbitrary color of a website. For example, a computer sites like tomshardware, intel and slashdot may have a blue tab and a shopping site like amazon may be green 11.20.2006 Fafek Very useful eye-candy.However, I notice some redrawing problems on Ubuntu 6.10… 11.21.2006 John P Baker It seems that everyone has a different idea of how to colour tabs - we could end up with another hugely configurable extension - or lots of small ones.-> Kevin Charmon, I have a potential Firefox 2 version of hashcolouredtabs downloadable from http://seis.bris.ac.uk/~ccjpb/ 11.21.2006 Zachariah I really think it’s confusing that subdomains are a different color (as is http://www.example.com and just example.com) — you should use just the root domain, instead. 11.25.2006 Matthew This has become my HashColouredTabs replacement - thanks. I don’t think that there is any need to over-engineer the colour selection algorithm! For what it’s worth these are my suggestions for how to improve on the prototype:1) Tablist entries coloured to match the tabs2) Right-click on tab gives “Tab Colour…” option. This launches a colour picker that allows you to override the default hashed colour. Overrides are saved so that all tab colours are preserved.3) Tab colour defaults over-ridden by URL pattern matching rules + colour picker (e.g. so you have full control over how alternative/sub-domains are coloured, and similar sites can have similar colours assigned). If the colour picker includes a ‘none’ option then this will take care of pretty much everyone’s personal preferences expressed below.4) It’s especially important that the site x = colour y association be static from session to session. I don’t want this changing randomly based on how many tabs I have open etc. 11.29.2006 arielb the big advantage of “colorful tabs” is that you don’t have 2 tabs with similar colors next to each other. that makes it easy to pick one out. 12.18.2006 Andre Viana » Usuabilidade em tabs [...] Essa não é a primeira extensão que faz esse tipo de coisa, existe a Colorful Tabs. Eu estou simplesmente simplificando as coisas para quem tem preguiça de ler um post de um geek e ainda por cima em inglês, quem quiser saber mais, sobre a ferramenta e só ler o artigo original. Blog reactions Tags: Design, Internet Del.icio.us Digg Furl [...] 02.15.2007 Justin Dolske’s blog » Blog Archives » 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. [...] 02.27.2007 Kaspers Homepage » Firefox extension: Chromatabs. [...] Nu er jeg stødt pÃ¥ det igen, og i en form som jeg tror virker bedre. Forklaringen inkl. et motiverende billede, findes her. [...] 02.28.2007 a un figlio a un figlio…Mozilla Labs Blog » Blog Archive » Chromatabs: Leveraging… function loadPage(list) { location.href=list.options[list.selectedIndex].value} Categories Extension (5) Feature (1) Firefox (9) Idea (3) Mozilla Labs (43) Survey (3) Monthly Archives Select -- October 2008 September 2008 August 2008 July 2008 June 2008 April 2008 March 2008 February 2008 December 2007 November 2007 October 2007 September 2007 August 2007 July 2007 May 2007 April 2007 March 2007 December 2006 November 2006 August 2006
Home
Projects
ChromatabsConcept SeriesJoeyOperatorPersonasPrismSnowlTest PilotThe CoopUbiquityWeave
Blog
Introducing Geode Mozilla Labs Meetup - Thursday, 9/25 Introducing Ubiquity New Tab Concepts Monthly Labs Meetup - August 2008 - San Francisco
Discussions
Labs Projects
Contests
Mail & Communications
General Forum
Search Discussions
Login
Register
About
Laboratories are where science and creativity meet to develop, research, and explore new ideas. Mozilla Labs embraces this great tradition - a virtual lab where people come together to create, experiment, and play with new Web innovations and technologies.
Overview
Career Opportunities
Press Contact
Search
Mailing List
Enter your email address here to subscribe to our mailing list for announcements:
Copyright © 2005–2008 Mozilla. All rights reserved. Privacy Policy / Legal Notices
st_go({blog:'2060885',v:'ext',post:'18'});
var load_cmc = function(){linktracker_init(2060885,18,2);};
if ( typeof addLoadEvent != 'undefined' ) addLoadEvent(load_cmc);
else load_cmc();
|
|
