1271728 - Show a circle cursor when touch simulation is enabled in RDM

Status: NEW

(DevTools :: Responsive Design Mode, enhancement, P3)

Description

[Helen V. Holmes (:helenvholmes) (:✨)]

Chrome currently uses a circle cursor when you have a device selected. I think this is to drive home the idea that on a phone someone would be using touch events and to reiterate that the tap space needs to be > 45px as thumbs are larger than mice cursors.

Should we use this same cursor in our responsive design mode?

Comment 1

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

Switching to triage first so we figure what to remove from MVP if needed.

Comment 2

[Benoit Chabod [:bigben]]

Okay, just an update on this bug: Chrome doesn't just use a circle cursor to remind designers that thumbs are less precise than mice cursors, they also enable what used to be called "event fluffing" in B2G.

Basically, any element inside the radius of the circle can be clicked, even if it's not exactly where the mouse is. This is controlled by touch-radius and mouse-radius preferences in Firefox, and I think it would be reasonable to turn this on along with the circle cursor for RDM, at least when touch simulation is enabled. Using the preferences correctly, it can target click events synthesised by touch events only, so it wouldn't be harmful to turn it on for the whole browser.

Helen, what is your opinion on this? Does it fit in RDM's UX?

Comment 3

[Helen V. Holmes (:helenvholmes) (:✨)]

(In reply to Benoit Chabod [:bigben] from comment #2)
> Okay, just an update on this bug: Chrome doesn't just use a circle cursor to
> remind designers that thumbs are less precise than mice cursors, they also
> enable what used to be called "event fluffing" in B2G.
> 
> Basically, any element inside the radius of the circle can be clicked, even
> if it's not exactly where the mouse is. This is controlled by touch-radius
> and mouse-radius preferences in Firefox, and I think it would be reasonable
> to turn this on along with the circle cursor for RDM, at least when touch
> simulation is enabled. Using the preferences correctly, it can target click
> events synthesised by touch events only, so it wouldn't be harmful to turn
> it on for the whole browser.
> 
> Helen, what is your opinion on this? Does it fit in RDM's UX?

I think it does. Makes a lot of sense, and I think it's what users are expecting when they have the circle cursor enabled.

Comment 4

[Benoit Chabod [:bigben]]

(In reply to Helen V. Holmes (:helenvholmes) (:✨)(pls ni?) from comment #3)
> I think it does. Makes a lot of sense, and I think it's what users are
> expecting when they have the circle cursor enabled.

Alright!
I'll move forward with this as soon as bug 1285566 has landed, since the touch simulator is being refactored over there.

Comment 5

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

Since Benoit's internship has ended, I am going to assume he may not be working on this anymore.  If that's incorrect, feel free to pick it up again!

Comment 7

[Sebastian Zartner [:sebo]]

I assume this only makes sense when bug 1282089 is fixed.

Sebastian

Comment 8

[Sebastian Zartner [:sebo]]

Attachment: touchCircle.svg

I've created a circle cursor, which can be used for this purpose.

Sebastian

Comment 10

[Sebastian Zartner [:sebo]]

I appreciate you assigned this bug to yourself, Micah! But as I wrote in comment 7, I think a circular cursor just makes sense together with a mobile behavior. And bug 1282089 comment 6 sounded like the patch there was already in a good shape. So, maybe you could finish that up first?

Sebastian

Comment 11

[Micah [:mtigley] (she/her)]

Thank you for pointing out the work already done, Sebastian! I agree this would make sense to have with bug1282089, so I'll unassign myself from this for now and investigate what needs to be done for that other patch.