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: 2;
}
#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: 1;
}
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover {
  margin-right: calc((var(--wide-tab-width) - var(--thin-tab-width)) * -1) !important;
}

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!

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

Hi,

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

Thanks!

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

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

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?

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

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

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.

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.

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

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?

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!

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!

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

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?

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

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

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!

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

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

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.