Maximize Firefox 3.5's Viewing Area for Your Netbook [NetBooks]

Original post from Lifehacker

Your netbook's screen is tiny and processor less than mighty, so you want to maximize the web page viewing area without any performance-killing Firefox extensions. Here's how to consolidate Firefox 3.5's chrome for your Windows or Linux-based netbook.

Even if you don't have a netbook, these modifications still work if you want to consolidate Firefox 3.5's chrome on your regular PC.

(This whole Firefox consolidation undertaking sound familiar? For longtime readers, it should be. Way before netbooks got hot, we consolidated Firefox 2 back in 2006, and then Firefox 3 with the help of Stylish in 2008. This version addresses a few Firefox 3.5-specific items and clears out the clutter sans add-ons.)

Here's what Firefox 3.5 looks like by default (on my Eee PC running Windows XP). Click to view actual size.

There's quite a bit of whitespace on Firefox's chrome just asking to get utilized more efficiently. You can trim the highlighted areas in the image below from Firefox 3.5's interface:

After a little toolbar rearrangement and interface decluttering, here's what consolidated Firefox 3.5 looks like. You can see that a whole other Lifehacker post fits into the viewport after the consolidation. Click to view actual size.

Here's how to maximize your web page viewing area and declutter Firefox's chrome.

Relocate the navigation toolbar, buttons, and search box to the menu bar. To get this done, right-click on Firefox 3.5's toolbar and choose Customize. From there, drag and drop elements on the lower toolbars to the menu bar, and check off 'Use small icons.' (That will flatten the fat 'keyhole' back button.) Hit play for a 30-second demonstration of the process (featuring old-school Lifehacker design).

Trim unnecessary interface doodads with userChrome.css. Just like you can style web pages with CSS, you can also style Firefox's chrome. In order to modify certain aspects of Firefox's chrome without using an add-on like Stylish, you edit a file called userChrome.css, which is stored in your Firefox profile directory. This file is user-specific and you can easily copy it from one Firefox installation to another. Here's where Windows and Linux netbook users can find userChrome.css.

Windows XP
C:\Documents and Settings\[User Name]\Application Data\Mozilla\Firefox\Profiles\xxxxxxxx.default\chrome\
where xxxxxxxx is a random string of 8 characters.

Linux
~/.mozilla/firefox/xxxxxxxx.default/chrome/

With Firefox closed, open the userChrome.css file and append whatever CSS bits listed in this article you want to apply. If a userChrome.css file doesn't exist, save userChrome-example.css as userChrome.css.

Got your userChrome.css file open and ready for modifications? Let's declutter.

Remove Firefox 3.5's new tab button. Tab bar space is at a premium on your netbook, and you already use the Ctrl+T keyboard shortcut to open a new tab—so you don't need the new (and kind of annoying) Firefox 3.5 new tab button. Add this bit to userChrome.css to kill that button and make room for more open tabs.


/* remove new tab button next to last tab */
.tabs-newtab-button {display: none !important}

Remove the search box's magnifying glass. You can just hit the Enter key to execute a search from Firefox's search box, so the magnifying glass 'go' button is just unnecessary eye candy. With your address bar up on the same level as the menus, you want as much horizontal space for typing search terms and web site addresses, so it makes sense to kill the magnifying glass. Here's the userChrome.css bit that will do just that.


/* remove magnifying glass from search box */
.search-go-button { display: none !important}


Remove and combine disabled buttons. When there's no page to go back to or forward to, nothing loading to stop, or nothing loaded to refresh, all those buttons—back, forward, stop, and reload—just sit there, greyed out, doing nothing but taking up space. You want as much horizontal space as possible, so you can hide disabled (useless) back and forward buttons, and even combine the stop and reload button to make a dual-use single button. Here's the userChrome.css code that will do just that.


/* combine stop and reload buttons */
#stop-button[disabled] { display: none }
#stop-button:not([disabled]) + #reload-button { display: none }

/* don't show back or forward buttons if there's nothing to go back or forward to */
#back-button[disabled='true'] { display: none }
#forward-button[disabled='true'] { display: none }


Optional: Hide bookmarks bar. A lot of my web work depends on easily-accessible bookmarklets, so I did not hide my bookmarks bar, but others who don't feel the same can gain more vertical space by doing just that. From the View menu, Toolbars, uncheck 'Bookmarks Toolbar.'

All the CSS in one shot

To get all these changes in one fell copy-and-paste swoop, grab them from here and drop them into your userChrome.css, and restart Firefox.


/* remove new tab button next to last tab */
.tabs-newtab-button {display: none !important}

/* remove magnifying glass from search box */
.search-go-button { display: none !important}

/* combine stop and reload buttons */
#stop-button[disabled] { display: none }
#stop-button:not([disabled]) + #reload-button { display: none }

/* don't show back or forward buttons if there's nothing to go back or forward to */
#back-button[disabled='true'] { display: none }
#forward-button[disabled='true'] { display: none }