Hiding Firefox tab bar

I use Firefox as my primary browser, along with Tree Style Tab extension to organize tabs vertically in the sidebar, instead of horizontally on top of the browser window.

Installing this extesion does not automatically get rid of the tab bar on the top side of the window, so there are 2 tab lists - one default on top of the window, and another one in the sidebar. The default tab row on top of the window has to be hidden with a custom style in userChrome.css file.

Up until recently I was using one of such styling snippets found somewhere on the internet. It hid the tab row on top of the window, while they were still visible in the sidebar with Tree Style Tab extension.

After one of the recent Firefox updates, something broke with this setup. The tab bar on top of the window was hidden, but now the buttons for closing/maximizing/minimizing the application window were also invisible. This was true for Firefox on both - MacOS and Windows:

To fix it, I first removed all the custom userChrome.css modifications regarding tab bar. This gave me the default look after installing the Tree Style Tab extension:

Next, I remembered about a setting in about:config, which allows to change, where that top tab bar should be displayed (but not hide it entirely): browser.tabs.drawInTitlebar. By default this setting is set to true, which means, that tabs are drawn in title bar just like in the screenshot above. When the setting is toggled to false, the tabs are moved to a separate row below the title bar:

This layout should now make it a bit easier to hide that horziontal tab bar. All that's left is to add this little snippet into the userChrome.css file for the specific Firefox profile:

#TabsToolbar {
  visibility: collapse !important;
}

userchrome.org has more detailed information on how to find, create and further customize the look of Firefox with a custom userChrome.css file.

The result after these modifications was a hidden horizontal tab bar and visible close/maximize/minimize buttons:

I also have another small snippet in userChrome.css, which hides the header in the tab sidebar, so it's just tab list there and nothing else:

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

There it is - everything back to normal again.