Tweaks for Firefox’ interface

Even if it doesn’t excel at innovation and has failed to gain market share lately, Firefox undoubtedly remains the most customizable browser on the market. It doesn’t take much to make it look like the new Internet Explorer, for example – but why would you want to? There is no need for radical changes to make the browser more efficient; here is what I did to make Firefox more to my taste:

Re-arrange the buttons

I’m not very fond of some of the modification to the toolbar that made their way into Firefox 4. I can’t get used to having the ‘Reload’ button on the right side of the address bar, after years of browsing with it on the left. It’s nice that they combined it with the ‘Stop’ button though – that’s something I customized in previous versions. And I can’t understand how the ‘Home’ button is more important and deserves the screen space, but ‘Subscribe to page’ doesn’t – regardless of user studies, RSS should be displayed by default; how will users discover it otherwise?! Fortunately, all these small annoyances can be easily fixed by customizing the layout of buttons on the toolbar, either by dragging them around or by adding additional commands.

Move the tabs to the title bar

Another questionable decision, in my opinion at least, was to keep the empty space above the tabs, a relic of the title bar that doesn’t even display a title under Windows 7. To move the tabs higher in a restored window and take advantage of that extra space, you can install an user style, or, if you don’t want an extra extension only for this tweak, by adding the following lines of code to ‘userChrome.css’:

#main-window[sizemode=normal][tabsontop] #toolbar-menubar[autohide="true"] { margin-top: -18px; -moz-padding-start: 110px !important; } 
#main-window[sizemode=normal] #navigator-toolbox[tabsontop] > #toolbar-menubar[autohide] ~ #TabsToolbar { -moz-padding-start: 110px !important; -moz-padding-end: 110px !important; }

Even with a title bar filled with tabs, there is still plenty of room left for to grabbing and dragging the window: look for the space under the ‘Firefox’ menu or under the ‘Minimize-Restore-Close’ trio.

Control the width of tabs

In previous versions, it was one of my favorite uses for TabMixPlus: set a minimum and maximum width to make room for more tabs. At some point I discovered the browser had it’s own internal settings for this: the keys browser.tabs.tabMinWidth and browser.tabs.tabMaxWidth in about:config. For some reason, Firefox 4 removed the support for them, sparking the usual debates among users. While there is already an extension dedicated to this task, this can be also easily controlled with a couple of CSS commands added in ‘userChrome.css’, like so:

.tabbrowser-tab:not([pinned]) { max-width: 160px !important; }
.tabbrowser-tab:not([pinned]) { min-width: 64px !important; }

A similar code can control the width of the active tab; that can prove useful if you open many and they become too narrow to recognize. The active tab will stay wider than the rest, at the size you specify here. If I recall correctly, something similar was the default behavior of tabs in Safari 4 – with Firefox you can choose to implement it as well.

.tabbrowser-tab[selected]:not([pinned]) { min-width: 192px !important; }

And as a bonus, you can try out Personas – there is even one featuring the new logos of Nightly and Aurora, the new development channels for Firefox! And finally, the result: