Highlight unloaded Tabs in Firefox

Martin Brinkmann
Jun 10, 2012

If you are currently working with Firefox 12 or later and making use of the browser's session restore feature, you may have noticed that only the active tab gets loaded during the start of the application. The remaining tabs do not get loaded until they are activated to improve the start up time of Firefox this way. It is a pretty useful feature, especially for Firefox users who work with dozens, or maybe even more than one hundred, tabs in the browser all the time.

One of the things that is missing is a visual distinction between tabs that have been loaded already and tabs that have not been.This can be useful to either avoid clicking on unloaded tabs, or find out which tabs have not been loaded yet to have them loaded by the browser. Unfortunately though, the Firefox feature makes no distinction between loaded and unloaded tabs.

firefox highlight unloaded tabs

You can however modify Firefox in a way that highlights unloaded tabs in the browser to have that visual distinction.

Highlighting unloaded tabs

You need to add custom CSS to the browser. This may sound difficulty at first, but is not really a issue. Let me show you how this is done.

The first thing that you need to do is open your Firefox profile folder. The easiest way to do that is to click on Firefox > Help > Troubleshooting Information (or by entering about:support in the address bar), and there on the Show Folder button in the profile folder line. This should open the profile in the default file viewer of the system.

Look for a chrome folder in that directory, if you can't find it, create it. Now open the folder and look for the file userChrome.css. If it is not there, create it and make sure its only extension is .css and not .css.txt. Open the file in a text editor and add the following lines of code to it:

.tabbrowser-tab[pending] {
opacity: .4;

Restart the Firefox web browser afterwards. You should now see that the opacity of unloaded tabs is different from the opacity of loaded tabs, so that it is easy to distinguish between the two types of tabs.

You can easily change the opacity value if you want to improve the readability of the unloaded tabs in the browser. Just select a higher value, .7 for instance instead in this case.


Tutorials & Tips

Previous Post: «
Next Post: «


  1. Seamus Dubh said on July 24, 2012 at 3:24 am

    That’s all fine and dandy, but what if you have enough memory and want page to load “Automatically” in the background, not when I shift focus to it.
    That’s the primary reason I open thing in new background tabs, so they can load while I do something else. So I don’t have to wait for it to load every time i switch tabs.

  2. Pix said on June 11, 2012 at 1:00 pm

    Simpler : you can create a style with Stylish.
    No need to touch to “system files” from Firefox and can be easily tested, deactivated, etc.

  3. B. Moore said on June 11, 2012 at 8:25 am

    I think my extension BarTab 3 is getting in the way of that code.

    even adding !important didn’t make any changes.

    now i did add border: solid 1px #ffffff !important;
    that did have an effect but it wasn’t what you would expect which leads me to think BarTab is causing the problem or it is another extension.

  4. Sandeep said on June 11, 2012 at 4:23 am

    I can’t say I noticed. I have my non-selected tabs set to show up in red italics under TMP. :)

  5. BMRMonkey said on June 11, 2012 at 12:28 am

    beautiful it works exactly like you say it would thanks its very useful and it is better to install another extension for something so easy, very much recommended

  6. David said on June 10, 2012 at 3:12 pm

    Oddly, this does not work for Palemoon (Firefox-based). Oh well…

Leave a Reply

Check the box to consent to your data being stored in line with the guidelines set out in our privacy policy

We love comments and welcome thoughtful and civilized discussion. Rudeness and personal attacks will not be tolerated. Please stay on-topic.
Please note that your comment may not appear immediately after you post it.