Side to side ball?

[CaJazzman]

This is how my userChrome.css file looks:

Code: Select all

/* Firefox userChrome.css */

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* FILL BOOKMARK FOLDERS WITH GIVEN COLOUR */
/* THIS ALSO WORKS WHEN USING "Show All Bookmarks" */
.bookmark-item[container], treechildren::-moz-tree-image(container) {
  fill: orange !important;
}

/* tabs on bottom */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
#toolbar-menubar .toolbarbutton-text { display: block !important; }
#nav-bar .toolbarbutton-text { display: block !important; }
/* Search Bar width */
.searchbar-textbox {
max-width: 500px !important;
min-width: 300px !important; }
 .tab-background {
border-radius: 16px 16px 0px 0px !important;
border-image: none !important; }

.tab-line {
display: none; }
#TabsToolbar {-moz-box-ordinal-group:1000!important}?

/* Pre-57 rotating throbbers - I found this shared by Jefferson Scher */
.tab-throbber[busy]::before {
/*  background-image: url("chrome://global/skin/icons/loading.png") !important; */
/* The line below is an adaptation of the line above to work with an image file contained in the chrome folder. */
  background-image: url("tabthrobber_fx56_loading.png") !important;
  animation: unset !important;
}
.tab-throbber[busy]:not([progress])::before {
  filter: grayscale(100%) !important;
}
@media (min-resolution: 2dppx) {
  .tab-throbber[busy]::before {
/*    background-image: url("chrome://global/skin/icons/loading@2x.png") !important; */
/* The line below is an adaptation of the line above to work with an image file contained in the chrome folder. */
    background-image: url("tabthrobber_fx56_loading@2x.png") !important;
  }
}

Tell me what I'm doing wrong, since it's still having the bouncing ball?

[BuddhaNature]

CaJazzman,

I just tried your code and it didn't work as far as the throbber was concerned. Then I looked at this line:

Code: Select all

#TabsToolbar {-moz-box-ordinal-group:1000!important}?

I deleted the ? question mark character at the end of that line of code then the change to the throbber started working fine. (Once you delete the question mark, save the userChrome.css file again, then close-down and relaunch FF. I'm assuming you do still have the two image files I previously mentioned inside your chrome folder.)

You're not allowed mistakes, even slight, itsy, bitsy mistakes in code. One mistake in the code and problems ensue.

[BuddhaNature]

But I'm thinking that, by whatever means, maybe you don't have images on your system that your code can work with so.

I don't see how that can possibly be the case, since the three of us are using the same operating system. The images are a built-in part of Firefox and not something that can be misplaced. You can enter each link into the location bar; you should be able to see the images and save a copy.

Code: Select all

chrome://global/skin/icons/loading.png
chrome://global/skin/icons/loading@2x.png

Yes, I did realise that the user can grab the images out of what is already on the system. I actually did that myself and it worked fine. However, I noted from the thread where you first posted "the throbber code" http://forums.mozillazine.org/viewtopic ... #p14783175 that you said there the following:

This style is also bound to stop working once the assets are removed from Firefox; you should save the two images and replace the URLs with your copies.

My thinking was, that, by whatever means, CalJazzman and BobbyPhoenix had had "those assets" removed on their systems. Hence, I pointed to alternative sources of the image files so that they could give that a try. I just thought it was worth a punt - nothing to lose by doing so. (Hope I've explained that clearly.)

[CaJazzman]

I did as you asked and now everything is working great. Just wanted to say thanks from an old guy!

[BuddhaNature]

From one old guy to another, thanks for the thanks, CalJazzman. Glad you got it working.

[madmudmob]

Gingerbread Man's code is working for me too

Any way to change the colour perhaps?

[LIMPET235]

Hi MMM,

The colour of the new. Blue Throbber, perhaps?

(Thanks to "Brummelchen" for the link.)
Not sure but try here...
> https://github.com/Aris-t2/CustomCSSfor ... ssic/image
& look for...
> tabthrobber_loading-fx39.png
& > tabthrobber_loading-ubuntu.png
Just left click to see what they look like, then go back.
You can check each Throbber .png if you want till you're happy.

Firefox39.png is Green
Ubuntu is Red

Then go & read GbMan's code again on how to change the URL's.

[madmudmob]

Thanks you

[LIMPET235]

You're welcome, MMM.

[Frank Lion]

... code again on how to change the URL's.

We don't usually bother to change images for simple stuff like that, but just use the hue-rotate filter.

For example, here's my ML Sea Monkey throbber going from red to green -

Code: Select all

.tabbrowser-tab[busy] {
	filter: hue-rotate(90deg) !important;
}

It's a good way of fine tuning the colour to match something else. You can adjust the hue right round to 359deg, but 359 would sort of put you back where you started.

[LIMPET235]

Well Frank.
You have astounded me once again.
What cannot be done with a little bit of code....provided of course that you know how to code.
Will see if MMM takes the "challenge" or has everything to her liking.

[madmudmob]

Oooh, errr, I'm game for trying

[CaJazzman]

Now that I have my rotating throbber working great, and now have these other colors of the throbber, I think it's awesome, that I can now change the color depending on the theme, I'm using at the time. Just hoping it will last for awhile, and it doesn't get changed because of a new update, but, that's ok too. It looks so good at this time.