Setting of the `crossorigin` attribute is not necessary for same-origin images, and causes an immediate image reload (albeit from cache) necessitating the use of a load event listener which subsequently mutates the snapshot. This change allows us to avoid the mutation of the snapshot for the same-origin case.
* Modify inlineImages test to remove delay and show that we can inline images without mutation
* Add an explicit test for when the `image.crossOrigin = 'anonymous';` method is necessary. Uses a combination of about:blank and our test server to simulate a cross-origin context
* Other test changes: there were some spurious rrweb mutations being generated by the addition of the crossorigin attribute that are now elimnated from the rrweb/__snapshots__/integration.test.ts.snap after this PR - this is good
This work is to try to provide support where rrweb might be included
in applications with various tools that might override Array.from
so that the 2nd parameter (the map function) will always work for
rrweb.
Co-authored-by: Michael Dellanoce <mdellanoce@pendo.io>
Some dev improvements:
* Add .editorconfig config file https://editorconfig.org/
* move the singleQuote spec into .editorconfig and add old .changesets/*.md to .prettierignore so that we don't incorrectly reformat new changeset files to single quote from the double quote which they can be autogenerated with in github
* .gitignore Ignore emacs chaff files
* Add `yarn format:head` a convenience command to run prettier against just those files in the head commit
* Some mention of `yarn format` in the docs
* Fix some test html closing tags; authoring mistakes, rather than deliberately malformed html — picked up by an explicit `yarn prettier --write '**/*.html'`
* Ensure there is separation of timestamps so mutations can be evaluated separately - was failing in the github build process probably due to higher perf
* Remove space from test file
* Create curvy-balloons-brake.md
---------
Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>
performance: remove a nested function call and an object clone during event emission
- rename `event` to `eventWithoutTime`, but maintain backwards compatibility
- `eventWithTime` (with time) could be renamed to `event` in a future version
This is an extension of PR #1339 authored by: mydea <mydea@users.noreply.github.com>
* Add support for capturing media attributes in rrweb-snapshot
* Add loop to mediaInteractionParam
* Add support for loop in RRMediaElement
* Add support for recording loop attribute on media elements
* Update video playback and fix bugs
* Update cross-origin iframe media attributes and player state
* fix: scrolling can be incorrect when fast-forwarding
* add test case
* add changeset and remove duplicate diffProps process
---------
Co-authored-by: Yun Feng <yun.feng0817@gmail.com>
* Make properties x and y optional in mouseInteractionParam
The event representing a mouse interaction of focus an element does not include the properties x and y. Thus, they must be defined as optional.
* Fix typings
* Fix serialization and mutation of <textarea> elements taking account the duality that the value can be set in either the child node, or in the value _parameter_ (not attribute)
* Backwards compatibility: Bug fix and regression test for #112
- this is to fix up 'historical' recordings, as duplicate textarea content should no longer be being created at record time
- new test shows what the snapshot generated by previous versions of rrweb used to look like, hence 'bad'
- original 0efe23f04a fix either didn't work or no longer works due to childNodes being appended subsequent to this part of the code
- during review, we also verified that the `_cssText` case should still be handled okay, as there's currently no scenario where csstext is present with css child nodes of a <style>
* Masking: Fix that textarea values were being missed by the masking system if the value was recorded as a child node
- I didn't notice that form.html was used in other tests, so lucky that I noticed that those tests also should have the 'pre value' masked out
* Simplify by always storing the textarea value in the `.value` attribute (from it's DOM property) and not as a childNode. It should still be rebuilt as a childNode rather than a property
---------
Authored-by: eoghanmurray <eoghan@getthere.ie>
* masking performance: avoid the repeated calls to `closest` when recursing through the DOM
- needsMask===true means that an ancestor has tested positively for masking, and so this node and all descendents should be masked
- needsMask===false means that no ancestors have tested positively for masking, we should check each node encountered
- needsMask===undefined means that we don't know whether ancestors are masked or not (e.g. after a mutation) and should look up the tree
* Add tests including an explicit characterData mutation tests
* Further performance improvement: avoid calls to `el.matches` when on a leaf node, e.g. a `<br/>`
---------
Authored-by: eoghanmurray <eoghan@getthere.ie>
Based on initial PR #1338 by Alexey Babik <alexey.babik@noibu.com>
* only call createHTMLDocument where it is needed
* Perf: create the mutation document once as a 'singleton' as it can be reused
---------
Co-authored-by: Michael Dellanoce <mdellanoce@pendo.io>
* Add config option to turn off all snapshotting and related observers
- allows RRWEB to be used for click/movement tracking alone, e.g. for a heatmaps use case
- could also be used if there was a separate process for recording the DOM (in which case a 3rd party library like https://github.com/antonmedv/finder could be added to record targets instead of the mirror)
---------
Authored-by: eoghanmurray <eoghanmurray@users.noreply.github.com>
Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>
* Upgrade jest to 29 and puppeteer to 16 in rrweb
* Apply formatting changes
* Upgrade rrweb's puppeteer to v20
* Apply formatting changes
* Canvas: Reduce flickering and capturing of empty canvas elements
Turn on `preserveDrawingBuffer` by default for canvas FPS recording.
Has some negative performance implications, but really helps when capturing canvas.
* Apply formatting changes
* Include all test image snapshots in ci
* Apply formatting changes
* Allow more flexibility when capturing hover
* Apply formatting changes
* Create tiny-chairs-build.md
* Apply formatting changes
* Update hover.test.ts
* Apply formatting changes
* Document snapshotFormat jest config
* Freeze `yarn.lock` in ci for reproducible dependencies
* Apply formatting changes
* Apply formatting changes
* Revert to old style of puppeteer evaluation script notation
* Apply formatting changes
* Make test less flaky
* Apply formatting changes
* Apply formatting changes
* Make tests less flaky
* Apply formatting changes
* Make test more robust
* Apply formatting changes
* Apply formatting changes
* Add debugging code for test
* Apply formatting changes
* Also test not ignored input
* Apply formatting changes
* Apply formatting changes
* Apply formatting changes
* escape ignoreSelector
* Apply formatting changes
* Apply formatting changes
* feat: Add `ignoreSelector` option
Similar to `ignoreClass`, but accepts a CSS selector so that you can use any CSS selector.
* Apply formatting changes
* Create clean-shrimps-lay.md
* Apply formatting changes
* Add a test which demonstrates how no mutations are generated when an element is created & destroyed in the same 'cycle' (a cylce here being enforced by freezePage)
* Test demonstrating current behaviour I'm about to modify; the data-test="x" attribute is present twice in the mutation, as is the textContent value of 'y'
* Attribute or text modifications on just-added nodes are redundant as demonstrated in test case
* Some correct test changes from other tests; I've manually inspected each of these mutation removals and confirmed that the attribute values are already present in the newly added nodes elsewhere in the same mutation
* Improve reliability of test case as per Justin's advice
* Don't use the CSSOM when there's `var()` present as it fails badly https://github.com/rrweb-io/rrweb/pull/1246
* As the CSS Object Model expands out shorthand properties, do a check on the string length before choosing which format to go for
- this approach allows 'var()' in a styleOMValue as it's only a problem when combined with a shorthand property
- before this change background:black; was getting expaned to 10 OM properties as follows:
'style': {
'background-color': 'black',
'background-image': false,
'background-position-x': false,
'background-position-y': false,
'background-size': false,
'background-repeat-x': false,
'background-repeat-y': false,
'background-attachment': false,
'background-origin': false,
'background-clip': false
}
* Updates to remainder of tests based on refined compact style mutations
* Apply suggestions from code review by: Justin Halsall <Juice10@users.noreply.github.com>
---------
Authored-by: eoghanmurray <eoghan@getthere.ie>
* Guard against presence of likely older third party libraries which (re)define Date.now, e.g. https://github.com/datejs/Datejs/issues/92
* Apply formatting changes
* (remove nowTimestamp import where Date.now() is not used)
* Add a PURE marker so an empty `ìf` statement doesn't show up in the rrweb-replay output
* Update packages/rrweb/src/utils.ts
Fix typing issue with regex against `Date.now()`
Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>
* Create little-radios-thank.md
* Apply formatting changes
* Update .changeset/little-radios-thank.md
* Apply formatting changes
---------
Co-authored-by: eoghanmurray <eoghanmurray@users.noreply.github.com>
Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>
* As per @Yun Feng: everyone has npm installed globally but maybe not yarn
* Add command to enable test result updating
* Default to running tests HEADLESS on rrweb
* Add command to build:all in a low memory environment
* Add a 'retest' command for when the code hasn't changed, but you are working on the test cases
* Add commands to reformat according to prettier. Named 'reformat' to indicate that we are doing a `--write`
* Update package.json
Co-authored-by: Yun Feng <yun.feng0817@gmail.com>
* Apply suggestions from code review
Co-authored-by: Yun Feng <yun.feng0817@gmail.com>
* Create few-turkeys-reflect.md
* Apply formatting changes
---------
Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>
Co-authored-by: Yun Feng <yun.feng0817@gmail.com>
* Fix for #816 - avoid triggering a CSP (content security policy) error with `.setAttribute('style')`
* The bare unattachedDoc that I previously naively created didn't have a doctype and wasn't a HTML document, so the child style element didn't have the `old.style` attribute available
* Add a try/catch to provide some robustness in case `document.implementation.createHTMLDocument` isn't available
* refactor rrvideo: use playwright rather than puppeteer
* add a progress bar for the tool
* add tests for cli.ts
* fix build error
* add change log
* update readme file
* Apply a scaling method to improve the resolution of the output video
* 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)
* Update how the changeset will read for the next release based on the trimming in this PR
* Prefer triple equals
* The assignment to the outer `pointerType` variable in an anonymous function was somehow missed by the `typings` check
* Apply formatting changes
* Update packages/rrweb/src/record/observer.ts
* Update packages/rrweb/src/record/observer.ts
---------
Co-authored-by: Yun Feng <yun.feng0817@gmail.com>
