How to change the address bar in Firefox 75 (and beyond)

Updated: April 29, 2020

Firefox 75 brought about a pointless change - the address bar (urlbar) now sort of "zooms in" when clicked, partially obscuring the surrounding UI, including any shortcuts you may have pinned there. This thing feels totally mobile, and totally wrong on the desktop. For the time being, as I've shown you in the article above, this nonsense can be reverted through a number of about:config settings.

But in Firefox 77 (nightly), these options are gone, so we need something else. In this tutorial, I will show you how you can get the old address bar look & feel, so you will not be affected by low-IQ changes come the dire moment. Just as I thought Firefox was rising above the mobile toss-me-a-chromosome game, this kind of thing comes around. Follow me.

Default address bar

We want to get rid of this annoying zoom-in address bar.

What are we going to do?

We will create a custom CSS style to make the Firefox UI look like before. In essence, Firefox UI can be styled, just like any web page. This is done by adding CSS declarations in userChrome.css file in the Firefox profile folder.

Now, I'm not a pioneer. This crucial need has already been answered on the Mozilla support site. But the snippet of code there needs some adjusting, plus I want to make it extra simple and clear what the users need to do to get the old look back.

Enable userChrome.css

First, we need to "tell" Firefox to respect user-made CSS changes:

toolkit.legacyUserProfileCustomizations.stylesheets

About config

Then, go your Firefox profile folder. In Windows, typically:

C:\Users\"username"\AppData\Roaming\Mozilla\Firefox\"profile"

And in Linux, typically:

/home/"user"/.mozilla/firefox/"profile"

If you need any examples, take a look at my Plasma & HD scaling article or Firefox pinned tabs guide.

Add address bar style

The next step is to add content into the userChrome.css file. Copy the following text - this comes directly from the support thread above. Please note that this may not be sufficient, but I want to show you everything step by step, so you have more confidence changing the file if you need to.

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

#urlbar[breakout],
#urlbar[breakout][breakout-extend] {
  --urlbar-height: 28px !important;
  --urlbar-toolbar-height: 30px !important;

  width: 100% !important;
  top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
  left: 0 !important;
}

#urlbar[breakout][breakout-extend] > #urlbar-input-container,
#urlbar-input-container {
  height: var(--urlbar-height) !important;
  width: 100% !important;
  padding-block: unset !important;
  padding-inline: unset !important;
  transition: none !important;
}

#urlbar[breakout][breakout-extend] > #urlbar-background {
  box-shadow: 0 1px 4px rgba(0,0,0,.05) !important;
  animation: none !important;
}

CSS added

Save the file, restart Firefox.

Results, just slightly off

My test shows that the above snippet of code yields slightly less than ideal layout. As you can see, the address bar sits "too high" - it's not vertically centered. The top and bottom margins are wrong.

Address bar changed, top margin off

Top margin, zoomed

CSS, second change

What we need to do is slightly adjust the default values used in the CSS we added. Namely, we need to tweak the urlbar height and toolbar height. The top margin is then calculated as half the difference (delta) between these two values. You can also manually change the top value, too.

#urlbar[breakout],
#urlbar[breakout][breakout-extend] {
  --urlbar-height: 28px !important;
  --urlbar-toolbar-height: 30px !important;

I did some trial and error testing, and for me the toolbar height of 38px does the job:

#urlbar[breakout],
#urlbar[breakout][breakout-extend] {
  --urlbar-height: 28px !important;
  --urlbar-toolbar-height: 38px !important;

And again, top margin, you can change from the default calculation to anything you like:

top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;

For example, this can be something like:

top: 5px !important;

The use of the !important override is, eh, important - so that Firefox uses it and not its default set.

Final looks, as it should be

And we have our sanity and logic and intelligence back:

Urlbar fixed

Urlbar fixed, more

Conclusion

And there we go. Job accomplished. Over the years, I've been forced to use custom CSS more and more to get the normal browser behavior. This is an alarming trend. But I guess an inevitable one, as more and more companies are churning useless products for the ever-growing sub-100IQ crowd. And for no good functional reason whatsoever. Just change for the sake of it. And often something pseudo-modern that ruins perfectly acceptable and scientifically proven and tested solutions.

I hope you find this little article valuable. You can use it right away in Firefox 75, or wait until Firefox 77 hits the airwaves, and then make the change - and meanwhile use the config overrides. Still, despite all this nonsense, at least there's a way for techies to get back the normal, productive layout they need. But who knows what the future holds. Firefox, please don't be like the rest. Well there you go. Mission accomplished. If you want to thank me, buy me lavish gifts and send me praise. Curtain.

Cheers.

You may also like: