On click should have Pocket icon highlight/expand. On Release should have Pocket icon revert back to original size. Please see video for reference. Thanks!

(In reply to Amy Lee [:amylee] UX from comment #0) > On click should have Pocket icon highlight/expand. On Release should have > Pocket icon revert back to original size. Please see video for reference. > Thanks! Animation reference: https://drive.google.com/file/d/0B0tdos8pQ1T7eE1KNGlJcF9BSnc/view

I'm seeing some jagged/pixelated edges on the last frames of this animation - on Linux (1920x1080, 1:1 pixel density), which is unexpected as the same shape in the static SVG is fine. I wonder if we lost something during optimization?

Comment on attachment 8892239 [details] Bug 1384678 - Change the Pocket animation to show the icon returning to the original size as part of the animation. https://reviewboard.mozilla.org/r/163192/#review169084 Cancelling review for now, while we investigate the image quality

The problem is coming from removing the fill-opacity="0.25" that is placed on the first frames of the animation. Adding back the fill-opacity="0.25" makes the icon look disabled at the end of the animation. Amy, can you create a new SVG for the pocket button animation that doesn't have the icon faded out? Also, while you're working on it could you make the adjustment to the inner arrow to fix bug 1386029?

(In reply to Sam Foster [:sfoster] from comment #4) > Created attachment 8892678 [details] > pocket-icon-jaggies.png > > I'm seeing some jagged/pixelated edges on the last frames of this animation > - on Linux (1920x1080, 1:1 pixel density), which is unexpected as the same > shape in the static SVG is fine. I wonder if we lost something during > optimization? The jaggedness was always there, but with the lowered opacity on the fill it wasn't obvious. Once we removed the change in opacity it became more visible.

Hi, Here's the icon. I removed the opacity. Also I noticed that the animation of the button shrinking back to the original size and the arrow back into position onRelease was not in sync. I fixed it but as a result there are a few less frames. Let me know if this is an issue.

Increases frame to 20px wide

The patch I attached uses the attachment from comment 9 but it doesn't fix bug 1386029. Fixing this bug without bug 1386029 is still an improvement as it makes the animation much more fluid.

What is the story here now? I see the changed SVG. I noticed the new one is all fill="context-fill", when before only the first few frames were context-fill'ed, the rest were red. I can't really assess if its an improvement without seeing it in-context, and the pocket toolbar button seems to have gone away in the meantime?

Comment on attachment 8892239 [details] Bug 1384678 - Change the Pocket animation to show the icon returning to the original size as part of the animation. Cancelling review for now, if the pocket button stays in the urlbar I guess it will need reworking at minimum.

This new patch used the fill of the icon for the full animation. Yeah, this is basically WONTFIX now and the new work will need to be done in bug 1387077.