1702281 - Refresh the stop/reload icon & animation

Status: RESOLVED FIXED

(Firefox :: Theme, enhancement, P1)

Description

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

We have newly drawn stop and reload icons. They will need to be updated in the same patch as the new film-strip stop/reload animation for that button.

Comment 1

[Amy Lee [:amylee] UX]

Attachment: Refresh End.json

Comment 2

[Amy Lee [:amylee] UX]

Attachment: Refresh Start.json

Attached Start/End animations for refresh page icon.

Comment 3

[Amy Lee [:amylee] UX]

Attachment: Refresh_End.svg

Comment 4

[Amy Lee [:amylee] UX]

Attachment: Refresh_Start.svg

Comment 5

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

Attachment: Bug 1702281 - Update the close, reload icons and stop-reload, reload-stop toolbar animations. r?jaws

Comment 6

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

Reload animation: the reload toolbar button next to the URL bar animates between states. When a page is loading, it displays an "X" icon to stop loading, when stopped/complete, it displays a refresh/reload arrow icon. There is a short animation as it transitions between these states.

Stop/Close icon (chrome://browser/skin/stop.svg)

This is the version of the "X" we have in the shared browser theme component. There is another in toolkit which isn't being updated here.
This image is used in the addressbar as well as:

• about:protections VPN banner close button. This banner is hidden by default, you can show it from the devtools' console: document.querySelector(".vpn-banner").classList.remove("hidden").
• Contextual Feature Recommendations popup (CFR) close button
• Content context menu "stop" icon

Refresh/Reload button (chrome://browser/skin/reload.svg)

This is the circling-arrow icon in the shared browser theme component. There is a similar image in toolkit (chrome://global/skin/icons/icon-refresh.svg) which isn't being updated here.

In addition to the reload button in the addressbar, this image is used in:

• about:protections, in the Monitor panel
• Mac touchbar reload icon
• Content context menu "reload" icon
• about:downloads, retry and failed download
• FxA pair device flow, retry
• about:preferences, when you change tracking protection settings there's a "Reload all tabs" button with this icon

Comment 7

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

I'm seeing an apparent perma-fail here with this patch: https://treeherder.mozilla.org/jobs?repo=try&revision=cae042d85ba21b2afbd21a197992756db0cb649a

I don't expect any test failures as this patch just updates some svg files, and I'm not able to reproduce this failure locally. Anyhow, that's why this hasnt landed yet.

Comment 8

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

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

I'm seeing an apparent perma-fail here with this patch: https://treeherder.mozilla.org/jobs?repo=try&revision=cae042d85ba21b2afbd21a197992756db0cb649a

Huh, those actually seem to be completely different failures each time, so maybe its ... fine?

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/f6d5979ef10a
Update the close, reload icons and stop-reload, reload-stop toolbar animations. r=jaws

Comment 10

[Noemi Erli[:noemi_erli]]

Backed out changeset f6d5979ef10a (Bug 1702281) for causing build bustages CLOSED TREE

Push with failures: https://treeherder.mozilla.org/jobs?repo=autoland&group_state=expanded&collapsedPushes=842382&resultStatus=testfailed%2Cbusted%2Cexception%2Cretry%2Cusercancel&revision=f6d5979ef10a7957fd043a1f747700e5138d396f&selectedTaskRun=ednn42rxTqOeAd1Vem8lrw.0

Log: https://treeherder.mozilla.org/logviewer?job_id=336743727&repo=autoland&lineNumber=71806

Backout: https://hg.mozilla.org/integration/autoland/rev/83b2a93aad5938c0faf768b5b85a069d8b26272c

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/84499c442e82
Update the close, reload icons and stop-reload, reload-stop toolbar animations. r=jaws

Comment 12

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

(In reply to Noemi Erli[:noemi_erli] from comment #10)

Backed out changeset f6d5979ef10a (Bug 1702281) for causing build bustages CLOSED TREE

gah, tripped up on my own shoelaces. Needed to run RUN_FIND_DUPES=1 ./mach package before landing to spot the close/stop dupe. I filed Bug 1699631 - De-duplicate the stop/close icons for the cleanup.

Comment 13

[Narcis Beleuzu [:NarcisB]]

https://hg.mozilla.org/mozilla-central/rev/84499c442e82

Comment 14

[Alexandru Ionescu (needinfo me) [:alexandrui]]

== Change summary for alert #29732 (as of Mon, 19 Apr 2021 06:55:58 GMT) ==

Improvements:

Ratio	Suite	Test	Platform	Options	Absolute values (old vs new)
9%	perf_reftest_singletons (docs)	bidi-resolution-1.html	linux1804-64-shippable-qr	e10s stylo webrender	386.79 -> 351.06

For up to date results, see: https://treeherder.mozilla.org/perfherder/alerts?id=29732

Comment 15

[Catalin Sasca, Desktop QA [:csasca]]

We were able to verify most of the scenarios in Comment 6, and they are working and looking as expected on Firefox 89.0b5 under macOS 10.15.7, Ubuntu 20.04 and Windows 10.

We have some troubles getting the "Contextual Feature Recommendations popup (CFR) close button" and "FxA pair device flow, retry". Are there any easy steps for these scenarios so we can verify them ?