Firefox Zen

March 15, 2025

One of the things that i love about Arc and zen browser is the almost clutter free experience they provide. Its almost a full view of the webpage without any kind of ui. Im also used to my firefox installation, i dont want to tinker with other browsers.

Thanks to the new released vertical tabs, some useful extensions like Userchrome Toggle Extended and some css wizardy, i can have a similar experience. I have binded ctrl+shift+L to toggle the styles because its similar to ctrl+L that will put my cursor in the urlbar.

Want to go back or forwards? You have the buttons in the context menu, or you can hit alt+scroll wheel. For this i needed to set in about:config the value mousewheel.with_alt.delta_multiplier_y to -100 because i wanted them the other way.

Want to refresh? Context menu or classic F5.

And while writing this, i found out that in the context menu there is also the bookmark button. Amazing.

If i want an experience without any kind of UI, i can press ctrl+shift+L, toggle the sidebar from the button, and press it again to hide everything else.

:root[titlepreface*="᠎show-ui"]{
	#navigator-toolbox {
		border: none !important;
	}

	#TabsToolbar, #PersonalToolbar {
		display: none;
	}

	#nav-bar {
		height: 0 !important;
		min-height: 0 !important;
		max-height: 0;
		border: none !important;
	}

	#urlbar-container {
		top: 5vh;
		position: fixed;
		left: 0;
		right: 0;
		width: 80% !important;
		margin: 0 auto !important;
	}

	#urlbar {
		opacity: 0;
		pointer-events: none;

		&::before {
			content: "";
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(28, 27, 34, 0.45);
			display: none;
		}
	}

	#urlbar:focus-within {
		opacity: 1;
		pointer-events: all;

		&::before {
			display: block;
		}
	}
}

.titlebar-spacer[type="pre-tabs"], .titlebar-spacer[type="post-tabs"], #vertical-spacer {
	display: none;
}

firefox in normal state firefox with focus on the urlbar

Update 2025-10-21

I made more changes, so here they are for posterity:

:root[titlepreface*="!"]{
	#browser {
		--sidebar-launcher-collapsed-width: 10px !important;
	}
	&[sidebar-expand-on-hover] #sidebar-main {
		width: var(--sidebar-launcher-collapsed-width);
	}
	#navigator-toolbox {
		border: none !important;
	}

	#TabsToolbar, #PersonalToolbar {
		display: none;
	}

	#nav-bar {
		height: 0 !important;
		min-height: 0 !important;
		max-height: 0;
		border: none !important;
	}

	#urlbar-container {
		top: 5vh;
		position: fixed;
		left: 0;
		right: 0;
		width: 80% !important;
		margin: 0 auto !important;
	}

	#urlbar {
		opacity: 0;
		pointer-events: none;

		&::before {
			content: "";
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(28, 27, 34, 0.45);
			display: none;
		}
	}

	#urlbar:focus-within {
		opacity: 1;
		pointer-events: all;

		&::before {
			display: block;
		}
	}

	tab[discarded], tab[pending=true]{
		opacity: 0.35;
	}
}

.titlebar-spacer[type="pre-tabs"], .titlebar-spacer[type="post-tabs"], #vertical-spacer {
	display: none;
}

And to have better smooth scrolling take from Betterfox:

user_pref("general.smoothScroll", true);
user_pref("general.smoothScroll.currentVelocityWeighting", "1");
user_pref("general.smoothScroll.mouseWheel.durationMinMS", 80);
user_pref("general.smoothScroll.msdPhysics.continuousMotionMaxDeltaMS", 12);
user_pref("general.smoothScroll.msdPhysics.enabled", true);
user_pref("general.smoothScroll.msdPhysics.motionBeginSpringConstant", 600);
user_pref("general.smoothScroll.msdPhysics.regularSpringConstant", 650);
user_pref("general.smoothScroll.msdPhysics.slowdownMinDeltaMS", 25);
user_pref("general.smoothScroll.msdPhysics.slowdownMinDeltaRatio", "2");
user_pref("general.smoothScroll.msdPhysics.slowdownSpringConstant", 250);
user_pref("general.smoothScroll.stopDecelerationWeighting", "1");