Tree style tab custom CSS with auto-hide

readme.org

Tree style tab custom CSS with auto-hide

1. Install Tree Style Tabs Firefox extensions.
2. Install userChrome.css (see file content below below)
   • Linux
     • cd to ~/.mozilla/firefox/[your profile id].default/
     • create folder chrome if it doesn’t exist
     • put userChrome.css in it
   • Windows
     • press Win+R
     • insert %APPDATA%\Mozilla\Firefox\Profiles\ and press enter
     • select your profile, most probably it will include release substring
     • create folder chrome if it doesn’t exist
     • put userChrome.css in it
3. Turn on userChrome. about:config => toolkit.legacyUserProfileCustomizations.stylesheets => True.
4. Disable animation. Preferenes ➡ Add-ons ➡ Tree Style Tab ➡ Appearence ➡ Disable animation.

Thank you, unknown reddit user, who wrote this. I’ve updated your css file, but all credit goes to you.

userChrome.css

/* Source: https://gist.github.com/teksisto/d6b4d37219e957d9cdcdb3ec88952c15 */

/*@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

/* Hide main tabs toolbar */
#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar {
  opacity: 0;
  pointer-events: none;
}
#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
  visibility: collapse !important;
}

/* Sidebar min and max width removal */
#sidebar {
  max-width: none !important;
  min-width: 0px !important;
}

/* Hide splitter, when using Tree Style Tab. */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] + #sidebar-splitter {
  display: none !important;
}

/* Hide sidebar header, when using Tree Style Tab. */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
  visibility: collapse;
}

/* Shrink sidebar until hovered, when using Tree Style Tab. */
:root {
  --thin-tab-width: 1px;
  --wide-tab-width: 250px;
}
#sidebar-box:not([sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]) {
  min-width: var(--wide-tab-width) !important;
  max-width: none !important;
}
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] {
  position: relative !important;
  /* transition: all 200ms !important; */
  min-width: var(--thin-tab-width) !important;
  max-width: var(--thin-tab-width) !important;
}

#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover {
    /* transition: all 200ms !important; */
    min-width: var(--wide-tab-width) !important;
    max-width: var(--wide-tab-width) !important;
    margin-right: calc((var(--wide-tab-width) - var(--thin-tab-width)) * -1) !important;
    z-index:1;
}

/* Esconder barra de marcadores, mostrar al pasar puntero, con retraso de medio segundo */
/* Pop-up bookmarks toolbar */
#navigator-toolbox #PersonalToolbar {
  position: absolute; display:block;
  width: 100%;
  /* transition: all 0.1s !important; */
  /* transition-delay:0.5s !important; */
  transform: translateY(-200px);
}

#TabsToolbar, #nav-bar {
  position: relative;
  z-index: 99;
}

#navigator-toolbox #PersonalToolbar {
  position: absolute; display:block;
  width: 100%;
  /* transition: all 0.1s !important; */
  /* transition-delay:0.5s !important; */
  transform: translateY(-200px);
  z-index:1;
}

/* full screen toolbars */
#navigator-toolbox[inFullscreen] toolbar:not([collapsed="true"]) {
  visibility:visible!important;
}

/* Wider Pinned Tabs */
.tabbrowser-tab[pinned] {
  padding-left: 20px;
  padding-right: 20px;
}