User Tools

Site Tools

Action disabled: source

wiki:software:win32:firefox:hidebars

Fixing Firefox Quantum: Auto-hiding toolbars

This article was originally published on December 17, 2017.

Caution!

After Microsoft switched to Chromium as its code base for Edge, I left Firefox in the dust. The organization turned unnecessarily political and ideological, and as various security and privacy concerns were raised, I decided it was no longer worth my time.

To date, Firefox continues to store passwords in an insecure fashion: if someone has access to your logged-in session (like someone using your computer at work or school), they can easily access your passwords.

All Chromium-based browsers, including Edge, make use of the operating system's secure password storage - this is called Credential Manager in Windows and the Keychain in MacOS. Revealing passwords requires the logged-in user's password.

I strongly advise against continuing to use Firefox in any capacity. It isn't secure and will not keep your online account passwords secure.

With Firefox axing native browser plugins, there are a lot of things I can’t do in the browser anymore. Hiding the toolbars is one of those annoying things that the great gods of Firefox’s dev team have deemed an unnecessary and frivolous feature.

Never fear! As luck would have it, a small userChrome.css edit is all you need to give your browser window an auto-hiding navigation and tab bar, complete with time-delay animations so it doesn’t disappear on you when you don’t want it to!

  1. First, open Firefox, and under Customize, make sure “Title Bar” is checked.
  2. Close Firefox.
  3. Navigate to your Firefox profile folder. Details on how to do that for each OS are found here.1)
  4. If you see a folder named chrome, open it. If you don’t, create it.
  5. In that folder, create a file named userChrome.css if one doesn’t exist.
  6. Add the following to this file:
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
#navigator-toolbox {
    position: relative;
    z-index: 1;
    height: 3px;
    margin-bottom: -3px;
    overflow: hidden;
    transition-property: height;
    transition-delay: 1s;
    transition-duration: 2s;
}
#navigator-toolbox:hover {
    height: 62px;
    transition-property: height;
    transition-duration: 0.5s;
 

Save, close the file, and relaunch Firefox. Bam!

I use this with a secondary Firefox profile so that I can use Cricut Design Space as web app, separate from my regular browsing session, so that I can avoid browser crashes and other problems that might interrupt a project midway through.

What it looks like:

This additional CSS was suggested in a comment on the original article for making the window buttons (minimize, maximize, and close) available while still hiding the title bar:

@namespace url(“http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”);
#navigator-toolbox {
    position: relative;
    z-index: 1 !important;
    height: 30px;
    margin-bottom: -3px;
    overflow: hidden;
    transition-property: height;
    transition-delay: 1s;
    transition-duration: 2s;
    transform: translateZ(1px) !important;
}
 
#navigator-toolbox:hover {
    height: 62px;
    transition-property: height;
    transition-duration: 0.5s;
    transition-delay: 0s;
}
 
#titlebar-buttonbox {
    z-index: 10 !important;
    transform: translateZ(100px) !important;
}