We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

ค้นหาฝ่ายสนับสนุน

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.

เรียนรู้เพิ่มเติม

Replace hourglass icon without changing ui.prefersReducedMotion

  • 6 การตอบกลับ
  • 1 คนมีปัญหานี้
  • 1 ครั้งที่ดู
  • ตอบกลับล่าสุดโดย jscher2000 - Support Volunteer

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!

การตอบกลับทั้งหมด (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.