Closed Bug 943201 Opened 6 years ago Closed 6 years ago

Match the Progress Download Gradient with the Page Load Gradient

Categories

(Firefox for Metro Graveyard :: Downloads, defect, P2)

x86
Windows 8.1
defect

Tracking

(firefox28 fixed, firefox29 fixed)

RESOLVED FIXED
Firefox 29
Tracking Status
firefox28 --- fixed
firefox29 --- fixed

People

(Reporter: mmaslaney, Assigned: sfoster)

References

Details

(Whiteboard: [beta28] p=1 [good first verify])

Attachments

(6 files)

Let us make the progress rule gradient the same as the page load; going from dark to light?

The progress circle is drawn on a canvas by this code:
http://mxr.mozilla.org/mozilla-central/source/browser/metro/base/content/bindings/circularprogress.xml
Attached file Download Progress
The original download gradient for reference
Flags: needinfo?(mbrubeck)
Whiteboard: [triage]
OS: Mac OS X → Windows 8.1
Flags: needinfo?(mbrubeck)
Whiteboard: [triage] → [triage][mentor=mbrubeck@mozilla.com][lang=js]
Whiteboard: [triage][mentor=mbrubeck@mozilla.com][lang=js] → [release28][mentor=mbrubeck@mozilla.com][lang=js]
I would be willing to work on this, but I do not know what the problem is exactly?
There is an image in a uniform color that gets used for the download, should that become a gradient instead of an image?
Another question is: where would I find the colors that get used for the current page load progress bar?
Flags: needinfo?(mbrubeck)
Th(In reply to Casper van Donderen from comment #2)
> I would be willing to work on this, but I do not know what the problem is
> exactly? There is an image in a uniform color that gets used for the download, should
> that become a gradient instead of an image?

Ah, you're right -- I had forgotten we use a static image for the ring:
http://mxr.mozilla.org/mozilla-central/source/browser/metro/theme/images/progresscircle.png

If we want this to act exactly like the page load progress bar, where the gradient "grows" as the progress meter fills, we probably need to get rid of the image and draw the blue gradient dynamically on the canvas instead.  I don't remember exactly why we used the image in bug 872292, but I assume the effect was hard to get right in canvas alone.

Or we could just update the image to have the gradient already painted, and use clip paths to gradually reveal it as we do now.  (Then the gradient would be "static" in the sense that a given point on the ring would always have the same color while it's visible.)

> Another question is: where would I find the colors that get used for the
> current page load progress bar?

You can find the colors for the progress bar here.  There's a background color for the container, and a semi-transparent gradient drawn on top of that for the blue "filled" portion:
http://hg.mozilla.org/mozilla-central/file/7fb91a422c5e/browser/metro/theme/browser.css#l442

(The original patch and interactive mockup are in bug 872292.)
Flags: needinfo?(mbrubeck)
I prefer the 2nd option where we update our static image to include a gradient. This should be an easier/quicker change. I think the reason we chose to use an image instead of dynamically drawing on the canvas in the first place is so that when we want to make a change to the way the progress circle looks, it would only require an image change.
The reason why I prefer the gradient to be dynamically drawn is because of its ability to display color variants based on the loading progress. From the user's perspective, it's great way to communicate completion.
Based on comment 5, let's try replacing the image with a ring drawn entirely in canvas, with a gradient using the same colors as the progress bar.  The gradient should start at the "twelve o'clock" position (top of the ring) and proceed clockwise to wherever the arc currently ends.
So we would want a circular gradient? I didn't know this is possible, I thought only radial gradients can be used, which will always have the same color, unless you move the center around, but then it will probably still not look completely clockwise.
Maybe the same effect can be accomplished using a static white overlay, rotated and clipped on top of the blue? Also, IMHO this shouldn't block release, the current implementation is on brand and (as of landing of bug 915499) adequately functional. 

But, I'll attach a file I used for prototyping and debugging which you are welcome to take and run with to explore implementations.
Might be a useful starting point for prototyping?
(In reply to Casper van Donderen from comment #7)
> So we would want a circular gradient?

Yes -- but since there's no API in canvas for creating gradients along arcs, maybe this can be simulated using a combination of 2 or more linear gradients, like in this example: http://jsfiddle.net/329z2/

Or maybe something like Sam's suggestion will work better...
I tried playing around with doing it with gradients, but that looks pretty bad, so I think I would go for the image solution with a pre-baked circular gradient alpha channel. I'm not a designer though, so that is something someone else should probably look at.
I'll have a go at this, I think I've got something sketched out that should work
Assignee: nobody → sfoster
Hey Sam, can you provide a point value.
Flags: needinfo?(sfoster)
point value: 1
Flags: needinfo?(sfoster)
These are screenshots I took of a proposed implementation, using a blue progress ring image with a gradient, overlayed by the clipped grey "track" via canvas. I rotate the progress image to keep the leading edge of the gradient at the right spot. The gradient itself is static.
Attachment #8347522 - Flags: feedback?(mmaslaney)
Here's the updated progress ring image. I rotate it so the leading edge of the gradient marks the progress around the circle, and overlay the clipped grey track to mask off the remainder. There's a little halo-ing going on with the grey on blue - previously we stacked blue on grey.
Comment on attachment 8347522 [details]
Snapshots at 0, 25, 50, 75 and 100% progress

Looking good, Sam. Concerning the gradient looking static, we could make the blue lighter on the furthest end?
Attachment #8347522 - Flags: feedback?(mmaslaney)
Blocks: metrov1it21
No longer blocks: metrov1backlog
Status: NEW → ASSIGNED
QA Contact: jbecerra
Whiteboard: [release28][mentor=mbrubeck@mozilla.com][lang=js] → [block28] p=1
Patch updates the circleprogress.png image with a gradient to match the page loading progress bar we already have. The gradient is static, we just rotate the image to move the leading edge with progress.
Attachment #8347554 - Flags: review?(mbrubeck)
Just in case its of use when we next need to update this image. Sorry, no photoshop here.
Talked and iterated a bit on IRC with mmaslaney. Re: the new download progress image: 

<mmaslaney> Yeah, the gradient is more obvious. 
<mmaslaney> What I like about using this gradient is how it communicates expectation and also completion.
Attachment #8347554 - Flags: review?(mbrubeck) → review+
On fx-team:  https://hg.mozilla.org/integration/fx-team/rev/7271ce092fe2
Whiteboard: [block28] p=1 → [block28] p=1 [fixed-in-fx-team]
https://hg.mozilla.org/mozilla-central/rev/7271ce092fe2
Status: ASSIGNED → RESOLVED
Closed: 6 years ago
Resolution: --- → FIXED
Whiteboard: [block28] p=1 [fixed-in-fx-team] → [block28] p=1
Target Milestone: --- → Firefox 29
Comment on attachment 8347554 [details] [diff] [review]
Add gradient to download progress ring image, rotate it with progress angle

[Approval Request Comment]
Bug caused by (feature/regressing bug #): Enhancement, part of bug 801136

User impact if declined: Visual style of download progress and page load progress indicators are not matched

Testing completed (on m-c, etc.): Tested good on m-c

Risk to taking this patch (and alternatives if risky): Low, only metro code affected

String or IDL/UUID changes made by this patch: none
Attachment #8347554 - Flags: approval-mozilla-aurora?
Attachment #8347554 - Flags: approval-mozilla-aurora? → approval-mozilla-aurora+
Whiteboard: [block28] p=1 → [beta28] p=1
Whiteboard: [beta28] p=1 → [beta28] p=1 [good first verify]
You need to log in before you can comment on or make changes to this bug.