New APNG throbber for winstripe theme

RESOLVED FIXED in Firefox 3

Status

()

Firefox
Theme
RESOLVED FIXED
12 years ago
9 years ago

People

(Reporter: Glenn Randers-Pehrson, Assigned: Dolske)

Tracking

Trunk
Firefox 3
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(19 attachments, 3 obsolete attachments)

2.03 KB, application/x-javascript
Details
1.25 KB, text/plain
Details
11.92 KB, image/png
Details
17.04 KB, image/png
Details
11.29 KB, image/png
Details
15.16 KB, image/png
Details
8.81 KB, image/png
Details
916 bytes, image/png
Details
7.15 KB, image/png
Details
950 bytes, image/png
Details
7.12 KB, image/png
Details
16.40 KB, image/png
Details
38.71 KB, image/png
Details
12.06 KB, image/png
beltzner
: ui-review+
beltzner
: approval1.9+
Details
3.64 KB, application/x-javascript
Details
294 bytes, image/png
beltzner
: ui-review+
beltzner
: approval1.9+
Details
8.67 KB, image/png
Details
75.62 KB, application/octet-stream
Details
11.92 KB, image/png
Details
(Reporter)

Description

12 years ago
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.
(Reporter)

Comment 1

10 years ago
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

10 years ago
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

10 years ago
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.
(Assignee)

Updated

10 years ago
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)

Updated

10 years ago
Assignee: nobody → dolske
(Assignee)

Comment 4

10 years ago
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.
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.
(Assignee)

Comment 7

10 years ago
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.
(Assignee)

Comment 8

10 years ago
Created attachment 298235 [details]
scaling script for APNGedit

This scales an animation down by 10x.

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

Comment 9

10 years ago
Created attachment 298236 [details]
Basic draft throbber v.2

Modified with a narrower line width (2.0 pixels instead of 3.0).
Attachment #297304 - Attachment is obsolete: true
(Assignee)

Comment 10

10 years ago
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).
(Assignee)

Updated

10 years ago
Target Milestone: Firefox 3 beta3 → Firefox 3 beta4

Comment 11

10 years ago
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.
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).
(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

10 years ago
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 http://blog.mozilla.com/dolske/2008/02/10/all-glory-to-the-hypno-throbber/ )
The Mac throbber's animation is invisible on black.

Comment 16

10 years ago
Created attachment 304669 [details]
Still Throbber

Comment 17

10 years ago
Created attachment 304671 [details]
Throbber Animated

Comment 18

10 years ago
Created attachment 304901 [details]
Throbber Animated

Corrected version that has the first frame display also.
Attachment #304671 - Attachment is obsolete: true

Comment 19

10 years ago
Created attachment 304902 [details]
Still Throbber v1.1

Another take on the throbber

Comment 20

10 years ago
Created attachment 304903 [details]
Throbber Animated v1.1

Another take on an animated throbber
(Assignee)

Updated

9 years ago
Blocks: 420226
Duplicate of this bug: 420226

Comment 22

9 years ago
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.
(Assignee)

Updated

9 years ago
Target Milestone: Firefox 3 beta4 → Firefox 3
(Assignee)

Updated

9 years ago
Depends on: 421595

Comment 23

9 years ago
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.
(Assignee)

Comment 24

9 years ago
See also: bug 426723, a throbber for awesomebar search activity.
(Assignee)

Comment 25

9 years ago
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)

Updated

9 years ago
Assignee: nobody → dolske
(Assignee)

Comment 26

9 years ago
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.
(Assignee)

Comment 27

9 years ago
Created attachment 315478 [details]
APNG Edit script for Plan B
(Assignee)

Comment 28

9 years ago
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?
(Assignee)

Comment 30

9 years ago
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 http://ajaxload.info/cache/FF/FF/FF/2E/34/36/21-1.gif 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+
(Assignee)

Comment 33

9 years ago
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.
Attachment #316188 - Flags: ui-review?(beltzner)
Attachment #316188 - Flags: approval1.9?
(Assignee)

Comment 34

9 years ago
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+

Comment 35

9 years ago
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

9 years ago
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.
(Assignee)

Updated

9 years ago
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
(Assignee)

Updated

9 years ago
No longer depends on: 18574, 257263
(Assignee)

Comment 38

9 years ago
Closing, per comment 39. No more tweaking, time to ship RC1. Future throbber changes can be proposed in new bugs.
Status: NEW → RESOLVED
Last Resolved: 9 years ago
Resolution: --- → FIXED

Updated

9 years ago
Depends on: 437829

Comment 39

9 years ago
Created attachment 347696 [details]
Basic draft throbber v.2
You need to log in before you can comment on or make changes to this bug.