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

Question

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

Answer 1

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:

Answer 2

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

Answer 3

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;
}

Answer 4

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.