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

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.

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