Last Comment Bug 326817 - New APNG throbber for winstripe theme
: New APNG throbber for winstripe theme
Product: Firefox
Classification: Client Software
Component: Theme (show other bugs)
: Trunk
: All All
: -- normal with 3 votes (vote)
: Firefox 3
Assigned To: Justin Dolske [:Dolske]
: Dão Gottwald [:dao]
: 420226 (view as bug list)
Depends on: apng 421595 429580 437829
Blocks: 420226
  Show dependency treegraph
Reported: 2006-02-11 08:47 PST by Glenn Randers-Pehrson
Modified: 2008-11-11 18:41 PST (History)
37 users (show)
See Also:
Crash Signature:
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---

apng throbber (1.87 KB, image/png)
2007-04-10 17:35 PDT, Andrew Smith
no flags Details
Basic draft throbber (10.64 KB, image/png)
2008-01-15 19:55 PST, Justin Dolske [:Dolske]
no flags Details
throbber script for APNGedit (2.03 KB, application/x-javascript)
2008-01-21 01:29 PST, Justin Dolske [:Dolske]
no flags Details
scaling script for APNGedit (1.25 KB, text/plain)
2008-01-21 01:31 PST, Justin Dolske [:Dolske]
no flags Details
Basic draft throbber v.2 (11.92 KB, image/png)
2008-01-21 01:34 PST, Justin Dolske [:Dolske]
no flags Details
Draft Vistaesque throbber v.1 (17.04 KB, image/png)
2008-01-21 02:41 PST, Justin Dolske [:Dolske]
no flags Details
I made my own vista throbber. It's not great, but it's based on the one on vista. (11.29 KB, image/png)
2008-02-11 02:21 PST, Josh Tumath
no flags Details
A reticule take (15.16 KB, image/png)
2008-02-11 12:40 PST, Wesley Johnston (:wesj)
no flags Details
Proto throbber (8.81 KB, image/png)
2008-02-14 12:01 PST, Tim Babych
no flags Details
Still Throbber (916 bytes, image/png)
2008-02-20 21:28 PST, jfftck
no flags Details
Throbber Animated (7.11 KB, image/png)
2008-02-20 21:49 PST, jfftck
no flags Details
Throbber Animated (7.15 KB, image/png)
2008-02-21 21:07 PST, jfftck
no flags Details
Still Throbber v1.1 (950 bytes, image/png)
2008-02-21 21:08 PST, jfftck
no flags Details
Throbber Animated v1.1 (7.12 KB, image/png)
2008-02-21 21:09 PST, jfftck
no flags Details
'slinky' style throbber (16.40 KB, image/png)
2008-03-04 20:29 PST, Ryan A. C.
no flags Details
Spinning commet vista-like throbber concept (38.71 KB, image/png)
2008-03-08 14:52 PST, Ryan A. C.
no flags Details
Plan B v.1 (12.06 KB, image/png)
2008-04-14 00:35 PDT, Justin Dolske [:Dolske]
mbeltzner: ui‑review+
mbeltzner: approval1.9+
APNG Edit script for Plan B (3.64 KB, application/x-javascript)
2008-04-14 00:35 PDT, Justin Dolske [:Dolske]
no flags Details
Plan B v.1 (notloading) (294 bytes, image/png)
2008-04-17 01:53 PDT, Justin Dolske [:Dolske]
mbeltzner: ui‑review+
mbeltzner: approval1.9+
"Plan B" contrast (8.67 KB, image/png)
2008-04-17 11:31 PDT, Kai Liu
no flags Details
Aero loading icon (75.62 KB, application/octet-stream)
2008-04-17 15:30 PDT, Recall
no flags Details
Basic draft throbber v.2 (11.92 KB, image/png)
2008-11-11 18:41 PST, goldbug
no flags Details

