Hiding the titlebar and using vertical tabs in Firefox on macOS

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:

• Enable browser chrome and add-on debugging toolboxes
• Enable remote debugging

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