Disable bloated address bar?
Hi,
Since 1-2 months my Firefox address bar grows vertically to about 1.5 its normal size when I click it. I think this came with an update. How can I disable this? It's really annoying and unnecessary.
Thanks
Chosen solution
Hi MM6631764, this "focused" address bar is a new design in Firefox 75+. There is a built-in way to avoid enlargement when the cursor moves into the bar automatically, for example, on a new tab, but that doesn't prevent enlargement when you start interacting with the bar by clicking in it or typing in it. For that, the community has developed a workaround.
Restyling the Address Bar to Prevent Enlargement
In Firefox 78+, the only method to completely eliminate or limit the "enlargement" effect is to apply custom style rules using a userChrome.css file. I realize if it's your first UI hack, that all sounds like a foreign language. It's a little bit involved, so please set aside 10 quiet minutes to work through it.
(For anyone who already has a userChrome.css file set up, you just need to add the rules you downloaded under (A) to your file.)
(A) Download a rules file
https://www.userchrome.org/samples/userChrome-ZeroEnlargement.css
Use the downloads list on the toolbar to open the downloads folder directly to the new userChrome.css file. (See attached screenshot)
Minimize that file browser window for later reference.
(B) Create a new chrome folder in your profile folder
The following article has the detailed steps for that (#1, #2, and I recommend #3)
https://www.userchrome.org/how-create-userchrome-css.html
I have videos for both Windows and Mac in case the text is not clear.
(C) Move the userChrome-ZeroEnlargement.css file you downloaded in Step A into the chrome folder you created in Step B
(D) If you do not already have a userChrome.css file, Rename the userChrome-ZeroEnlargement.css file
Right-click userChrome-ZeroEnlargement.css and choose Rename. Carefully remove -ZeroEnlargement and press Enter to save your change. The final file name needs to be userChrome.css or Firefox will never find it.
(E) Set Firefox to look for userChrome.css at startup -- see step #6 in the above article.
The next time you exit Firefox and start it up again, it should discover that file and apply the rules.
Success?
Once you start tweaking the interface this way, you'll probably find more and more things you want to do. I suggest bookmarking the pages where you get the code for future reference because changes to Firefox may break them and it's easier to request an update if you can find the source.
Read this answer in context 👍 1All Replies (8)
Chosen Solution
Hi MM6631764, this "focused" address bar is a new design in Firefox 75+. There is a built-in way to avoid enlargement when the cursor moves into the bar automatically, for example, on a new tab, but that doesn't prevent enlargement when you start interacting with the bar by clicking in it or typing in it. For that, the community has developed a workaround.
Restyling the Address Bar to Prevent Enlargement
In Firefox 78+, the only method to completely eliminate or limit the "enlargement" effect is to apply custom style rules using a userChrome.css file. I realize if it's your first UI hack, that all sounds like a foreign language. It's a little bit involved, so please set aside 10 quiet minutes to work through it.
(For anyone who already has a userChrome.css file set up, you just need to add the rules you downloaded under (A) to your file.)
(A) Download a rules file
https://www.userchrome.org/samples/userChrome-ZeroEnlargement.css
Use the downloads list on the toolbar to open the downloads folder directly to the new userChrome.css file. (See attached screenshot)
Minimize that file browser window for later reference.
(B) Create a new chrome folder in your profile folder
The following article has the detailed steps for that (#1, #2, and I recommend #3)
https://www.userchrome.org/how-create-userchrome-css.html
I have videos for both Windows and Mac in case the text is not clear.
(C) Move the userChrome-ZeroEnlargement.css file you downloaded in Step A into the chrome folder you created in Step B
(D) If you do not already have a userChrome.css file, Rename the userChrome-ZeroEnlargement.css file
Right-click userChrome-ZeroEnlargement.css and choose Rename. Carefully remove -ZeroEnlargement and press Enter to save your change. The final file name needs to be userChrome.css or Firefox will never find it.
(E) Set Firefox to look for userChrome.css at startup -- see step #6 in the above article.
The next time you exit Firefox and start it up again, it should discover that file and apply the rules.
Success?
Once you start tweaking the interface this way, you'll probably find more and more things you want to do. I suggest bookmarking the pages where you get the code for future reference because changes to Firefox may break them and it's easier to request an update if you can find the source.
Alternatively try to add a preference ui.prefersReducedMotion = 1 to about:config.
@jscher2000 @TyDraniu
Sorry for my delayed response. It's a shame that these hacks are apparently necessary but thanks both for your very helpful responses. I will check these out. Have a nice day :)
The .css hack works :) I have one question though, does the enable toolkit.legacyUserProfileCustomizations.stylesheets pose any security risk? I'm always a bit wary to enable anything 'legacy'.
MM6631764 said
The .css hack works :) I have one question though, does the enable toolkit.legacyUserProfileCustomizations.stylesheets pose any security risk? I'm always a bit wary to enable anything 'legacy'.
In recent versions, userChrome.css and userContent.css have been restricted so that scripts cannot be injected through them. Bad or obsolete style rules in those files still could break the user interface or web content, so be on the lookout for any strange modifications you didn't create yourself in case something is added to the chrome folder.
Mmm doesn't sound too safe. Ok thanks for the info.
Thanks @jscher2000. I already use userChrome and userContent styles, so your trick is just what I needed.
Hope Mozilla will give us an option to disable this in future versions of Firefox.
Modified by Dominic Desbiens
Firefox 63+ has support for "@media (prefers-reduced-motion)".
You can create a new Number pref named ui.prefersReducedMotion on the about:config page to show or block some animations.
In Firefox 78+ this includes the location bar breakout. In Firefox 80+ this replaces the tab loading indicator with an hourglass.
- set the value to 1 if you want to block animations
ui.prefersReducedMotion = 1 - set its value to 0 if you want to see animations
ui.prefersReducedMotion = 0
See also:
You can open the about:config page via the location/address bar. You can click the button to "Accept the Risk and Continue".