Here’s how to make Firefox look like this:

Install Sidebar Tabs, which does 99% of the work.

In about:config, set toolkit.legacyUserProfileCustomizations.stylesheets to true.

Make ~/Library/Application Support/Firefox/Profiles/userChrome.css. This hides the tab bar but keeps the traffic light / window management buttons, positioning them at the top left:

#TabsToolbar .toolbar-items {
  display: none;

#titlebar {
  position: absolute;
  top: 12px;

#nav-bar {
  padding-top: 1px !important;
  padding-left: 66px !important;

Use this stylesheet for existing profiles:

for profile in *.default*; do mkdir -p $profile/chrome; ln -sf ../../userChrome.css $profile/chrome/userChrome.css; done

Tangentially, the browser chrome debugging toolbox is useful for testing changes to browser chrome CSS. Open Dev Tools > Settings, then under Advanced settings enable some options:

Now you can open the browser chrome debugging toolbox (like devtools but for the HTML that renders the browser itself) using ⌥⇧⌘ I.