fix for options `recordCanvas: true`:
* replace document.createElement with doc.createElement in rrweb-snapshot code
* Eoghan: add a regression test to prevent future accidental use of `document` instead of `doc`. This test can be excised if a new feature can only be run in the browser and not in the jsdom environment
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
* Fix and test for bug #1457 (Uncaught SyntaxError: Regular expression too large)
- see test case which is extracted from a real world css file; the selector regex was able to traverse the curly brace as when looking for quotes, it wasn't taking into account that the start quote could be escaped
* Apply formatting changes
* Create fair-ducks-clean.md
* Fix @import regex bit which was stopping consumption in the middle of a url - need to consume quotes.
Thanks dave.kindel@pendo.io for reporting and isolating this case
---------
Co-authored-by: eoghanmurray <eoghanmurray@users.noreply.github.com>
perf(snapshot): avoid costly generation of <a> element on each call to `getHref`, instead cache an anchor element and reuse it's href attributed
---------
Co-authored-by: Eoghan Murray <eoghan@getthere.ie>
* better splitting of selectors - overlapping with #1401
* Add test from example at https://github.com/PostHog/posthog/pull/21427
* ignore brackets inside selector strings
* Add another test as noticed that it's possible to escape strings
* Ensure we are ignoring commas within strings
Co-authored-by: Eoghan Murray <eoghan@getthere.ie>
* 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
* We weren't recursing into media queries (or @supports etc.) to rewrite hover pseudoclasses
* The early return meant that the stylesWithHoverClass cache wasn't being populated if there were no hover selectors on the stylesheet
- not committing the test, but modifying the existing 'add a hover class to a previously processed css string' as follows shows the problem:
--- a/packages/rrweb-snapshot/test/rebuild.test.ts
+++ b/packages/rrweb-snapshot/test/rebuild.test.ts
@@ -151,6 +185,7 @@ describe('rebuild', function () {
path.resolve(__dirname, './css/benchmark.css'),
'utf8',
);
+ cssText = cssText.replace(/:hover/g, '');
const start = process.hrtime();
addHoverClass(cssText, cache);
* Replace `min-device-width` and similar with `min-width` as the former looks out at the browser viewport whereas we need it to look at the replayer iframe viewport
* Add some tests to show how the hover replacement works against selector lists. I believe these were failing in a previous version of rrweb as I had some local patches that no longer seem to be needed to handle these cases
* Update name of function to reflect that 'addHoverClass' does more than just :hover. I believe this function is only exported for the purposes of use in the tests
* Apply formatting changes
* Create rotten-spies-enjoy.md
* Apply formatting changes
* Add correct typing on `getSelectors`
* Refactor CSS interfaces to include optional rules
* Change `rules` to be non optional
---------
Co-authored-by: eoghanmurray <eoghanmurray@users.noreply.github.com>
Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>
* 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>
* Perf: don't run the regex replace unless the selectorText contains a colon (rules generally contain colons)
* Need to check type before querying selectorText property - also good as it means we only try to fix colons at the leaf level
---------
Authored-by: eoghan murray <eoghan@getthere.ie>
* Extend to run fixBrowserCompatibilityIssuesInCSS over styles in inline style sheets
* Apply formatting changes
---------
Co-authored-by: eoghanmurray <eoghanmurray@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>
* 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
* fix: change default value of input type from null to text
* Apply formatting changes
* add changeset
* add a comment related to the type of input element
* fix: Fix input.type check
Actually I noticed that `el.type` returns `text` when type is not explicitly set, so this is slightly incorrect.
* fix linting
* Apply formatting changes
* first commit
* rrvideo v0.1.0
First version of rrvideo.
1. Use as a Node.JS lib.
2. Use as a CLI.
Features are implemented via puppeteer, ffmpeg and rrweb-player.
* add readme
* update publish script
* add node env in cli file and change package.json bin to same like README (#4)
Co-authored-by: Xu Yinjie <xuyinjie@xiaobangtouzi.com>
* release 0.2.0
* fix#6 avoid assign undefined to config
* Fix: Solve the inconsistency between rrvideo and the real recorded page rendering when rendering the page with a headless browser (https://github.com/rrweb-io/rrvideo/pull/26)
Author: xujiujiu <906784584@qq.com>
---------
Co-authored-by: xujiujiu <906784584@qq.com>
* refactor rrvideo
1. refactor code
2. change monorepo config
3. remove separate TS dependencies
* add changeset
* fix: eslint errors
---------
Co-authored-by: Yanzhen Yu <yanzhen@smartx.com>
Co-authored-by: xyj <593500664@qq.com>
Co-authored-by: Xu Yinjie <xuyinjie@xiaobangtouzi.com>
Co-authored-by: xujiujiu <906784584@qq.com>
* feat: Ensure password inputs are masked when switching type
Apply formatting changes
use data- attribute
ref: Ensure type is always lowercased
add changeset
* extract into util
* Apply formatting changes
* feat: Ignore `autoplay` attribute on video/auto elements
This element leads to weird issues when replaying, so it's better to strip this out.
* add changeset
* fix check
fix typo
* Apply formatting changes
---------
Co-authored-by: mydea <mydea@users.noreply.github.com>
* fix: Explicitly handle removed attributes
The attribute `value` can be null when a mutation observer triggers due to a removed attribute. This is currently not reflected by types and code.
* Apply formatting changes
* fix
* add changeset
* Firefox fix: Allow the <head> and <body> to be added in two stages so that (presumably) stylesheet rules are ready to be applied when the body appears
The css which triggered the bug was simply
{
margin-left: 220px;
transition: margin-left .448s;
}
* Add a test case which can only be appreciated if you record against this file://, save the events to a html file, and then open the file in Firefox (without this PR applied)
* Apply formatting changes
* Ensure we don't apply this branch when using rrdom, where it is not necessary
* Apply formatting changes
* Rewrite insertion in order to be compatible with rrdom
Also easier to understand
* Delete transition.html
* Create grumpy-ways-own.md
---------
Co-authored-by: Yun Feng <yun.feng0817@gmail.com>
* fix: Exclude `modulepreload` as well
We were only excluding `<link rel="preload" as="script" />` but we should include `rel="modulepreload"` as well
* Apply formatting changes
* fix: duplicated elements in shadow doms
clean observers before taking new full snapshots
* add checker for replayer to make it stable when data has duplicated nodes
* apply review suggestions
* add change log
* Apply formatting changes
* update prettier to fit the master branch
---------
Co-authored-by: Mark-Fenng <Mark-Fenng@users.noreply.github.com>
