My Tree Style Tab Configuration

Tags: meta

I use Tree Style Tab on Firefox. People comment on how my browser looks a lot so here’s how I customize it to look good.

Mostly I’ve just hidden things:

• The title bar takes up vertical space, so I disable it.
  • This requires using “Customize toolbar…” in Firefox and then unchecking “Title Bar”.
  • On xfce, this causes the windows controls to overlap with the back/forward/refresh buttons. It doesn’t look good, but whatever.
• Hide the regular tab toolbar, which is redundant with Tree Style Tab.
• Remove some noise from the side toolbar. This also makes it hard to switch to alternate sidebars, but I don’t do that.

Here is the userChrome CSS I use. (See userchrome.org for instructions about how to add it to your Firefox.)

// Hide the title bar.
#titlebar {
  appearance: none !important;
  height: 0px;
}

#titlebar > #toolbar-menubar {
  margin-top: 0px;
}

// Hide regular tab toolbar.
#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar > .toolbar-items {
  opacity: 0;
  pointer-events: none;
}

#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
    visibility: collapse !important;
}

// Hide the side toolbar noise.
#TabsToolbar {
  min-width: 0 !important;
  min-height: 0 !important;
}

#TabsToolbar > .titlebar-buttonbox-container {
  display: block;
  position: absolute;
  top: 12px;
  left: 0px;
}

#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
  display: none;
}

I also use Vimium. A neat trick if you use both is that t with Vimium will open a new child tab, whereas Ctrl+T will a new root tab. This saves me some time reparenting tabs.

If you want to make your own changes to the CSS, you can use Firefox’s Browser Toolbox in order to write your styling.