Affected versions

• 89.0a1(20210412213434)

Affected platforms

• macOS 11.2.3
• Windows 10x64
• Ubuntu 20.04

Steps to reproduce

1. Open Firefox and select the Pin to Overflow context menu option on a random item from the toolbar.
2. Observe the Overflow animation.

Expected result

• Animation icon have the same size as the button itself.

Actual result

• When the animation is completed the Overflow button has a slight movement. I think this is because the animation has bolded lines like the new implemented chevron icon.

Regression range

• Last good revision: ca8aff8285cadc7fb74b0f05676ebcd98b4f77d3
  First bad revision: f160141317e9c764ac698e7dab08c36820e7e922
  Pushlog:
  https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=ca8aff8285cadc7fb74b0f05676ebcd98b4f77d3&tochange=f160141317e9c764ac698e7dab08c36820e7e922

Notes

• Attached a screen recording.

I think this is because the overflow button animation was generated using the old icon.

amylee, was this animation in scope for being regenerated for MR1?

Here's the replacement animation from UX. It needs optimization still, but it basically does a cross fade between the default and highlight color. We need to either implement this or remove the animation entirely for 89. I think implementing it - replacing the existing film strip with this one - would actually be less work.

Scratch that - I was wrong in comment 3. Changing stroke colours causes us to re-rasterize the image.

(In reply to Mike Conley (:mconley) (:⚙️) (Catching up on needinfos) from comment #1)

I think this is because the overflow button animation was generated using the old icon.

amylee, was this animation in scope for being regenerated for MR1?

Hi, yes the icon has been provided to be implemented for MR1

This is present also pre-proton, see bug 1386025 and its dupes.

I have a new animation from :amylee that uses the re-drawn chevron icon and is a more subtle touch in keeping with the Proton style. Its also the same size as the icon itself and fixes this bug so I'm going to hijack it to get those changes in.

• New filmstrip animation svg. It animates between the currentColor and attention color. We could do this via a CSS animation changing the fill value over time, but my understanding is to ensure animation happens on the compositor/GPU, the filmstrip is the better way to go.

Backed out changeset 8fd40805444e (bug 1705049) for Browser-chrome failures in browser/components/customizableui/test/browser_widget_animation.js. CLOSED TREE

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

Push that introduced failures:
https://treeherder.mozilla.org/jobs?repo=autoland&group_state=expanded&revision=8fd40805444ee0adfa2a70f9f9f6610b53db59dd

Backout:
https://hg.mozilla.org/integration/autoland/rev/c3b1ce3677861d736f61c8df8ea3de621351f29d

Comment on attachment 9219344 [details]
Bug 1705049 - Update chevron/overflow menu animation. r?mconley

Beta/Release Uplift Approval Request

• User impact if declined: Required for Proton/MR1
• Is this code covered by automated tests?: Yes
• Has the fix been verified in Nightly?: No
• Needs manual test from QE?: Yes
• If yes, steps to reproduce: See comment 0 in the bug.
• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): Updates an existing toolbar animation.
• String changes made/needed:

https://hg.mozilla.org/mozilla-central/rev/07b727f23e70

Comment on attachment 9219344 [details]
Bug 1705049 - Update chevron/overflow menu animation. r?mconley

Low risk Proton patch, approved for 89 beta 8, thanks.

https://hg.mozilla.org/releases/mozilla-beta/rev/6afb75b76f19

Verified fixed with Firefox 89.0b8 and 90.0a1 (20210504214950) on Windows 10x64, macOS 11.2.3 and Ubuntu 20.04.
The animation is displayed as shown in comment 2.