From 482de20b3a06cc09c857063e051073b12f36c352 Mon Sep 17 00:00:00 2001 From: billyvg Date: Wed, 26 Jul 2023 19:59:01 +0000 Subject: [PATCH] Apply formatting changes --- packages/rrweb-snapshot/src/snapshot.ts | 7 ++- packages/rrweb/src/record/mutation.ts | 44 ++++++++++++-- packages/rrweb/src/record/observer.ts | 57 ++++++++++++++++--- .../rrweb/src/record/observers/canvas/2d.ts | 10 +++- .../record/observers/canvas/canvas-manager.ts | 24 ++++++-- .../src/record/observers/canvas/canvas.ts | 4 +- .../src/record/observers/canvas/webgl.ts | 10 +++- packages/rrweb/src/utils.ts | 12 +++- packages/rrweb/test/integration.test.ts | 12 ++-- 9 files changed, 152 insertions(+), 28 deletions(-) diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts index 000bdd8f43..1f86bb13e4 100644 --- a/packages/rrweb-snapshot/src/snapshot.ts +++ b/packages/rrweb-snapshot/src/snapshot.ts @@ -809,7 +809,12 @@ function serializeElementNode( maskTextSelector, unmaskTextSelector, } = options; - const needBlock = _isBlockedElement(n, blockClass, blockSelector, unblockSelector); + const needBlock = _isBlockedElement( + n, + blockClass, + blockSelector, + unblockSelector, + ); const tagName = getValidTagName(n); let attributes: attributes = {}; const len = n.attributes.length; diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts index 3874368faa..8bcfe22949 100644 --- a/packages/rrweb/src/record/mutation.ts +++ b/packages/rrweb/src/record/mutation.ts @@ -502,7 +502,13 @@ export default class MutationBuffer { case 'characterData': { const value = m.target.textContent; if ( - !isBlocked(m.target, this.blockClass, this.blockSelector, this.unblockSelector, false) && + !isBlocked( + m.target, + this.blockClass, + this.blockSelector, + this.unblockSelector, + false, + ) && value !== m.oldValue ) { this.texts.push({ @@ -558,7 +564,13 @@ export default class MutationBuffer { }); } if ( - isBlocked(m.target, this.blockClass, this.blockSelector, this.unblockSelector, false) || + isBlocked( + m.target, + this.blockClass, + this.blockSelector, + this.unblockSelector, + false, + ) || value === m.oldValue ) { return; @@ -647,7 +659,15 @@ export default class MutationBuffer { /** * Parent is blocked, ignore all child mutations */ - if (isBlocked(m.target, this.blockClass, this.blockSelector, this.unblockSelector, true)) { + if ( + isBlocked( + m.target, + this.blockClass, + this.blockSelector, + this.unblockSelector, + true, + ) + ) { return; } @@ -658,7 +678,13 @@ export default class MutationBuffer { ? this.mirror.getId(m.target.host) : this.mirror.getId(m.target); if ( - isBlocked(m.target, this.blockClass, this.blockSelector, this.unblockSelector, false) || + isBlocked( + m.target, + this.blockClass, + this.blockSelector, + this.unblockSelector, + false, + ) || isIgnored(n, this.mirror) || !isSerialized(n, this.mirror) ) { @@ -736,7 +762,15 @@ export default class MutationBuffer { // if this node is blocked `serializeNode` will turn it into a placeholder element // but we have to remove it's children otherwise they will be added as placeholders too - if (!isBlocked(n, this.blockClass, this.blockSelector, this.unblockSelector, false)) { + if ( + !isBlocked( + n, + this.blockClass, + this.blockSelector, + this.unblockSelector, + false, + ) + ) { n.childNodes.forEach((childN) => this.genAdds(childN)); if (hasShadowRoot(n)) { n.shadowRoot.childNodes.forEach((childN) => { diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts index b5a17023e7..12d574aa8b 100644 --- a/packages/rrweb/src/record/observer.ts +++ b/packages/rrweb/src/record/observer.ts @@ -358,7 +358,13 @@ export function initScrollObserver({ sampling, }: Pick< observerParam, - 'scrollCb' | 'doc' | 'mirror' | 'blockClass' | 'blockSelector' | 'unblockSelector' | 'sampling' + | 'scrollCb' + | 'doc' + | 'mirror' + | 'blockClass' + | 'blockSelector' + | 'unblockSelector' + | 'sampling' >): listenerHandler { const updatePosition = callbackWrapper( throttle( @@ -366,7 +372,13 @@ export function initScrollObserver({ const target = getEventTarget(evt); if ( !target || - isBlocked(target as Node, blockClass, blockSelector, unblockSelector, true) + isBlocked( + target as Node, + blockClass, + blockSelector, + unblockSelector, + true, + ) ) { return; } @@ -460,7 +472,13 @@ function initInputObserver({ !target || !tagName || INPUT_TAGS.indexOf(tagName) < 0 || - isBlocked(target as Node, blockClass, blockSelector, unblockSelector, true) + isBlocked( + target as Node, + blockClass, + blockSelector, + unblockSelector, + true, + ) ) { return; } @@ -1089,7 +1107,13 @@ function initMediaInteractionObserver({ const target = getEventTarget(event); if ( !target || - isBlocked(target as Node, blockClass, blockSelector, unblockSelector, true) + isBlocked( + target as Node, + blockClass, + blockSelector, + unblockSelector, + true, + ) ) { return; } @@ -1181,7 +1205,14 @@ function initFontObserver({ fontCb, doc }: observerParam): listenerHandler { } function initSelectionObserver(param: observerParam): listenerHandler { - const { doc, mirror, blockClass, blockSelector, unblockSelector, selectionCb } = param; + const { + doc, + mirror, + blockClass, + blockSelector, + unblockSelector, + selectionCb, + } = param; let collapsed = true; const updateSelection = callbackWrapper(() => { @@ -1200,8 +1231,20 @@ function initSelectionObserver(param: observerParam): listenerHandler { const { startContainer, startOffset, endContainer, endOffset } = range; const blocked = - isBlocked(startContainer, blockClass, blockSelector, unblockSelector, true) || - isBlocked(endContainer, blockClass, blockSelector, unblockSelector, true); + isBlocked( + startContainer, + blockClass, + blockSelector, + unblockSelector, + true, + ) || + isBlocked( + endContainer, + blockClass, + blockSelector, + unblockSelector, + true, + ); if (blocked) continue; diff --git a/packages/rrweb/src/record/observers/canvas/2d.ts b/packages/rrweb/src/record/observers/canvas/2d.ts index 45f4b70fff..23fc9f2351 100644 --- a/packages/rrweb/src/record/observers/canvas/2d.ts +++ b/packages/rrweb/src/record/observers/canvas/2d.ts @@ -42,7 +42,15 @@ export default function initCanvas2DMutationObserver( this: CanvasRenderingContext2D, ...args: Array ) { - if (!isBlocked(this.canvas, blockClass, blockSelector, unblockSelector, true)) { + if ( + !isBlocked( + this.canvas, + blockClass, + blockSelector, + unblockSelector, + true, + ) + ) { // Using setTimeout as toDataURL can be heavy // and we'd rather not block the main thread setTimeout(() => { diff --git a/packages/rrweb/src/record/observers/canvas/canvas-manager.ts b/packages/rrweb/src/record/observers/canvas/canvas-manager.ts index be7aca39da..9e8ed0be27 100644 --- a/packages/rrweb/src/record/observers/canvas/canvas-manager.ts +++ b/packages/rrweb/src/record/observers/canvas/canvas-manager.ts @@ -83,11 +83,23 @@ export class CanvasManager { this.mirror = options.mirror; if (recordCanvas && sampling === 'all') - this.initCanvasMutationObserver(win, blockClass, blockSelector, unblockSelector); + this.initCanvasMutationObserver( + win, + blockClass, + blockSelector, + unblockSelector, + ); if (recordCanvas && typeof sampling === 'number') - this.initCanvasFPSObserver(sampling, win, blockClass, blockSelector, unblockSelector, { - dataURLOptions, - }); + this.initCanvasFPSObserver( + sampling, + win, + blockClass, + blockSelector, + unblockSelector, + { + dataURLOptions, + }, + ); } private processMutation: canvasManagerMutationCallback = ( @@ -169,7 +181,9 @@ export class CanvasManager { const getCanvas = (): HTMLCanvasElement[] => { const matchedCanvas: HTMLCanvasElement[] = []; win.document.querySelectorAll('canvas').forEach((canvas) => { - if (!isBlocked(canvas, blockClass, blockSelector, unblockSelector, true)) { + if ( + !isBlocked(canvas, blockClass, blockSelector, unblockSelector, true) + ) { matchedCanvas.push(canvas); } }); diff --git a/packages/rrweb/src/record/observers/canvas/canvas.ts b/packages/rrweb/src/record/observers/canvas/canvas.ts index 31df5b1a37..8488986d25 100644 --- a/packages/rrweb/src/record/observers/canvas/canvas.ts +++ b/packages/rrweb/src/record/observers/canvas/canvas.ts @@ -29,7 +29,9 @@ export default function initCanvasContextObserver( contextType: string, ...args: Array ) { - if (!isBlocked(this, blockClass, blockSelector, unblockSelector, true)) { + if ( + !isBlocked(this, blockClass, blockSelector, unblockSelector, true) + ) { if (!('__context' in this)) this.__context = contextType; } return original.apply(this, [contextType, ...args]); diff --git a/packages/rrweb/src/record/observers/canvas/webgl.ts b/packages/rrweb/src/record/observers/canvas/webgl.ts index 9c427715c0..866efdeef5 100644 --- a/packages/rrweb/src/record/observers/canvas/webgl.ts +++ b/packages/rrweb/src/record/observers/canvas/webgl.ts @@ -50,7 +50,15 @@ function patchGLPrototype( return function (this: typeof prototype, ...args: Array) { const result = original.apply(this, args); saveWebGLVar(result, win, this); - if (!isBlocked(this.canvas, blockClass, blockSelector, unblockSelector, true)) { + if ( + !isBlocked( + this.canvas, + blockClass, + blockSelector, + unblockSelector, + true, + ) + ) { const recordArgs = serializeArgs([...args], win, this); const mutation: canvasMutationWithType = { type, diff --git a/packages/rrweb/src/utils.ts b/packages/rrweb/src/utils.ts index 6cd4eb9c7b..ad3707971d 100644 --- a/packages/rrweb/src/utils.ts +++ b/packages/rrweb/src/utils.ts @@ -9,7 +9,12 @@ import type { DeprecatedMirror, textMutation, } from '@sentry-internal/rrweb-types'; -import { createMatchPredicate, distanceToMatch, IMirror, Mirror } from '@sentry-internal/rrweb-snapshot'; +import { + createMatchPredicate, + distanceToMatch, + IMirror, + Mirror, +} from '@sentry-internal/rrweb-snapshot'; import { isShadowRoot, IGNORED_NODE, @@ -259,7 +264,10 @@ export function isBlocked( } if (unblockSelector) { - unblockDistance = distanceToMatch(el, createMatchPredicate(null, unblockSelector)); + unblockDistance = distanceToMatch( + el, + createMatchPredicate(null, unblockSelector), + ); } if (blockDistance > -1 && unblockDistance < 0) { diff --git a/packages/rrweb/test/integration.test.ts b/packages/rrweb/test/integration.test.ts index 00d69a985a..5e82c87aa9 100644 --- a/packages/rrweb/test/integration.test.ts +++ b/packages/rrweb/test/integration.test.ts @@ -521,7 +521,7 @@ describe('record integration tests', function (this: ISuite) { const html = getHtml.call(this, 'unblock.html', { blockSelector: 'div', unblockSelector: '.rr-unblock', - }) + }); await page.setContent(html); await page.type('input', 'should be record'); @@ -559,10 +559,12 @@ describe('record integration tests', function (this: ISuite) { it('mutations should work when blocked class is unblocked', async () => { const page: puppeteer.Page = await browser.newPage(); await page.goto('about: blank'); - await page.setContent(getHtml.call(this, 'blocked-unblocked.html', { - blockSelector: 'p', - unblockSelector: '.visible3,.rr-unblock', - })); + await page.setContent( + getHtml.call(this, 'blocked-unblocked.html', { + blockSelector: 'p', + unblockSelector: '.visible3,.rr-unblock', + }), + ); const elements1 = (await page.$x( '/html/body/div[1]/button',