* fix: improve nested CSS rule handling and add related tests
* fix: enhance null safety for nested CSS rules and add related tests
* Improve nested CSS rule handling and replayer handling
Updated the fix message to include replayer handling of missing rules.
---------
Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>
* build(rrvideo): upgrade playwright from 1.32.1 to 1.56.1
Update playwright dependency to latest version and refactor test execution options to use a shared configuration with increased timeout for stability.
* Prefer `includes` formulation for brevity and as it composes better (easier to understand) in longer boolean expressions with &&
* Noticed two different interpretations of `headMetaAuthorship` under slimDOMOptions; take the opportunity to cleanup and merge code
* `link[rel="modulepreload"]` doesn't require `as="script"` which is tied to rel="preload" only
* extract file extension properly when examining `rel="prefetch"` to disregard URL parameters correctly
Co-authored-by: Eoghan Murray <eoghan@getthere.ie>
Fixes a browser 'lock up' at record time due to a presence of large amounts of css in <style> elements, which are split over multiple text nodes, which triggers the new code added in #1437 (see that PR for full explanation of why this all exists). #1437 was not written with performance in mind as it was believed to be an edge case, but things like Grammarly browser extension (#1603) among other scenarios were triggering pathological behavior, some of which was solved in #1615.
See also https://github.com/rrweb-io/rrweb/pull/1640#issuecomment-2633505804 for further discussion.
* Fix the case when there are multiple matches and we end up not finding a unique one - just go with the best guess when there are many splits by looking at the previous chunk's size
* Also add '0px' -> '0' stylesheet normalization, which also fixes the sample problem in a different way
* Add new test and modify it so that it can trigger a failure in the absence of the '0px' normalization; there may be other unknown ways of triggering a similar bug, so ensure that the primary 'best guess' method doesn't suffer a regression
* Leverage the 'best guess' method so that we can quit after 100 iterations trying to find a unique substring; hopefully this bit along with the `iterLimit` already added will prevent any future pathological cases.
Failing example extracted from large files identified by Paul D'Ambra (Posthog) ... see comment from MartinWorkfully: https://github.com/PostHog/posthog-js/issues/1668
* postcss was introduced in #1458 for use within adaptCssForReplay
* #1600 fixes the main case where invalid css could be introduced when if valid css from the output of `sheet.cssRules` was split according to how it was split across text nodes of the <style>
* the guard introduced here is still useful as we likely in future will switch to capturing the raw stylesheet contents (both <style> and <link>), at which point we will be much less confident of getting valid css
Fix for #1575 where postcss was raising an exception
* adapt the entire CSS as a whole in one pass with postcss, rather than adapting each split part separately
* break up the postcss output again and assign to individual text nodes (kind of inverse of splitCssText at record side)
* impose an upper bound of 30 iterations on the substring searches to preempt possible pathological behavior
* add tests to demonstrate the scenario and prevent regression
More technical details:
* Fix algorithm; checks against `ix_end` within loop were incorrect when `ix_start` was bigger than zero.
* Fix that length check against wrong array was causing 'should record style mutations with multiple child nodes and replay them correctly' test to fail.
Note on last point: I haven't looked into things more deeply than that the test was complaining about missing .length after `replayer.pause(1000);`
* [chore] Cache yarn packages for CI
* Cache yarn in release.yml
* [chore] Update deprecated download artifact on CI (#1647)
* I'm merging even though ESLint is stlll failing in Github Actions as I believe it's running actions _without_ this PR applied yet
- it was working for me when the test was run in isolation (`-t` option), but when the entire cross-origin-iframes test was run, the change of iframe contents didn't seem to happen in time
* Add eslint rule to flag up me forgetting to camelCase - I'd say I introduced all the snake_cases that are fixed here
* Allow some dubious snake cases for now; we could examine again whether they can be converted to `camelCase['snake_var']` if we need to maintain backwards compatibility of output
* add ESLINT_USE_FLAT_CONFIG against eslint v8.57.0 in order to continue using the deprecated .eslintrc.js method
* refactor: improved tab recording to improve stability
* feat: enable to import session
* improve stability
* feat: enable to edit session name
* prevent duplicate rrweb player in the dev mode
* fix: remote CSS does not get rebuilt properly
This fixes an issue where inlined CSS from a remotely loaded `<link>` does not get applied properly due to object reference mutation.
* add changeset
* ci-cd on ubuntu-22.04 instead of latest
* keep mirror meta synced
- Fix bug where the right split point was not being picked for the 3rd section onwards
- Fix that it wasn't able to find a split when both halves were identical
- Add test to put splitCssText through it's paces with a large file
- Introduce a limit on the iteration which causes the 'efficiently' test to fail
- Fix poor 'crawling' performance in the 'matching' algorithm for large css texts - e.g. for a (doubled) benchmark.css, we were running `normalizeCssText` 9480 times before `k` got to the right place
- Further algorithm efficiency: need to take larger jumps; use the scaling factor to make better guess at how big a jump to make
* fix: remove the permission not needed and update the player style link
* fix: change the way of importing worker script
* improve the extension version
* build: add process env to disable inline worker import
* improve style file
* upgrade svelte2tsx
* disable eslint check for that line
* merge the extension-release action into release action
---------
Co-authored-by: YunFeng0817 <YunFeng0817@users.noreply.github.com>
fix for replay of a blocked element when using 'fast forward' (rrdom)
- Dimensions were not being properly applied when you seek to a position in the replay. Need to use `setProperty` rather than trying to set the width/height directly
Simplify the hover replacement function, which has been borrowed from postcss-pseudo-classes
Note: 'parses nested commas in selectors correctly' was failing after this PR, however I don't think that the previous behaviour was desirable, so have added a new test to formalize this expectation
Support a contrived/rare case where a <style> element has multiple text node children (this is usually only possible to recreate via javascript append) ... this PR fixes cases where there are subsequent text mutations to these nodes; previously these would have been lost
* In this scenario, a new CSS comment may now be inserted into the captured `_cssText` for a <style> element to show where it should be broken up into text elements upon replay: `/* rr_split */`
* The new 'can record and replay style mutations' test is the principal way to the problematic scenarios, and is a detailed 'catch-all' test with many checks to cover most of the ways things can fail
* There are new tests for splitting/rebuilding the css using the rr_split marker
* The prior 'dynamic stylesheet' route is now the main route for serializing a stylesheet; dynamic stylesheet were missed out in #1533 but that case is now covered with this PR
This PR was originally extracted from #1475 so the initial motivation was to change the approach on stringifying <style> elements to do so in a single place. This is also the motivating factor for always serializing <style> elements via the `_cssText` attribute rather than in it's childNodes; in #1475 we will be delaying populating `_cssText` for performance and instead recorrding them as assets.
Thanks for the detailed review to Justin Halsall <Juice10@users.noreply.github.com> & Yun Feng <https://github.com/YunFeng0817>
* Get around monkey patched Nodes
* inlineImages: Setting of `image.crossOrigin` is not always necessary (#1468)
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
* Move `childNodes` to @rrweb/utils
* Use non-monkey patched versions of the `childNodes`, `parentNode` `parentElement` `textContent` accessors
* Add getRootNode and contains, and add comprehensive todo list
* chore: Update turbo.json tasks for better build process
* Update caniuse-lite
* chore: Update eslint-plugin-compat to version 5.0.0
* chore: Bump @rrweb/utils version to 2.0.0-alpha.15
* delete unused yarn.lock files
* Set correct @rrweb/utils version in package.json
* Migrate over some accessors to reverse-monkey-patched version
* Add missing functions
* Fix illegal invocation error
* Revert closer to what it was.
This feels incorrect to me (Justin Halsall), but some of the tests break without it so I'm restoring this to be closer to its original here:
cfd686d488/packages/rrweb-snapshot/src/snapshot.ts (L1011)
* Reverse monkey patch all methods LWC hijacks
* Make tests more stable
* Safely handle rrdom nodes in hasShadowRoot
* Remove duplicated test
* Use variable `serverURL` in test
* Use monorepo default browserlist
* Fix typing issue for new typescript
* Remove unused package
* Remove unused code
* Add prefix to reverse-monkey-patched methods to make them more explicit
* Add default exports to @rrweb/utils
---------
Co-authored-by: Eoghan Murray <eoghan@getthere.ie>
* Added session downloader for chrome extension
- The session list now has a button to download sessions as .json files for use with rrweb-player
- Improved styling for the delete and download buttons
* chore: its important to run `yarn build:all` before running `yarn dev`
* feat: trigger showModal from rrdom and rrweb
* feat: Add support for replaying modal and non modal dialog elements
* chore: Update dev script to remove CLEAR_DIST_DIR flag
* Get modal recording and replay working
* DRY up dialog test and dedupe snapshot images
* feat: Refactor dialog test to use updated attribute name
* feat: Update dialog test to include rr_open attribute
* chore: Add npm dependency happy-dom@14.12.0
* Add more test cases for dialog
* Clean up naming
* Refactor dialog open code
* Revert changed code that doesn't do anything
* Add documentation for unimplemented type
* chore: Remove unnecessary comments in dialog.test.ts
* rename rr_open to rr_openMode
* Replace todo with a skipped test
* Add better logging for CI
* Rename rr_openMode to rr_open_mode
rrdom downcases all attribute names which made `rr_openMode` tricky to deal with
* Remove unused images
* Move after iframe append based on @YunFeng0817's comment
https://github.com/rrweb-io/rrweb/pull/1503#discussion_r1666363931
* Remove redundant dialog handling from rrdom.
rrdom already handles dialog element creation it's self
* Rename variables for dialog handling in rrweb replay module
* Update packages/rrdom/src/document.ts
---------
Co-authored-by: Eoghan Murray <eoghan@getthere.ie>
* Replace relative URLs with absolute URLs when stringifying stylesheets
* Add test to show desired behavior for imported stylesheets from seperate directory
* Rename `absoluteToStylesheet` to `absolutifyURLs` and call it once after stringifying imported stylesheet
* Don't create the intermediary array of the spread operator
* Formalize that `stringifyRule` should expect a sheet href
* Ensure a <style> element can also import and gets it's url absolutized
* Handle case where non imported stylesheet has relative urls that need to be absolutified
* Clarify in test files where jpegs are expected to appear in absolutified urls
* Move absolutifyURLs call for import rules out of trycatch
* Add a benchmarking test for stringifyStylesheet
* Avoid the duplication on how to fall back
---------
Co-authored-by: Eoghan Murray <eoghan@getthere.ie>
Co-authored-by: eoghanmurray <eoghanmurray@users.noreply.github.com>
fix style element corner case
- historically we have recorded duplicated css content in certain cases (demonstrated by the attached replayer test). This fix ensures that the replayer doesn't doubly add the content, which can cause problems when further mutations occur
---------
Review and further tests contributed by: Eoghan Murray <eoghan@getthere.ie>
