How to change style of unloaded tabs?

[mdonatas]

With "Don't load tabs until selected" option I have many tabs open of which usually only few are loaded. I would like to have a visual indication for unloaded tabs.

Is it possible to change the look of unloaded tabs with say userChrome.css?

[LoudNoise]

Moving to Firefox support

[patrickjdempsey]

Not natively. Firefox does not natively include an attribute for tabs for anything related to the status of the tab.

[SoapyHamHocks]

It seems that tabs that are not loaded have an a 'pending' attribute. You can try this:

Code: Select all

.tabbrowser-tab[pending] {
  background-image: -moz-linear-gradient(green,green) !important;
}

Just replace green with some color you like.

[patrickjdempsey]

Hmmm... that must be new... I'll have to test that later, might make a nice addition to the themes.

[patrickjdempsey]

I just checked and that is not the case in Firefox 8. That is either added later or is the result of an extension. Can you confirm in Safe Mode and the current version?

[SoapyHamHocks]

My mistake it seems it only works on Firefox 10+.

[patrickjdempsey]

Something to look forward to next year then!

[patrickjdempsey]

I just found these... looks like it's coming sooner... Firefox 9, so this should work for the OP!

https://developer.mozilla.org/en/XUL/Attribute/unread
https://developer.mozilla.org/en/XUL/Attribute/pending

[mdonatas]

Superb! That worked like a charm! Thank you very much

I ended up using this css, makes pending tabs look similart to what BarTab extension did:

Code: Select all

.tabbrowser-tab[pending] {
  opacity: 0.6 !important;
}

Using Firefox 9 from the Beta channel.

[patrickjdempsey]

Since I've just learned about this I figured I would share what I'm doing in my theme... greyed out text for the pending tabs and italics text for the unread tabs:

Code: Select all

.tabbrowser-tab[unread]:not([selected="true"]) {
  font-style: italic!important; 
}
.tabbrowser-tab[pending]:not([selected="true"]) .tab-text {
  opacity: .75!important;
}

[zelzel]

this looks great. i'd like to use this in all my FF installations.

noob question: is there a way to add these settings through about:config, or is there another simple way to inject this code in so it sticks?
(like a batch file i can run once per installation)

would be fantastic if this was the default - and available under options, too.

thanks!

EDIT:
found this guide for adding a css sheet: is this the best way?
>>>
Bartab was a simple but very useful addon. I'm very grateful for it being there before Firefox implemented it. Thanks.

For those who want Firefox to show unloaded tabs in a similar style as Bartab Lite on Windows:

1) Go to: C:\Users\(your user name)\AppData\Roaming\Mozilla\Firefox\Profiles\(random letters and numbers).default\

2) Create a folder called 'chrome' (without quotes) if you don't see one.

3) Make a css file called 'userChrome' (userChrome.css)

4) Open it up in a text editor of your choice and put in:

.tabbrowser-tab[pending] {
opacity: .5;
}

6) Restart the browser if it isn't closed. Done!
<<<

Since I've just learned about this I figured I would share what I'm doing in my theme... greyed out text for the pending tabs and italics text for the unread tabs:

Code: Select all

.tabbrowser-tab[unread]:not([selected="true"]) {
  font-style: italic!important; 
}
.tabbrowser-tab[pending]:not([selected="true"]) .tab-text {
  opacity: .75!important;
}

[happysurf]

For me the best idea is change the text color for pending tabs.
Somebody can help me with code?
Thanks.

[patrickjdempsey]

color: blue!important;

[happysurf]

color: blue!important;

Thank you very much, for me this is perfect with FxChrome theme:

.tabbrowser-tab[pending] .tab-text {
color: white!important;
}