Unround tabs in Firefox Nova

I’ve just done a major system update and — BANG! — there is the new Firefox Nova. It’s not that far from the original and I got pretty used to the shades of my button changes every now and then. Not that I’d need this constant repainting in my life but whatever, such is the world now probably. But there is one thing that annoyed me so much – the extreme rounded corners of the tabs

I don’t want to blame people on design too much as I can’t even sketch a car without it being ugly, but this is pretty impractical in my opinion. There is so much space wasted. It is probably just fine on full-sized tabs, but when you open a lot of them and they automatically shrink, too much of the screen space gets empty while only too little of the tab title is actually displayed. And the smooth fade-out makes it even worse.

Fortunately, there is an easy way out through the userChrome.css. Find your profile directory, create the chrome directory and the userChrome.css file inside it. Fill it with

.tabbrowser-tab .tab-background {
	border-radius: 0px !important;
}

.tabbrowser-tab {
	--tab-label-mask-size: 0px !important;
}

.tab-label-container {
	mask-image: none !important;
}

/* container-tab color stripe */
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
	--tab-context-line-inline-offset: 0px !important;
	--tab-context-line-block-offset: 0px !important;
	border-radius: 0 !important;
	margin-inline: 0 !important;
}

enable the toolkit.legacyUserProfileCustomizations.stylesheets setting in about:config and restart your Firefox. The end result looks like this

While not perfect, I’m happy with it. I guess Nova is the new Firefox in the long run anyway, so the less I deviate from it, the less surprised I’d be later. That’s why I decided not to simply turn browser.nova.enabled off. It’s quite daunting to set this up per each user profile I have, but hopefully I won’t have to touch it again anytime soon.