From a562494aa61ead63a925015b9e74f4bda6e28fdc Mon Sep 17 00:00:00 2001 From: Eoghan Murray Date: Thu, 13 Apr 2023 12:05:37 +0100 Subject: [PATCH 1/8] Reduce verbosity/redundancy of output of new pointerType attribute by confining it only to clicks (and to a MouseDown/MouseUp from a PointerTypes.Pen, as these don't yet have a dedicated PendDown/PenUp) --- packages/rrweb/src/record/observer.ts | 9 ++ .../__snapshots__/integration.test.ts.snap | 102 ++++++------------ .../cross-origin-iframes.test.ts.snap | 12 +-- 3 files changed, 47 insertions(+), 76 deletions(-) diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts index ff8eac7cc3..7f755c334f 100644 --- a/packages/rrweb/src/record/observer.ts +++ b/packages/rrweb/src/record/observer.ts @@ -270,6 +270,15 @@ function initMouseInteractionObserver({ } if (pointerType !== null) { currentPointerType = pointerType; + if ( + (thisEventKey.substring(0, 5) === 'Touch' && + pointerType === PointerTypes.Touch) || + (thisEventKey.substring(0, 5) === 'Mouse' && + pointerType === PointerTypes.Mouse) + ) { + // don't output redundant info + pointerType = null; + } } else if (MouseInteractions[eventKey] === MouseInteractions.Click) { pointerType = currentPointerType; currentPointerType = null; // cleanup as we've used it diff --git a/packages/rrweb/test/__snapshots__/integration.test.ts.snap b/packages/rrweb/test/__snapshots__/integration.test.ts.snap index 73a8f472d7..5329d76dd4 100644 --- a/packages/rrweb/test/__snapshots__/integration.test.ts.snap +++ b/packages/rrweb/test/__snapshots__/integration.test.ts.snap @@ -1529,8 +1529,7 @@ exports[`record integration tests can record clicks 1`] = ` \\"data\\": { \\"source\\": 2, \\"type\\": 1, - \\"id\\": 18, - \\"pointerType\\": 0 + \\"id\\": 18 } }, { @@ -1538,8 +1537,7 @@ exports[`record integration tests can record clicks 1`] = ` \\"data\\": { \\"source\\": 2, \\"type\\": 0, - \\"id\\": 18, - \\"pointerType\\": 0 + \\"id\\": 18 } }, { @@ -1556,8 +1554,7 @@ exports[`record integration tests can record clicks 1`] = ` \\"data\\": { \\"source\\": 2, \\"type\\": 7, - \\"id\\": 18, - \\"pointerType\\": 2 + \\"id\\": 18 } }, { @@ -1565,8 +1562,7 @@ exports[`record integration tests can record clicks 1`] = ` \\"data\\": { \\"source\\": 2, \\"type\\": 9, - \\"id\\": 18, - \\"pointerType\\": 2 + \\"id\\": 18 } }, { @@ -1583,8 +1579,7 @@ exports[`record integration tests can record clicks 1`] = ` \\"data\\": { \\"source\\": 2, \\"type\\": 1, - \\"id\\": 21, - \\"pointerType\\": 0 + \\"id\\": 21 } }, { @@ -1600,8 +1595,7 @@ exports[`record integration tests can record clicks 1`] = ` \\"data\\": { \\"source\\": 2, \\"type\\": 0, - \\"id\\": 21, - \\"pointerType\\": 0 + \\"id\\": 21 } }, { @@ -2135,8 +2129,7 @@ exports[`record integration tests can record form interactions 1`] = ` \\"data\\": { \\"source\\": 2, \\"type\\": 1, - \\"id\\": 27, - \\"pointerType\\": 0 + \\"id\\": 27 } }, { @@ -2160,8 +2153,7 @@ exports[`record integration tests can record form interactions 1`] = ` \\"data\\": { \\"source\\": 2, \\"type\\": 0, - \\"id\\": 27, - \\"pointerType\\": 0 + \\"id\\": 27 } }, { @@ -2196,8 +2188,7 @@ exports[`record integration tests can record form interactions 1`] = ` \\"data\\": { \\"source\\": 2, \\"type\\": 1, - \\"id\\": 37, - \\"pointerType\\": 0 + \\"id\\": 37 } }, { @@ -2221,8 +2212,7 @@ exports[`record integration tests can record form interactions 1`] = ` \\"data\\": { \\"source\\": 2, \\"type\\": 0, - \\"id\\": 37, - \\"pointerType\\": 0 + \\"id\\": 37 } }, { @@ -2915,8 +2905,7 @@ exports[`record integration tests can record node mutations 1`] = ` \\"data\\": { \\"source\\": 2, \\"type\\": 1, - \\"id\\": 26, - \\"pointerType\\": 0 + \\"id\\": 26 } }, { @@ -3373,8 +3362,7 @@ exports[`record integration tests can record node mutations 1`] = ` \\"data\\": { \\"source\\": 2, \\"type\\": 0, - \\"id\\": 70, - \\"pointerType\\": 0 + \\"id\\": 70 } }, { @@ -3921,8 +3909,7 @@ exports[`record integration tests can use maskInputOptions to configure which ty \\"data\\": { \\"source\\": 2, \\"type\\": 1, - \\"id\\": 27, - \\"pointerType\\": 0 + \\"id\\": 27 } }, { @@ -3946,8 +3933,7 @@ exports[`record integration tests can use maskInputOptions to configure which ty \\"data\\": { \\"source\\": 2, \\"type\\": 0, - \\"id\\": 27, - \\"pointerType\\": 0 + \\"id\\": 27 } }, { @@ -3982,8 +3968,7 @@ exports[`record integration tests can use maskInputOptions to configure which ty \\"data\\": { \\"source\\": 2, \\"type\\": 1, - \\"id\\": 37, - \\"pointerType\\": 0 + \\"id\\": 37 } }, { @@ -4007,8 +3992,7 @@ exports[`record integration tests can use maskInputOptions to configure which ty \\"data\\": { \\"source\\": 2, \\"type\\": 0, - \\"id\\": 37, - \\"pointerType\\": 0 + \\"id\\": 37 } }, { @@ -4972,8 +4956,7 @@ exports[`record integration tests mutations should work when blocked class is un \\"data\\": { \\"source\\": 2, \\"type\\": 1, - \\"id\\": 42, - \\"pointerType\\": 0 + \\"id\\": 42 } }, { @@ -4989,8 +4972,7 @@ exports[`record integration tests mutations should work when blocked class is un \\"data\\": { \\"source\\": 2, \\"type\\": 0, - \\"id\\": 42, - \\"pointerType\\": 0 + \\"id\\": 42 } }, { @@ -5098,8 +5080,7 @@ exports[`record integration tests mutations should work when blocked class is un \\"data\\": { \\"source\\": 2, \\"type\\": 1, - \\"id\\": 68, - \\"pointerType\\": 0 + \\"id\\": 68 } }, { @@ -5123,8 +5104,7 @@ exports[`record integration tests mutations should work when blocked class is un \\"data\\": { \\"source\\": 2, \\"type\\": 0, - \\"id\\": 68, - \\"pointerType\\": 0 + \\"id\\": 68 } }, { @@ -5692,8 +5672,7 @@ exports[`record integration tests should mask password value attribute with mask \\"data\\": { \\"source\\": 2, \\"type\\": 1, - \\"id\\": 20, - \\"pointerType\\": 0 + \\"id\\": 20 } }, { @@ -5717,8 +5696,7 @@ exports[`record integration tests should mask password value attribute with mask \\"data\\": { \\"source\\": 2, \\"type\\": 0, - \\"id\\": 20, - \\"pointerType\\": 0 + \\"id\\": 20 } }, { @@ -5803,8 +5781,7 @@ exports[`record integration tests should mask password value attribute with mask \\"data\\": { \\"source\\": 2, \\"type\\": 1, - \\"id\\": 20, - \\"pointerType\\": 0 + \\"id\\": 20 } }, { @@ -5828,8 +5805,7 @@ exports[`record integration tests should mask password value attribute with mask \\"data\\": { \\"source\\": 2, \\"type\\": 0, - \\"id\\": 20, - \\"pointerType\\": 0 + \\"id\\": 20 } }, { @@ -8537,8 +8513,7 @@ exports[`record integration tests should not record input values if maskAllInput \\"data\\": { \\"source\\": 2, \\"type\\": 1, - \\"id\\": 27, - \\"pointerType\\": 0 + \\"id\\": 27 } }, { @@ -8562,8 +8537,7 @@ exports[`record integration tests should not record input values if maskAllInput \\"data\\": { \\"source\\": 2, \\"type\\": 0, - \\"id\\": 27, - \\"pointerType\\": 0 + \\"id\\": 27 } }, { @@ -8598,8 +8572,7 @@ exports[`record integration tests should not record input values if maskAllInput \\"data\\": { \\"source\\": 2, \\"type\\": 1, - \\"id\\": 37, - \\"pointerType\\": 0 + \\"id\\": 37 } }, { @@ -8623,8 +8596,7 @@ exports[`record integration tests should not record input values if maskAllInput \\"data\\": { \\"source\\": 2, \\"type\\": 0, - \\"id\\": 37, - \\"pointerType\\": 0 + \\"id\\": 37 } }, { @@ -10574,8 +10546,7 @@ exports[`record integration tests should record dynamic CSS changes 1`] = ` \\"data\\": { \\"source\\": 2, \\"type\\": 1, - \\"id\\": 26, - \\"pointerType\\": 0 + \\"id\\": 26 } }, { @@ -10583,8 +10554,7 @@ exports[`record integration tests should record dynamic CSS changes 1`] = ` \\"data\\": { \\"source\\": 2, \\"type\\": 0, - \\"id\\": 26, - \\"pointerType\\": 0 + \\"id\\": 26 } }, { @@ -12255,8 +12225,7 @@ exports[`record integration tests should record input userTriggered values if us \\"data\\": { \\"source\\": 2, \\"type\\": 1, - \\"id\\": 27, - \\"pointerType\\": 0 + \\"id\\": 27 } }, { @@ -12280,8 +12249,7 @@ exports[`record integration tests should record input userTriggered values if us \\"data\\": { \\"source\\": 2, \\"type\\": 0, - \\"id\\": 27, - \\"pointerType\\": 0 + \\"id\\": 27 } }, { @@ -12318,8 +12286,7 @@ exports[`record integration tests should record input userTriggered values if us \\"data\\": { \\"source\\": 2, \\"type\\": 1, - \\"id\\": 37, - \\"pointerType\\": 0 + \\"id\\": 37 } }, { @@ -12343,8 +12310,7 @@ exports[`record integration tests should record input userTriggered values if us \\"data\\": { \\"source\\": 2, \\"type\\": 0, - \\"id\\": 37, - \\"pointerType\\": 0 + \\"id\\": 37 } }, { diff --git a/packages/rrweb/test/record/__snapshots__/cross-origin-iframes.test.ts.snap b/packages/rrweb/test/record/__snapshots__/cross-origin-iframes.test.ts.snap index 204e2dcf32..62a4e3a729 100644 --- a/packages/rrweb/test/record/__snapshots__/cross-origin-iframes.test.ts.snap +++ b/packages/rrweb/test/record/__snapshots__/cross-origin-iframes.test.ts.snap @@ -1667,8 +1667,7 @@ exports[`cross origin iframes form.html should map input events correctly 1`] = \\"data\\": { \\"source\\": 2, \\"type\\": 1, - \\"id\\": 39, - \\"pointerType\\": 0 + \\"id\\": 39 } }, { @@ -1692,8 +1691,7 @@ exports[`cross origin iframes form.html should map input events correctly 1`] = \\"data\\": { \\"source\\": 2, \\"type\\": 0, - \\"id\\": 39, - \\"pointerType\\": 0 + \\"id\\": 39 } }, { @@ -1728,8 +1726,7 @@ exports[`cross origin iframes form.html should map input events correctly 1`] = \\"data\\": { \\"source\\": 2, \\"type\\": 1, - \\"id\\": 49, - \\"pointerType\\": 0 + \\"id\\": 49 } }, { @@ -1753,8 +1750,7 @@ exports[`cross origin iframes form.html should map input events correctly 1`] = \\"data\\": { \\"source\\": 2, \\"type\\": 0, - \\"id\\": 49, - \\"pointerType\\": 0 + \\"id\\": 49 } }, { From 73eccd94834244bd6765fc9579d2581488acc6da Mon Sep 17 00:00:00 2001 From: Eoghan Murray Date: Thu, 13 Apr 2023 12:22:33 +0100 Subject: [PATCH 2/8] Update how the changeset will read for the next release based on the trimming in this PR --- .changeset/little-suits-leave.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/little-suits-leave.md b/.changeset/little-suits-leave.md index 29f44bb5ff..a1252eadb8 100644 --- a/.changeset/little-suits-leave.md +++ b/.changeset/little-suits-leave.md @@ -3,4 +3,4 @@ '@rrweb/types': minor --- -click events (as well as mousedown/mouseup/touchstart/touchend events) now include a `.pointerType` attribute which distinguishes between ['pen', 'mouse' and 'touch' events](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType) +click events now include a `.pointerType` attribute which distinguishes between ['pen', 'mouse' and 'touch' events](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType). There is no new PenDown/PenUp events, but these can be detected with a MouseDown/MouseUp + pointerType=pen From 355aa6fc8629aed2df866ea9e9574197f0b2fc61 Mon Sep 17 00:00:00 2001 From: Eoghan Murray Date: Thu, 13 Apr 2023 13:05:33 +0100 Subject: [PATCH 3/8] Prefer triple equals --- packages/rrweb/src/record/observer.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts index 7f755c334f..7f8cb7e8d0 100644 --- a/packages/rrweb/src/record/observer.ts +++ b/packages/rrweb/src/record/observer.ts @@ -262,7 +262,7 @@ function initMouseInteractionObserver({ // we are actually listening on 'pointerup' thisEventKey = 'TouchEnd'; } - } else if (pointerType == PointerTypes.Pen) { + } else if (pointerType === PointerTypes.Pen) { // TODO: these will get incorrectly emitted as MouseDown/MouseUp } } else if (legacy_isTouchEvent(event)) { From 4e0a3c30fa714f52811a8c4f355b89c5631ce109 Mon Sep 17 00:00:00 2001 From: Eoghan Murray Date: Thu, 13 Apr 2023 14:18:45 +0100 Subject: [PATCH 4/8] The assignment to the outer `pointerType` variable in an anonymous function was somehow missed by the `typings` check --- packages/rrweb/src/record/observer.ts | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts index 7f8cb7e8d0..7a3fba7a1b 100644 --- a/packages/rrweb/src/record/observer.ts +++ b/packages/rrweb/src/record/observer.ts @@ -244,14 +244,17 @@ function initMouseInteractionObserver({ let pointerType: PointerTypes | null = null; let thisEventKey = eventKey; if ('pointerType' in event) { - Object.keys(PointerTypes).forEach( - (pointerKey: keyof typeof PointerTypes) => { - if (event.pointerType === pointerKey.toLowerCase()) { - pointerType = PointerTypes[pointerKey]; - return; - } - }, - ); + switch (event.pointerType) { + case 'mouse': + pointerType = PointerTypes.Mouse; + break; + case 'touch': + pointerType = PointerTypes.Touch; + break; + case 'pen': + pointerType = PointerTypes.Pen; + break; + } if (pointerType === PointerTypes.Touch) { if (MouseInteractions[eventKey] === MouseInteractions.MouseDown) { // we are actually listening on 'pointerdown' From 7cb8492b2e263acd4aab6f332a5a16b74c3eae42 Mon Sep 17 00:00:00 2001 From: eoghanmurray Date: Thu, 13 Apr 2023 13:20:15 +0000 Subject: [PATCH 5/8] Apply formatting changes --- packages/rrweb/src/record/observer.ts | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts index 7a3fba7a1b..71b6fd38c7 100644 --- a/packages/rrweb/src/record/observer.ts +++ b/packages/rrweb/src/record/observer.ts @@ -245,15 +245,15 @@ function initMouseInteractionObserver({ let thisEventKey = eventKey; if ('pointerType' in event) { switch (event.pointerType) { - case 'mouse': - pointerType = PointerTypes.Mouse; - break; - case 'touch': - pointerType = PointerTypes.Touch; - break; - case 'pen': - pointerType = PointerTypes.Pen; - break; + case 'mouse': + pointerType = PointerTypes.Mouse; + break; + case 'touch': + pointerType = PointerTypes.Touch; + break; + case 'pen': + pointerType = PointerTypes.Pen; + break; } if (pointerType === PointerTypes.Touch) { if (MouseInteractions[eventKey] === MouseInteractions.MouseDown) { From 96d9cff08184daa8b705d6805cb8932bd1122cac Mon Sep 17 00:00:00 2001 From: Yun Feng Date: Sun, 16 Apr 2023 13:37:53 +0800 Subject: [PATCH 6/8] Update packages/rrweb/src/record/observer.ts --- packages/rrweb/src/record/observer.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts index 71b6fd38c7..b5a254f692 100644 --- a/packages/rrweb/src/record/observer.ts +++ b/packages/rrweb/src/record/observer.ts @@ -274,7 +274,7 @@ function initMouseInteractionObserver({ if (pointerType !== null) { currentPointerType = pointerType; if ( - (thisEventKey.substring(0, 5) === 'Touch' && + (thisEventKey.startsWith('Touch') && pointerType === PointerTypes.Touch) || (thisEventKey.substring(0, 5) === 'Mouse' && pointerType === PointerTypes.Mouse) From bffcb763e6fdf315f67c985baa92c25dc859a904 Mon Sep 17 00:00:00 2001 From: Yun Feng Date: Sun, 16 Apr 2023 13:38:01 +0800 Subject: [PATCH 7/8] Update packages/rrweb/src/record/observer.ts --- packages/rrweb/src/record/observer.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts index b5a254f692..42afa6a400 100644 --- a/packages/rrweb/src/record/observer.ts +++ b/packages/rrweb/src/record/observer.ts @@ -276,7 +276,7 @@ function initMouseInteractionObserver({ if ( (thisEventKey.startsWith('Touch') && pointerType === PointerTypes.Touch) || - (thisEventKey.substring(0, 5) === 'Mouse' && + (thisEventKey.startsWith('Mouse') && pointerType === PointerTypes.Mouse) ) { // don't output redundant info From a56418ae1c7766c501ac4aa167c597f61d50df45 Mon Sep 17 00:00:00 2001 From: Yun Feng Date: Sun, 16 Apr 2023 16:20:06 +1000 Subject: [PATCH 8/8] update newly added test snapshots from #1188 --- .../test/__snapshots__/integration.test.ts.snap | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/packages/rrweb/test/__snapshots__/integration.test.ts.snap b/packages/rrweb/test/__snapshots__/integration.test.ts.snap index 2021efd18b..f244948b67 100644 --- a/packages/rrweb/test/__snapshots__/integration.test.ts.snap +++ b/packages/rrweb/test/__snapshots__/integration.test.ts.snap @@ -5911,8 +5911,7 @@ exports[`record integration tests should mask inputs via function call 1`] = ` \\"data\\": { \\"source\\": 2, \\"type\\": 1, - \\"id\\": 27, - \\"pointerType\\": 0 + \\"id\\": 27 } }, { @@ -5936,8 +5935,7 @@ exports[`record integration tests should mask inputs via function call 1`] = ` \\"data\\": { \\"source\\": 2, \\"type\\": 0, - \\"id\\": 27, - \\"pointerType\\": 0 + \\"id\\": 27 } }, { @@ -5972,8 +5970,7 @@ exports[`record integration tests should mask inputs via function call 1`] = ` \\"data\\": { \\"source\\": 2, \\"type\\": 1, - \\"id\\": 37, - \\"pointerType\\": 0 + \\"id\\": 37 } }, { @@ -5997,8 +5994,7 @@ exports[`record integration tests should mask inputs via function call 1`] = ` \\"data\\": { \\"source\\": 2, \\"type\\": 0, - \\"id\\": 37, - \\"pointerType\\": 0 + \\"id\\": 37 } }, {