Settings for Tree Style Tab in Firefox 57

Firefox 57 changed the plugin API extensively, and all plugins underwent major changes. One of which was Tree Style Tab, which lets you (among other things) display tabs down the side of the page rather than across the top.

In Firefox 57, the default look with Tree Style Tab had a number of issues for me, namely:

• The regular tabs (across the top) were still visible, even when the tree tab was visible
• The box to close Tree Style Tab was disproportionately large, and I never turn it off anyway
• Each tab in the list was much thicker vertically than previously

Scouring around the internet I came up with the following changes to fix all of the above:

• Add the following to userChrome.css (sourced from this post at /r/Firefox). Create in ~/.mozilla/firefox/<custom>.default/chrome if needed:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* to hide the native tabs */
#TabsToolbar {
  visibility: collapse;
}

/* to hide the sidebar header */
#sidebar-header {
  visibility: collapse;
}

• Add the following to the "Advanced" section of the Tree Style Tab preferences from within Firefox, which mostly came from the posts at this Hacker News thread:

.closebox {
  display: none;
}

.tab:hover .closebox {
  display: block;
}

:root {
  --tab-height: 24px;
}

.tab {
  height: var(--tab-height) !important;
}

#tabbar .after-tabs {
  display: none !important;
}

• In "Hamburger" menu -> Customize, in the bottom left check "Title Bar" if you want it visible

Update 7 Apr 2020: I noticed in new installs that the visibility options weren't being applied properly. As per this comment from MikeF, you now need to go into about:settings and change toolkit.legacyUserProfileCustomizations.stylesheets to true and restart the browser. Thanks Mike!