Use Tab Groups to organize a lot of tabs :- http://mzl.la/MHeSuS

You can also try :- https://addons.mozilla.org/en-US/firefox/collections/mozilla/webdeveloper/

To make the inactive tabs more visible, right-click the desktop, Personalize, click Window Color, and uncheck "Enable transparency".

I do not use the Aero theme, so there's no Transparency to begin with, but thank you for your answer.

I can't figure out the secret behind the pretty tab background images, but as a crude temporary workaround, you can substitute a background color behind the text on the tab.

Unless you are already comfortable using userChrome.css, I suggest using the Stylish extension as it is fast to tweak and experiment using its Preview button. To get that, use:

app button (or Tools menu) > Add-ons > Get Add-ons > search for Stylish

After restarting, if the User Styles section of the Add-ons page is not displayed, click that and then click Write New Rule.

For the body of the rule, paste this:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
/* Put a background color behind the text on non-selected tabs */
.tabmail-tab > .tab-stack > .tab-content:not([selected=true]) > .tab-text {
  background-color: #aaa !important;
  border-radius: 4px !important;
}
/* Cancel the above when the tab is hovered */
.tabmail-tab:hover > .tab-stack > .tab-content:not([selected=true]) > .tab-text {
  background-color: transparent !important;
  border-radius: 0 !important;
}

Then click Preview to confirm that it has the desired effect. To make the color darker, lower the value of background-color in the first rule from #aaa toward #000 (black); to make it lighter, raise the value toward #fff (white). Use Preview to test.

Once it works the way you like (or as close as you can manage), give it a name and click Save.

Hopefully someone will document a better looking solution.

Does it help if you change the preference mail.tabs.drawInTitlebar to false in Config. editor?

@jscher2000 thanks so much! It doesn't look great but it does the trick! I couldn't read anything before, now at least I can read what those tabs are all about. Thanks again!

@sfhowes this only puts the tabs in the black bar under the title bar, but thanks anyways!

@jscher2000 what do you mean with pretty image? The hover effect? Because I just made the text color white to be able to read it, now I only need the hover effect and maybe the close button, but that's the least of my worries. Is there a current documentation for tweaking the interface? All I could find is outdated... And thanks again! You can't imagine how great it is to be able to read the text on tabs :)

The hover effect is drawn with background images instead of just switching the color. I couldn't figure out how to get them to display for non-hovered background tabs.

I have not seen an article on this yet, although I imagine people have been posting some ideas over the past several months. What I did was install the DOM Inspector extension (as well as Stylish) and use its "Inspect a Chrome Window" feature to poke around on the tab bar until I found something that would respond to a custom style rule.

To display a background picture behind the whole tab you can use:

.tabmail-tab > .tab-stack > .tab-content:not([selected=true]) {

 background-image:url("abedSmile.png") ;

}

Now I only need to figure out where to get the background image. I installed DOM Inspector but I can't figure out how to view the style attributes of the tabbar, how did you do it? I just end up inspecting the DOM Inspector itself. Or is there any other way to get to that picture? Also is it even a picture? Or is it created with CSS rules?

In DOM Inspector, use

File menu > Inspect Chrome Document > front-most tab

Then you can use

Edit menu > Select Element by Click

to get into a background tab. The tricky part is to hover the tab, then navigate the DOM Inspector using the keyboard, or possibly trick it to maximized so you can use the mouse to view the CSS details for the hovered state.

These are the ones I think most relevant:

.tabmail-tab:hover > .tab-stack > .tab-background:not([selected=true]),
.tab-background[selected=true] {
 background-repeat: no-repeat,
                    no-repeat,
                    no-repeat;
 background-position: left 0,
                      30px 0,
                      right 0;
 background-size: 30px 100%,
                  calc(100% - 60px) 100%,
                  30px 100%;
}

.tabmail-tab:hover > .tab-stack > .tab-background:not([selected=true]) {
 background-image: url(icons/tabBackgroundStart.png),
                   url(icons/tabBackgroundMiddle.png),
                   url(icons/tabBackgroundEnd.png);
}

The part that's frustrating is, removing :hover doesn't make it appear by default.

I got it! I used:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

.tabmail-tab > .tab-stack > .tab-content:not([selected=true]) > .tab-text {

  color: #fff !important;

}

.tabmail-tab > .tab-stack > .tab-background:not([selected=true]){

background-repeat: no-repeat,
                   no-repeat,
                   no-repeat;
background-position: left 0,
                     30px 0,
                     right 0;
background-size: 30px 100%,
                 calc(100% - 60px) 100%,
                 30px 100%;

background-image: url(tabBackgroundStart.png),

                  url(tabBackgroundMiddle.png),
                  url(tabBackgroundEnd.png) !important; 

}

I got the background images from a Google search, but I'll add them her, too. You have to save them to the chrome folder and use userChrome.css for this to work. Here's a tutorial: http://kb.mozillazine.org/index.php?title=UserChrome.css&printable=yes

Thanks again!

Where did you save the images?

In the chrome folder, I'll edit it into my post so people don't get confused.