I would like to save those extra few pixels, since I'm often on the go on a laptop and overall customize FF.
Is there a way to shave off those extra pixels here? (Picture for reference)
I was just looking for the same thing! What about this ghack. Tested on Firefox 38.0.5, Yosemite 10.10.3.
UPDATE
Installing thintabs made the trick for me. But, according to the article, you can also do it manually:
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.
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;}