Add ability to hide native tab bars

[asamuzaK]

Depends on 1332447 - WebExtension API to hide the tabstrip

[MasterKia]

Hide the native tabs

For now, add-ons can't hide the native browser tabs due to lack of an API.

Enable Custom CSS

1. Visit about:config and click Accept the risk and Continue.
2. Search for toolkit.legacyUserProfileCustomizations.stylesheets.
3. Toggle it, making the value "true".

Create userChrome.css

1. Visit about:support.
2. To the right of Profile Directory, press the button Open Directory.
3. Create a new folder named chrome.
4. Open the chrome folder and create a new file named userChrome.css.
5. The contents of userChrome.css should be the following:

/* Hides the native tabs */
#TabsToolbar {
  visibility: collapse;
}

Restart the browser to see the changes.

More details: https://superuser.com/questions/1424478/can-i-hide-native-tabs-at-the-top-of-firefox

[jyc]

On macOS I've been hiding the tabs using this CSS:

#TabsToolbar .toolbar-items {
  display: none;
}

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

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

the result looks like this:

Wrote some additional notes here in case it's helpful to anyone: https://www.jonathanychan.com/blog/hiding-the-titlebar-and-using-vertical-tabs-in-firefox-on-macos/

[omicronyang]

On Win11 I recommand this CSS:

#TabsToolbar {
  justify-content: flex-end;
}

#TabsToolbar .toolbar-items {
  display: none;
}

#TabsToolbar .titlebar-spacer {
  display: none;
}

#TabsToolbar .titlebar-buttonbox-container {
  min-height: 40px;
}

#titlebar {
  position: absolute;
  right: 0;
}

#nav-bar {
  padding-top: 1px !important;
  margin-right: 117px !important;
}