userChrome.css for a more compact Firefox UI

/* Note that this is done on Firefox Nightly, so some differences from the main version might be expected */


/* 01. Menu Bar height */
#toolbar-menubar { /* also works with #menubar-items but requires more padding reduction */
  margin-top: -2px !important;
  margin-bottom: -2px !important;
  padding-top: -2px !important;
  padding-bottom: -2px !important;
}
/* 01.1 Height of title bar buttons (close/min/max) which also affects the menu bar height */
#toolbar-menubar .titlebar-button {
  padding-block: 0px !important;
}

/* 02. Tabs/Tab Bar height */
:root {
 --tab-min-height: 20px !important;
}
#TabsToolbar {
  max-height: 25px !important;
}

/* 02.1 decreasing the bottom padding of the tabs toolbar */
#TabsToolbar {
  margin-bottom: -3px !important;
}

/* 02.2 padding of the New Tab button */
#tabs-newtab-button {
  padding-left: 3px !important;
}

/* 02.3 padding of the site icon on a tab */
stack.tab-icon-stack {
  margin: -3px !important;
}

/* 02.4 padding and vertical alignment of the audio button on a tab (mute/unmute) */
moz-button.tab-audio-button  {
  margin: -1px !important;
  padding-bottom: 1px !important;
}

/* 03. Address bar/URL bar/Toolbar height */
/* partially based on https://github.com/CarterSnich/firefox-xtra-compact/blob/master/chrome/userChrome.css */
toolbar#nav-bar {
  height: 25px !important;
}
.urlbar-input-container {
  height: 24px !important;
  margin-top: 4px !important;
}
#urlbar-background {
  height: 21px !important;
  margin-top: 5px !important;
}

/* 03.1 centering the url text line vertically */
#urlbar-input {
  padding-bottom: 2px !important;
}

/* 03.2 removing the empty spaces in the toolbar sides */
#back-button {
  padding-left: 0px !important;
}
#PanelUI-menu-button {
  padding-right: 0px !important;
}

/* 03.3 height/placement of the "go" arrow when typing/searching in the urlbar */
#urlbar-go-button {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  line-height: 20px !important;
  max-height: 20px !important;
}

/* 03.4 padding of the left-side icons in the url bar */
#tracking-protection-icon-container, #identity-icon-box, #identity-permission-box, #eme-notification-icon {
  padding: 4px !important;
}

/* 03.5 Vertical placement of the DRM icon in the url bar */
#eme-notification-icon {
  margin-top: -7px !important;
}

/* 03.6 spacing/padding around addon icons in the toolbar/urlbar */
:root {
  --toolbarbutton-outer-padding: 0px !important;
  --toolbarbutton-inner-padding: 5px !important;
}
.toolbaritem-combined-buttons:not([widget-type='button-and-view']),
.toolbaritem-menu-buttons {
  margin-inline: 0px !important;
  margin-inline-start: 0px !important;
  margin-inline-end: 0px !important;
}

/* 04. Menus/Menu Items height/padding */
menupopup > menu:not(bookmarksPopup), /* this is for the lines of the sub-menus/folders/containers */
menupopup > menuitem:not(bookmarksPopup) {
  padding-block: 3px !important; /* above and below each item */
  margin-left: -2px !important; /* margin is the outer space around an item */
  padding-left: 8px !important; /* padding is the inner space inside an item */
  margin-right: 0px !important;
  padding-right: 6px !important;
}

/* 04.1 removing padding for the menu itself so that the highlighting of a menu item covers the whole line */
menupopup {
  --panel-padding: 0px !important;
}

/* 04.2 removing padding for separators in menus */
menuseparator {
  padding-block: 0px !important;
}

/* 04.3 padding of the "hamburger menu" and extensions menu in the toolbar */
/* the values in the first line refer to the top-bottom and left-right padding respectively */
:root{
--arrowpanel-menuitem-padding: 1px 1px !important;
--arrowpanel-menuitem-margin-inline: 1px !important;
--arrowpanel-menuitem-padding-block: 1px !important;
--panel-separator-margin-horizontal: 1px !important;
--panel-subview-body-padding-block: 1px !important;
}