Tree Style Tab: Sliding sidebar / pinned + active tabs

Firefox Pretty Tree Style Tab.md

Firefox pretty sliding sidebar / pinned / active tab theme for Tree Style Tab

Features

• Auto-sliding draw for TST
• Leaves 'pinned' and 'active' tabs visible in standard browser chrome
• Leaves 'last-active' tabs visible for 3 minutes after becoming inactive
• Where an active tab is pinned, leaves 'last-active' tab (x1) visible for 1hr

Instructions

1. Choose: (Hamburger menu) -> 'Customize' - Switch 'Title bar': off - also 'Drag space': off
2. Browse to URL "about:config" - set toolkit.legacyUserProfileCustomizations.stylesheets: true
3. Browse to URL "about:profiles" - Select 'Profile in use' -> 'Root Directory' -> 'Show in Finder' (Mac) - Save userChrome.css under ${Root Directory}/chrome/ (you may need to create this directory) - restart the browser
4. Install Tree Style Tab
5. Browse to URL: "about:addons" - Select 'Tree Style Tab' -> 'Preferences' tab -> 'Extra style rules for sidebar contents' - paste in the content from tree-style-tabs-theme.css

tree-style-tabs-theme.css

:root {
  /* This value should be updated here and in the userChrome.css */
  --tst-sidepanel-hide-delay: 1s;
}

/* Hide border on tab bar, force its state to 'scroll', adjust margin-left for width of scrollbar. */
#tabbar {
  border: 0;
  scrollbar-width: none;
  overflow: scroll !important;
  margin-top:  0 !important;
}

/* resolve extra space for scrollbar (scrollbar is hidden by this script) */
.on-scrollbar-area #tabbar {
  --shift-tabs-for-scrollbar-distance: 0px;
}

/* Include 'reveal' animation ... stagers by level */
#tabbar .tab {
  transition: 0.1s margin-top, 0.2s 0.1s visibility;
}
#tabbar tab-item-substance {
  transition: 0.2s 0.1s margin-left;
}


/* delay transitions on open */
#tabbar:not(:hover) tab-item-substance {
  transition-delay: var(--tst-sidepanel-hide-delay);
  margin-left: 0;
}

/* animate twisty reveal */
#tabbar .tab .twisty {
  transition: 0.2s margin;
}

/* general tabs */
.tab {
  background-color: transparent;
}
.tab,
.tab.pinned {
  height: 2.8em;
}

/* Push tab labels slightly to the right so they're completely hidden in collapsed state, but still look fine while expanded. */
.tab .label {
  margin-left: 1em;
}

/* fix closebox */
.tab .closebox {
  margin-left:  0;
}

.tab .counter {
  margin-left:  auto;
  display: inline-block !important;
}

/* Hide .twisty and adjust margins so favicons have 7px on left. */
#tabbar:not(:hover) .tab .twisty {
  visibility: hidden;
  margin-left: -12px;
  transition-delay: var(--tst-sidepanel-hide-delay);
}


/* hide closebox unless needed */
.tab:not(:hover) .closebox {
  visibility: hidden;
}

/* Hide sound playing/muted button. */
.sound-button {
  margin-left: 0;
  display: inline-block;
  visibility: collapse;
}

.tab.audible .sound-button {
  visibility: visible;
  margin-left: 0.25em;
}

.tab:not([data-child-ids]) .counter {
  /* visibility: hidden; */
}

tab-item:not(.subtree-collapsed) .counter {
  visibility: hidden;
} 

/* Hide 'new tab' button. */
.newtab-button {
  display: none;
}

