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

  • 6 பதிலளிப்புகள்
  • 1 இந்த பிரச்சனை உள்ளது
  • 30 views
  • Last reply by jscher2000

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)

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).

Helpful?

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.

Helpful?

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

Helpful?

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/

Helpful?

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!

Helpful?

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.

Helpful?

கேள்வி எழுப்பு

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.