New download UI experience vs. browserAction.setIcon()

Add-ons Development
#1

So one recent addition that I’ve been enjoying is the pie-chart progress for downloads. For example, this:
image
I currently do a similar progress type of use case with browserAction.setIcon() by dynamically creating an SVG icon. The gray bar on the bottom is a progress bar:
image
Currently, it is choppy. This behavior was raised as a bug, and was closed 3 years ago as a WONTFIX in part because:

Animated icons, in general, tend to be abused by extension developers as an attention-grabbing mechanism, leading to poor user experiences.

Is there any chance Mozilla might reconsider a mechanism for smooth animations here so we too can make spifty progress indicators like Firefox now does? It’d be great if my progress indicator could be on parity with the download indicator that is right next to it. :laughing:

1 Like
#2

The way the download indicator works is that it’s a SVG sprite, so it’s always the same SVG but the hash changes. I wonder if that’d behave better for you?

1 Like
#3

@freaktechnik I’m familiar with sprites in general but how is the current rect/view changed on the SVG without simply calling setIcon again? You’ve piqued my curiosity. If a sprite is all I need, I could definitely make that work.

#4

Just curious, are SVG icons supported in Chrome/Safari? Because in manifest they are not.

As an alternative solution you could use setBadgeText to display a Unicode pie charts:
◔ ◑ ◕ :smiley:
Or maybe just percent number “75%”.

#5

No, you would have to call setIcon again, there is no way around that, even if there was some dedicated animation API, you’d still have to report your progress. Using an SVG sprite just makes it so there is a minimal change between steps (essentially just the part of the SVG that is rendered changes).

#6

Huh, well I’m curious now because I’m using a 32x32 icon. Anything using even simplistic double buffering should have absolutely no problem performance-wise with such a basic icon; if anything I’d expect SVG to be much heavier to render … @freaktechnik I don’t suppose you have a link hanging around for where you found the implementation? I think I might need to dig into what they’re doing.