326817 - New APNG throbber for winstripe theme

Status: RESOLVED FIXED

(Firefox :: Theme, defect)

Description

[Glenn Randers-Pehrson]

This is a spinoff of bug #8415.  Throbbers would look better if they used partial transparency to reduce aliasing (jaggy edges).  This can be accomplished with PNG's alpha channel.  "Animated PNG" could be conveyed via the MNG format, via the  proposed APNG format, or via an enhanced GIF format that contains PNG images inside "GIF application extension" blocks.

Comment 1

[Glenn Randers-Pehrson]

Now that APNG has been defined, work could start on this.  Or we could wait a few more weeks to see if MPNG emerges.  Tools already exist to do most of the work to make MPNG files.

Comment 2

[Gerard Juyn]

I would certainly suggest to everyone to wait until there is a positive vote on the PNG-group discussion list to any type of "animated" PNG format, before starting to create invalid PNG's. It's nice for testing, but please don't start using it for publication!

Comment 3

[Andrew Smith]

Attachment: apng throbber

Attached an APNG version of the throbber. It's a brute conversion, but it ought to work.

I am trying to make firefox use it but it looks like I don't know whatI'm doing so if someone else cares to do that, they can use the attached image.

The new throbber will become invalid if the vote on the PNG mailing list goes in favor, but updating it won't be a big deal.

Comment 4

[Justin Dolske [:Dolske]]

Attachment: Basic draft throbber

Beltzner, Faaborg, and I had a bit of IRC discussion last month about some ideas for an updated throbber animation. The basic idea we toyed with was a circle that... well, see attachment. :-) This was the last rough mockup; it needs more tuning of line width, and color/texture to fit in with the updated FF3 themes.

Comment 5

[Vladimir Vukicevic [:vlad] [:vladv] (needinfo me, slow to respond)]

I like the general idea, the thing that jumps out at me is that it's a much more bold/intense throbber than the current one.  It's almost distracting in a way -- I've got the throbber loaded in a tab, such that the tab's favicon is animating, and it keeps catching my eye.  What would be ideal would be some kind of throbber that has separate start/end animations, where the start and end bits would be eye-catching but the cycle part wouldn't be.

That said, I don't think we have the tech in place to do that kind of looping :)

Comment 6

[Alex Faaborg [:faaborg] (Firefox UX)]

>keeps catching my eye

In some ways this could be considered an advantage.  I'm a little concerned that Firefox isn't effectively providing users with feedback.  For instance, the use of a large blue progress bar in Safari's location bar gives you a very clear indication of progress, something that you can even see with your peripheral vision.

>much more bold/intense throbber

This has a lot to do with the level of contrast between the foreground and background, and the line width.  We can play with tweaking both to get a lighter feel.

To fill in some of the design goals that led to this current draft, we wanted a throbber that felt fast, had a very clean and simplistic design, and was sufficiently different from other browsers to establish a small amount of product identity.

Comment 7

[Justin Dolske [:Dolske]]

Attachment: throbber script for APNGedit

This is the script I used for rendering the throbber. The default dimensions are scaled up by 10x, I then scale the animation down by 10x. This is because pixels along the circle border seem to vary depending on the length of the arc (bizarrely), if you zoom in on attachment 297304 [details] you can see that it looks noisy, even in part of the animation that should be changing.

Comment 8

[Justin Dolske [:Dolske]]

Attachment: scaling script for APNGedit

This scales an animation down by 10x.

APNGedit is at https://addons.mozilla.org/en-US/firefox/addon/5519

Comment 9

[Justin Dolske [:Dolske]]

Attachment: Basic draft throbber v.2

Modified with a narrower line width (2.0 pixels instead of 3.0).

Comment 10

[Justin Dolske [:Dolske]]

Attachment: Draft Vistaesque throbber v.1

Ran with an idea for Vistaesque styling... This was a little tricky to make because canvas's "destination-in" seems to be busted on OS X at the moment, and the downscaling on Linux (well, Solaris) seem to look crappy. I suppose that's what I get for trying to make a Windows throbber on not-Windows. :) Line width here is 2.5 pixels (a bit thicker than the last attachment).

Comment 11

[Josh Tumath]

Attachment: I made my own vista throbber. It's not great, but it's based on the one on vista.

I made my own vista throbber. It's not great, but it's based on the one on vista. I don't plan that very one being used, because it seems a bit choppy.

Comment 12

[Wesley Johnston (:wesj)]

Attachment: A reticule take

A take on the reticule approach. Done with SVG so I don't think the transparency carried over well in the conversion. Also, it seems to screw up in the location bar or as a tab favicon (but looks kinda neat).

Comment 13

[Dão Gottwald [:dao]]

