897099 - Work - Circular Progressbar Images

Status: RESOLVED FIXED

(Tracking Graveyard :: Metro Operations, defect)

Description

[Marina Samuel [:emtwo]]

Attachment: progress.png

Stephen, would we be able to get some images for the circular downloads progress indicator? I've attached a screenshot from the downloads doc here https://bug876019.bugzilla.mozilla.org/attachment.cgi?id=761217

We need a full blue circle that looks similar to the one in the image. Also, perhaps a grey circle that would go behind the blue one or an entire download image which includes the grey circle. Either works. Thanks!

Comment 2

[Stephen Horlander [:shorlander]]

Attachment: Download Progress Filled

Comment 3

[Stephen Horlander [:shorlander]]

Attachment: Download Progress Background

Comment 4

[Sam Foster [:sfoster] (he/him)]

Attachment: Update downloads progress ring graphics

I ended up adding a track/background element in the binding to take the ring-background image. That made it easier to toggle it with the "progress" attribute. 
I also found some scaling/skewing of the image due to a mismatch of image/element size and was able to clean that up.

Comment 5

[Sam Foster [:sfoster] (he/him)]

Attachment: Screenshot with new graphics in place

This is how it ends up looking.

Comment 6

[Matt Brubeck (:mbrubeck)]

Comment on attachment 795712 [details] [diff] [review]
Update downloads progress ring graphics

Review of attachment 795712 [details] [diff] [review]:
-----------------------------------------------------------------

::: browser/metro/base/content/bindings/circularprogress.xml
@@ +11,5 @@
>    <binding id="circular-progress-indicator">
>      <content>
>        <xul:stack>
>          <xul:toolbarbutton anonid="progressButton" class="circularprogressindicator-progressButton appbar-secondary"/>
> +        <html:div anonid="progressTrack" class="circularprogressindicator-progressTrack"></html:div>

Suggestion: You could use inherits="progress" here to simplify the CSS selectors.

Comment 7

[Sam Foster [:sfoster] (he/him)]

Good thought mbrubeck. Done (or at least I think that's what you had in mind) 

On fx-team: https://hg.mozilla.org/integration/fx-team/rev/f30dadf4c937

Comment 8

[Tim Taubert [:ttaubert] (inactive)]

https://hg.mozilla.org/mozilla-central/rev/f30dadf4c937