1700238 - Refresh the download icons and animation

Status: VERIFIED FIXED

(Firefox :: Theme, enhancement, P1)

Description

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

We have newly drawn svgs for the download toolbar button (browser/themes/shared/downloads/download-icons.svg)
Note that this is currently a composite SVG with a few <use href="#"/> elements to draw the various states consistently from one single image.

One of those uses is in the animation when a download starts/ends, so updating this image needs to be tightly coordinated with updating those animations.

Comment 1

[Tim Nguyen :ntim]

(In reply to Sam Foster [:sfoster] (he/him) from comment #0)

Note that this is currently a composite SVG with a few <use href="#"/> elements to draw the various states consistently from one single image.

That's a hack that's bad for perf afaik, that should stop being used ideally.

Comment 2

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

As the animation and icon are interlinked, lets update both on this bug.

(In reply to Tim Nguyen :ntim from comment #1)

(In reply to Sam Foster [:sfoster] (he/him) from comment #0)

Note that this is currently a composite SVG with a few <use href="#"/> elements to draw the various states consistently from one single image.

That's a hack that's bad for perf afaik, that should stop being used ideally.

Noted. That might make sense as the designs I've seen for the new animation and progress indicator look like they don't need these parts broken out and reusable in the same way.

Comment 3

[Amy Lee [:amylee] UX]

Attachment: download assets - svg.zip

Comment 4

[Amy Lee [:amylee] UX]

Attachment: download assets - json.zip

Assets for animation

Comment 5

[Mike Conley (:mconley) (:⚙️)]

I'm going to attempt to take this.

Comment 6

[Mike Conley (:mconley) (:⚙️)]

I'll note that this is very much not a drop-in replacement. It looks like the old download icons SVG contained multiple images:

• chrome://browser/skin/downloads/download-icons.svg#arrow
• chrome://browser/skin/downloads/download-icons.svg#arrow-with-bar
• chrome://browser/skin/downloads/download-icons.svg#default-bar
• chrome://browser/skin/downloads/download-icons.svg#progress-bar-bg
• chrome://browser/skin/downloads/download-icons.svg#progress-bar-fg

Attempting to detangle this now.

Comment 7

[Mike Conley (:mconley) (:⚙️)]

It looks like these sub images are all components of the various pre-existing downloads button animations. The vast majority of the uses of download-icons.svg is the "arrow-with-bar" variant, which is what the downloads.svg looks like. I'm going to update all of the uses of "arrow-with-bar" to use downloads.svg directly.

For the animations... there's no way I can just drop this in and have it work. Replacing downloads.svg means inserting the downloads animations simultaneously, so it's all going to be one big change. I guess that's why we split this out into its own bug.

Comment 8

[Mike Conley (:mconley) (:⚙️)]

Attachment: WIP: [WIP] Bug 1700238 - Replace downloads icon.

This mainly replaces all usages of the historical "arrow-with-bar" variant of the icon. This
does not update any of the download animations.

Comment 9

[Mike Conley (:mconley) (:⚙️)]

sfoster said he'd take over, since he's more familiar with the downloads button.

Comment 10

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

Attachment: Bug 1700238 - Update download icon and animations. r?Gijs

• New start and finish animations using svg filmstrip images
• Toolbarbutton progress "bar" is a pie-chart, using the same filmstrip animation technique

Status:

• Basic start/progress/finish animations hooked.
• First pass at SVG optimization done, more todo.
• SVG colors are currently hard-coded, not using context-fill/stroke
• Not looked yet at indeterminate downloads
• Not yet verified download button customization

Comment 11

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

Attachment: Download - CLOSED PANEL.mp4

Reference video for the download animation (download panel is closed as download completes)

Comment 12

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

Attachment: Download - OPENED PANEL.mp4

Reference video for the download animation (download panel is open as download completes)

Comment 13

[Marco Bonardo [:mak] (Away Apr 25 - May 5)]

how does it work on indetermined size downloads, where there's no known progress?

Oh sorry, I just saw that in the TODO section of comment 10

Comment 14

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/025fbea4eca1
Update download icon and animations. r=Gijs

Comment 15

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/025fbea4eca1

Comment 16

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

Comment on attachment 9217933 [details]
Bug 1700238 - Update download icon and animations. r?Gijs

Beta/Release Uplift Approval Request

• User impact if declined: Inconsistent icon weight in toolbar, old/non-photon UX for downloading animations.
• Is this code covered by automated tests?: No
• Has the fix been verified in Nightly?: No
• Needs manual test from QE?: Yes
• If yes, steps to reproduce: The behavior of the downloading button should not changed by this patch, but the visual effects in the download button for the start of a download, download progress and download completion have been updated. Verification should include these steps in supported themes.
• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): Icon and animation assets updated.
  Code changes are limited to the download component and are visual changes only with no behavior change or expected side-effects.
• String changes made/needed: None

Comment 17

[Pascal Chevrel:pascalc (PTO until April 26)]

Sam, you asked to uplift 025fbea4eca1 which landed on m-c 2 days ago but also D110864 which is marked as WIP and has no review, did you really mean to have this revision imported into beta? Thanks

Comment 18

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

Comment on attachment 9213657 [details]
WIP: [WIP] Bug 1700238 - Replace downloads icon.

Clearing uplift request on this. This patch was folded into the other.

Comment 19

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

:pascalc, thanks for catching that. Yeah 025fbea4eca1 already contains the relevant pieces of that WIP patch. I've removed the uplift flag and marked that attachment as obsolete.

Comment 20

[Pascal Chevrel:pascalc (PTO until April 26)]

Comment on attachment 9217933 [details]
Bug 1700238 - Update download icon and animations. r?Gijs

Planned proton work, approved for 89 beta 9, thanks.

Comment 21

[Pascal Chevrel:pascalc (PTO until April 26)]

https://hg.mozilla.org/releases/mozilla-beta/rev/be21f07c2a2a

Comment 22

[Romain Testard [:RT]]

Confirming here that we (UX and PM) want this uplifted for MR1 to Beta.

Comment 23

[Catalin Sasca, Desktop QA [:csasca]]

Attachment: download tool.png

Verified that the refreshed download icon and animations are implemented on 89.0b10 and 90.0a1 (2021-05-10) on Windows 10, Ubuntu 20.04 and macOS 10.15.7.

However we noticed that the panel and progress bar in Comment 12 is different from what we are seeing (see attachment).

Sam, is this intended or the changes in Comment 12 are not yet implemented?

Comment 24

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

(In reply to Catalin Sasca, QA [:csasca] from comment #23)

However we noticed that the panel and progress bar in Comment 12 is different from what we are seeing (see attachment).
Sam, is this intended or the changes in Comment 12 are not yet implemented?

Yeah the panel progress bar has not yet been implemented. Thanks for the reminder, I've filed bug 1710918 to get that done.

Comment 25

[Alexandru Trif, Desktop QA [:atrif]]

(In reply to Sam Foster [:sfoster] (he/him) from comment #24)

(In reply to Catalin Sasca, QA [:csasca] from comment #23)

However we noticed that the panel and progress bar in Comment 12 is different from what we are seeing (see attachment).
Sam, is this intended or the changes in Comment 12 are not yet implemented?

Yeah the panel progress bar has not yet been implemented. Thanks for the reminder, I've filed bug 1710918 to get that done.

Thank you, Sam! Closing this as verified per comment 23 and comment 24.