Firefox Vertical Tabs

Problem

Switch tab management from horizontal to vertical tabs on firefox.

Solution

• Install the tree style tab extension on firefox.
• Under about:config, set toolkit.legacyUserProfileCustomizations.stylesheets to true

Edit toolkit.legacyUserProfileCustomizations.stylesheets and set it to true

• To remove the horizontal tab
  • Go to about:support
    • Scroll down to the Profile Directory and click on Open Directory
    • Create a new directory called chrome
    • Inside the chrome directory create a new css file called userChrome.css
    • In the file, copy the following css instructions. More details on what this does, you can follow this documentation from the tree style tab developer. There is also more customization here.

• After this restart firefox.

This is what my userChrome.css looks like:

#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar > .toolbar-items {
  opacity: 0;
  pointer-events: none;
}
#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
    visibility: collapse !important;
}
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
  display: none;
}
#main-window[inFullscreen] #sidebar-box,
#main-window[inFullscreen] #sidebar-splitter {
  display: none !important;
  width: 0px !important;
}

References

Vertical tabs and why Firefox is the new hotness (again)

Firefox: Hide Native Tabs and Titlebar