Numbered Tabs for Firefox
After posting My Favourite Firefox Keystrokes I saw a comment on someone else’s blog mentioning that they used Ctrl + 1-9 to switch between open tabs.
Pardon? How did I miss that one? I had a new favourite keystroke to add to the list. Going directly to the desired tab is so much better than cycling through all the open ones. Of course, solving one problem creates another — when you have a number of tabs open, it is a pain to figure out which one you need to switch to at times. Who wants to count tabs? Here’s what I came up with to try and solve the problem.
Update January 30, 2005: This technique is now replicated with the Numbered Tabs Extension. You’ll likely want to use it rather than manually hacking away at your userChrome.css files.
Update: Thanks to some feedback from Jan! (twice), I’ve posted a new version that has cleaner CSS and makes use of the :first-child pseudo-class, and limits the numbering of tabs to the browser only.
Download firefox-numbered-tabs.zip
Here’s a sample of the tab bar with the numbers showing:
A larger version shows 9 tabs, numbered 1 though 9.
The Details
There are two components to this — a set of png files with alpha transparency containing the numbers 1 through 9, and userChrome.css file that specifies the CSS for each tab. The CSS is pretty self explanatory, making use of the adjacent sibling selector to set a different background image on each of the first 9 tabs and then uses the universal selector (*) to set no background images on any tabs past the first nine.
The tabs in Firefox are specified using XUL. A set of tabs would be coded something like this:
<tabs>
<tab />
<tab />
<tab />
<tab />
</tabs>
That isn’t exactly it but for the purposes of applying CSS, it appears that this is what you are dealing with.
Here’s most of the CSS:
/* all CSS rules applied to #browser only */
/* to avoid numbering tabs in dialog boxes */
/* Clear default appearance of the tabs */
#browser tab {
-moz-appearance: none !important;
}
/* rules for any tab */
#browser tab {
background-repeat: no-repeat !important;
background-position: right !important;
}
/* sets background on each tab */
/* using adjacent sibling selectors */
#browser tab:first-child {background-image: url("1.png") !important;}
#browser tab:first-child + tab
{
background-image: url("2.png") !important;
}
.
.
.
#browser tab:first-child + tab + tab + tab + tab + tab + tab + tab + tab
{
background-image: url("9.png") !important;
}
Place all the files in the chrome folder that is being used by Firefox. If you don’t want to hunt for it, use the ChromEdit extension and it will put the userChrome.css in the right place for you and you won’t have to worry. If you already have made changes to your userChrome.css then you’ll have to append this to it. Of course the usual caveats apply. I’m providing this as is, with no warranty either expressed or implied, I may update it but it is unlikely, use at your own risk, etc etc etc…
About userChrome.css
userChrome.css is a file that allows you to apply your own CSS rules to the browser chrome that makes up Firefox. I suspect that this might work in Mozilla as well, though I haven’t tried it. Feel free to let me know if it does or doesn’t work in other Gecko based browsers on any platforms.
I first learned of userChrome.css via Jon Hicks when he wrote Tweaking Firefox with CSS. He exposes a few techniques for making the Firefox interface look better by using custom images, borders, and even form widgets. He also points to ChromEdit which allows you easy access to customize various user files. This gives you direct access to the userChrome.css file.
A few Notes
- See Firefox Help: Tips and Tricks for more sample userChrome.css snippets for various effects.
- There were a few issues when doing this — I was originally looking at using CSS to move the favicons over a bit to the right so that I could put the number just to the left of the favicon, as I thought it would be more visually useful there. It might still be possible, but the documentation on how to get at certain elements such as the favicon in the tabs isn’t exactly plentiful.
- I originally wanted to use a CSS Sprite technique for the background a la Dave Shea, but I just wasn’t able to get the control that was needed to position the background image.
- I used various iterations of the background-position and simply using right seemed to work best.
- Changes to userChrome.css don’t take effect until the next time you open your browser, so you won’t see instant changes. Any experimentation means a lot of opening and closing of Firefox.
And there you have it. Hopefully someone else will be able to make use of this as well… If you do use it and don’t like it, or don’t need it, simply delete the userChrome.css file and the pngs or revert back to your old version of the userChrome.css file.
37 Responses
Pingback by Sri's weblog » Numbered Tabs for Firefox — Sep 19 2004 @ 7:35 pm
[…] Numbered Tabs for Firefox
Filed under: General — Sri @ 3:35 pm
http://v1.boxofchocolates.ca/…/numbered-tabs-for-firefox […]
Comment by Benjamin — Sep 17 2004 @ 3:16 am
I was playing with various key combinations one night and stumbled upon the CTRL + # combination. Of course, being lazy and usually having 6+ tabs open, I began to reuse my mouse to switch for that very reason.
Your solution is simple, easy to implement, and best of all–practical.
Comment by Jonathan M. Hollin — Sep 17 2004 @ 5:14 am
Great innovation!
Someone should write an extension to add this functionality. Your method is great but the average user is not going to do this.
Comment by patrick h. lauke — Sep 17 2004 @ 11:15 am
heh…between me getting into the dark art of creating extensions, and your hacking of the css files, we may just turn FF into a nice usable/accessible piece of software :)
and i’m sure malarkey will be pleased about the screenshot too…
Comment by Philippe — Sep 17 2004 @ 11:37 am
It is a very nice shorcut, works on Mac OS X as well.
Now, if only counters and counter reset and the like where supported, you wouldn’t need those images. Hmm, maybe somethign with ::before or ::after. I’ll givbe it a try over the WE.
Comment by Phil — Sep 17 2004 @ 1:58 pm
I just installed this hack on Firefox 1.0PR on Fedora Core 1 linux. I find that instead of each tab having one number, the tab is filled with a row of numbers. For example, behind the text of the first tab it says
11111111111111111111
so it’s like the no-repeat option isn’t being respected.
Comment by Derek Featherstone — Sep 17 2004 @ 2:13 pm
@Phil: Just looking at the CSS and I’m wondering if it should be:
background-repeat: no-repeat !important;
I wondered about that, but it didn’t seem to have any impact on my machines. Can you try that and see if it works? Hopefully it does…
Comment by minghong — Sep 17 2004 @ 2:47 pm
LOL… the CSS is stupid (so hardcoding).
But the effect is great! :-P
Comment by Jan! — Sep 17 2004 @ 3:06 pm
You can drop the last rule (“shuts off numbering after 9 tabs”) if you use tab:first-child + tab + tab … etc.
Comment by Derek Featherstone — Sep 17 2004 @ 3:50 pm
@Jan!: Thanks for that… I had tried :first-child early on and it hadn’t worked, so I assumed Firefox wasn’t recognizing the pseudo-class. It works fine now, so it must have been something else…
I’ve updated the file and the code snippets in the post…
Comment by Jan! — Sep 18 2004 @ 7:10 am
Hmm, this also affects the tabs in non-browser windows like Page Info. Here’s an updated version to correct that:
#browser tab { -moz-appearance: none !important; background-repeat: no-repeat; background-position: right !important; }
#browser tab:first-child { background-image: url("1.png") !important; }
#browser tab:first-child + tab { background-image: url("2.png") !important; }
#browser tab:first-child + tab + tab { background-image: url("3.png") !important; }
#browser tab:first-child + tab + tab + tab { background-image: url("4.png") !important; }
#browser tab:first-child + tab + tab + tab + tab { background-image: url("5.png") !important; }
#browser tab:first-child + tab + tab + tab + tab + tab { background-image: url("6.png") !important; }
#browser tab:first-child + tab + tab + tab + tab + tab + tab { background-image: url("7.png") !important; }
#browser tab:first-child + tab + tab + tab + tab + tab + tab + tab { background-image: url("8.png") !important; }
#browser tab:first-child + tab + tab + tab + tab + tab + tab + tab + tab {background-image: url("9.png") !important; }
Comment by Derek Featherstone — Sep 18 2004 @ 7:44 am
@Jan!: Thanks again — files and post updated.
Here’s a question though: are you figuring this out via trial and error? or do you have some magical guide that exposes Firefox’s inner workings to you? I’ve been looking for something that would let me know what elements are there that we can style with custom CSS to no avail.
I admit #browser isn’t that hard to figure out, but I’d really like to see something that provides a good reference point so we don’t have to guess…
Comment by Jan! — Sep 18 2004 @ 7:54 am
Behold the magic of the DOM Inspector! In its File menu, choose Inspect a window. Then use the “element clicky tool” (left of the binoculars) to select any element and see its hierarchy.
Comment by Derek Featherstone — Sep 18 2004 @ 8:15 am
@Jan!:
Wow. This goes in the category For all the times I’ve used the DOM inspector, I can’t believe I’ve never seen that option… Thanks, yet again…
Comment by Paul Moore — Sep 20 2004 @ 5:40 am
Neat idea!
Rather than using background images, could you use something like
#browser tab:after {
font-size: 50%;
vertical-align: super;
content: " 1";
}
etc?
You could even use CSS2 counter() generated content, if that’s supported, but I couldn’t get it to work in a test, so maybe Firefox doesn’t handle this yet…
Sorry, no time to test this for myself.
Comment by nokerrynoway — Sep 20 2004 @ 8:14 am
May I instead interest you in an extension to do this?
http://white.sakura.ne.jp/…en#ctrlnum
(not limited to japanese. I don’t have this particular addon module installed so I cannot show you a better screenshot)
thanks for your hard work. Perhaps there’s a better solution with both?
Comment by nokerrynoway — Sep 20 2004 @ 8:14 am
http://img22.exs.cx/img22/663/tabextensions_ctrlnum.png
^ screenshot
Comment by Paul Moore — Sep 20 2004 @ 8:53 am
Looks like my suggestion of using :after and content doesn’t work, as the tab text is the value of the label attribute, rather than the element content :-(
I found this page, which seems like a good reference: http://www.xulplanet.com/tutorials/xultu/tabpanel.html
Comment by Phil — Sep 20 2004 @ 10:00 am
the suggestion of
background-repeat: no-repeat !important;
fixed the repeating numbers on each tab for me. Numbers now display correctly on my firefox on Linux.
Trackback by flex-mx — Sep 20 2004 @ 7:34 pm
Numbered Tabs for Firefox
http://v1.boxofchocolates.ca/…/numbered-tabs-for-firefox
Comment by Tim M — Sep 24 2004 @ 7:08 pm
This tool looks pretty cool, but I’m not sure where or how to install it. I’m not that experienced in created web pages, and have never made a css file. Where would I put the contents of the zip file? I did a search for “userChrome.css” but only found it in the zip file. So where do I put the files? BTW, I’m running a wintel XP machine with Firefox.
Thanks,
Tim M
Comment by miahz — Oct 05 2004 @ 12:47 am
You might consider using
#browser tab[ordinal="0"] {background-image: url("1.png") !important;}
...
#browser tab[ordinal="8"] {background-image: url("9.png") !important;}
to select the tabs. Basically does the same thing, but slightly more efficient and easier to read.
Another reason i’d recommend this, is if you use the MiniT extension to drag and reorder tabs, the ordinal value follows the tab, and so does the keyboard shortcut number. So, if you drag the 5th tab all the way to the left, it’s shortcut remains CTRL+5; it doesn’t change to CTRL+1. I think that with the current adjacent selector method, the numbering would remain in order, and hence break the shortcut-to-tab number matching.
Comment by AJ — Nov 06 2004 @ 11:47 am
Hi,
I’m a newbie and I’ve just downloaded firefox PR1. I’ve tried to edit the userChrome.css file as suggested and coppied all the relevant picture files into C:\Program Files\Mozilla Firefox\chrome. This, however has no effect on my browser…I don’t see any numbers!
Please help.
Thanks in advance
AJ
Comment by Jan! — Nov 06 2004 @ 11:52 am
Hi AJ,
you’re supposed to put them in %APPDATA%\Mozilla\Firefox\Profiles\random.yourprofile\chrome
%APPDATA% is a so-called “environment variable” containing the path to your user profile’s application data, usually “C:\Documents and Settings\MyProfileName\Application Data”, so the entire path becomes “C:\Documents and Settings\MyProfileName\Application Data\Mozilla\Firefox\Profiles\random.yourprofile\chrome”
Tip: you can use %APPDATA% in the Windows Explorer address bar, so you can go there immediately.
(I hope you have subscribed to the comments, otherwise you might not even come back to see this. :-)
Comment by AJ — Nov 06 2004 @ 12:04 pm
Hi Jan,
Thanks so much for such a quick response. IT WORKS! Now if I could only get this function to work using my keypad instead of the numbers on the top of my keyboard.
Thanks again.
Comment by John L Jones — Nov 11 2004 @ 12:56 am
Using Firefox 1.0 Final — for some reason I have this exact tab numbering in my browser, regardless of theme, but I did NOT install this code! Indeed, I would like to REMOVE tab numbering. Can’t find references to it in CSS files or thru advanced preferences editing. Can anyone tell me how to DISABLE TAB NUMBERING? THX JLJ
Comment by Derek Featherstone — Nov 11 2004 @ 1:11 am
Hi John,
That seems a little odd… I wouldn’t have thought they would put this into the final version. Did you have other versions of FireFox that you did install this in before? I have a copy of Firefox 1.0 that I just installed today and I don’t have numbered tabs, so perhaps it is sticking around in your profile from before? What happens if you create a new profile when you start up Firefox? does that profile have them as well? What OS are you on, by the way?
Curious…
Comment by John L Jones — Nov 11 2004 @ 8:55 pm
I’m running Win98SE. The reason for all the confusion is threefold: numbering did not appear in any prior Firefox version I used; it did not appear in any prior Nautipolis theme version I used; it appeared consistent across all FF 1.0 themes.
Nevertheless, running FF 1.0 with a new default profile/theme removed tab numbering.
So eventually I traced it to the latest incarnation of Nautipolis (1.0). In fact I found a sorta kinda solution: while I still cannot find the code that specifically invokes the numbering, I did find the folder containing the number graphics themselves and deleted them — so, though I assume the code to number the tabs is still there, there are effectively none to see.
Thanks for your time! JLJ
Comment by Sam Leong — Nov 12 2004 @ 2:25 am
Running Win XP Pro. Been using Firefox/bird since 0.6 . Never saw tab numbers ever.
Trackback by The Fireant Gazette — Nov 21 2004 @ 6:16 pm
FireFox Keystroke Shortcuts
For those of you who have upgraded (and I mean that in every sense of the word) to FireFox, here’s an informative article by Derek Featherstone on some keyboard shortcuts you might find useful. My favorite is Cntl + T which opens a new blank tab and p…
Comment by Petriukas — Jan 20 2005 @ 10:56 am
Did toy folks heared about SearchStatus freeware Firefox extension to download?
This extension the feature for Firefox I liked most. It shows google and alexa rank for the page.
Tabbed browsing also cool.
Comment by Jan! — Jan 20 2005 @ 3:20 pm
Seems like spam to me, “Petriukas”. Nice obfuscating with semi-relevant content, though.
Comment by Petriukas — Jan 21 2005 @ 9:54 am
Thanks Jan ;), amazed.
I also can tell one more additional feature from firefox :
write down to url string “about:cache” and “about:config”
First time when I saw it, I was impressed.
Comment by Bagus — Oct 31 2005 @ 1:31 am
My question is not concerning the numbering scheme for tabs. However it is related to tab labeling, and possible use of userChrome to do so. So, perhaps someone could point me in the right direction to seek help specifically related to my question.
I’ve been looking for a way to label tabs with the tab naming convention given this priority:
1. If URL has a related Bookmarks Property Name in Firefox, then use the Property Name as a tab label.
2. If URL has no related Bookmark Property Name, then use normal label naming convention of TITLE tag (or URL for TITLE-tagless pages).
I am wanting this because I have over 20 tabs that I have to open simultaneously. The tabs are hard to identify since the webpages all have the same TITLE tag, thus causing all tabs to be named the same (although they have different content). The URL’s are fairly lengthy, so using my Bookmark Property Name would allow me to name the tabs by changing the Property Name to a more descriptive tab title.
Any advice?
Thanks.
Pingback by Zootropo » Numerando las pestañas y Pagerank — Sep 19 2004 @ 11:37 am
[…] binación Ctrl + 1-9 para acceder a una pestaña del navegador, te gustará el hack css de Derek Featherstone, que permite numerar […]