userstyles.org - Tab Progress Bar - Thin & Smooth line at the top

[Edit] [Delete]

Note: I don't know if the "Tab Progress Bar" works in Firefox 4. Anyway, I'm not using it any more. This style is no longer maintained, but will be available for a while anyway, since it's still quite popular.

DESCRIPTION:
This style styles the Tab progress bar from ”Tab Progress Bar” and ”Tabberwocky” extensions.

Features:
+ Makes it thin
+ Places it on the tab's top border
+ Ability to change its colour
+ Applies shadow
+ Expands it to the start of and the end of the tab
+ Removes the background (or lets you choose one)
+ Ability to remove the progress line on selected tab
+ Supports the four options of browser.tabs.closeButtons automatically (See RECOMMENDATIONS)
+ Compatible with protected tabs (tested with ”Tabberwocky, ”Tab Utilities” and ”Tabloc” extensions)
+ Easy to optimize it to work with other themes, userstyles, extensions etc. (See COMPATIBILITY and EDITING)

(Assuming Firefox Chrome Opera Internet Explorer Other )

EDITING:
Change the colours to your favourites!

Tips for editing the ”CUSTOM CODE” part:
(Read the comments in the code for why you might need to do this.)

1. Before using the ”CUSTOM CODE” part, you must delete the whole ”PREDEFINED CODE” part!

2. Then you must uncomment the whole "CUSTOM CODE" part. It’s commented using /*? and ?*/ so you can use a text editor’s replace function to easily and quickly uncomment it.

3. Go to ”MAIN” > “^(*_*)^” (The code block that is marked with that figure). Look at ”visibility: hidden !important;”. Change ”hidden” to “visible. Now the progress line will be visible all the time, and easy to spot as it's red on, probably, a grey background. When you’re finished testing/editing you can reset this.

4. Then start creating every tab state that you need and exists in the “CUSTOM CODE” part, and look if the progress line is correct or not. If not: Edit the corresponding code.
Explanations of the states:
“Selected tab” = The active (current) tab, when you have 2 or more tabs open.
“Only one tab” = When you only have 1 tab open.
“Background tab” = A not selected and not “only one” tab.
“Not hover” = When your mouse pointer does NOT touch the tab.
“Hover” = When your mouse pointer DOES touch the tab.
“Protected tab” = A tab that has a “protect” feature enabled (tested with ”Tabberwocky, ”Tab Utilities” and ”Tabloc” extensions).

More explanation of the WIDTH:
”margin-left:” affects the left side and ”margin-right” affects the right side. Greater values make the progress line shorter and lesser values make it longer.
”Should I use 'Width 1' or 'Width 2'?” Well, it depends on your browser.tabs.closeButtons value (see RECOMMENDATIONS):
0 - ”Width 1” and disable ”Width 2” or vice versa - it doesn't matter.
1 - ”Width 1” AND ”Width 2”. (*)
2 - ”Width 1”.
3 - ”Width 1”.
(*) ”Width 1” is used when the tab width is equal to or greater than the value of browser.tabs.tabClipWidth. ”Width 2” is used when the tab width lesser than the value of browser.tabs.tabClipWidth (i.e. ”when they get narrow”). See RECOMMENDATIONS.

RECOMMENDATIONS:
Recommend about:config (see http://kb.mozillazine.org/About:config) preferences:

browser.tabs.closeButtons
http://kb.mozillazine.org/Browser.tabs.closeButtons

browser.tabs.tabClipWidth
http://kb.mozillazine.org/Browser.tabs.tabClipWidth

browser.tabs.closeWindowWithLastTab

Extensions like ”Tabberwocky, ”Tab Utilities” and ”Configuration Mania” can do this for you.

COMPATIBILITY:
+ Only tested on Firefox 3.6, Default theme!
+ Mainly developed in:
Windows 7, Windows Aero theme
+ Also tested on:
Windows Vista, Windows Aero OS Theme
Windows XP, Windows Classic OS Theme
Windows XP, Windows XP (blue) OS Theme
+ I DON'T think it's compatible with Firefox versions prior to 3.6.

***** TAKE A LOOK IN THE STYLE FOR ALL COMMENTS TO SOLVE PROBLEMS! *****

CHANGELOG:
*** Aug 05 2010 - v.1.1 ***
+ Fixed a problem where the tab label “jumped”
+ “AUTOMATIC CODE” > “SELECTED TAB ONLY” > “Make sure the closebuttons are correctly displayed” is now coded correctly
+ Fixed a problem where closebuttons appeared on faviconized/pinned tabs (tested with “Tab Utilities” extension only)
+ Fixed a lot of faulty comments/labels
+ Updated comments significantly
+ Made it easier to uncomment the whole “CUSTOM CODE” part. This can now be done in seconds!
+ Added the “Remove the progress line on selected tab” feature

*** May 13 2010 - v.1.0.1 ***
+ Fixed the buggy selector for ”Only one tab” (changed [first-tab=”true”][last-tab=”true”] to :first-child:last-child)
+ Updated descriptions

*** Apr 05 2010 - v.1.0 ***
+ Now supports the four options of browser.tabs.closeButtons automatically
+ The problem with ”too long progress line when the tabs get narrow” fixed
+ Only one tab: Let's you decide whether the closebutton should be displayed or not
+ Added support for protected tabs (tested with ”Tabberwocky, ”Tab Utilities” and ”Tabloc” extensions)
+ Now it's easier to enable/disable code depending on OS/OS theme
+ Code cleanup

*** Jan 05 2010 - v.0.9 ***
+ Initial release

Show code

Tweet