Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Replace hourglass icon without changing ui.prefersReducedMotion

more options

How can I replace the hourglass icon in the url bar, without setting the the ui.prefersReducedMotion to 1, which will then increase the url bar enlarging when opening a new tab?

Bottom line: I want no hourglass icon while loading and disable the "expanding/enlarging" URL bar

Any help will be much appreciated!

How can I replace the hourglass icon in the url bar, without setting the ''the ui.prefersReducedMotion'' to 1, which will then increase the url bar enlarging when opening a new tab? Bottom line: I want no hourglass icon while loading and disable the "expanding/enlarging" URL bar Any help will be much appreciated!

All Replies (6)

more options

You can use code in userChrome.css for the URL bar breakout and leave ui.prefersReducedMotion at 0 (or reset this pref to hide it from about:config).

more options

I changed ui.prefersReducedMotion to 0

and copied the above-mentioned code in my userChrome.csss file but the enlargement is still there when I open a new tab.

more options

I tested my own code from that time and it still works in Firefox 88 on Linux. You may have to adjust some property values.

/* https://searchfox.org/mozilla-release/source/browser/themes/shared/urlbar-searchbar.inc.css */

#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 {
  animation: none !important;
}

In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.

  • toolkit.legacyUserProfileCustomizations.stylesheets = true
more options

If you keep the reduced motion setting set to 1, there are some ideas in this thread:

https://old.reddit.com/r/FirefoxCSS/comments/i0p219/any_way_to_restore_just_the_animated_tab_throbber/

more options

Thank you for your replies. Unfortunately none of these solutions worked for me. There might be a conflict in the .css file (I should mention that I have changed the appearance of tabs, making them more rounded and I have changed the colour of the bookmarked folders to yellow).

I could copy/paste my userChrome.csss file here, if anyone would be willing to take a look. Many thanks!

more options

This forum sometimes butchers code, so if you don't mind, you could paste your userChrome.css file contents on a site like the following and then post a link to your shared paste back here:

https://pastebin.com/

There is a selector for "Syntax Highlighting" that you can change to CSS to make it easier to read.