Firefox Quantum – How to Toggle All Toolbars with Keyboard Shortcut

browser-addonsfirefoxfirefox-57firefox-extensionskeyboard shortcuts

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

Best Answer

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

Related Question