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
screen.
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 */
}
tab,toolbaritem,toolbarbutton,toolbaritem,menuitem,toolbarbutton,
#urlbar-input,
#PanelUI-menu-button,#nav-bar,#tracking-protection-icon-container,
#nav-bar-customization-target,
#userContext-icons,#titlebar,#toolbar-menubar,#TabsToolbar,
.urlbarView-row,.urlbarView-row-inner,.search-panel-one-offs-container,
.search-panel-header,.searchbar-engine-one-off-item,#urlbar-one-offs-header-label,
#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:0px!important;
margin-bottom:0px!important;
}
toolbarseparator,menuseparator{
margin-top: 1px !important;
margin-bottom: 1px !important;
}
.search-one-offs,.search-panel-one-offs-container,.search-panel-one-offs{
padding: 0px !important;
margin: 0px !important;
height: auto !important;
min-height: 0px !important;
}
#PopupSearchAutoComplete{
padding: 0px !important;
}
.toolbarbutton-1 >.toolbarbutton-icon {
scale: 140%;
}
.panel-viewstack {
min-height: 50% !important;
}
#tabs-newtab-button{
display: none !important;
}
#titlebar{
height: 20px !important;
max-height: 20px !important;
}
.panel-viewcontainer, .panel-subview-body {
height: 400px !important;
}