FIrefox - Vertical tab bar with auto hide

instructions.md

What to expect

Graphical aspect may vary depending on your choices in following the instructions below, but the end result should look something like this:

Enable Firefox features

Go to about:config and set all of the following to true:

    toolkit.legacyUserProfileCustomizations.stylesheets
    layers.acceleration.force-enabled
    gfx.webrender.all
    gfx.webrender.enabled
    layout.css.backdrop-filter.enabled
    svg.context-properties.content.enabled
    
    # LINUX ONLY - WORKAROUND FOR BAR HIDING ON DRAG EVENT
    widget.gtk.ignore-bogus-leave-notify = 1

Write your userChrome.css

1. Find your Firefox profile folder (about:support --> "Profile Directory")
2. Create a folder named chrome inside it.
3. Create a file named userChrome.css inside the chrome folder you just created.
4. Paste in userChrome.css whatever you like from above
5. Restart Firefox for changes to take effect. If nothing changes, try going to about:profiles and click the "Restart Normally" button in the upper right portion of the screen. Thanks @kr1s7ian for pointing this out.

To hide the "classic" horizontal tab toolar entirely

Paste this in your userChrome.css:

#TabsToolbar
{
    visibility: collapse;
}

To decrease the size of the sidebar header

Paste this in your userChrome.css:

/**
 * Decrease size of the sidebar header
 */
#sidebar-header {
  font-size: 1.2em !important;
  padding: 2px 6px 2px 3px !important;
}
#sidebar-header #sidebar-close {
  padding: 3px !important;
}
#sidebar-header #sidebar-close .toolbarbutton-icon {
  width: 14px !important;
  height: 14px !important;
  opacity: 0.6 !important;
}

To remove the sidebar header entirely

Paste this in your userChrome.css:

#sidebar-header {
  display: none;
}

To auto-hide the tab sidebar

Paste this in your userChrome.css:

#sidebar-header {
  /* display: none; */
  visibility: collapse !important;
}

/* Hide splitter */
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] + #sidebar-splitter {
  display: none !important;
}

/* Shrink sidebar until hovered */
:root {
  --thin-tab-width: 32px;
  --wide-tab-width: 300px;
}
#sidebar-box:not([sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]) {
  min-width: var(--wide-tab-width) !important;
  max-width: none !important;
}
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] {
  overflow: hidden !important;
  position: relative !important;
  transition: all 300ms !important;
  /*transition: all 0ms 0s !important;*/
  min-width: var(--thin-tab-width) !important;
  max-width: var(--thin-tab-width) !important;
  z-index: 2;
}
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover,
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar {
  /*transition-delay: 0s !important;*/
  transition: all 300ms !important;
  min-width: var(--wide-tab-width) !important;
  max-width: var(--wide-tab-width) !important;
  z-index: 1;
}
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover {
  margin-right: calc((var(--wide-tab-width) - var(--thin-tab-width)) * -1) !important;
}

To auto-hide the horizontal tab bar when the sidebar is active

Paste this in your userChrome.css:

#main-window #titlebar {
  overflow: hidden;
  transition: height 0.3s 0.3s !important;
}
/* Default state: Set initial height to enable animation */
/* #main-window #titlebar { height: 3em !important; } */
#main-window[uidensity="touch"] #titlebar { height: 3.35em !important; }
#main-window[uidensity="compact"] #titlebar { height: 2.7em !important; }
/* Hidden state: Hide native tabs strip */
#main-window[titlepreface*="XXX"] #titlebar { height: 0 !important; }
/* Hidden state: Fix z-index of active pinned tabs */
#main-window[titlepreface*="XXX"] #tabbrowser-tabs { z-index: 0 !important; }

And then go to Sidebery settings > General > Preface value, enable it and set it to XXX.

Now You also need to remove indent when the bar is collapsed, or you won't be able to see all tabs

Go to SideBery settings --> Styles editor and add:

#root:not(:hover){
  --tabs-indent: 0;
}

EXTRA: Window close button

Credits: AndryGabry on my Patreon and @XargonWan here on github.

If you need the "window close" button, you can add it to your address bar.

1. Comment out this line:

/* Hidden state: Hide native tabs strip */
/*#main-window[titlepreface*="XXX"] #titlebar { height: 0 !important; }*/

2. Add the following:

/*Reference https://www.userchrome.org/*/
/* Hide title bar but keep window controls (minimize, maximize, close) */
/*Hide tabs and other things inside the titlebar, except window buttons*/
#main-window[titlepreface*="XXX"] .tabbrowser-tab{  display: none !important; }
#main-window[titlepreface*="XXX"] .scrollbox-clip{  width: 0 !important; }
#main-window[titlepreface*="XXX"] #alltabs-button{  display: none !important; }
#main-window[titlepreface*="XXX"] .toolbar-items{  display: none !important; }
/*Make sure that the titlebar and navbar are both on the same line*/
#main-window[titlepreface*="XXX"] #navigator-toolbox{  display: flex !important; box-sizing: border-box; justify-content:space-between; flex-direction: row-reverse;   flex-wrap: wrap; }
#main-window[titlepreface*="XXX"] .titlebar-spacer{  display: none !important; }
#main-window[titlepreface*="XXX"] #nav-bar{border-radius: 5px 0 0 0; display: flex; box-sizing: border-box; padding-top: 2px; align-items: center; flex: 1; flex-basis: 50%; width: 100% !important; }
/* on GNOME you can use max-width: 48px below, if you only have the "Close" button on windows (default) */
#main-window[titlepreface*="XXX"] #titlebar{border-radius: 0 5px 0 0; border-left: none !important; margin-top: 1px; flex: 1; flex-basis: 50%; width:10% !important; display: flex; max-width: 100px;   align-items: center;background-color: var(--toolbar-bgcolor) !important; border-left: 1px solid var(--toolbar-color);}
#main-window[titlepreface*="XXX"] #titlebar:-moz-window-inactive{opacity: 1 !important;}
#main-window[titlepreface*="XXX"] #TabsToolbar > *:not(.titlebar-buttonbox-container) {display: none !important;}
#PersonalToolbar {width: 100% !important; }
#tab-notification-deck {width: 100% !important;   flex-basis: 100%; width: 100% !important;}

