1799563 - UX improvements for swipe-to-navigation

Status: RESOLVED FIXED

(Firefox :: General, enhancement, P2)

Description

[Hiroyuki Ikezoe (:hiro)]

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

Comment 1

[Hiroyuki Ikezoe (:hiro)]

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.

Comment 2

[Hiroyuki Ikezoe (:hiro)]

Attachment: Bug 1799563 - Refresh swipe-to-navigation UX. r?mconley!,tnikkel!

The icon SVG files were exported from the Figma document

Comment 3

[Hiroyuki Ikezoe (:hiro)]

Attachment: Size and color spec.svg

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.

Comment 4

[Hiroyuki Ikezoe (:hiro)]

Attachment: Bug 1799563 - Remove browser.swipe.navigation-icon-move-distance pref. r?tnikkel

Depends on D164271

Comment 5

[Hiroyuki Ikezoe (:hiro)]

Attachment: WIP: Bug 1799563 - An attempt to use iframes to setup the swipe-to-navigation SVG icon.

Comment 6

[BugBot [:suhaib / :marco/ :calixte]]

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

ID	Title	Author	Reviewer Status
D164271	Bug 1799563 - Refresh swipe-to-navigation UX. r?mconley!,tnikkel!	hiro	mconley: Back Jan 4, 2023

:hiro, could you please find another reviewer?

For more information, please visit auto_nag documentation.

Comment 7

[Timothy Nikkel (:tnikkel)]

Silly bot, people are allowed to go on pto.

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/286a4fd230f7
Refresh swipe-to-navigation UX. r=mconley,emilio
https://hg.mozilla.org/integration/autoland/rev/7a0ff8d67ea9
Remove browser.swipe.navigation-icon-move-distance pref. r=tnikkel

Comment 9

[Hiroyuki Ikezoe (:hiro)]

Attachment: Bug 1799563 - Fix a rebase failure in browser-gestureSupport.js. r?tnikkel

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/36ac39e041af
Fix a rebase failure in browser-gestureSupport.js. r=tnikkel

Comment 11

[Marian-Vasile Laza]

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

Comment 12

[Norisz Fay [:noriszfay]]

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

Comment 13

[Mehmet]

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