Closed Bug 326817 Opened 19 years ago Closed 16 years ago

New APNG throbber for winstripe theme


(Firefox :: Theme, defect)

Not set



Firefox 3


(Reporter: glennrp+bmo, Assigned: Dolske)




(19 files, 3 obsolete files)

2.03 KB, application/x-javascript
1.25 KB, text/plain
11.92 KB, image/png
17.04 KB, image/png
11.29 KB, image/png
15.16 KB, image/png
8.81 KB, image/png
916 bytes, image/png
7.15 KB, image/png
950 bytes, image/png
7.12 KB, image/png
16.40 KB, image/png
38.71 KB, image/png
12.06 KB, image/png
: ui-review+
: approval1.9+
3.64 KB, application/x-javascript
294 bytes, image/png
: ui-review+
: approval1.9+
8.67 KB, image/png
75.62 KB, application/octet-stream
11.92 KB, image/png
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.
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.
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!
Attached image apng throbber (obsolete) —
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.
Assignee: skinability → nobody
Component: Skinability → General
Product: Core → Firefox
QA Contact: general
Summary: Chrome should use animated PNG instead of GIF for throbbers → Chrome should use animated PNG (APNG) instead of GIF for throbbers
Target Milestone: --- → Firefox 3 M11
Assignee: nobody → dolske
Attached image Basic draft throbber (obsolete) —
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.
Attachment #261199 - Attachment is obsolete: true
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 :)
>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.
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.
This scales an animation down by 10x.

APNGedit is at
Modified with a narrower line width (2.0 pixels instead of 3.0).
Attachment #297304 - Attachment is obsolete: true
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).
Target Milestone: Firefox 3 beta3 → Firefox 3 beta4
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.
Attached image 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).
(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.
Attached image 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 )
The Mac throbber's animation is invisible on black.
Attached image Still Throbber
Attached image Throbber Animated (obsolete) —
Attached image Throbber Animated
Corrected version that has the first frame display also.
Attachment #304671 - Attachment is obsolete: true
Attached image Still Throbber v1.1
Another take on the throbber
Attached image Throbber Animated v1.1
Another take on an animated throbber
Blocks: 420226
Attached image '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.
Target Milestone: Firefox 3 beta4 → Firefox 3
Depends on: 421595
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.
See also: bug 426723, a throbber for awesomebar search activity.
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.
Assignee: dolske → nobody
Component: General → Theme
QA Contact: general → theme
Summary: Chrome should use animated PNG (APNG) instead of GIF for throbbers → New APNG throbber for winstripe theme
Assignee: nobody → dolske
Attached image 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 on attachment 315477 [details]
Plan B v.1

[And yes, Dao, I even checked it on dark backgrounds! :-)]
Attachment #315477 - Flags: ui-review?(beltzner)
How about using the Linux throbber?
I had suggested that, but Alex wanted to avoid using stuff that's native to one platform on another.
If I read bug 408996 correctly, the spinner was created by tango artists with being the inspiration rather than any platform conventions.
That one looks awesome.
Attachment #315477 - Flags: ui-review?(beltzner)
Attachment #315477 - Flags: ui-review+
Attachment #315477 - Flags: approval1.9+
Attached image 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.
Attachment #316188 - Flags: ui-review?(beltzner)
Attachment #316188 - Flags: approval1.9?
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
Attachment #316188 - Flags: ui-review?(beltzner)
Attachment #316188 - Flags: ui-review+
Attachment #316188 - Flags: approval1.9?
Attachment #316188 - Flags: approval1.9+
Attached image "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.
Attached file 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.
Depends on: 429580
>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
No longer depends on: mng, apngspec
Closing, per comment 39. No more tweaking, time to ship RC1. Future throbber changes can be proposed in new bugs.
Closed: 16 years ago
Resolution: --- → FIXED
Depends on: 437829
You need to log in before you can comment on or make changes to this bug.