Guide for setting up Tree Style Tabs as replacement for horizontal tab bar in Firefox

0_README.md

This gist is to help in setting up the Tree Style Tabs sidebar as a full replacement of the built-in horizontal tabs bar in Firefox. These settings are customized to what I've found to be the most comfortable, but feel free to experiment with them and find the settings that are perfect for you!

---

userChrome.css

This should be added to userChrome.css file under your FireFox profile (on my Macbook, "/Users/<username>/Library/Application Support/Firefox/Profiles/<default profile>/chrome/userChrome.css")

tree-style-tab_extension-extras.css

After installing the "Tree Style Tabs" Firefox extension, open the extension settings and paste this into the text box under "Advanced -> Extra style rules for sidebar contents"

dark-scrollbar.css

This is not really required for setting up Tree Style Tabs, but while you're adding custom userChrome settings you might as well toss this in there too because it looks really nice with a dark FF theme ;)

configs-treestyletab@piro.sakura.ne.jp.json

This isn't necessary, but it's a backup of my current extension settings for TTT in case I need to restore them. This file can be exported or imported in the "All Configs" section at the bottom of the TTT preferences page.

---

Here's a couple of screenshots showing what my browser window looks like normally, and the expanded view when I hover over the tab sidebar:

configs-treestyletab@piro.sakura.ne.jp.json

{
  "autoAttachOnNewTabCommand": 3,
  "autoCollapseExpandSubtreeOnAttach": false,
  "cachedExternalAddons": [
    "multipletab@piro.sakura.ne.jp"
  ],
  "closeParentBehavior": 0,
  "closeParentBehaviorMode": 1,
  "collapseExpandSubtreeByDblClick": true,
  "configsVersion": 7,
  "context_closeDescendants": true,
  "context_reloadDescendants": true,
  "inheritContextualIdentityToNewChildTab": true,
  "insertNewChildAt": -1,
  "longPressOnNewTabButton": "newtab-action-selector",
  "migratedBookmarkUrls": [
    "moz-extension://82b29f5d-82ea-0a47-9362-91cf1dfa660c/resources/group-tab.html",
    "moz-extension://82b29f5d-82ea-0a47-9362-91cf1dfa660c/options/options.html",
    "moz-extension://82b29f5d-82ea-0a47-9362-91cf1dfa660c/resources/startup.html",
    "moz-extension://82b29f5d-82ea-0a47-9362-91cf1dfa660c/tests/runner.html"
  ],
  "notifiedFeaturesVersion": 4,
  "optionsExpandedSections": [
    "section-appearance",
    "section-newTab",
    "section-treeBehavior",
    "section-advanced",
    "section-shortcuts",
    "section-debug"
  ],
  "promoteFirstChildForClosedRoot": false,
  "showContextualIdentitiesSelector": true,
  "skipCollapsedTabsForTabSwitchingShortcuts": true,
  "style": "plain-dark",
  "userStyleRules": "/* Add private browsing indicator per tab */\n.tab.private-browsing .label:before {\n  content: \"🕶\";\n}\n\n/* As little space before the tab name as possible. \n.tab:not(.pinned) {\n  padding-left: 0px;\n}*/\n\n.tab .twisty {\n  margin-right: -1.5em;\n  opacity: 0;\n  position: relative;\n  z-index: 10000;\n}\n\n/* Push tab labels slightly to the right so they're completely hidden in collapsed state */\n.tab .label {\n    margin-left: 7px;\n}\n\n/* Hide close buttons on tabs. */\n.tab .closebox {\n    visibility: collapse;\n}\n\n.tab:hover .closebox {\n    visibility: initial;\n}\n\n/* Hide sound playing/muted button. */\n.sound-button::before {\n    display: none !important;\n}\n\n/* Adjust style for tab that has sound playing. */\n.tab.sound-playing .favicon::after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    border-radius: 50%;\n    background: #FFFFFF;\n    animation: pulse 2s ease-out 0s infinite;\n    z-index: -1;\n    opacity: 0;\n}\n\n/* Adjust style for tab that is muted. */\n.tab.muted {\n    opacity: 0.5;\n}",
  "warnOnCloseTabs": false
}

