Skip to content

Instantly share code, notes, and snippets.

@theprojectsomething

theprojectsomething/Firefox Pretty Tree Style Tab.md

Last active June 16, 2025 03:56
Show Gist options
  • Save theprojectsomething/6813b2c27611be03e67c78d936b0f760 to your computer and use it in GitHub Desktop.
Save theprojectsomething/6813b2c27611be03e67c78d936b0f760 to your computer and use it in GitHub Desktop.
Download ZIP
Tree Style Tab: Sliding sidebar / pinned + active tabs
Raw
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

tree-style-tabs-theme

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
Raw
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;
}
Raw
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;
}
@liemlb
Copy link

liemlb commented Dec 12, 2021

Thank you for a clean setup and nice instruction!
In my use case, the sidebar is on right side so I need to change margin-left also.
Is there any way for us to determine sidebar is left or right in userChrome.css? I want to do margin-left shifting if sidebar on the right side only, but i am not good at css. It would be great if you can show me how to achieve that, thank you!

@liemlb
Copy link

liemlb commented Dec 12, 2021 •
edited
Loading

Found, in case some one need the same functionality:

#sidebar-box[positionend="true"]:hover > #sidebar{ 
  margin-left: -400px !important;
  transition: margin-left var(--uc-sidebar-expand-duration) cubic-bezier(.6,0,.6,.9) var(--uc-sidebar-expand-delay) !important;
}

@vdeemann
Copy link

vdeemann commented May 7, 2022

Hi,

Is there a way to reduce time delay when the cursor is off the sidebar?
https://mega.nz/file/cTRRiKTL#xY6iO38hE3Fx6ZymqC285TvEgMZm1VxEho47sPPWYBo

Thanks!

@vdeemann
Copy link

vdeemann commented May 8, 2022 •
edited
Loading

Alright, here are some changes for a snappier sidebar.

#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] {
overflow: hidden !important;
position: relative !important;
transition: all 300ms !important;
min-width: var(--thin-tab-width) !important;
max-width: var(--thin-tab-width) !important;
z-index: 2;
}
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover,
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar {
transition: all 300ms !important;
min-width: var(--wide-tab-width) !important;
max-width: var(--wide-tab-width) !important;
z-index: 1;
}

@theprojectsomething
Copy link
Author

Thanks for the updates @vdeemann and @liemlb have been meaning to come back to this for a while now to bugfix .. appreciate the contributions

@vdeemann
Copy link

vdeemann commented May 9, 2022

Thank you for a clean setup and nice instruction! In my use case, the sidebar is on right side so I need to change margin-left also. Is there any way for us to determine sidebar is left or right in userChrome.css? I want to do margin-left shifting if sidebar on the right side only, but i am not good at css. It would be great if you can show me how to achieve that, thank you!

Hi, I am not able to move the sidebar to the right. How was this done?

@theprojectsomething
Copy link
Author

@vdeemann you can choose which side it appears in the add-on preferences. In Firefox I go to about:addons and it's the top preference under appearance.

@vdeemann
Copy link

I've been testing Full Auto-show/hide Theme code snippet from https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules#full-auto-showhide-theme= thought I share since there is a significant code reduction. Here is my userChrome.css

https://www.toptal.com/developers/hastebin/raw/zofizuvobe

@Einstein-here
Copy link

Einstein-here commented Jun 3, 2022 •
edited
Loading

Looks really nice, can you please advise how I can leave the upper tab menu turned on, like yours?

It feels comfortable to use both the Treetabs and the horizontal tabs.

Edit: Oh wait my bad, your version of the tre[e slide allows the use of the horizontal tabs, I used a different version of your code from this reddit post, sorry if I made things confusing.

@sdfg2
Copy link

sdfg2 commented Oct 2, 2022

How did you get rid of the delay on the transition for pushing child elements out (expanding margin-left)? This has stumped me for hours.

@theprojectsomething
Copy link
Author

How did you get rid of the delay on the transition for pushing child elements out (expanding margin-left)? This has stumped me for hours.

Hi @sdfg2 if you're referring to the original code (and assuming I understand what you mean!), you can adjust the margin delays per line 11 of theme stylesheet

@ericbrehme
Copy link

ericbrehme commented Nov 21, 2022 •
edited
Loading

Hi, this look's awesome. I only have one problem.
My subbranches don't loose their left padding (or indent) when in collapsed state. How do i fix that, or where should i look for the culprit?

firefox_zcRLs0e8Nv

@theprojectsomething
Copy link
Author

Hi @ericbrehme a couple of minor bugs were introduced with some of the more recent TST and Firefox updates. I'd been putting up with it, but took your comment as an excuse to jump in and resolve. Let me know if it works for you. Cheers!

@ericbrehme
Copy link

ericbrehme commented Nov 23, 2022 •
edited
Loading

Hi @ericbrehme a couple of minor bugs were introduced with some of the more recent TST and Firefox updates. I'd been putting up with it, but took your comment as an excuse to jump in and resolve. Let me know if it works for you. Cheers!

Works just fine. Thanks alot!

@theprojectsomething
Copy link
Author

theprojectsomething commented Apr 17, 2023 •
edited
Loading

Latest version of userChrome.css fixes bugs introduced in FF 113

@PalanixYT
Copy link

Is there any way to make this work with TST Indent Line addon? I'm not sure how to do it as I'm pretty new to tst. I know that there are options for the addon but I'm not sure how to find them. I'm not sure how you'd go about doing this. Any directions?

@theprojectsomething
Copy link
Author

Hi @PalanixYT you "should" be able to get it working by updating tree-style-tabs-theme.css ... the current version just overrides TST's margins. I'd probably be looking at how the indent plugin is indenting (margins, transforms, etc.) and override these values instead. You can find instructions on how to debug firefox extension UI here: https://superuser.com/q/1608096

@PalanixYT
Copy link

Thanks a lot for the help and quick reply! I'll look at it later this day. When I'm done I'll ofc share

@PalanixYT
Copy link

Thanks a lot @theprojectsomething ! I finally figured out how to do it.
For anyone interested:
tab-item ::part(indent-line) { --indent-line-color-active: rgba(0,0,0,0); } :root:hover tab-item:not(.pinned):not(.collapsed) ::part(indent-line) { background-image: var(--indent-line-highlighted), var(--indent-line); --indent-line-color-active: rgb(255,255,255); --indent-line-opacity: 1; }
This is mostly fine (although the animations don't work properly, I don't know how to adjust the transition-delay but it's not too noticable). The part I missed was this ::part() thing.
Again, Thanks a lot for the help!

@theprojectsomething
Copy link
Author

Awesome @PalanixYT, thanks for the share - glad you were able to sort it

@PalanixYT
Copy link

I have noticed that when there are too many tabs (about one more than fits on the sidebar) then all elements will be pushed slightly to the right and the subtabs no longer align to the edge

@theprojectsomething
Copy link
Author

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

@PalanixYT
Copy link

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.

@PalanixYT
Copy link

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.

@Nitrousoxide
Copy link

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.
image

@vdeemann
Copy link

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.

Screen Shot 2024-11-29 at 9 32 10 AM

@nosut
Copy link

nosut commented Nov 29, 2024 •
edited
Loading

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.

@T-vK
Copy link

T-vK commented Dec 9, 2024 •
edited
Loading

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. image

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;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment