Closed Bug 1702281 Opened 8 months ago Closed 8 months ago

Refresh the stop/reload icon & animation

Categories

(Firefox :: Theme, enhancement, P1)

enhancement

Tracking

()

RESOLVED FIXED
89 Branch
Tracking Status
firefox89 --- fixed

People

(Reporter: sfoster, Assigned: sfoster)

References

(Blocks 1 open bug)

Details

(Keywords: perf-alert, Whiteboard: [proton-icons])

Attachments

(5 files)

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.

Attached file Refresh End.json
Attached file Refresh Start.json

Attached Start/End animations for refresh page icon.

Attached image Refresh_End.svg
Attached image Refresh_Start.svg
Assignee: nobody → sfoster
Status: NEW → ASSIGNED
Blocks: 1692088
Attachment #9213666 - Attachment description: WIP: Bug 1702281 - Update the close, reload icons and stop-reload, reload-stop toolbar animations. r?jaws → Bug 1702281 - Update the close, reload icons and stop-reload, reload-stop toolbar animations. r?jaws

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

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.

(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?

Pushed by sfoster@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/f6d5979ef10a
Update the close, reload icons and stop-reload, reload-stop toolbar animations. r=jaws
Pushed by sfoster@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/84499c442e82
Update the close, reload icons and stop-reload, reload-stop toolbar animations. r=jaws

(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.

Flags: needinfo?(sfoster)
Status: ASSIGNED → RESOLVED
Closed: 8 months ago
Resolution: --- → FIXED
Target Milestone: --- → 89 Branch
Regressions: 1706333

== 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

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 ?

You need to log in before you can comment on or make changes to this bug.