dark-scrollbar.css

scrollbar, scrollbar *, scrollcorner {
	-moz-appearance: none !important;
	--scrollbar-width: 10px;
    --scrollbar-height: var(--scrollbar-width);
}

scrollbar, scrollcorner  {
    background: #282828 !important;
}
scrollbar[orient="vertical"] {
    width: var(--scrollbar-width) !important;
    min-width: var(--scrollbar-width) !important;
}
scrollbar[orient="horizontal"] {
    height: var(--scrollbar-height) !important;
    min-height: var(--scrollbar-height) !important;
}

scrollbar thumb {
	background: #646464 !important;
}
scrollbar thumb:hover,
scrollbar thumb:active {
	background: #00ACED !important;
}

scrollbar:hover scrollbarbutton {
    background-color: #444444 !important;
}
scrollbar scrollbarbutton:hover {
    background: #646464 !important;
}
scrollbar scrollbarbutton:active {
    background: #00ACED !important;
}

tree-style-tab_extension-extras.css

/* Add private browsing indicator per tab */
.tab.private-browsing .label:before {
  content: "�";
}

/* As little space before the tab name as possible. 
.tab:not(.pinned) {
  padding-left: 0px;
}*/

.tab .twisty {
  margin-right: -1.5em;
  opacity: 0;
  position: relative;
  z-index: 10000;
}

/* Push tab labels slightly to the right so they're completely hidden in collapsed state */
.tab .label {
    margin-left: 7px;
}

/* Hide close buttons on tabs. */
.tab .closebox {
    visibility: collapse;
}

.tab:hover .closebox {
    visibility: initial;
}

/* Hide sound playing/muted button. */
.sound-button::before {
    display: none !important;
}

/* Adjust style for tab that has sound playing. */
.tab.sound-playing .favicon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    background: #FFFFFF;
    animation: pulse 2s ease-out 0s infinite;
    z-index: -1;
    opacity: 0;
}

/* Adjust style for tab that is muted. */
.tab.muted {
    opacity: 0.5;
}

userChrome.css

