You can change the density of Firefox's UI in about:config by setting "browser.uidensity" between 0 to 2, and it applies immediately!
Crossposted another Reddit user's post: https://reddit.com/r/firefox/comments/1dso5sz/easy_trick_to_make_firefox_compact_1_in_firefoxs/
Bad title. Settings that actually do something are 0 (normal), 1 (compact) and 2 (touch). You can also do that in settings, I think.
Yep, pretty easy to test, too. 4 and 5 produce the same effect as 0, meaning that it just uses that as a default for values it doesn't understand.
You can, it’s nothing new
For the more advanced, you can also mess around with the userChrome.css file. To create it open a text editor and save the file as userChrome.css in the \Chrome folder in your Firefox profile folder* (make sure to restart Firefox to apply the changes)
To enable the file, enter about:config in the address bar, then accept the warning if it appears. Search for toolkit.legacyUserProfileCustomizations.stylesheets and double-click it to set it to true.
*enter about:support in the address bar, or click on the Help menu > More Troubleshooting Information, then scroll to the Profile Folder line and click on Open Folder. Usually it's C:\Users\~USERNAME~\AppData\Roaming\Mozilla\Firefox\Profiles\~PROFILENAME~
*Note: the first 2 lines about tab height might not work if you don't have the Playing/Muted text line in tabs disabled. To disable that line go to about:config, search for browser.tabs.secondaryTextUnsupportedLocales, and add ,en (or the relevant language that you're using in your system) at the end of the value for it then click Enter and restart Firefox to apply the change.
Here's the userChrome I use (compiled from different sources)
/* Tabs/Tab Bar height */
:root {
--tab-min-height: 20px !important;
--tab-max-height: 20px !important;
}
/* Menu Bar height */
#toolbar-menubar {
margin-top: 0px !important;
margin-bottom: 0px !important;
padding-top: 0px !important;
padding-bottom: 0px !important;
line-height: 22px !important;
max-height: 22px !important;
}
/* Fixing title bar buttons (close/min/max) due to shortened Menu Bar height */
#toolbar-menubar .titlebar-button {
padding-block: 1px !important;
}
/* toolbar/address bar/url bar height */
/* https://github.com/CarterSnich/firefox-xtra-compact/blob/master/chrome/userChrome.css */
toolbar#nav-bar {
max-height: 30px !important;
}
hbox#urlbar {
min-height: 22px !important;
}
hbox#urlbar:not([focused="true"]) {
max-height: 22px !important;
}
/* Menu Items height/padding */
menupopup > menu, /* this is the sub-menus/folders/containers */
menupopup > menuitem {
padding-block: 3px !important; /* above and below each item */
margin-left: 0px !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: 7px !important; /* otherwise some text in menus gets cut off with ellipses */
}
/* the padding of the menu itself */
menupopup {
--panel-padding: 1px !important;
}
/* the text part of the item/sub-menu */
menupopup > menu > hbox, /* this is the text part of the sub-menus/folders/containers */
menupopup > menuitem > hbox {
margin-left: 0px !important;
margin-right: 8px !important; /* otherwise some text in menus gets cut off with ellipses */
}
menuseparator {
padding-block: 0px !important;
}
: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;
}
/*(The 2nd number in the first line refers to the left side and right side of the item)*/
/* Spacing/padding around addons icons in the toolbar/urlbar */
:root {
--toolbarbutton-outer-padding: 0px !important;
--toolbarbutton-inner-padding: 7px !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;
}
#tabs-newtab-button {
padding-left: 3px !important;
}
So it's like userChrome.CompactContextMenu-Enabled set to true but without going to Customize Toolbar Panel to enable it.