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; }