Vim Vixen: auto-hide navigation toolbar

Step-by-Step descriptions of how to do things.

Vim Vixen: auto-hide navigation toolbar

Postby peter_b » Fri Jan 11, 2019 11:59 pm

With Firefox Quantum, the glorious age of Vimperator seems to finally be ending... :cry:
Thanks to Shin'ya Ueoka, there's Vim Vixen, which brings some of the vim(perator) feeling back to the current Firefox.

Since Vim Vixen doesn't hide the navigation toolbar by default, here's a short "HowTo for auto-hiding the navigation toolbar" :D
This is done by using a custom "userChrome.css" to hide/show toolbars.
Tested with Firefox Quantum 64.0 (on Xubuntu 16.04.1).

1) Download custom CSS for hiding the toolbar:

Tim Van den Eynde was so nice to put together collection of CSS files for userChrome mods, called: "UserChrome Tweaks".
One file there (by Alex Vallat?) does exactly what we need!
It's called: toolbars/auto-hide.css

2) Save it as "userChrome.css":
In your firefox profile folder (e.g. ~/.mozilla/firefox/asdfasdf.default/), create the subfolder "chrome".
Then save the "auto-hide.css" there and rename it to "userChrome.css" (Please preserve the uppercase "C").

3) Restart Firefox.
If everything is right, your navigation toolbar should now be hidden when opening firefox:
Navigation toolbar: hidden (default)

It will show up when you hover your mouse over it though 8)
Navigation toolbar: shown (on mouse over)

Have fun!
  • 0

Last edited by peter_b on Sat Jan 12, 2019 12:02 am, edited 1 time in total.
User avatar
Posts: 302
Joined: Tue Nov 12, 2013 2:05 am
Reputation: 3

Backup copy of "auto-hide.css"

Postby peter_b » Sat Jan 12, 2019 12:02 am

Here's the content of the "auto-hide.css" mentioned above (just in case):

Code: Select all
 * Auto-hide the URL-bar and bookmarks bar, show on hover or focus
 * Contributor(s): Alex Vallat

:root[uidensity=compact] #navigator-toolbox {
  --nav-bar-height: 33px;
  --tab-min-height: 29px;

:root:not([uidensity]) #navigator-toolbox {
  --nav-bar-height: 39px;
  --tab-min-height: 33px;

:root[uidensity=touch] #navigator-toolbox {
  --nav-bar-height: 41px;
  --tab-min-height: 41px;

#navigator-toolbox {
  --tabbar-height: calc(var(--tab-min-height) + var(--space-above-tabbar));
  --trigger-area-height: 5px;

:root[chromehidden~="toolbar"] #navigator-toolbox {
  --tabbar-height: 0.1px;

#toolbar-menubar {
  margin-top: 0px !important; /* This is usually 0, but under Win7 can be given an extra 1px when not maximized */

/* Undo add of 4px extra margin on top of the tabs toolbar on Windows 7. */
/* Note: @media -moz-os-version does not work in userChrome.css ( */
:root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar,
:root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar {
  padding-top: var(--space-above-tabbar) !important;

#nav-bar, #PersonalToolbar {
   /* Otherwise spacers will not count as hover-able areas */
    -moz-window-dragging: default;

:root:not([customizing]) #nav-bar
  overflow-y: hidden;
  min-height:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  opacity: 0;

:root:not([customizing]) :hover > #nav-bar,
:root:not([customizing]) #nav-bar:focus-within {
  max-height: var(--nav-bar-height);
  opacity: 1;
  transition: opacity 0.15s ease-in, max-height 0.15s linear;

:root:not([customizing]) #navigator-toolbox {
  max-height: calc(var(--tabbar-height) + var(--trigger-area-height));
  min-height: var(--tabbar-height);
  margin-bottom: calc(-1 * var(--trigger-area-height));

:root:not([customizing]) #navigator-toolbox:hover,
:root:not([customizing]) #navigator-toolbox:focus-within {
  max-height: calc(var(--tabbar-height) + var(--nav-bar-height));
  margin-bottom: calc(0px - var(--nav-bar-height));

/* If the bookmarks bar is turned on, auto-hide that too */
:root:not([customizing]) #PersonalToolbar {
  max-height: 0 !important;
  min-height: 0.1px !important;
  opacity: 0;
  transition: opacity 0.15s ease-in !important;

:root:not([customizing]) :hover > #PersonalToolbar,
:root:not([customizing]) #navigator-toolbox:focus-within #PersonalToolbar {
  max-height: 4em !important;
  opacity: 1;

/* Lightweight Theme Support */
:root:-moz-lwtheme #nav-bar,
:root:-moz-lwtheme #PersonalToolbar {
  background-color: var(--lwt-accent-color) !important;
  background-image: var(--lwt-header-image), var(--lwt-additional-images) !important;
  background-position: var(--lwt-background-alignment) !important;
  background-repeat: var(--lwt-background-tiling) !important;

#main-window[sizemode="normal"]:-moz-lwtheme #nav-bar {
    background-position-y: calc(-2px - var(--tabbar-height)) !important;
#main-window[sizemode="normal"]:-moz-lwtheme #PersonalToolbar {
    background-position-y: calc(-2px - var(--tabbar-height) - var(--nav-bar-height)) !important;

#main-window[sizemode="maximized"]:-moz-lwtheme #nav-bar {
    background-position-y: calc(-8px - var(--tabbar-height)) !important;
#main-window[sizemode="maximized"]:-moz-lwtheme #PersonalToolbar {
    background-position-y: calc(-8px - var(--tabbar-height) - var(--nav-bar-height)) !important;
  • 0

User avatar
Posts: 302
Joined: Tue Nov 12, 2013 2:05 am
Reputation: 3

Return to HowTo's

Who is online

Users browsing this forum: Google [Bot] and 1 guest

Who is online over last 24 hours

Users browsed this forum in the last 24 hours: Google [Bot] and 14 guests

Reputation System ©'