Firefox remove tab bar (115+)

firefox-no-tab-bar.md

Preview

userChrome.css

/* CSS Tweaks for Firefox 115+ 

Mainly needed this because of all the space lost by the toolbar when using a WM 
(I use glazeWM on windows an yabai on macos)

- removes the top tab bar completely (I use side ones like in Arc/Edge)
- reduce the height of the url bar
- reduce the white of the toolbar icons to a darker blue
*/
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

:root {
  --tab-min-height: 0px !important;
  --tab-max-height: 0px !important;
  --toolbarbutton-icon-fill: !important;
  --tab-min-width: 60px !important; /* adjust */
  --urlbar-height: 33px !important;
  --urlbar-toolbar-height: 38px !important ;
}
#TabsToolbar {
  visibility: collapse;
  height: 0px;
}

.urlbar-icon,
#tracking-protection-icon-box,
#identity-icon-box {
  width: 17px !important;
  fill: #404040 !important;
}

.toolbarbutton-animatable-box,
.toolbarbutton-1 {
  fill: rgb(133, 157, 213) !important;
}

#nav-bar toolbarpaletteitem[id^="wrapper-customizableui-special-spring"],
#nav-bar toolbarspring {
  flex: 1 !important;
}

#urlbar[breakout] > #urlbar-input-container {
  height: 27px !important;
}

#nav-bar-customization-target {
  height: 30px !important;
}

#titlebar {
  appearance: unset !important;
}
#toolbar-menubar {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

#tabbrowser-tabs,
#tabbrowser-tabs > #tabbrowser-arrowscrollbox,
.tabbrowser-tabs .tabbrowser-tab {
  min-height: var(--tab-min-height) !important;
  max-height: var(--tab-min-height) !important;
}

#nav-bar,
.toolbar-items,
.titlebar-buttonbox-container,
.tab-content,
.tab-background,
.tab-label-container {
  height: var(--tab-max-height);
}

/* specific to sidebar addon (piroor/treestyletab) */
#sidebar-header {
  appearance: unset !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}