/* active tab */
.tab.active {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

tab-item.active .highlighter::before {
  background-color: #fffd !important;
}

.tab:hover,
.tab.active:hover {
  background-color: inherit;
}
.tab.active .label {
  font-weight: bold;
  color: #f4f4f4 !important;
}
.tab .label,
.tab.active .label {
  border-bottom:  1px solid transparent;
}
.tab:hover .label,
.tab.active:hover .label {
  border-bottom:  1px dotted;
  min-width:  0 !important;
  flex-shrink:  1 !important;
  flex-grow:  unset !important;
}

/* pending / unloaded tabs */
.tab.discarded {
  background-color: #1d1d1d;
}
.tab.discarded .label {
  color: #efefefCC !important;
}
.tab.discarded:hover .label {
  color: #efefef !important;
}

/* Adjust style for tab that has sound playing. */
.tab.sound-playing .favicon::after,
.tab.muted .favicon::after {
  content: '🔊';
  z-index: var(--favicon-base-z-index);
  position: absolute;
  font-size: 0.5em;
  bottom: -0.35em;
  right: -0.7em;
}

/* Adjust style for tab that is muted. */
.tab.muted .favicon::after {
  content: '🔇';
}

/* Pinned tabs: */
/* Hide all non-active pinned tabs (these are included in top-bar instead) */
.tab.pinned {
  position: relative;
  max-width: none;
  width: auto;
  top: 0 !important;
  left: 0 !important;
}
.tab.pinned:not(.active) {
  display: none;
}
.tab.pinned .label,
.tab.pinned .label-content {
  opacity: 1;
  position: unset;
  padding-bottom: 0;
}
.tab.pinned .sound-button {
  position: relative;
  transform: none;
}
.tab.pinned .twisty {
  display: block;
  min-width: none;
  width: auto;
}

userChrome.css

/* 
Firefox `userChrome.css` for Tree Style Tab
  
  * Auto-sliding draw for TST
  * Leaves 'pinned' and 'active' tabs visible in standard browser chrome
  * Leaves 'last-active' tabs visible for 3 minutes after becoming inactive
  * Where an active tab is pinned, leaves 'last-active' tab (x1) visible for 1hr

  Instructions:
    1. Choose: (Hamburger menu) -> 'Customize'
      - Switch 'Title bar': off
      - also 'Drag space': off
    2. Browse to URL "about:config"
      - set `toolkit.legacyUserProfileCustomizations.stylesheets`: true
    3. Browse to URL "about:profiles"
      - Select 'Profile in use' -> 'Root Directory' -> 'Show in Finder' (Mac)
      - Save this file under `chrome/userChrome.css`
      - restart the browser
    4. Install Tree Style Tab
    5. Browse to URL: "about:addons"
      - Select 'Tree Style Tab' -> 'Preferences' tab -> 'Extra style rules for sidebar contents'
      - paste in content from `tree-style-tabs-theme.css`

  Debugging: https://superuser.com/q/1608096
  See step 2. above to update `{profile root dir}/chrome/userChrome.css`
 */

:root {
  --thin-tab-width: 30px;
  --wide-tab-width: 300px;
  --inactive-tab-hide-delay: 180s;
  /* This value should be updated here and in the tree-style-tabs-theme.css */
  --tst-sidepanel-hide-delay: 1s;
}

/* where active tab is pinned, delays hiding of 'last-active' inactive tab for 1hr */
.tabbrowser-tab[pinned][selected] ~ .tabbrowser-tab[fadein]:not([pinned]) {
  transition-duration: 0s !important;
  transition-property: width, visibility, min-width, -moz-box-flex !important;
  transition-delay: 3600s !important; /* = 1hr, adjust seconds to increase / decrease visibility */
}

/* hides all non-active tabs */
.tabbrowser-tab[fadein]:not([pinned]):not([selected]):not([customizing]):not([tabdrop-samewindow][style*="translate"]) {
  visibility: hidden;
  overflow: hidden;
  min-width: 0 !important;
  -moz-box-flex: 0 !important;
  flex-grow: unset !important; /* required since v113 */
  padding: 0 !important;
}

/* waits 60 seconds before hiding inactive tabs */
.tabbrowser-tab[fadein]:not([pinned]):not([customizing]):not([tabdrop-samewindow][style*="translate"]) {
  min-width: 0 !important;
  transition-property: min-width, max-width, width, visibility !important;
  transition-duration: 0.4s !important; /* slide shut */
  transition-delay: var(--inactive-tab-hide-delay) !important; /* wait X seconds before hiding inactive tabs | 0 = immediate */
}

/* shows active tabs immediately */
.tabbrowser-tab[fadein][selected]:not([pinned]):not([customizing]):not([tabdrop-samewindow][style*="translate"]) {
  min-width: var(--tab-min-width) !important;
  width: var(--tab-min-width) !important;
  transition-duration: 0s !important; /* = immediate */
  transition-delay: 0s !important; /* = immediate */
}
/* Sidebar sliding auto-reveal */

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

/* Hide splitter */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] + #sidebar-splitter {
  display: none !important;
}
/* Hide sidebar header */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
  visibility: collapse;
}

