Implementing Auto-Hide for the Firefox Bookmarks Toolbar

Like I [said before][1]… I’m stuck using a laptop with a damn 1366x768 screen. I could give you ten thousand reasons why this shitty resolution needs to die, but regardless, I’m using it right now.

One big annoyance with this little thing is vertical screen real estate. Unity has done a fair bit of work on that front, but for someone who likes keeping the bookmarks toolbar visible, it’s still a bit tight… So I started looking into how to hide the Firefox bookmarks toolbar, tried a few add-ons, and only one actually worked. And even that one had problems: too twitchy, and every time the toolbar popped up the page would reflow. Super annoying, right?

I asked around on G+ and got an answer: manually edit Firefox’s CSS. I found a userChrome.css file meant for Firefox 4; we’re on Firefox 29 now, but I tweaked it a bit and it mostly works.

The file contents:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
#PersonalToolbar {
  visibility: hidden !important;
  opacity: 0;
  -moz-transition-duration: 0s;
  -moz-transition-property: visibility, opacity, margin;
  -moz-transition-delay: 2s}
#nav-bar:hover~#PersonalToolbar,#PersonalToolbar:hover
{
  visibility: visible !important;
  opacity: 1;
  -moz-transition-delay: 0.4s}
#PersonalToolbar {
  position: fixed !important;
  margin-top: 40px !important}

#nav-bar:hover~#PersonalToolbar,#PersonalToolbar:hover
{
  margin-top: 0px !important}
#main-window[stylish-url="about:addons"] #PersonalToolbar {
  margin-top: 25px !important;
  background: transparent !important; border: none !important}
#main-window[stylish-url="about:addons"] #PersonalToolbar {
  display: none !important}
#PersonalToolbar {
  background-color: #e6e7e7 !important;
}

Okay, 1366x768 looks a tiny bit better now. I can keep getting by. [1]: /archives/126/