userstyles.org - Tabs Bar Minimal Size

Keep the Tabs Bar Size to a Readable Minimum Size. The purpose of a browser is to read web content not to lose valuable real estate for content you already know what it says. Along the lines of providing more space see my other styles as well.

To use this style, install Firefox and Stylish. If you already have Stylish, make sure this site is allowed to run JavaScript.

Tabs Bar Minimal Size
12592
9043
browser
Advertisement
Author David McRitchie
License CC-NC-SA
Created Jul 25, 2008
Updated Nov 13, 2011
Installs (this week) 12
Installs (total) 5,594
Show CSS

Notes

The "Tab Counter" extension count can be moved to the tabs bar in Firefox 4.0, and the counter can be styled to provide a larger number with very little padding, so is included with this style. https://addons.mozilla.org/firefox/addon/tab-counter/

The Before picture includes use of the "Tab Counter" extension.

The After Picture shows results after using the following three styles.
Tab Color Underscoring active/read/unread (Fx3.6 ) (24728),
Tabs Bar Minimal Size (9043),
Tabs, Enlarge list-all-tabs button (DM*) (18553)

The tool tips (#content spacer), and the tabs drop down (#content stack[pack=end]) are left intact where one can see the full tab names. If any update after Fx 3.6 destroys tabs drop down to show pictures instead of the titles, you may be forced to use "Tabs Menu" extension (addon/1242).

For more information on "Tabbed Browsing in Firefox" see http://www.mvps.org/dmcritchie/firefox/tabs.htm

I would recommend the following settings in your about:cofing settings which are described in http://kb.mozillazine.org/About:config_entries

user_pref("browser.tabs.closeButtons", 3);
user_pref("browser.tabs.closeWindowWithLastTab", false);
user_pref("browser.tabs.tabClipWidth", 5);
user_pref("browser.tabs.tabMinWidth", 0);
user_pref("browser.tabs.warnOnClose", true);
user_pref("browser.tabs.warnOnOpen", true);

The curved appearance of tabs could be completely removed (flattened), as seen in Tabs: Remove Tab Bar Background.
.tabbrowser-tabs {-moz-appearance: none !important; background-color: transparent !important; background-image: none !important;}

For best viewing of the Before and After pictures install my userstyles.org -downsize screenshots to fit window (12373), so you will be viewing actual sizes if your window is at least 510px wide. The actual images are life-size images grabbed from the screen before 409x32px and after as 410x18px showing a reduction to 56% of the original height, and as you can see more of the wording appears in the same width.

If you do not see the before and after image they can be seen at:
http://userstyles.org/style_screenshots/9043_before.png
http://userstyles.org/style_screenshots/9043_after.png


This is a companion for Tab Color Underscoring active/read/unread (Fx3.6 ) (24728) by David McRitchie, which shows active tab with red underscore, previously viewed with blue underscore, and unread with a green underscore. For earlier versions of Firefox prior to 3.6 use Tab Color Underscoring active/read/unread (9023) instead. Styles I use can be seen at http://kb.mozillazine.org/User:Dmcritchie

Removing the New tab button from tabs bar added by Fx 3.5, suggest you drag New Tab button from customize so you can have it on one of the other toolbars again. (hiding tabs newtab button is now implemented into this style)
/* Hide the tab container's New Tab button */
.tabs-newtab-button { display: none !important; }

/* Remove left and right scroll buttons which appear at 70 tabs, and disappear
again at 68 tabs -- tabs get smaller and will never scroll with this setup */
.scrollbutton-up, .scrollbutton-down {display: none !important;}

---
Remove browser.tabs.tabMinWidth and browser.tabs.tabMaxWidth in favor of CSS https://bugzilla.mozilla.org/show_bug.cgi?id=574654
---

Incompatibilities:
*"Retitler" extension (addons 7863) will not permit decreased tab width until you uncheck "use more flexible tab width" in the add-on's options -> settings (tab). (even setting it's minwidth to 0 would not work)

*Firefox "New Tab" ([+]) button will disappear on tab strip due to suppression of horizontal tab scrolling when the button is not next to list-all-tab, or close-tab, but is placed to the left of the "Tabs Count" extension button.(Q829965) Not a problem for me as I would use Ctrl+Tab or another tool bar instead of losing valuable real estate on the tabs bar.

Alternatives:
This style is mainly about minimizing the tabs bar footprint and to remove scrolling. For those that don't want to minimize and want to retain scrolling but don't like the method of scrolling for a new tab

toolkit.scrollbox.smoothScroll
When more tabs are present on the tab strip than can be displayed at once, the tab strip becomes scrollable to handle the overflow. Switching to another tab that is not currently in view will cause the tab strip to scroll so that the tab is visible. This preference determines whether to scroll the new tab into view smoothly, or to have it snap into view.


Updates: (see code, browser.tabs.tabMinWidth must be set to 0 in about:config)
2008-07-31 @namespace added so works on AMO site (repeat of same change ~ 2008-07-29)
2008-11-10 max-height increased to 17px to work better with style #9023 color underscores
2009-08-06 remove useless tab bar newtab button (FF 3.5)
2009-09-26 remove left and right scroll buttons that appear at 70 tabs, and disappear again at 68 tabs (FF 3.5)
2011-04-14 styling for "Tab Counter" extension
2011-10-27 reduce wasted space right/left of app-tabs icon (production on 2011-11-13)

Feedback

Discussions

No discussions posted in the last year. See older discussions. Ask a new question or add a review for this style.