Auto Hide bookmark toolbar in Firefox v75

As of Firefox 69, the browser will no longer load userChrome.css by default. The toolkit.legacyUserProfileCustomizations.stylesheets preference needs to be manually set to true to restore this ability.

Until Firefox v72, the old trick was still functioning. With the help from Reddit and Github, here below are the steps to accomplish the same in Firefox v75 (most likely works for v72-74 as well):

  • Go to about:support within Firefox
  • Under Profile Directory, click on Open Directory
  • Create a folder called “chrome” without quotes
  • Enter chrome, right click and create a new text file. Name it “userChrome.css” without quotes
  • Copy and paste the CSS code below into userChrome.css
  • Restart Firefox (make sure “show bookmark toolbar” is checked already)

#PersonalToolbar{
--uc-bm-height: 20px; /* Might need to adjust if the toolbar has other buttons */
--uc-bm-padding: 2px; /* Vertical padding to be applied to bookmarks */
}

:root[uidensity="compact"] #PersonalToolbar{ --uc-bm-padding: 1px }
:root[uidensity="touch"] #PersonalToolbar{ --uc-bm-padding: 6px }

#PersonalToolbar:not([customizing]){
margin-bottom: calc(2px - var(--uc-bm-height) - 2 * var(--uc-bm-padding));
transform: rotateX(90deg);
transform-origin: top;
transition: transform 135ms linear 600ms !important;
z-index: 1;
}

#PlacesToolbarItems > .bookmark-item{ padding-block: var(--uc-bm-padding) !important; }

/* SELECT BOOKMARKS TOOLBAR BEHAVIOR */
/* Comment out or delete either one of these to disable that behavior */


/* Show when urlbar is focused */
#nav-bar:focus-within + #PersonalToolbar{
transition-delay: 100ms !important;
transform: rotateX(0);
}


/* Show when cursor is over the toolbar area */
#navigator-toolbox:hover > #PersonalToolbar{
transition-delay: 100ms !important;
transform: rotateX(0);
}

#PersonalToolbar:not([customizing]){margin-bottom: calc(-1px - var(--uc-bm-height) - 2 * var(--uc-bm-padding));}

Credit: https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/autohide_bookmarks_toolbar.css

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s