This is an important patch contains some crtical bug fixes for
the DOM mutation observer.
Previously the observer did not handle complex DOM movement very
well. So in this patch we optimized this by distinguishing moved
node better and added a resolving queue to avoid the error caused
by ordering.
1. add a liveMode flag to config, when liveMode is set, the timer
will keep running even though all the actions casted
2. add a public method addEvent, which will cast newly added event
in sync
3. move mouse in sync mode with the latest position info
Increase the throttle value of collecting mouse move and add a
transition time to the replayer's mouse. This may decrease the
size of mouse move data and make the replay movement more smooth.
Another change is to move and hover when click event is replayed.
This is to improve the replay of some programmatic click, such as
E2E tests.
If an element was blocked, its child nodes should also be blocked.
The interactions and mutations on the element and its child nodes
also need to be blocked.
Skip inactive time is an important and useful feature. We consider
user interaction events as active, and check next user interaction
event after apply incremental snapshot.
If next user interaction event has a time gap larger than the
threshold, we will set a dynamic speed value which will skip the
inactive time interval in about 5 seconds.
Before this patch, the checker in the timer will stop only when
actions array is empty.
When we call play more than once, it will clear the timer first,
then push filtered new actions and start the timer again. If
all of this happened in a frame, the checker which should be
cleared may found actions array is not empty and keep check.
So this patch we use timer.raf to hold raf's handle and cancel
it when clear was called.
In this commit we switched the sandbox strategy to use iframe's
sandbox attribute. Indeed we do not need delegate event anymore,
but need to add some styles into the iframe.
The details were documented in the sandbox part of internal design.
When add new nodes, we may use insertBefore API to insert node before
its next sibling. But the sibling may not in the DOM tree at that
moment if it was in the missing node map.
