How to customize Firefox tab throbber (and other colors)

I'm trying to customize the color of Firefox tab throbber fo firefox-gnome-theme-maia. I changed the animation with this piece of css:

.tab-throbber[busy]::before {
  background-image: url("chrome://global/skin/icons/loading.png") !important;
  animation: unset !important;
}
.tab-throbber[busy]:not([progress])::before {
  /* Grays the blue during "Connecting" state */
  filter: grayscale(100%);
}
@media (min-resolution: 2dppx) {
  .tab-throbber[busy]::before {
    background-image: url("chrome://global/skin/icons/loading@2x.png") !important;
  }
}

However, the color is the default blue. Does anyone know where the file url("chrome://global/skin/icons/loading.png") is in the file system?

Another color I would wish to change is the blue color that washes over the tabs when the web page is loaded. If someone knows a lot about firefox css, I would very much appreciate help.

2 Likes

Some reference might be here

Update: I was only able to unpack the omni.ja from Tor browser. Maybe i did something wrong with the one from Firefox ...
On Tor is chrome>toolkit>skin>classic>global>icons>loading.png

1 Like

Instead of trying to find where this "spinning" icon is located, you can try the filter property in your first CSS rule. This property is the only one I know of that can change the colors of a .png image (.svg images are easier to colorize).

Something like this maybe:

.tab-throbber[busy]::before {
  background-image: url("chrome://global/skin/icons/loading.png") !important;
  animation: unset !important;
  filter: invert(0.9) sepia(1) saturate(5) hue-rotate(120deg);
}

To be honest I don't know the exact meaning of these values (sepia, saturate, etc) in the filter option, I just get the color I want with some experimentation (trial/error) on their values.
The same values can be found in GIMP - and probably in other graphic editors - for changing the colors of an image, but I'm far from being an expert in image editing.

I'm afraid I didn't get that. Is it possible to upload an image of this effect?

5 Likes

That would be ideal. I'll just need to figure out a filter to get maia green =)

Edit: actually the code you posted is close enough

1 Like

I use it on my own setup of "Manjaro-fied" Firefox to change the colors of some build-in icons, it's pretty close to the maia color. If you want a green icon that might be closer to your theme, try reducing the 120deg value.
Maybe this is better (more bright green):

filter: invert(0.9) sepia(1) saturate(5) hue-rotate(100deg);

If you want to keep the default image of Firefox which is an .svg image (sadly I don't know its name), you can try the fill property to change its color.

As a test, comment the first two CSS rules and use this one instead:

.tab-throbber[busy]::before {
	fill: #2eb398 !important;
}

This is much easier since you can use the actual hex code of the color.

2 Likes

I'm not sure, the new throbber looks more modern, but the old one makes web page loading feel faster for some reason. I know it's not a real effect, but the difference in feel is substantial

Screenshot%20from%202019-11-07%2022-25-56

This here

1 Like

Oh, now I see what you mean - I never noticed this effect before in Firefox.

To change the color use this CSS rule

#tabbrowser-tabs {
    --tab-loading-fill: #2eb398! important;
}

I agree on that, the new icon has a more modern look, although the loading.png image looks also good (I think it's more familiar to the eye).

1 Like

Wow, works perfectly. You really are a treasure trove of useful knowledge! Do you also happen to know how how one set the text highlight color on web pages? Adwaita-maia used to do it with this theme, but it stopped working after a gtk update, and I have only managed to get it working again with the light version. If possible, I would like to set that in the firefox theme.

1 Like

Thanks for your kind words Matti, I really appreciate it!
I mainly use the Browser Toolbox option to find any CSS class/ID of FF's interface I want to change.
In case you're interested, you can read about this tool in these pages:

It might be a little tricky at first, but after using it for a while I think you'll find it a very useful tool.


Regarding the highlight color in web pages, I'm not sure if something like this will work:

*::selection {
    background: #2eb398 !important;
    color: #ffffff !important;
}
2 Likes

Thank you!

unfortunately this piece of css doesn't seem to work. But thank you anyway!

I updated the unstable branch now with the latest adwaita-maia and firefox-gnome-theme-maia

1 Like

I just tested your theme Matti, you've done a great job! :+1:
The symbolic tab icons effect is a nice touch to the theme, I never noticed something like this before.

Regarding the text highlight/selection, sorry about that, I should have mentioned that you have to place the CSS code in a file called userContent.css inside the chrome folder. Copy it to the file - no other special statements are needed - and it will work.

The userContent.css file is for styling elements of web pages, which is what you want in this case, while the userChrome.css file is for styling elements of the browser's interface.

If there is anything else I can help with, please let me know!

1 Like

Thank you! I'll try it out

1 Like

Thank you! It works great!

1 Like

Forum kindly sponsored by