* Extract method (isElementBlocked) and add tests
* Add blockSelector argument to snapshot
If blockSelector is passed, it will be matched against the element.
Reasoning: Mutating class names can get messy, so providing another hook
helps keep code clean by using data-attributes instead.
Loop the append queue has been proved to be very inefficient, and
some times lead to N^2 time complexity.
Especially when some abnormal data could not be appended into the
real DOM, will make a dead loop.
Previously we use a 5000ms time out to handle this, which is not
user-friendly and not explicitly.
In this patch, we transform the queue into a tree data structure,
which reflects the layout of real DOM. With the tree data structure,
we can find whether there are dangling nodes that need to be dropped.
Also, the iteration will be much more efficient.
There is still a 500ms time out to avoid a dead loop, but should not
be called in expected scenarios.
Without this change, the following fails to compile in typescript:
```js
new rrwebPlayer({
target: document.body,
props: {
width: 900,
events,
autoPlay: true,
},
})
```
* The `processMutations` function needed to be bound to the `mutationBuffer` object, as otherwise `this` referred to the `MutationObserver` object itself
* Enable external pausing of mutation buffer emissions
- no automatic pausing based on e.g. pageVisibility yet, assuming such a thing is desirable
https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
- user code has to call new API method `freezePage` e.g. when page is hidden or after a timeout
- automatically unpauses when the next user initiated event occurs
(am assuming everything that isn't a mutation event counts as 'user initiated'
either way think this is the correct thing to do until I see a counterexample
of an event that shouldn't cause the mutations to be unbufferred)
* Avoid a build up of duplicate `adds` by delaying pushing to adds until emission time
* Need to export freezePage in order to use it from rrweb.min.js
* Add a test to check if mutations can be turned off with the `freezePage` method
* I noticed out of order ids (in terms of a DOM walk) in a FullSnapshot. A DOM mutation was executed against the mirror asynchronously before it could be fully processed. This would lead to a situation in replay where a mutation is executed against a DOM tree that already has the mutation applied. This changeset fixes that by freezing any mutations until the snapshot is completed.
* Remove attribute modifications from a mutation event that were incorrect in that they were repeating the attributes of those nodes present in the 'adds' array of the same mutation
* I've manually verified that this empty text node is actually removed when the dropdown is opened:
document.getElementById('select2-results-1').childNodes
NodeList(2) [li.select2-results-dept-0.select2-result.select2-result-selectable.select2-highlighted, li.select2-results-dept-0.select2-result.select2-result-selectable]
and also that it is not reinstated after the second `await page.click('.select2-container');`
* Rearrange when removal happens in order to satisfy tests. I'm also reverting a recent test change (2600fe7) so that tests pass after this rearrangement; I believe that test change to still be the correct way of doing it, but maybe it is not strictly important that there are extra mutations on attributes of just added nodes
* As mutations are now paused during FullSnapshots, we shouldn't be counting this as a 'user emission'. We automatically emit mutations after unpause anyway ('emit anything queued up now')
* Ensure that we clear arrays before emitting, as the mutation could have the side effect of triggering a FullSnapshot (checkoutEveryNth), which would otherwise re-trigger emission of same mutation (through the new pause/fullsnapshot/mutationemit/unpause process)
* Don't let the programattic pausing during TakeFullSnapshot accidentally unpause a manual call to the API method `freezePage`
* Rename paused -> frozen for consistency and change to use getter/setter access methods
* Preserve original quotes when rewriting CSS url() paths - important for inline SVG files which often have spaces
* Found an example in the wild with the 'charset=' part left off. This is supported by https://css-tricks.com/lodge/svg/09-svg-data-uris/ ... not sure why we aren't just testing for the 'data:' prefix here?
* Not sure why this is now coming back with a double quote after recent changes here; it's supposed to preserve the single quote from style.css??
* Add a `slimDOM` option to strip out unnecessary parts of the DOM in terms of replay
- <script> tags in the <head> take up unnecessary storage space and are often injected semi randomly to become a source of unnecessary variation between recordings of the same thing
- comment tags can be stripped out without affecting display
- future: this option could also turn on more aggressive stripping, e.g. elements that are hidden by CSS (assuming we can handle them becoming visible after mutation events)
* Mark nodes ignored due to slimDOM option, so that they can also be ignored by the mutation observer in rrweb
* Introducing the `ignored` attribute violates the `serializedNodeWithId` type
* slimDOM: Strip out whitespace nodes from <head> element as they have no effect but take up space
- these would otherwise have to be merged after <script> elements are removed; for statcounter usecase, removing
<script> elements is no good if there is still a trace of their presence due to the white space (and hence a variant <head> node is still produced)
- I explored a more radical stripping of all white space nodes, but there is a problem if parent node is <pre> or otherwise rendered with `white-space: pre` and similar.
detecting applied styles with getComputedStyle would be very expensive (I haven't measured it though)
* Export IGNORED_NODE as a constant instead of relying on the hard-to-grok `-2`
* Remove <link rel=preload as=script> which are similarly as useless as <script> tags
* Make slimDOM configurable with the expecations that `slimDOMOptions: true` will only enable non-destructive options (so not all options may be turned on)
* Expand slimDOM to add options to remove more elements from the <head> that should not be necessary in the replayer context