#PanelUI-menu-button {
    -moz-binding: url(data:text/xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjwhLS0gQ29weXJpZ2h0IChjKSAyMDE3IEhhZ2dhaSBOdWNoaQpBdmFpbGFibGUgZm9yIHVzZSB1bmRlciB0aGUgTUlUIExpY2Vuc2U6Cmh0dHBzOi8vb3BlbnNvdXJjZS5vcmcvbGljZW5zZXMvTUlUCiAtLT4KCjwhLS0gUnVuIHVzZXJDaHJvbWUuanMvdXNlckNocm9tZS54dWwgYW5kIC51Yy5qcy8udWMueHVsLy5jc3MgZmlsZXMgIC0tPgo8YmluZGluZ3MgeG1sbnM9Imh0dHA6Ly93d3cubW96aWxsYS5vcmcveGJsIj4KICAgIDxiaW5kaW5nIGlkPSJqcyIgZXh0ZW5kcz0iY2hyb21lOi8vZ2xvYmFsL2NvbnRlbnQvYmluZGluZ3MvdG9vbGJhcmJ1dHRvbi54bWwjbWVudSI+CiAgICAgICAgPGltcGxlbWVudGF0aW9uPgogICAgICAgICAgICA8Y29uc3RydWN0b3I+PCFbQ0RBVEFbCiAgICAgICAgICAgICAgICBpZih3aW5kb3cudXNlckNocm9tZUpzTW9kKSByZXR1cm47CiAgICAgICAgICAgICAgICB3aW5kb3cudXNlckNocm9tZUpzTW9kID0gdHJ1ZTsKICAgICAgICAgICAgICAgIHZhciBjaHJvbWVGaWxlcyA9IEZpbGVVdGlscy5nZXREaXIoIlVDaHJtIiwgW10pLmRpcmVjdG9yeUVudHJpZXM7CiAgICAgICAgICAgICAgICB2YXIgeHVsRmlsZXMgPSBbXTsKICAgICAgICAgICAgICAgIHZhciBzc3MgPSBDY1snQG1vemlsbGEub3JnL2NvbnRlbnQvc3R5bGUtc2hlZXQtc2VydmljZTsxJ10uZ2V0U2VydmljZShDaS5uc0lTdHlsZVNoZWV0U2VydmljZSk7CiAgICAgICAgICAgICAgICB3aGlsZShjaHJvbWVGaWxlcy5oYXNNb3JlRWxlbWVudHMoKSkgewogICAgICAgICAgICAgICAgICAgIHZhciBmaWxlID0gY2hyb21lRmlsZXMuZ2V0TmV4dCgpLlF1ZXJ5SW50ZXJmYWNlKENpLm5zSUZpbGUpOwogICAgICAgICAgICAgICAgICAgIHZhciBmaWxlVVJJID0gU2VydmljZXMuaW8ubmV3RmlsZVVSSShmaWxlKTsKICAgICAgICAgICAgICAgICAgICBpZihmaWxlLmlzRmlsZSgpKSB7CiAgICAgICAgICAgICAgICAgICAgICAgIHR5cGUgPSAibm9uZSI7CiAgICAgICAgICAgICAgICAgICAgICAgIGlmKC8oXnVzZXJDaHJvbWV8XC51YylcLmpzJC9pLnRlc3QoZmlsZS5sZWFmTmFtZSkpIHsKICAgICAgICAgICAgICAgICAgICAgICAgICAgIHR5cGUgPSAidXNlcmNocm9tZS9qcyI7CiAgICAgICAgICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICAgICAgICAgICAgZWxzZSBpZigvKF51c2VyQ2hyb21lfFwudWMpXC54dWwkL2kudGVzdChmaWxlLmxlYWZOYW1lKSkgewogICAgICAgICAgICAgICAgICAgICAgICAgICAgdHlwZSA9ICJ1c2VyY2hyb21lL3h1bCI7CiAgICAgICAgICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICAgICAgICAgICAgZWxzZSBpZigvXC5hc1wuY3NzJC9pLnRlc3QoZmlsZS5sZWFmTmFtZSkpIHsKICAgICAgICAgICAgICAgICAgICAgICAgICAgIHR5cGUgPSAiYWdlbnRzaGVldCI7CiAgICAgICAgICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICAgICAgICAgICAgZWxzZSBpZigvXig/ISh1c2VyQ2hyb21lfHVzZXJDb250ZW50KVwuY3NzJCkuK1wuY3NzJC9pLnRlc3QoZmlsZS5sZWFmTmFtZSkpIHsKICAgICAgICAgICAgICAgICAgICAgICAgICAgIHR5cGUgPSAidXNlcnNoZWV0IjsKICAgICAgICAgICAgICAgICAgICAgICAgfQogICAgICAgICAgICAgICAgICAgICAgICBpZih0eXBlICE9ICJub25lIikgewogICAgICAgICAgICAgICAgICAgICAgICAgICAgY29uc29sZS5sb2coIi0tLS0tLS0tLS1cXCAiICsgZmlsZS5sZWFmTmFtZSArICIgKCIgKyB0eXBlICsgIikiKTsKICAgICAgICAgICAgICAgICAgICAgICAgICAgIHRyeSB7CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgaWYodHlwZSA9PSAidXNlcmNocm9tZS9qcyIpIHsKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgU2VydmljZXMuc2NyaXB0bG9hZGVyLmxvYWRTdWJTY3JpcHRXaXRoT3B0aW9ucyhmaWxlVVJJLnNwZWMsIHt0YXJnZXQ6IHdpbmRvdywgaWdub3JlQ2FjaGU6IHRydWV9KTsKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgZWxzZSBpZih0eXBlID09ICJ1c2VyY2hyb21lL3h1bCIpIHsKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgeHVsRmlsZXMucHVzaChmaWxlVVJJLnNwZWMpOwogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBlbHNlIGlmKHR5cGUgPT0gImFnZW50c2hlZXQiKSB7CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGlmKCFzc3Muc2hlZXRSZWdpc3RlcmVkKGZpbGVVUkksIHNzcy5BR0VOVF9TSEVFVCkpCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBzc3MubG9hZEFuZFJlZ2lzdGVyU2hlZXQoZmlsZVVSSSwgc3NzLkFHRU5UX1NIRUVUKTsKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgZWxzZSBpZih0eXBlID09ICJ1c2Vyc2hlZXQiKSB7CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGlmKCFzc3Muc2hlZXRSZWdpc3RlcmVkKGZpbGVVUkksIHNzcy5VU0VSX1NIRUVUKSkKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHNzcy5sb2FkQW5kUmVnaXN0ZXJTaGVldChmaWxlVVJJLCBzc3MuVVNFUl9TSEVFVCk7CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgfQogICAgICAgICAgICAgICAgICAgICAgICAgICAgfSBjYXRjaChlKSB7CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgY29uc29sZS5sb2coIiMjIyMjIyMjIyMgRVJST1I6ICIgKyBlICsgIiBhdCAiICsgZS5saW5lTnVtYmVyICsgIjoiICsgZS5jb2x1bW5OdW1iZXIpOwogICAgICAgICAgICAgICAgICAgICAgICAgICAgfQogICAgICAgICAgICAgICAgICAgICAgICAgICAgY29uc29sZS5sb2coIi0tLS0tLS0tLS0vICIgKyBmaWxlLmxlYWZOYW1lKTsKICAgICAgICAgICAgICAgICAgICAgICAgfQogICAgICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICAgIHNldFRpbWVvdXQoZnVuY3Rpb24gbG9hZFhVTCgpIHsKICAgICAgICAgICAgICAgICAgICBpZih4dWxGaWxlcy5sZW5ndGggPiAwKSB7CiAgICAgICAgICAgICAgICAgICAgICAgIGRvY3VtZW50LmxvYWRPdmVybGF5KHh1bEZpbGVzLnNoaWZ0KCksIG51bGwpOwogICAgICAgICAgICAgICAgICAgICAgICBzZXRUaW1lb3V0KGxvYWRYVUwsIDUpOwogICAgICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICAgIH0sIDApOwogICAgICAgICAgICBdXT48L2NvbnN0cnVjdG9yPgogICAgICAgIDwvaW1wbGVtZW50YXRpb24+CiAgICA8L2JpbmRpbmc+CjwvYmluZGluZ3M+Cg==);
}

/* Hide horizontal tabs at the top of the window */
#TabsToolbar {
    visibility: collapse !important;
}

/*Collapse in default state and add transition*/
/* #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] {
  overflow: hidden;
  min-width: 40px;
  max-width: 40px;
  transition: all 0.2s ease;
  border-right: 1px solid #0c0c0d;
  z-index: 2;
} */

/*Expand to 260px on hover*/
/* #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover,
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar {
  min-width: 260px !important;
  max-width: 260px !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: 75px;
    --wide-tab-width: 260px;
}
#sidebar {
  min-width: var(--thin-tab-width) !important;
  box-shadow: 1px 0px 5px 0px rgba(0,0,0, 0.7);
}
#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; */
    border-right: 1px solid #0c0c0d !important;
    z-index: 2!important;
    position: relative !important;
    transition: all 100ms !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;
}