(In reply to comment #12)
> Created an attachment (id=302650) [details]
> A reticule take
> 
> it seems to screw up in
> the location bar or as a tab favicon (but looks kinda neat).

because it's not 16x16 pixels but 14x14.

Comment 14

[Tim Babych]

Attachment: Proto throbber

I wonder why Proto throbbed is not listed. While may be not suited for XP/Vista it looks great on Linux.
(taken from http://blog.mozilla.com/dolske/2008/02/10/all-glory-to-the-hypno-throbber/ )

Comment 15

[Dão Gottwald [:dao]]

The Mac throbber's animation is invisible on black.

Comment 16

[jfftck]

Attachment: Still Throbber

Comment 17

[jfftck]

Attachment: Throbber Animated

Comment 18

[jfftck]

Attachment: Throbber Animated

Corrected version that has the first frame display also.

Comment 19

[jfftck]

Attachment: Still Throbber v1.1

Another take on the throbber

Comment 20

[jfftck]

Attachment: Throbber Animated v1.1

Another take on an animated throbber

Comment 22

[Ryan A. C.]

Attachment: 'slinky' style throbber

Draft throbber with a 'slinky-like' animation effect
I might try this with the reticle-like design if I get a chance, probably dual slinkys, one on each corner.

Comment 23

[Ryan A. C.]

Attachment: Spinning commet vista-like throbber concept

This is more of a concept than anything, I would think that maybe Alex or someone could make better graphics if this throbber style was accepted. The blue isn't quite right for the vista theme colors, and the animation looks strangely not circular.

Comment 24

[Justin Dolske [:Dolske]]

See also: bug 426723, a throbber for awesomebar search activity.

Comment 25

[Justin Dolske [:Dolske]]

Updating summary...

The OS X theme (pinstripe) is already using an APNG throbber that matches the native platform throbber.

Bug 408996 covers adding an APNG throbber to the linux theme (gnomestripe) that matches the native platform throbber.

That leaves the Windows theme (winstripe), so whatever APNG throbber we decide on here will actually only be used on Windows.

I just landed bug 421595, which I suppose actually meets the original requirements of this bug. It's just an exact copy of the current throbber (as APNG, instead of GIF), so this bug now mutates slightly to just cover an updated design for the APNG throbber.

Comment 26

[Justin Dolske [:Dolske]]

Attachment: Plan B v.1

Talked with Alex, bounced around some more ideas (including various attachments here), but decided any significant redesign was going to take more time/effort than is really remaining.

OTOH, as beltzner alluded to in 421595, the old throbber is kind of crufty in the new theme. So, Plan B is to just rework the old throbber to be nicer, but not radically different.

Comment 27

[Justin Dolske [:Dolske]]

Attachment: APNG Edit script for Plan B

Comment 28

[Justin Dolske [:Dolske]]

Comment on attachment 315477 [details]
Plan B v.1

[And yes, Dao, I even checked it on dark backgrounds! :-)]

Comment 29

[Dão Gottwald [:dao]]

How about using the Linux throbber?

Comment 30

[Justin Dolske [:Dolske]]

I had suggested that, but Alex wanted to avoid using stuff that's native to one platform on another.

Comment 31

[Dão Gottwald [:dao]]

If I read bug 408996 correctly, the spinner was created by tango artists with http://ajaxload.info/cache/FF/FF/FF/2E/34/36/21-1.gif being the inspiration rather than any platform conventions.

Comment 32

[Darren Kalck [:D-Kalck]]

That one looks awesome.

Comment 33

[Justin Dolske [:Dolske]]

Attachment: Plan B v.1 (notloading)

Argh, just like with the GTK version I forgot about the notloading version until the last moment. It's sufficiently safe and simple that I just went ahead and landed this with the throbber, and am requesting ui-r after the fact.

Comment 34

[Justin Dolske [:Dolske]]

Checked in, but leaving this bug open for any continuing tweaks (Alex and I talked about a few) or better-than-Plan-B versions.

Checking in toolkit/themes/winstripe/global/icons/loading_16-aero.png;
  new revision: 1.2; previous revision: 1.1
Checking in toolkit/themes/winstripe/global/icons/loading_16.png;
  new revision: 1.2; previous revision: 1.1
Checking in toolkit/themes/winstripe/global/icons/notloading_16-aero.png;
  new revision: 1.2; previous revision: 1.1
Checking in toolkit/themes/winstripe/global/icons/notloading_16.png;
  new revision: 1.2; previous revision: 1.1

Comment 35

[Kai Liu]

Attachment: "Plan B" contrast

New throbber looks good, except for one thing: it's a little too light.  This screenshot compares the new throbber on FF3 with the old one on FF2.  The not-loading is barely visible, and half of the active throbber simply doesn't show up.  Now, if I mouse over the loading tab, the tab's background lightens up and more of the active throbber shows up, but on an inactive tab, much of it is invisible.  Of course, this would all vary based on the user's color scheme, but most themes will be somewhat lighter than my scheme (I'm using the standard 0xC0C0C0 Windows gray), so making the throbber darker will be good for those themes as well.

Comment 36

[Recall]

Attachment: Aero loading icon

Have you guys thought about using the aero loading icon or something similar to it like this attachment? It is the one that shows by the mouse cursor when loading the page.

Comment 37

[Alex Faaborg [:faaborg] (Firefox UX)]

>it's a little too light.

We are thinking about using the lighter shade so that we can make it spin faster without it grabbing too much attention.  All part of trying to make the browser feel lighter and faster than the previous version :p

Comment 38

[Justin Dolske [:Dolske]]

Closing, per comment 39. No more tweaking, time to ship RC1. Future throbber changes can be proposed in new bugs.

Comment 39

[goldbug]

Attachment: Basic draft throbber v.2