1776795 - Move swipe-to-nav icon in response to the gesture to make it more noticeable on Windows

Status: RESOLVED FIXED

(Core :: Panning and Zooming, enhancement, P3)

Description

[Hiroyuki Ikezoe (:hiro)]

We haven't yet received any feedback from UX side, but we'd at least want to make the icon more noticeable just like Safari and Chrome do.

Comment 1

[Hiroyuki Ikezoe (:hiro)]

Attachment: history-swipe-arrow.svg

Attaching svg file will be a new icon. The reason why we need this new one is, the original one is a half circle, it would look odd the half circle is moving, it would be better a full circle.

The differences from the original one are;

1. a half circle -> a full circle
2. an arrow icon inside the circle got bigger

Comment 2

[Hiroyuki Ikezoe (:hiro)]

Attachment: Bug 1776795 - Move the swipe-to-nav icon in response to the swipe gestures on Windows. r?tnikkel

Comment 3

[Hiroyuki Ikezoe (:hiro)]

It turned out Chrome on MacOSX has a different swipe-to-nav gesture icon on Windows. The shape looks similar to us, a half circle, it actually moves in response to gestures, but it's quite small amount, it never makes the circle visible as a full circle. I am going to restrict this change only on Windows.

Comment 4

[Timothy Nikkel (:tnikkel)]

I just pointed out Chrome's animation on mac using a half-circle as comparative information. I think we should also have movement on mac, whether we keep the half-circle or use a full circle on mac.

Comment 5

[Hiroyuki Ikezoe (:hiro)]

(In reply to Timothy Nikkel (:tnikkel) from comment #4)

I just pointed out Chrome's animation on mac using a half-circle as comparative information. I think we should also have movement on mac, whether we keep the half-circle or use a full circle on mac.

Thanks! I didn't notice your comment on the phab. Yeah, I suppose we probably end up having platform dependent behaviors. I'd start with Windows specific one in this bug.

Comment 6

[Timothy Nikkel (:tnikkel)]

Attachment: Hiro's patch adjusted to mac

This is a video showing what it looks like with Hiro's patch with a couple tweaks so that it also applies to macos in addition to Windows (it's easier for me to produce a screen capture on macOS).

Comment 7

[Hiroyuki Ikezoe (:hiro)]

Attachment: Wikipedia — Nightly 2022-07-21 17-08-37.mp4

Thank you, Timothy.

I did also record a screen capture with an additional change based on D150433. The additional change is that, as Timothy suggested in an APZ team meeting, changing icon colors when the icon reached to a point where the navigation will be triggered. I did it by using -moz-context-properties, it works as expected.

That's said, the additional change isn't perfect as of now, the icon color isn't going back to normal even after the user's fingers swipes back a bit, at that point the navigation won't happen.

Anyways, this is just a proof-of-concept, we can do this kind of more fancy visual feedback in a future bug. I am supposing we could make the color change as blinking animation.

I am going to post the additional change here in this bug for the record.

Comment 8

[Hiroyuki Ikezoe (:hiro)]

Attachment: change-swipe-to-nav-icon-color

Here is the additional change.

Comment 9

[Hiroyuki Ikezoe (:hiro)]

Attachment: Bug 1776795 - Fix the swipe-to-nav icon position on RTL environments. r?#desktop-theme-reviewers!,tnikkel!

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/344336b54939
Fix the swipe-to-nav icon position on RTL environments. r=desktop-theme-reviewers,tnikkel,Itiel
https://hg.mozilla.org/integration/autoland/rev/7bed4509ae7c
Move the swipe-to-nav icon in response to the swipe gestures on Windows. r=tnikkel,desktop-theme-reviewers,sfoster

Comment 11

[Norisz Fay [:noriszfay]]

Backed out for causing bc failures on browser_test_swipe_gesture.js

Backout link

Push with failures

Failure log

Comment 12

[Hiroyuki Ikezoe (:hiro)]

The failed test needs to set browser.swipe.navigation-icon-move-distance=0.

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/573e1fde234c
Fix the swipe-to-nav icon position on RTL environments. r=desktop-theme-reviewers,tnikkel,Itiel
https://hg.mozilla.org/integration/autoland/rev/065a34bf58c2
Move the swipe-to-nav icon in response to the swipe gestures on Windows. r=tnikkel,desktop-theme-reviewers,sfoster

Comment 14

[Cristina Cozmuta (:CrissCozmuta)]

https://hg.mozilla.org/mozilla-central/rev/573e1fde234c
https://hg.mozilla.org/mozilla-central/rev/065a34bf58c2