Firefox Quantum (>=57) How to toggle all toolbars? (with a keyboard shortcut, like F11 but in a window, not fullscreen)

This doesn't give you a keyboard shortcut, but you can use the :hover pseudoclass to allow auto-showing the nav box (the toolbars at the top of the browser window) when you hover at the top of the window.

Put this in your userChrome.css:

@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;
    transition-delay: 0s;
}

You will also want to tick the "show title bar" box under Customize.

Result: enter image description here


Try this key sequence: Alt-v, t, b


Building on ClairelyClaire.msft's answer (which is great!), here are a few improvements (add to your userChrome.css):

  • Keep toolbars visible when they have focus (so they don't disappear while you're typing a URL).
  • Hide toolbars completely but keep receiving mouse events, so that the browser's title bar is no longer needed (no need to enable "show title bar" in Customize).
  • No need to specify the toolbars' height manually in the code (which is also more robust in case it changes).
#navigator-toolbox {
    position: relative;
    z-index: 1;
    max-height: 7px;
    margin-top: 0px;
    opacity: 0;
    overflow: hidden;
    transition: max-height 2s ease 1s, opacity 3s step-end;
}

#navigator-toolbox:hover,#navigator-toolbox:focus-within {
    max-height: 100px;  /* must be somewhat larger than actual bar height */
    opacity: 1;
    overflow: inherit;
    transition: max-height 0.3s ease 0s, opacity 0s step-end;
}