improve mouse record and replay (#49)

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.

src/record/observer.ts

@@ -248,7 +248,7 @@ function initMousemoveObserver(cb: mousemoveCallBack): listenerHandler {
       });
       wrappedCb();
     },
-    20,
+    50,
     {
       trailing: false,
     },

src/replay/index.ts

@@ -427,13 +427,7 @@ export class Replayer {
           d.positions.forEach(p => {
             const action = {
               doAction: () => {
-                this.mouse.style.left = `${p.x}px`;
-                this.mouse.style.top = `${p.y}px`;
-                const target = mirror.getNode(p.id);
-                if (!target) {
-                  return this.warnNodeNotFound(d, p.id);
-                }
-                this.hoverElements((target as Node) as Element);
+                this.moveAndHover(d, p.x, p.y, p.id);
               },
               delay: p.timeOffset + e.timestamp - this.baselineTime,
             };
@@ -475,6 +469,7 @@ export class Replayer {
              * clicked at this moment.
              */
             if (!isSync) {
+              this.moveAndHover(d, d.x, d.y, d.id);
               this.mouse.classList.remove('active');
               // tslint:disable-next-line
               void this.mouse.offsetWidth;
@@ -577,6 +572,16 @@ export class Replayer {
     }
   }
 
+  private moveAndHover(d: incrementalData, x: number, y: number, id: number) {
+    this.mouse.style.left = `${x}px`;
+    this.mouse.style.top = `${y}px`;
+    const target = mirror.getNode(id);
+    if (!target) {
+      return this.warnNodeNotFound(d, id);
+    }
+    this.hoverElements((target as Node) as Element);
+  }
+
   private hoverElements(el: Element) {
     this.iframe
       .contentDocument!.querySelectorAll('.\\:hover')

src/replay/styles/style.css

@@ -5,6 +5,7 @@
   position: absolute;
   width: 20px;
   height: 20px;
+  transition: 0.05s linear;
   background-size: contain;
   background-position: center center;
   background-repeat: no-repeat;