While working on bug 1296838 I found that the standard loading indicator looks a little outdated compared to the global one. Also we have no progress indicator. There is Bug 581042 but it doesn't cover the actual images.

Use global loading indicator image for busy and Firefox indicator for progress. Progress also has a HiDPI icon not yet used. Looks a little dull with the gray only but I am no graphics designer and don't have a program to change it right now. Old loading.gif not deleted in case its needed elsewhere. What do you think?

Brings a little blue color into your life and gets the Grey out. RWPaint can edit animated pngs. Also did reverse the direction. This didn't look good when switching from progress to busy also changed direction. HiDPI version also edited.

Comment on attachment 8783186 [details] [diff] [review] 1296850-indicators.patch Rather obviously, this has to go on top of bug 1296838 attachment 8783179 [details] [diff] [review], which of course I /didn't/ apply when testing this first. ;-) So, the plumbing works as advertised in both classic and modern themes, but the two states "connecting" and "loading" seem a bit too different. There is the change in color, that's good; you've got rid of the counter rotation, that's good too. The icon changes from a rotating comet with varying thickness to a rotating wheel with identical thickness and just fading. I'm wondering if those two icons shouldn't be more similar in shape, or am I missing the metaphor behind this?

Comment on attachment 8783237 [details] connecting.png If you stay with the clockwise rotation, that comet is now flying backwards. Thus, swap the order again and mirror each frame along one of the axes, then it should be correct.

(In reply to Frank-Rainer Grahl from comment #1) > Created attachment 8783186 [details] [diff] [review] > 1296850-indicators.patch > > Use global loading indicator image for busy and Firefox indicator for > progress. Progress also has a HiDPI icon not yet used. Looks a little dull > with the gray only but I am no graphics designer and don't have a program to > change it right now. > > Old loading.gif not deleted in case its needed elsewhere. What do you think? Comment about the "connecting.png" image attached as a separate attachment: I don't know. I'll go with whatever other people asked for feedback say. Personally I use the "EarlyBlue" complete theme, whose indicator is a simple circumference with on arrowhead on it, and that image is in line with the "no-nonsense" look of the rest of the theme. Your image may or may not go well with the default theme —it's hard for me to make an opinion about that— but I think it would go well with neither the Modern theme nor my favourite EarlyBlue. Beware that IIRC any element missing from the current theme will be "borrowed" from the default theme. P.S. I've always hated the flashy and oversimplified "kiddie-toy" look&feel of, for instance, the Firefox Options dialog. You may call our own Preferences dialog "looking outdated", I call it "no-nonsense" instead. It puts a lot of preferences right at my fingertips, in a tree-wize organization that makes sense to me, while using the look&feel, but not the backends, of Netscape 4.7.

>> So, the plumbing works as advertised in both classic and modern themes, but the two states "connecting" and "loading" seem a bit too different. << Consider it as a preview:) Just wanted some feedback what you think. I also never did edit animiated icons before. The wheel is the standard icon in toolkit. I think this one should not be changed but we can do and copy it if desired. The connecting icon is the one form Firefox. If we want it it should be color matched and corrected to the loading icon. We could also use the same icon for progress and busy. Tony: This look good to me in classic and modern and also under Linux. The old one just doesn't match the OS themes very well. And also vastly prefer out preferences dialog :)

Colors and speed matched. This looks imho nice in classic and modern. OSX updated too.

Followup to some discussion with frg on IRC: Unlike the current loading throbber, the throbbers in the patch rotate the opposite way from my custom "second" throbber, and the change in rotation direction looks weird IMO. FRG's connecting.png, with this slight tweak, looks nice here.

.tabbrowser-tab[busy] { - list-style-image: url("chrome://communicator/skin/icons/loading.png"); + list-style-image: url("chrome://communicator/skin/icons/connecting.png"); +} + +.tabbrowser-tab[progress] { + list-style-image: url("chrome://global/skin/icons/loading.png"); } You have probably not seen the mac icon: https://dxr.mozilla.org/comm-central/rev/2540c39cc95816f35f99e9b5f52bf21d435143f1/suite/themes/classic/mac/communicator/icons/loading.png :-) So this might not look so nice. Also, there's no mac icon in chrome://global/skin/icons/loading.png afaics.

>> You have probably not seen the mac icon: Saw it. Its the old loading icons from Firefox imho. Left it in the jar.mn because at least the Windows icon is used in some other css files. >> So this might not look so nice. Also, there's no mac icon in chrome://global/skin/icons/loading.png afaics. You sure? It was copied in a pretty recent in m-c. See Bug 1280510. The 2x might be better suited for osx.

Actually screwed up by not copying the new png files...

Final tweak. Flipped them.

(In reply to Frank-Rainer Grahl from comment #10) > >> You have probably not seen the mac icon: > > Saw it. Its the old loading icons from Firefox imho. Left it in the jar.mn > because at least the Windows icon is used in some other css files. > It's an Asynchronous Progress Indicator, see https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/OSXHIGuidelines/ControlsIndicators.html and it fits in rather well with the tabs background. I also think we're using it in some other places. Firefox used it for some years ago and then they switched to vista-styled icons all over.

>> It's an Asynchronous Progress Indicator Ah ok I see. This one then fits in indeed better and shouldnÄt be changed. Should really buy a MAC for testing. On Windows and Linux the other ones imho look better. Thanks

tweaks for the new loading icon per more discussion with frg on irc

Put Kevins png into the patch and removed the osx changes. Tested on Windows XP, Win 7 Aero and Linux kde4 gtk2 and it looks good imho.

Comment on attachment 8785986 [details] [diff] [review] 1296850-indicators-V4.patch I'm not too keen on "comet" shapes in general. Also I think the "comet" shape in connecting.png is different from the loading.png which makes for a jarring change when the graphic changes. (In reply to rsx11m from comment #3) > that's good too. The icon changes from a rotating comet with varying > thickness to a rotating wheel with identical thickness and just fading. I'm > wondering if those two icons shouldn't be more similar in shape, or am I > missing the metaphor behind this? I agree both should be constant thickness. My personal preference is to use the same shape for connecting and loading. For example. Bug 603541 (create theme-specific throbber apng files for tab progress throbbers) Green: http://hg.mozilla.org/mozilla-central/raw-file/eea87fd03135/browser/themes/winstripe/browser/tabbrowser/loading.png Blue: http://hg.mozilla.org/mozilla-central/raw-file/eea87fd03135/browser/themes/pinstripe/browser/tabbrowser/loading.png Orange/Red-ish: http://hg.mozilla.org/mozilla-central/raw-file/eea87fd03135/browser/themes/gnomestripe/browser/tabbrowser/loading.png I would use the orange/red for connecting and the blue or green for loading. For Modern I would look to Past Modern Revisited which is uses the MPLv2 licence. https://addons.palemoon.org/themes/complete/past-modern-revisited/ https://github.com/Lootyhoof/pastmodern-revisited https://github.com/Lootyhoof/pastmodern-revisited/blob/master/src/chrome/browser/throbber-anim.png Suggestions: 1. This should be colourized a bit to match the Modern tab backgrounds. 2. Make the connecting state rotate in the opposite direction.

Comment on attachment 8785986 [details] [diff] [review] 1296850-indicators-V4.patch I have nothing to add over what Ratty said.