Updated: February 11, 2019
Here's a curious corner case for you. About a year ago, Firefox Quantum introduced a whole bunch of radical changes in how it works and behaves, the biggest among them the switch to WebExtensions. This move made a lot of friendly, powerful extensions not work anymore, including a range of tab management addons. On the upside, Firefox also brought about the integrated tab pinning feature. It works nicely. But.
Pinned tabs will detach from the tab bar and position themselves to the left, somewhat like a typical desktop quicklaunch icon area. So far so good, but the corner case be here! As it happens, the pinned tabs are relatively narrow, which means quick stab 'n' open action isn't quite possible. You need to be accurate positioning your mouse cursor, and that could slow you down. There does not seem to be a trivial option to change the width of the pinned tabs. Hence this guide.
Make the pinned tabs wider
I had my first encounter with Firefox UI customization a while back when we merrily and thoroughly discussed the Linux Plasma desktop HD scaling. I used several manual overrides to increase the size of the UI, as this wasn't possible using the native solutions in the desktop environment, or rather possible but not pretty. Now we will use a similar approach to make our pinned tabs nicer.
Firefox UI overrides are available through the userChrome.css file in your Firefox profile directory. This file contains CSS declarations that dictate the browser looks, very much like any Web page. You can change fonts, colors, borders, margins, padding, anything. Of course, you do need some understanding of the syntax, and also be aware of the different classes that Firefox uses for its interface. A typical Windows path would be:
C:\Users\(your user name)\AppData\Roaming\Mozilla\Firefox\Profiles\
(profile)\chrome\userChrome.css
And a typical Linux path would be:
~/.mozilla/firefox/(profile)/chrome/userChrome.css
With pinned tabs, this is what we're going to add:
/* Tabs */
.tabbrowser-tab[pinned] {
padding-left: 20px;
padding-right: 20px;
}
The code above will add padding to the left and right of the pinned "icon", making the pinned tabs wider and more accessible - centered AND symmetric - by 20 pixels. You can also just increase the width of the tabs, but then, the icons will be aligned to the left, and you will have a lot of empty space on the right, which looks wrong. It will make your OCD pixies explode. Using the uniform left and right padding makes for a nice, elegant fix.
And in a way, that's it. Bob's your uncle!
Conclusion
And there we are. OCD requirements met and satisfied. Firefox Quantum still retains a fair degree of customization, even though it is less accessible to ordinary users. I hope the functionality remains, because it is one distinctive advantage that Firefox has over other browsers. Quite a bit has been lost with the move to WebExtensions, it would be a shame to see a flexible, modular browser turn into a static, lifeless shell that offers no edge over its competitors.
If you want to use Firefox pinned tabs, you now also have an improved accessibility option. Making the tabs wider turns them more consistent and in line with your tab bar, plus easier to hit with quick mouse actions. Moreover, using the userChrome.css overrides, you can make further improvements to the browser UI layout. Increase vertical spacing or padding, for instance. Anyway, hopefully you will find this little guide useful. See you around.
Cheers.