Hilfe durchsuchen

Vorsicht vor Support-Betrug: Wir fordern Sie niemals auf, eine Telefonnummer anzurufen, eine SMS an eine Telefonnummer zu senden oder persönliche Daten preiszugeben. Bitte melden Sie verdächtige Aktivitäten über die Funktion „Missbrauch melden“.

Weitere Informationen

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!

Alle Antworten (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.