Closed Bug 1282084 Opened 4 years ago Closed 1 year ago

RDM touch simulation mode triggers hover states

Categories

(DevTools :: Responsive Design Mode, defect, P1)

defect

Tracking

(firefox50 wontfix, firefox68 verified, firefox69 verified)

VERIFIED FIXED
Firefox 68
Tracking Status
firefox50 --- wontfix
firefox68 --- verified
firefox69 --- verified

People

(Reporter: bigben, Assigned: mtigley)

References

(Blocks 1 open bug)

Details

(Whiteboard: [rdm-mvp])

Attachments

(1 file)

The RDM touch simulation mode captures mouse events pretty well, and should be easy to use once Bug 1269882 has landed. However, it still triggers CSS :hover states, whereas this shouldn't be the case on a mobile device.

[Steps to reproduce]:
1. Launch Firefox.
2. Enable the devtools.responsive.html.enabled pref, and restart Firefox if necessary
3. Open http://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_hover, or any website using CSS hover states
4. Launch RDM on this website
5. Move your mouse over elements using this to see how it looks
6. Now enable touch simulation. You might have to reload the iframe by calling reload() on it in the console.
7. Move your mouse over these elements again.

[Expected result]:
- The hover state doesn't trigger anymore. There should only be a visible change when you click on the link/element ("sticky" hover).

[Actual result]:
- The hover state is still triggered. We shouldn't be able to interact with the page this way.
Whiteboard: [multiviewport][triage]
Priority: -- → P3
Whiteboard: [multiviewport][triage] → [multiviewport] [reserve-rdm]
Flags: qe-verify?
Product: Firefox → DevTools
Assignee: nobody → mtigley
Status: NEW → ASSIGNED
Blocks: 1282089
Duplicate of this bug: 1535560
See Also: → 1538709
See Also: 1538709
Assignee: mtigley → nobody
Status: ASSIGNED → NEW
Flags: qe-verify?
Priority: P3 → P2
Whiteboard: [multiviewport] [reserve-rdm] → [rdm-mvp]

After briefly looking into this issue with Patrick, it looks like we can remove element hover states by calling the InspectorUtils' removeContentStateon the target element. The AccessibleWalkerActor does something similar here: https://searchfox.org/mozilla-central/rev/ddd1679c0534f7ddf36cafddd17b710c4fefe3c4/devtools/server/actors/accessibility/walker.js#605-626 .

So I imagine we can do the same thing in TouchSimulator's handleEvent.

Assignee: nobody → mtigley
Status: NEW → ASSIGNED
Priority: P2 → P1
Pushed by mtigley@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/106e58c798ef
Don't allow RDM to show triggered hover states while touch is enabled. r=pbro
Status: ASSIGNED → RESOLVED
Closed: 1 year ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 68

This issue is verified as fixed in Nightly 69.0a1 (2019-06-03).

Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.