Customizing firefox

For more compact ui, go to about:config in addressbar, search browser.uidensity and change its value to 1.

Customizing Firefox interface with CSS

Enable browser toolbox

In about:config set toolkit.legacyUserProfileCustomizations.stylesheets true.

Press F12 to open the page inspector, in top right click the three dots icon, which opens drop down menu, select Settings in that menu.
Under header Advanced settings, ensure the following is checked:

• Enable Browser chrome and add-on debugging toolbox
• Enable remote debugging

Open browser toolbox

Press alt to display menu, then go to Tools -> Web Developer -> Browser Toolbox. Or press ctrl + alt + shift + i.

You will be presented with a warning:

Press OK. Now you can inspect the elements of firefox ui as you would inspect a website.

Create CSS file

In about:profiles find root directory of a profile that you want to customize and create chrome/userChrome.css file there.
You need to restart firefox for changes to take effect.

Example with small bars and icons for small screen:

:root {
    --tab-min-height: 18px !important;
    --urlbar-min-height: 18px !important;
    font-size: 12px !important;
    --tabstrip-min-height: 18px !important;
    --toolbarbutton-inner-padding: 0 !important;
    --button-outer-padding-inline: 0 !important;
}

toolbar, hbox{
    border-radius: 0px !important;

	vbox.tab-background, hbox.tab-content, button, hbox[role="button"], toolbaritem, toolbarbutton{
		padding: 0 !important;
		margin: 0 !important;
    	overflow: hidden !important;
    	border-width: 0 !important;
    	border-radius: 0 !important;
    	vertical-align: middle !important;
    	align-self: center !important;
	}

	toolbarbutton, hbox[role="button"]{
    	margin-inline: 3px !important; 
    	& image{
    		width: 16px !important;
    		height: auto !important;
    		align-self: center !important;
		}
	}

	toolbaritem,vbox.tab-background, hbox.tab-content{
    	padding-left: 0.3em !important;
		height: 1.5em !important;
    	min-height: unset !important;
    	line-height: unset !important;
	}

	box#sidebar-main{
    	width: 25px;
    	& toolbarbutton, button{
           	   margin-inline: 0.3em !important; 
    	}
    	.tab-background {
			&:is([selected], [multiselected]) {
    			background-color: var(--tab-selected-textcolor) !important;
    		}
    	}
    	box#vertical-tabs{
			overflow: scroll;
    	}
	}

	vbox.tab-background{
    	width: 100% !important;
	}

	hbox#urlbar-background{
        margin-right: 3px;
	}

	image.tab-close-button{
    	display: none !important;
	}

}

Customizing websites with CSS

In about:profiles find root directory of a profile that you want to customize and create chrome/userContent.css file there.

The website, which you want to change, is specified with gecko engine rule @-moz-document. You need to restart firefox for changes to take effect.

@-moz-document url("about:newtab"){  
    body {
        background-color: #ff0000 !important;
    }
}
@-moz-document domain("estfyr.net"){  
    main {
        background-color: #ff0000 !important;
    }
}

Browser extensions

• umatrix - displays a matrix of requests by type and domain, you can allow or block the requests by clicking in the matrix, really great, unfortunatelly no longer maintained
• ublock origin - blocks ads, trackers, coin miners, popups, annoying anti-blockers, malware sites, etc.
• Canvas blocker - allows users to prevent websites from using some Javascript APIs to fingerprint them
• Multi-Account Containers - separates website storage into tab-specific containers, convenient for logging into one website with multiple accounts
• Libredirect - redirects YouTube, Instagram, Reddit, TikTok and other websites to alternative privacy-friendly frontends
• OneTab - whenever you find yourself with too many tabs, click the OneTab icon to convert all of your tabs into a list. When you need to access the tabs again, you can either restore them individually or all at once.
• SingleFile - save an entire web page, including all its resources, as a single HTML file
• KeePassXC-Browser - autofill passwords from your local KeepassXC install
• FraidyCat - follow feeds from various platforms
• Dark Background and Light Text - does what is says, convenient and lightweight, unfortunatelly no longer maintained