Record pointerType on clicks

[eoghanmurray]

• could be useful for displaying e.g. a circle rather than a point during replay

touchscreen laptops can have both mouse and touch within the same session

[changeset-bot]

🦋 Changeset detected

Latest commit: be85644

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 8 packages

Name	Type
rrweb	Minor
@rrweb/types	Minor
rrweb-snapshot	Minor
rrdom	Minor
rrdom-nodejs	Minor
rrweb-player	Minor
@rrweb/web-extension	Minor
rrvideo	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[Juice10]

You have some typescript typing that needs changing, and then a bunch of tests will need to be updated. But this is a welcome addition to rrweb IMO!

[eoghanmurray]

@Juice10 I'm deploying the changes to a 'canary' test environment so feel free to merge in a few weeks if I haven't done so by then (will be away over Easter hols)

[eoghanmurray]

@Juice10 any idea why "pointerType": "mouse" doesn't show up in regards to the can record clicks test?

• I know the x/y values are stripped out by test/utils.ts
• in the live-stream view, the pointerType shows up — is livestream using the same puppeteer set up as testing?

[eoghanmurray]

Another observation:
Firefox 111.0.1 (64-bit) on a Ubuntu Dell M3800 laptop - with touchscreen.

A touch event is showing up as 'mouse' with this new code.
But the prior version was also incorrectly recording mouseDown and mouseUp events instead of touchStart/touchEnd events.

On the same laptop, Chromium works as expected and records these events as 'touch'.

[eoghanmurray]

@Juice10 any idea why "pointerType": "mouse" doesn't show up in regards to the can record clicks test?

* I know the x/y values are stripped out by test/utils.ts

* in the live-stream view, the pointerType shows up — is livestream using the same puppeteer set up as testing?

I guess it could be because our version of Puppeteer doesn't support PointerType?

[Juice10]

@eoghanmurray the setup is mostly the same. Big difference is that click events in puppeteer aren't 100% the same as "real" click events.

From the puppeteer docs:

Note: The mouse events trigger synthetic MouseEvents. This means that it does not fully replicate the functionality of what a normal user would be able to do with their mouse.

For example, dragging and selecting text is not possible using page.mouse. Instead, you can use the DocumentOrShadowRoot.getSelection() functionality implemented in the platform.

https://pptr.dev/api/puppeteer.mouse

[Juice10]

@eoghanmurray would you like to merge this one or wait till you get the tests dialed in?

[eoghanmurray]

I've gone ahead and merged; if we change up from Puppeteer in future it should be discoverable what the correct pointerType should be for the results of tests.