generated html version of blog/firefox_userchromecss.txtHOME

2021, 156th day.

Today, I have some thoughts from the last few days, about UI design and 
customizability. If you're reading this years from now or otherwise don't
know the context, the browser I have hitherto used is Mozilla Firefox,
because it has the best security and privacy, and is the only majort browser 
that isn't based on Chromium, which I distrust.

However, in the recent update to Firefox, they have changed the UI in a way 
that I find intolerable. I strongly feel that a user interface for viewing
content should try to place on screen as much content as will fit, while
being as unobtrusive as possible. This is particularly important to me because
I often work with multiple windows on screen taking up different corners.
Therefore, the UI of a web browser should have no empty space, and each UI 
element such as tabs and menus should be exactly big enough to hold its title
or icon, and no bigger, particularly vertically as vertical space is at a 
premium if I want to put a youtube video on in one 540 by 960 corner of my

However, the new firefox design instead uses up vertical space with reckless
abandon. Its tabs bar is 44 pixels tall, and its address bar is another 44, 
despite the actual content of these bars being only 16 pixels tall. In other
words, there is enough space in each of these bars to have two lines of text,
plus some extra spacing. The bookmarks bar is a more reasonable 24 pixels. 
This means that a Firefox window has a total of 112 pixels of header. I find
this appalling.

In my indignation I have installed the Waterfox fork of firefox, (which has 
not yet adopted the new "proton" design) and have also taken the time to use 
the userChrome.css feature of firefox-based browsers to fix the design to my 
own preferences. All bars are resized to be only 20 pixels tall, which is
a reasonable amount of padding for a 16 pixel tall font. I have also reduced
other paddings. I'll keep working on this userChrome, and hopefully the Firefox
team will one day come to their senses about how much completely empty space
is reasonable to have in a user interface.

:root {
 --tab-min-height: 20px !important; /* adjust to suit your needs */
#sidebar-search-container,.sidebar-placesTreechildren::-moz-tree-row, menu,
#searchbar-anon-search-settings, #searchbar-anon-search-settings>hbox {
	margin-top: 0px !important;
	margin-bottom: 0px!important;
	padding-top: 0px !important;
	padding-bottom: 0px!important;
	border-width: 1px !important;
	max-height: 20px !important;
	min-height: 0px !important;
	font-size: 16px !important;

#nav-bar-customization-target {
	min-height: 0px !important;

menupopup :-moz-any(menu,menuitem) {

	margin-top: 1px !important;
	margin-bottom: 1px !important;
	padding: 0px !important;
	margin: 0px !important;
	height: auto !important;
	min-height: 0px !important;
	padding: 0px !important;
.toolbarbutton-1 >.toolbarbutton-icon {
	scale: 140%;
.panel-viewstack {
	min-height: 50% !important;
	display: none !important;
	height: 20px !important;
	max-height: 20px !important;
.panel-viewcontainer, .panel-subview-body {
	height: 400px !important;