Reduce Firefox’s Tab and Bookmarks Bar height

Even if you are running a high-res monitor you may encounter situations where websites cannot be displayed in full directly on the screen.

If a page is long you may need to scroll vertically to access all the contents displayed on it. It is possible to make room by eliminating browser UI elements that get in the way.

If you never use the bookmarks toolbar for instance, you may want to remove it from the UI as you get an additional 30 or so pixels to display website contents.

The same is true for the tab bar, but since it is usually needed, all you can do is reduce its height just a little bit to free up some vertical space in Firefox.

You have two options to do so. The first involved installing browser add-ons that perform the necessary steps for you. It is just a matter of installing Thin Tabs or Thin Bookmarks in Firefox to reduce the height of both toolbars in the browser.

Take a look at the following two screenshots to see the difference in height.

Both toolbars work fine for the most part after installation of the extensions in Firefox. I ran into issues with the close button though at the end of the tab bar as it did not work properly anymore.

Instead of using add-ons to modify the height of Firefox's bookmarks bar or tab bar, you can also manipulate a file in Firefox's profile directory directly instead.

The advantage is that you don't need to install add-ons for the operation, the disadvantage that it takes a minute longer to complete.

1. Load about:support in the browser's address bar and hit enter.
2. Locate the show folder button under Application Basics and click on it. This opens the profile folder using the system's default file browser.
3. Open the Chrome folder there. If it does not exist, create a new folder and name it Chrome.
4. Open the file userChrome.css in the Chrome folder. Again, if it does not exist create it.
5. Add the following information to the file:

To change the tab toolbar height:

#TabsToolbar { height: 25px !important; }

To change the bookmarks toolbar height:

PersonalToolbar {height: 25px !important;}

The height parameter defines the new height of either bar. It is set to 25 pixels by default but you can change it to other values that work better for you.

Make sure that the following line of code is displayed at the top of the file once:

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

The full code looks like the following in userChrome.css

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

#TabsToolbar { height: 25px !important; }

#PersonalToolbar {height: 5px !important;}