Open Bug 1296850 Opened 8 years ago Updated 2 years ago

Show standard loading indicator images in tab when busy or progress attribute are set.

Categories

(SeaMonkey :: Tabbed Browser, enhancement)

All
Unspecified
enhancement
Not set
normal

Tracking

(Not tracked)

ASSIGNED

People

(Reporter: frg, Assigned: frg)

References

Details

Attachments

(1 file, 7 obsolete files)

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.
Attached patch 1296850-indicators.patch (obsolete) — Splinter Review
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?
Attachment #8783186 - Flags: feedback?(rsx11m.pub)
Attachment #8783186 - Flags: feedback?(philip.chee)
Attachment #8783186 - Flags: feedback?(iann_bugzilla)
Attachment #8783186 - Flags: feedback?(antoine.mechelynck)
Attached image connecting.png (obsolete) —
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?
Attachment #8783186 - Flags: feedback?(rsx11m.pub)
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.
Attachment #8783186 - Flags: feedback?(antoine.mechelynck)
>>
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 :)
Attached patch 1296850-indicators-V2.patch (obsolete) — Splinter Review
Colors and speed matched. This looks imho nice in classic and modern. OSX updated too.
Attachment #8783186 - Attachment is obsolete: true
Attachment #8783237 - Attachment is obsolete: true
Attachment #8783186 - Flags: feedback?(philip.chee)
Attachment #8783186 - Flags: feedback?(iann_bugzilla)
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.
Attached patch 1296850-indicators-V3.patch (obsolete) — Splinter Review
Actually screwed up by not copying the new png files...
Attachment #8785690 - Attachment is obsolete: true
Attached patch 1296850-indicators-V3a.patch (obsolete) — Splinter Review
Final tweak. Flipped them.
Attachment #8785703 - Attachment is obsolete: true
(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
Attached image loading throbber try 2 (obsolete) —
tweaks for the new loading icon per more discussion with frg on irc
Attachment #8785691 - Attachment is obsolete: true
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.
Attachment #8785707 - Attachment is obsolete: true
Attachment #8785717 - Attachment is obsolete: true
Attachment #8785986 - Flags: ui-review?(philip.chee)
Attachment #8785986 - Flags: ui-review?(iann_bugzilla)
Depends on: 1296838
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.
Attachment #8785986 - Flags: ui-review?(philip.chee)
Comment on attachment 8785986 [details] [diff] [review]
1296850-indicators-V4.patch

I have nothing to add over what Ratty said.
Attachment #8785986 - Flags: ui-review?(iann_bugzilla)

For classic, I think the blue is a bit too bright, we should try and pick up one or two of the colours in the SM logo / or the classic reload icon.
For modern, the throbber from pastmodern-revisited is too hard to see, either pick up colours (shades of grey) from modern backgrounds / reload icon or colours from the SM logo.
I did use http://stevesouders.com/tests/busy/ to do some testing of the current WIP v5 patch but could only see the blue icons with that.

Depends on: 1699322
Depends on: 1746787
You need to log in before you can comment on or make changes to this bug.