UX improvements for swipe-to-navigation

In this bug we are going to just tweaking the icon itself, we are not going to do any fancy page changes (e.g. page is transitioning visually).

There are two things that I have no idea how to do it. So what the Windows version of the new icon looks like are;

1. the icon consists of two parts, a circle and an arrow inside the circle
2. the icon moves in response to gestures
3. the circle gets larger as the gesture moves to right, the arrow size is unchanged, the stroke width of the circle is also unchanged
4. the circle stroke color is blue and it fills in white, the arrow fills in blue
5. when the icon reaches to a point where the navigation happen, the blue parts turn into white and the white parts turn into blue gradually (animating)
6. after the color animations above finished, the icon has an animating blur effect on the edge

So the two things I can't make it happen are the blurry effect (6) and scaling only the circle (parts of 3).

So for 3) I can scale the entire icon, I mean both of the circle and the arrow get scaled altogether. To scale only the circle we need context-value to work for referenced SVG images, :dholbert told me on Matrix that we can probably add the support, but I am unsure how much work would be necessary for the support.

So for 6) if we don't do the color animations (5), we can probably do 6). For the color animations (5) I used both of context-fill and context-stroke for the color changes (blue -> white and white -> blue), there's no more context-blah we can use for the blurry effect.

The icon SVG files were exported from the Figma document

This is an SVG exported from the same Figma document in the URL field. It explains icon's colors and sizes. Though in this SVG colors on non-HCM mode are defined as "SelectedItemText" and "SelectedItem", I did confirm with Josh that colors on non-HCM mode should be colors as spec-ed, i.e. #0060DF and #FFFFFF rather than the named colors, colors on HCM mode should be the named ones.

Depends on D164271

The following patch is waiting for review from an inactive reviewer:

:hiro, could you please find another reviewer?

For more information, please visit auto_nag documentation.

Silly bot, people are allowed to go on pto.

https://hg.mozilla.org/mozilla-central/rev/286a4fd230f7
https://hg.mozilla.org/mozilla-central/rev/7a0ff8d67ea9

https://hg.mozilla.org/mozilla-central/rev/36ac39e041af

I noticed some regressions that I have linked to this bug. Thanks for checking.