4

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
1
  • Doesn't solve your problem, but some relevant info: No Dorando keyconfig in FF57 according to author.
    – Daniel
    Nov 16, 2017 at 18:46

4 Answers 4

4
+200

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

1

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

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

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;
}
3
  • Ought this still work in firefox 79? on macOS? Somehow I'm not getting the results 🤷‍♂️
    – user266364
    Jul 3, 2020 at 11:45
  • toolkit.legacyUserProfileCustomizations.stylesheets needs to be set in about:config 🎉
    – user266364
    Jul 3, 2020 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, 2020 at 16:56
0

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.

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.