/* Shrink sidebar until hovered */
#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"] {
  overflow: hidden !important;
  position: relative !important;
  transition: all 0.2s var(--tst-sidepanel-hide-delay) !important;
  min-width: var(--thin-tab-width) !important;
  max-width: var(--thin-tab-width) !important;
  z-index: 3;
}
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover,
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar {
  transition-delay: 0s !important;
  min-width: var(--wide-tab-width) !important;
  max-width: var(--wide-tab-width) !important;
  z-index: 3;
}
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover {
  margin-right: calc((var(--wide-tab-width) - var(--thin-tab-width)) * -1) !important;
}

Thanks @PalanixYT hadn't noticed this! Will drop in a fix as soon as I get a chance

I have found that by enabling the option "Shift tabs only when the mouse cursor is near the scrollbar" (in the Appearance section) then the issue goes away.

Also, for anyone on Linux:
If you can't drag the tabs you have to set widget.gtk.ignore-bogus-leave-notify to 1 until the bug is fixed.

I generally really like this chrome.css and theme.css.

How do you stop it from partially hidng tabs at the top? I feel like with how aggressive the userchrome.css is with hiding unused tabs there is little need to try and minimize the tab size.

Firefox 133 update has changed the behavior of the auto-hiding sidebar not expanding on hover. Here is my fix. https://gist.github.com/vdeemann/04aa01cf1f2e619927a06a4bec055314
I have updated my userChrome.css and treestyletab.css to show visible pinned tabs within the sidebar, to hide the nav and toolbars, and instead use common shortcuts like Command + L and Command + J. I've only tested this on Big Sur.

The issue was patched a month ago by changing:
z-index: 2 into z-index: 3 in userChrome.css

Currently works for me no issues or other changes required.

I generally really like this chrome.css and theme.css.

How do you stop it from partially hiding tabs at the top? I feel like with how aggressive the userchrome.css is with hiding unused tabs there is little need to try and minimize the tab size.

I'm also very interested in that. I dislike that when I only have 2 or 3 tabs in the tab bar that I can only read the title of one, even though there would be more than enough space to make the other tabs wider allowing to read more of their title.

My workaround for now is to entirely remove the tab-autohide and tab-width features, only leaving the sidebar-autohide feature:

userChrome.css

:root {
  --thin-tab-width: 30px;
  --wide-tab-width: 300px;
  --tst-sidepanel-hide-delay: 0.01s;
}

/* Sidebar sliding auto-reveal */

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

/* Hide splitter */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] + #sidebar-splitter {
  display: none !important;
}
/* Hide sidebar header */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
  visibility: collapse;
}

/* Shrink sidebar until hovered */
#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"] {
  overflow: hidden !important;
  position: relative !important;
  transition: all 0.2s var(--tst-sidepanel-hide-delay) !important;
  min-width: var(--thin-tab-width) !important;
  max-width: var(--thin-tab-width) !important;
  z-index: 3;
}
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover,
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar {
  transition-delay: 0s !important;
  min-width: var(--wide-tab-width) !important;
  max-width: var(--wide-tab-width) !important;
  z-index: 3;
}
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover {
  margin-right: calc((var(--wide-tab-width) - var(--thin-tab-width)) * -1) !important;
}