Description Glenn Randers-Pehrson 2006-02-11 08:47:47 PST
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 2007-03-24 20:52:34 PDT
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 2007-03-28 05:51:47 PDT
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 2007-04-10 17:35:31 PDT
Created attachment 261199 [details]
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] 2008-01-15 19:55:20 PST
Created attachment 297304 [details]
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] 2008-01-16 09:25:56 PST
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) 2008-01-16 13:46:27 PST
>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] 2008-01-21 01:29:33 PST
Created attachment 298234 [details]
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] 2008-01-21 01:31:52 PST
Created attachment 298235 [details]
scaling script for APNGedit

This scales an animation down by 10x.

APNGedit is at
Comment 9 Justin Dolske [:Dolske] 2008-01-21 01:34:37 PST
Created attachment 298236 [details]
Basic draft throbber v.2

Modified with a narrower line width (2.0 pixels instead of 3.0).
Comment 10 Justin Dolske [:Dolske] 2008-01-21 02:41:55 PST
Created attachment 298241 [details]
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 2008-02-11 02:21:50 PST
Created attachment 302560 [details]
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) 2008-02-11 12:40:31 PST
Created attachment 302650 [details]
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] 2008-02-11 13:03:53 PST
(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 2008-02-14 12:01:36 PST
Created attachment 303331 [details]
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 )
Comment 15 Dão Gottwald [:dao] 2008-02-14 13:22:08 PST
The Mac throbber's animation is invisible on black.
Comment 16 jfftck 2008-02-20 21:28:09 PST
Created attachment 304669 [details]
Still Throbber
Comment 17 jfftck 2008-02-20 21:49:18 PST
Created attachment 304671 [details]
Throbber Animated
Comment 18 jfftck 2008-02-21 21:07:30 PST
Created attachment 304901 [details]
Throbber Animated

Corrected version that has the first frame display also.
Comment 19 jfftck 2008-02-21 21:08:49 PST
Created attachment 304902 [details]
Still Throbber v1.1

Another take on the throbber
Comment 20 jfftck 2008-02-21 21:09:40 PST
Created attachment 304903 [details]
Throbber Animated v1.1

Another take on an animated throbber
Comment 21 Alex Faaborg [:faaborg] (Firefox UX) 2008-02-29 16:55:52 PST
*** Bug 420226 has been marked as a duplicate of this bug. ***
Comment 22 Ryan A. C. 2008-03-04 20:29:40 PST
Created attachment 307393 [details]
'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. 2008-03-08 14:52:34 PST
Created attachment 308224 [details]
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] 2008-04-06 23:45:36 PDT
See also: bug 426723, a throbber for awesomebar search activity.
Comment 25 Justin Dolske [:Dolske] 2008-04-08 22:44:05 PDT
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] 2008-04-14 00:35:07 PDT
Created attachment 315477 [details]
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] 2008-04-14 00:35:53 PDT
Created attachment 315478 [details]
APNG Edit script for Plan B
Comment 28 Justin Dolske [:Dolske] 2008-04-14 00:37:11 PDT
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] 2008-04-14 13:56:38 PDT
How about using the Linux throbber?
Comment 30 Justin Dolske [:Dolske] 2008-04-14 18:24:49 PDT
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] 2008-04-14 23:39:23 PDT
If I read bug 408996 correctly, the spinner was created by tango artists with being the inspiration rather than any platform conventions.
Comment 32 Darren Kalck [:D-Kalck] 2008-04-15 00:26:06 PDT
That one looks awesome.
Comment 33 Justin Dolske [:Dolske] 2008-04-17 01:53:08 PDT
Created attachment 316188 [details]
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] 2008-04-17 01:56:49 PDT
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 2008-04-17 11:31:40 PDT
Created attachment 316267 [details]
"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 2008-04-17 15:30:45 PDT
Created attachment 316303 [details]
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) 2008-04-17 19:51:42 PDT
>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] 2008-05-09 11:04:18 PDT
Closing, per comment 39. No more tweaking, time to ship RC1. Future throbber changes can be proposed in new bugs.
Comment 39 goldbug 2008-11-11 18:41:41 PST
Created attachment 347696 [details]
Basic draft throbber v.2

Note You need to log in before you can comment on or make changes to this bug.