-Firefox userChrome.css for tree-style-tab and high space utilization on small displays.md

Firefox userChrome.css for macOS & Tree Style Tab

• for use with Tree Style Tab
• high space utilization on small displays by reducing the height of the title bar

I like it this way.

Setup

To use this:

1. Go to ~/Library/Application Support/Firefox/profiles/$your_profile/
2. Create a folder called chrome
3. Put the userChrome.css in the folde
4. Open about:config in a new tab, and set toolkit.legacyUserProfileCustomizations.stylesheets to true
5. Customize the toolbar by right-clicking on it

• add a "flexible space" to the very left of the back button.
• this will make room for the macOS windows decorations (close, minimize, expand)

1. Restart Firefox to load userChrome.css.

userChrome.css

/** Hide the "Tree Style Tab" header */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
  display: none;
}

#sidebar-box {
  min-width: 40px !important;
}

/** hide tabs and keep OS window buttons */
#titlebar {
  appearance: none !important;
  height: 0px;
}

#titlebar>#toolbar-menubar {
  margin-top: 0px;
}

#TabsToolbar {
  min-width: 0 !important;
  min-height: 0 !important;
}

#TabsToolbar>.titlebar-buttonbox-container {
  display: block;
  position: absolute;
  top: 12px;
  left: 0px;
}

/** Make toolbar smaller **/
#urlbar-container {
  --urlbar-container-height: 30px !important;
}

#urlbar {
  --urlbar-height: 30px !important;
  --urlbar-toolbar-height: 30px !important;
}

/* Adjust some paddings */
#urlbar-container,
#search-container {
  padding-block: 2px !important;
}

#urlbar-background {
  inset: 3px !important;
}

.urlbar-icon,
.sharing-icon,
#identity-icon,
#permissions-granted-icon,
#tracking-protection-icon,
#blocked-permissions-container>.blocked-permission-icon {
  width: 15px !important;
  height: 15px !important;
}

toolbar .toolbarbutton-1 {
  &>.toolbarbutton-icon {
    width: calc(2 * var(--toolbarbutton-inner-padding) + 15px) !important;
    height: calc(2 * var(--toolbarbutton-inner-padding) + 15px) !important;
  }
}

:root {
  --toolbarbutton-inner-padding: 6px !important;
}