F11/Fullscreen is sometimes impractical*. I just want to toggle the toolbars.
In older Firefox versions this was possible with the addon "Dorando keyconfig":

1. specify a script:

var s = document.getElementById('status-bar');
s.hidden = !s.hidden;
var b = document.getElementById('PersonalToolbar');
b.collapsed = !b.collapsed;
var nb = document.getElementById('nav-bar');
nb.collapsed =!nb.collapsed
var tb = document.getElementById('TabsToolbar');
tb.collapsed =!tb.collapsed

2. map it to a keyboard shortcut via the Dorando addon-interface

This addon is not availabe anymore in Firefox 57 and above.

Question: (How) can I toggle every toolbar via the Webextension or an addon in Firefox version >= 57? (preferebly with a hotkey)

notes: I found the addon https://addons.mozilla.org/en-US/firefox/addon/custom-style-script/ where you can implement custom JavaScript and CSS code, but I don't know (did not find out: https://developer.mozilla.org/en-US/Add-ons/WebExtensions) how to address the toolbars.

*imagine you want to watch a tutorial in seperate window, but with the maximum video size. Or read an article with the max screenrealestate in a splitted i3 container on linux...

update 02.2019 after waiting a long time and searching, ClairelyClairs answer seams to be the only viable method. but it has it's downsides. So here are some tips to it:

  • create a new firefox profile where the userChrome.css is placed in the profiles "chrome" dir.
  • start your normal firefox-profile and then additionally start this second profile, e.g. firefox -p notoolbars for the purpose of watching webinars or such.
  • another tip: beside userChrome.css use userContent.css to disable banners and things (see mozillaZine article and this
  • Doesn't solve your problem, but some relevant info: No Dorando keyconfig in FF57 according to author. – Daniel Nov 16 '17 at 18:46

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

| improve this answer | |

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;
| improve this answer | |
  • Ought this still work in firefox 79? on macOS? Somehow I'm not getting the results 🤷‍♂️ – Dima Tisnek Jul 3 at 11:45
  • toolkit.legacyUserProfileCustomizations.stylesheets needs to be set in about:config 🎉 – Dima Tisnek Jul 3 at 12:14
  • 1
    Yep you still need to follow the official guide on changing userChrome.css, it changes from time to time. – Jotaf Jul 9 at 16:56

As all the answers here depend on the Firefox .css files, it should be noted that starting in Firefox 69, both userChrome.css and userContent.css are disabled by default "to improve performance".

To re-enable them do the following:

  • Enter about:config in the Firefox address bar
  • If asked, click "Show all"
  • Enter in the search bar: toolkit.legacyUserProfileCustomizations.stylesheets
  • Toggle the preference. True means Firefox supports the CSS files, False that it ignores them.

Note that there are more answers to this same problem in the post
Firefox hide everything except content area of the browser.

| improve this answer | |

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

| improve this answer | |
  • thats a nice and easy idea, but this just disables the toolbar or alternatively the menubar - not all toolbars (navigation, tab, bookmark) – eli Feb 5 '19 at 19:16
  • Ah, the Question is about toggling them all, not just one. Apologies. I'll remove this answer shortly. – daveloyall Feb 5 '19 at 19:59
  • no need to remove :) – eli Feb 5 '19 at 20:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.