ComputerBob Tweaks Firefox (Iceweasel) 3 Tabs

Yesterday afternoon, Firefox 3 appeared in the Debian Lenny repositories. Actually, due to licensing issues, it’s called “Iceweasel 3,” but under the hood, it’s really just Firefox 3.

For the past couple of weeks, I had started having problems with Firefox 2 (Iceweasel 2) randomly quitting and/or freezing. I’m sure that the problem was caused by one or more recent updates. Luckily, since I use Linux instead of Windows, the Iceweasel crashes/freezes didn’t affect anything else on my computer, and I could restart the crashed browser and continue using it each time.

But as you can imagine, I was glad to see that FF/IW 3 was available, so I installed it right away on my Debian Lenny KDE system.

First of all, there’s no question about it: Firefox/Iceweasel 3 is noticeably faster than Firefox/Iceweasel 2 on my computer. New tabs open quicker. Web sites display faster. Switching from one tab to another happens almost instantly.

Unfortunately, after I opened several tabs in the new browser, I noticed that there was very little difference between the appearance of the active tab and the inactive tabs. The active tab was gray, while the inactive tabs were slightly darker gray. All of the tabs had the same black, normal-weight text, and they all had a “close” icon. Without much difference between the look of the active and inactive tabs, It was very difficult to quickly scan through my tabs and see which one was the active tab.

So I went looking for a tweak or browser add-on that would let me change the color of the active tab. I found two or three different tweaks, and three or four add-ons. I tried all of them.

Only one of the tweaks that I tried worked for Firefox 3. It allowed me to change the color of the active tab, but it didn’t affect the inactive tabs. And it didn’t let me make the text on the active tab boldface, to make it stand out better. And it took away the “highlighting” feature that occurs when you pass your mouse pointer over one of the inactive tabs.

None of the tab-color plugins did what I wanted. One of them made all of the tabs different colors. That didn’t make it any easier to distinguish the active from the inactive tabs. It also had a feature that “faded” the inactive tabs, which helped a lot, but I still found it distracting to have all different colored tabs — and the active tab’s text was not boldface. Another add-on required me to right-click on each tab to manually change its color. A couple of others either didn’t work at all or didn’t have a version that worked with Firefox 3 yet. One was listed as “experimental” and would have required me to register before I could download it. I chose not to.

So I studied the code of a few of the tweaks that I had found, and ended up combining some of that code and then adding additional code of my own to add the “highlight” feature and to boldface the text on the active tab.

I also changed the colors in such a way that the active tab is darker than the inactive tabs, instead of lighter than them. And I made the text lighter-colored on the inactive tabs. To me, that makes it look more like the inactive tabs are “faded” while the active tab is “live.”

Once I finished all of that, I installed a Firefox add-on called Tab Mix Plus, to remove the “close” button from all but the active tab. TMP also added several convenient tabbing features that I’ve used for a couple of years, like double-clicking on any tab to open a new tab, and automatically going to the last-visited tab whenever I close a tab

Here are 3 screenshots that show the differences. The same tab is active in all 3 screenshots:

The top screenshot shows the default Firefox 3 tab colors. As you can see, there’s very little difference in the look of the active and inactive tabs. And I think it’s very distracting and “clunky” looking to have the “close” icon on every tab.

The middle shot shows how the tabs looked after I did my code tweak. As you can see, the new tab colors make the active tab stand out much better, and its text is in boldface, making it easier to read in contrast to the lighter-colored text on the inactive tabs. But that clunky “close” button is still there on every tab.

The bottom shot shows how the tabs looked with both my code tweak and the Tab Mix Plus browser add-on. As you can see, the tab colors are the same as the middle shot, but now the “close” button is only on the active tab.

If you want to add my code tweak to Firefox/Iceweasel 3, just do the following:

1. Using a text editor, create a new text file called userChrome.css in your Firefox/Iceweasel profile folder’s “chrome” folder. If you already have a file called userChrome.css, then open it in a text editor.
2. Add the lines of code shown below to that file and save it.
3. If you’d prefer other colors, free to change the color values in the code.
4. Close Firefox/Iceweasel and reopen it to see the changes.

(When you cut and paste the code below, make sure that the double-quotes don’t turn into angled double-quotes. If they do, then edit them to make them regular double quotes.)

/* Change color of active tab */
tab{ -moz-appearance: none !important; } tab[selected="true"] {
background-color: #aaaaaa !important; /*change this color to #8de0fa if you prefer a sky-blue active tab */
color: #000000 !important; font-weight:bold !important;}

/* Change color of inactive tabs */
tab:not([selected="true"]) {
background-color: #eeeeee !important;
color: #888888 !important; }

/* Change color of inactive tabs when you hover over them */
tab:not([selected="true"]):hover {
background-color: #d6d6d6 !important;
color: #000000 !important; }

---

UPDATE: If you’re very observant, you noticed that the my original code tweak deleted the tiny light border between each tab.

So here’s a new version of my code tweak that adds attractive “shadow” borders between the tabs:

/* Change color of active tab */
tab{ -moz-appearance: none !important; } tab[selected="true"] {
background-color: #aaaaaa !important; /*change this color to #8de0fa if you prefer a sky-blue active tab */
color: #000000 !important; font-weight:bold !important; border-left: 3px solid !important; border-right: 3px solid !important;}

/* Change color of normal tabs */
tab:not([selected="true"]) {
background-color: #eeeeee !important;
color: #888888 !important; border-left: 3px solid !important; border-right: 3px solid !important;}

/* Change color of normal tabs when you hover over them */
tab:not([selected="true"]):hover {
background-color: #d6d6d6 !important;
color: #000000 !important; }

You Might Also Enjoy These Related Posts:
Iceweasel To Firefox, Icedove To Thunderbird
How I Made Firefox Run Incredibly Faster
Firefox 4 RC1
Firefox 4 Released
Good News For Firefox Users
Firefox 3.5 Features
Tab Candy
Even Closer
Stop Using Internet Explorer
A Simple Task Turns Into A Huge Project
I’m Done… For Now
Woohoo!!! Can I Sleep Now?

Permalink:
http://www.computerbob.com/wp/computerbob-tweaks-firefoxiceweasel-3.php

Tags:
Coding, Consumer Info, Debian, Internet, Linux, Personal, Review, Software, Tech Support

This entry was posted on Friday, July 11th, 2008 at 6:28 pm.