* Keep blocked root elements as placeholders
`serializeNode` turns blocked elements into placeholder nodes so we need to make sure we don't remove these elements from the mutations when they get added.
We do however need to keep removing any children of these blocked elements from getting added or mutated.
* Update packages/rrweb/src/record/mutation.ts
A previous patch has refactored the canvas image loading process
and it does not use <img /> anymore, so the counter is no longer
need.
commit: 4a72ff0b3cdf9920ea38bca8f69eedbfe52c99904a0036f3fc1cd7c1e0248a37R725
* Simplify css for click animation
* Refactor to transfer responsibility for casting multiple synchronous to index.ts from machine.ts (so they can be dealt with in bulk)
* During synchronous application of a batch of events, move the mouse to the last position so that it's in the correct place when the timer starts
- previous `needCastInSyncMode` added in 4bf533a675 meant that the isSync versions of MouseMove/TouchMove were being accidentally ignored
- each synchronous MouseMove would have resulted in a separate mouse position update
- the Click/TouchStart/TouchEnd events didn't have an async version
* The desktop pointer cursor is not representative of what is happening on a mobile device.
Instead, check a recording for any presence of a Touch event, and switch to a touch visualisation mode for the entire recording.
(for now, we use this mode even for mixed touch/mouse devices - this could be improved upon in future)
Show a round circle representing the users' finger which is visible only between TouchStart and TouchEnd events
Again this can be evolved upon, but this change should be a good start in the right direction.
* It's more correct to not have a transition for repositioning of touch as user can lift finger off screen and place elsewhere; however we can now have much smoother touch movement during the .touch-active phase as we know the finger is on the screen. This has a .25s delaying effect on the touch position which IMO is acceptable; e.g. scroll position can lag behind a touch movement and this seems to bring them more in sync
* Ensure we end up with the correct touch-active state after a series of synchronous events
* Important to discontinue tail animations and position transitions when user has lifted their finger and placed it into a new position. This is apparent in a replay session where the user is scrolling the page using repeated TouchMove bottom-to-top movements
* Simplify by unwrapping `mouseState.touchActive` and `mouseState.pos` into their own global vars
- encountered inconsistent html with multiple <option> elements with the same value attribute
- due to check `attributes.selected = (n as HTMLOptionElement).selected;` the extra ones were being stored as `selected: false`; furthermore, the `false` value was being ignored upon replay, and so the last of the extra ones was being chosen as the 'selected' option
* Add test for event ordering utilizing final html testing method added by Justin (with thanks)
* Found an error where two mutation events had the same timestamp, but one removed a node added in the other. The `actions.splice` method was reversing their order and triggering a 'Node with id [...] not found' error
* Show whether a node was not found because it was never there, or because some other mutation already removed it
* Be more careful applying mutations as replay-stopping things can go wrong, e.g. node removal parent belongs to a different FullSnapshot and has e.g. a text nodeType
* Don't warn when a modified node has been removed in the same mutation - or the parent node for a removed node has been already removed