A note worth to add for Flatpak Firefox, to check where your profile folder is you need to:

• browse about:config
• check the profile where you will find "impossible to delete this profile as it's in use" (or such)
• there you will see something like /home/user/.var/app/org.mozilla.firefox/.mozilla/firefox/abc12345.default

@Puncia

Has anyone been able to make the hover/auto-hide part working in FF 133.0b3 on Windows? It's been broken for a couple of days now. The solutions above don't seem to work.

By tampering here and there I managed to find out that the line which breaks everything is the following one:

margin-right: calc((var(--wide-tab-width) - var(--thin-tab-width)) * -1) !important;

By commenting it out I have my hover working again. Unfortunately it doesn't work like before, so when the sidebar expands it does so "on the same level" as the underlying page, thus forcing the page to resize.

If someone finds out how to solve this properly, please tell us.

BTW, in order to get the tab bar to disappear and then reappear based on the activation of sidebery, I also added this line:

#main-window[titlepreface*="XXX"] #TabsToolbar { visibility: collapse; }

Another thing, the code that should move the three buttons from the tab bar to the address bar is a little off. It puts the buttons too centered, and that forces all the other buttons to disappear.

@LeonardoBeleffi thanks, I managed to restore the old behavior with your help.

1. Move the line you commented inside the other block, like this:

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover,
  #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar {
    /*transition-delay: 0s !important;*/
    transition: all 300ms !important;
    min-width: var(--wide-tab-width) !important;
    max-width: var(--wide-tab-width) !important;
    z-index: 9998;
    margin-right: calc((var(--wide-tab-width) - var(--thin-tab-width)) * -1) !important;    
  }

2. Increase both z-index like shown above

Here is my updated userChrome.css code, working as of version 133.0b7 (64-bit):

#TabsToolbar
{
    visibility: collapse;
}

#sidebar-header {
    display: none;
  }

  #sidebar-header {
    /* display: none; */
    visibility: collapse !important;
  }
  
  /* Hide splitter */
  #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] + #sidebar-splitter {
    display: none !important;
  }
  
  /* Shrink sidebar until hovered */
  :root {
    --thin-tab-width: 30px;
    --wide-tab-width: 300px;
  }
  #sidebar-box:not([sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]) {
    min-width: var(--wide-tab-width) !important;
    max-width: none !important;
  }
  #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] {
    overflow: hidden !important;
    position: relative !important;
    transition: all 300ms !important;
    /*transition: all 0ms 0s !important;*/
    min-width: var(--thin-tab-width) !important;
    max-width: var(--thin-tab-width) !important;
    z-index: 9999;
  }
  #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover,
  #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar {
    /*transition-delay: 0s !important;*/
    transition: all 300ms !important;
    min-width: var(--wide-tab-width) !important;
    max-width: var(--wide-tab-width) !important;
    z-index: 9998;
    margin-right: calc((var(--wide-tab-width) - var(--thin-tab-width)) * -1) !important;    
  }
  /* #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover {
    margin-right: calc((var(--wide-tab-width) - var(--thin-tab-width)) * -1) !important;
  } */

  #main-window #titlebar {
    overflow: hidden;
    transition: height 0.3s 0.3s !important;
  }
  /* Default state: Set initial height to enable animation */
  /* #main-window #titlebar { height: 3em !important; } */
  #main-window[uidensity="touch"] #titlebar { height: 3.35em !important; }
  #main-window[uidensity="compact"] #titlebar { height: 2.7em !important; }
  /* Hidden state: Hide native tabs strip */
  #main-window[titlepreface*="XXX"] #titlebar { height: 0 !important; }
  /* Hidden state: Fix z-index of active pinned tabs */
  #main-window[titlepreface*="XXX"] #tabbrowser-tabs { z-index: 0 !important; }

note that I don't necessarily know why or how that worked, so any improvement to future proof it is appreciated

@Puncia I tried with your configuration but I still don't understand how everyone manages to have the working configuration with the following lines:

#TabsToolbar
{
    visibility: collapse;
}

If I put those lines in my configuration file I get the TabsToolbar to never appear, not even when I "ctrl + e".

In order to make that functionality work for me I have to delete thoose four line and add the following line at the end:

#main-window[titlepreface*="XXX"] #TabsToolbar { visibility: collapse; }

If somebody is able to explain me the reason, that would be really appreciated.
Thanks.

Hello, it is not working on Windows 11. Is there any fix?