From 4709c720cdf8d9562eadd75d827d68fecabadd57 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Mon, 5 Nov 2018 13:20:42 +0800
Subject: [PATCH] also resolve missing previous node

---
 src/replay/index.ts                    | 44 +++++++++++++++-----------
 src/types.ts                           | 11 ++++---
 test/__snapshots__/integration.ts.snap |  6 +++-
 3 files changed, 36 insertions(+), 25 deletions(-)

diff --git a/src/replay/index.ts b/src/replay/index.ts
index 134f55af..d5ca8024 100644
--- a/src/replay/index.ts
+++ b/src/replay/index.ts
@@ -11,7 +11,9 @@ import {
   playerConfig,
   playerMetaData,
   viewportResizeDimention,
-  missingNextNodeMap,
+  missingNodeMap,
+  addedNodeMutation,
+  missingNode,
 } from '../types';
 import { mirror } from '../utils';
 
@@ -218,7 +220,7 @@ export class Replayer {
           }
         });
 
-        const missingNextNodeMap: missingNextNodeMap = {};
+        const missingNodeMap: missingNodeMap = {};
         d.adds.forEach(mutation => {
           const target = buildNodeWithSN(
             mutation.node,
@@ -236,8 +238,8 @@ export class Replayer {
             next = mirror.getNode(mutation.nextId) as Node;
           }
 
-          if (mutation.nextId === -1) {
-            missingNextNodeMap[mutation.node.id] = {
+          if (mutation.previousId === -1 || mutation.nextId === -1) {
+            missingNodeMap[mutation.node.id] = {
               node: target,
               mutation,
             };
@@ -252,16 +254,13 @@ export class Replayer {
             parent.appendChild(target);
           }
 
-          if (mutation.previousId) {
-            this.resolveMissingNode(
-              missingNextNodeMap,
-              parent,
-              target,
-              mutation.previousId,
-            );
+          if (mutation.previousId || mutation.nextId) {
+            this.resolveMissingNode(missingNodeMap, parent, target, mutation);
           }
         });
-        // TODO: assert missingNextNodeMap has no key after resolve
+        if (Object.keys(missingNodeMap).length) {
+          console.warn('Found unresolved missing node map', missingNodeMap);
+        }
 
         d.texts.forEach(mutation => {
           const target = (mirror.getNode(mutation.id) as Node) as Text;
@@ -343,17 +342,24 @@ export class Replayer {
   }
 
   private resolveMissingNode(
-    map: missingNextNodeMap,
+    map: missingNodeMap,
     parent: Node,
     target: Node,
-    previousId: number,
+    targetMutation: addedNodeMutation,
   ) {
-    if (map[previousId]) {
-      const { node, mutation } = map[previousId];
-      parent.insertBefore(node, target);
+    const { previousId, nextId } = targetMutation;
+    const previousInMap = previousId && map[previousId];
+    const nextInMap = nextId && map[nextId];
+    if (previousInMap || nextInMap) {
+      const { node, mutation } = (previousInMap || nextInMap) as missingNode;
+      if (previousInMap) {
+        parent.insertBefore(node, target);
+      } else {
+        parent.insertBefore(node, target.nextSibling);
+      }
       delete map[mutation.node.id];
-      if (mutation.previousId) {
-        this.resolveMissingNode(map, parent, node as Node, mutation.previousId);
+      if (mutation.previousId || mutation.nextId) {
+        this.resolveMissingNode(map, parent, node as Node, mutation);
       }
     }
   }
diff --git a/src/types.ts b/src/types.ts
index df29c00e..906c81d4 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -232,9 +232,10 @@ export type playerMetaData = {
   totalTime: number;
 };
 
-export type missingNextNodeMap = {
-  [id: number]: {
-    node: Node;
-    mutation: addedNodeMutation;
-  };
+export type missingNode = {
+  node: Node;
+  mutation: addedNodeMutation;
+};
+export type missingNodeMap = {
+  [id: number]: missingNode;
 };
diff --git a/test/__snapshots__/integration.ts.snap b/test/__snapshots__/integration.ts.snap
index 80689e97..4008732b 100644
--- a/test/__snapshots__/integration.ts.snap
+++ b/test/__snapshots__/integration.ts.snap
@@ -1215,7 +1215,7 @@ exports[`select2 1`] = `
   {
     \\"type\\": 4,
     \\"data\\": {
-      \\"href\\": \\"data:text/html,<!DOCTYPE html>%0A<html lang=\\\\\\"en\\\\\\">%0A<head>%0A  <meta charset=\\\\\\"UTF-8\\\\\\">%0A  <meta name=\\\\\\"viewport\\\\\\" content=\\\\\\"width=device-width, initial-scale=1.0\\\\\\">%0A  <meta http-equiv=\\\\\\"X-UA-Compatible\\\\\\" content=\\\\\\"ie=edge\\\\\\">%0A  <title>Select2 3.5</title>%0A  <link rel=\\\\\\"stylesheet\\\\\\" href=\\\\\\"https://cdn.jsdelivr.net/npm/select2@3.5.1/select2.css\\\\\\">%0A</head>%0A<body>%0A  <blockquote>%0A    Select2 is a jQuery replacement for select boxes.%0A    <br>%0A    In the 3.5 version it use a quite complicated DOM generation strategy which is a good battle-test for rrweb's recorder.%0A  </blockquote>%0A  <select id=\\\\\\"el\\\\\\">%0A    <option value=\\\\\\"a\\\\\\">A</option>%0A    <option value=\\\\\\"b\\\\\\">B</option>%0A  </select>%0A  <script src=\\\\\\"https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js\\\\\\"></script>%0A  <script src=\\\\\\"https://cdn.jsdelivr.net/npm/select2@3.5.2-browserify/select2.min.js\\\\\\"></script>%0A  <script>%0A    $('#el').select2();%0A  </script>%0A%0A    <script>%0A      var record = (function () {%0A    'use strict';%0A%0A    /*! *****************************************************************************%0D%0A    Copyright (c) Microsoft Corporation. All rights reserved.%0D%0A    Licensed under the Apache License, Version 2.0 (the \\\\\\"License\\\\\\"); you may not use%0D%0A    this file except in compliance with the License. You may obtain a copy of the%0D%0A    License at http://www.apache.org/licenses/LICENSE-2.0%0D%0A%0D%0A    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY%0D%0A    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED%0D%0A    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,%0D%0A    MERCHANTABLITY OR NON-INFRINGEMENT.%0D%0A%0D%0A    See the Apache Version 2.0 License for specific language governing permissions%0D%0A    and limitations under the License.%0D%0A    ***************************************************************************** */%0D%0A%0D%0A    var __assign = function() {%0D%0A        __assign = Object.assign || function __assign(t) {%0D%0A            for (var s, i = 1, n = arguments.length; i < n; i++) {%0D%0A                s = arguments[i];%0D%0A                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];%0D%0A            }%0D%0A            return t;%0D%0A        };%0D%0A        return __assign.apply(this, arguments);%0D%0A    };%0A%0A    var NodeType;%0A    (function (NodeType) {%0A        NodeType[NodeType[\\\\\\"Document\\\\\\"] = 0] = \\\\\\"Document\\\\\\";%0A        NodeType[NodeType[\\\\\\"DocumentType\\\\\\"] = 1] = \\\\\\"DocumentType\\\\\\";%0A        NodeType[NodeType[\\\\\\"Element\\\\\\"] = 2] = \\\\\\"Element\\\\\\";%0A        NodeType[NodeType[\\\\\\"Text\\\\\\"] = 3] = \\\\\\"Text\\\\\\";%0A        NodeType[NodeType[\\\\\\"CDATA\\\\\\"] = 4] = \\\\\\"CDATA\\\\\\";%0A        NodeType[NodeType[\\\\\\"Comment\\\\\\"] = 5] = \\\\\\"Comment\\\\\\";%0A    })(NodeType || (NodeType = {}));%0A%0A    var _id = 1;%0A    function genId() {%0A        return _id++;%0A    }%0A    function resetId() {%0A        _id = 1;%0A    }%0A    function getCssRulesString(s) {%0A        try {%0A            var rules = s.rules || s.cssRules;%0A            return rules%0A                ? Array.from(rules).reduce(function (prev, cur) { return (prev += cur.cssText); }, '')%0A                : null;%0A        }%0A        catch (error) {%0A            return null;%0A        }%0A    }%0A    function extractOrigin(url) {%0A        var origin;%0A        if (url.indexOf('//') > -1) {%0A            origin = url%0A                .split('/')%0A                .slice(0, 3)%0A                .join('/');%0A        }%0A        else {%0A            origin = url.split('/')[0];%0A        }%0A        origin = origin.split('?')[0];%0A        return origin;%0A    }%0A    var URL_IN_CSS_REF = /url\\\\\\\\((['\\\\\\"])([^'\\\\\\"]*)\\\\\\\\1\\\\\\\\)/gm;%0A    function absoluteToStylesheet(cssText, href) {%0A        return cssText.replace(URL_IN_CSS_REF, function (_1, _2, filePath) {%0A            if (!/^[./]/.test(filePath)) {%0A                return \\\\\\"url('\\\\\\" + filePath + \\\\\\"')\\\\\\";%0A            }%0A            if (filePath[0] === '/') {%0A                return \\\\\\"url('\\\\\\" + (extractOrigin(href) + filePath) + \\\\\\"')\\\\\\";%0A            }%0A            var stack = href.split('/');%0A            var parts = filePath.split('/');%0A            stack.pop();%0A            for (var _i = 0, parts_1 = parts; _i < parts_1.length; _i++) {%0A                var part = parts_1[_i];%0A                if (part === '.') {%0A                    continue;%0A                }%0A                else if (part === '..') {%0A                    stack.pop();%0A                }%0A                else {%0A                    stack.push(part);%0A                }%0A            }%0A            return \\\\\\"url('\\\\\\" + stack.join('/') + \\\\\\"')\\\\\\";%0A        });%0A    }%0A    var RELATIVE_PATH = /^(\\\\\\\\.\\\\\\\\.|\\\\\\\\.|)\\\\\\\\//;%0A    function absoluteToDoc(doc, attributeValue) {%0A        if (!RELATIVE_PATH.test(attributeValue)) {%0A            return attributeValue;%0A        }%0A        var a = doc.createElement('a');%0A        a.href = attributeValue;%0A        return a.href;%0A    }%0A    function serializeNode(n, doc) {%0A        switch (n.nodeType) {%0A            case n.DOCUMENT_NODE:%0A                return {%0A                    type: NodeType.Document,%0A                    childNodes: []%0A                };%0A            case n.DOCUMENT_TYPE_NODE:%0A                return {%0A                    type: NodeType.DocumentType,%0A                    name: n.name,%0A                    publicId: n.publicId,%0A                    systemId: n.systemId%0A                };%0A            case n.ELEMENT_NODE:%0A                var tagName = n.tagName.toLowerCase();%0A                var attributes_1 = {};%0A                for (var _i = 0, _a = Array.from(n.attributes); _i < _a.length; _i++) {%0A                    var _b = _a[_i], name = _b.name, value = _b.value;%0A                    if (name === 'src' || name === 'href') {%0A                        attributes_1[name] = absoluteToDoc(doc, value);%0A                    }%0A                    else {%0A                        attributes_1[name] = value;%0A                    }%0A                }%0A                if (tagName === 'link') {%0A                    var stylesheet = Array.from(doc.styleSheets).find(function (s) {%0A                        return s.href === n.href;%0A                    });%0A                    var cssText = getCssRulesString(stylesheet);%0A                    if (cssText) {%0A                        attributes_1 = {%0A                            _cssText: absoluteToStylesheet(cssText, stylesheet.href)%0A                        };%0A                    }%0A                }%0A                if (tagName === 'input' ||%0A                    tagName === 'textarea' ||%0A                    tagName === 'select') {%0A                    var value = n.value;%0A                    if (attributes_1.type !== 'radio' &&%0A                        attributes_1.type !== 'checkbox' &&%0A                        value) {%0A                        attributes_1.value = value;%0A                    }%0A                    else if (n.checked) {%0A                        attributes_1.checked = n.checked;%0A                    }%0A                }%0A                if (tagName === 'option') {%0A                    var selectValue = n.parentElement;%0A                    if (attributes_1.value === selectValue.value) {%0A                        attributes_1.selected = n.selected;%0A                    }%0A                }%0A                return {%0A                    type: NodeType.Element,%0A                    tagName: tagName,%0A                    attributes: attributes_1,%0A                    childNodes: []%0A                };%0A            case n.TEXT_NODE:%0A                var parentTagName = n.parentNode && n.parentNode.tagName;%0A                var textContent = n.textContent;%0A                if (parentTagName === 'SCRIPT') {%0A                    textContent = 'SCRIPT_PLACEHOLDER';%0A                }%0A                return {%0A                    type: NodeType.Text,%0A                    textContent: textContent || '',%0A                    isStyle: parentTagName === 'STYLE' ? true : undefined%0A                };%0A            case n.CDATA_SECTION_NODE:%0A                return {%0A                    type: NodeType.CDATA,%0A                    textContent: ''%0A                };%0A            case n.COMMENT_NODE:%0A                return {%0A                    type: NodeType.Comment,%0A                    textContent: n.textContent || ''%0A                };%0A            default:%0A                return false;%0A        }%0A    }%0A    function serializeNodeWithId(n, doc, map, skipChild) {%0A        if (skipChild === void 0) { skipChild = false; }%0A        var _serializedNode = serializeNode(n, doc);%0A        if (!_serializedNode) {%0A            console.warn(n, 'not serialized');%0A            return null;%0A        }%0A        var serializedNode = Object.assign(_serializedNode, {%0A            id: genId()%0A        });%0A        n.__sn = serializedNode;%0A        map[serializedNode.id] = n;%0A        if ((serializedNode.type === NodeType.Document ||%0A            serializedNode.type === NodeType.Element) &&%0A            !skipChild) {%0A            for (var _i = 0, _a = Array.from(n.childNodes); _i < _a.length; _i++) {%0A                var childN = _a[_i];%0A                var serializedChildNode = serializeNodeWithId(childN, doc, map);%0A                if (serializedChildNode) {%0A                    serializedNode.childNodes.push(serializedChildNode);%0A                }%0A            }%0A        }%0A        return serializedNode;%0A    }%0A    function snapshot(n) {%0A        resetId();%0A        var idNodeMap = {};%0A        return [serializeNodeWithId(n, n, idNodeMap), idNodeMap];%0A    }%0A%0A    function on(type, fn, target) {%0A        if (target === void 0) { target = document; }%0A        target.addEventListener(type, fn, { capture: true, passive: true });%0A        return function () { return target.removeEventListener(type, fn); };%0A    }%0A    var mirror = {%0A        map: {},%0A        getId: function (n) {%0A            return n.__sn && n.__sn.id;%0A        },%0A        getNode: function (id) {%0A            return mirror.map[id] || null;%0A        },%0A        removeNodeFromMap: function (n) {%0A            var id = n.__sn && n.__sn.id;%0A            delete mirror.map[id];%0A            if (n.childNodes) {%0A                n.childNodes.forEach(function (child) {%0A                    return mirror.removeNodeFromMap(child);%0A                });%0A            }%0A        },%0A        has: function (id) {%0A            return mirror.map.hasOwnProperty(id);%0A        }%0A    };%0A    function throttle(func, wait, options) {%0A        if (options === void 0) { options = {}; }%0A        var timeout = null;%0A        var previous = 0;%0A        return function () {%0A            var now = Date.now();%0A            if (!previous && options.leading === false) {%0A                previous = now;%0A            }%0A            var remaining = wait - (now - previous);%0A            var context = this;%0A            var args = arguments;%0A            if (remaining <= 0 || remaining > wait) {%0A                if (timeout) {%0A                    window.clearTimeout(timeout);%0A                    timeout = null;%0A                }%0A                previous = now;%0A                func.apply(context, args);%0A            }%0A            else if (!timeout && options.trailing !== false) {%0A                timeout = window.setTimeout(function () {%0A                    previous = options.leading === false ? 0 : Date.now();%0A                    timeout = null;%0A                    func.apply(context, args);%0A                }, remaining);%0A            }%0A        };%0A    }%0A    function hookSetter(target, key, d) {%0A        var original = Object.getOwnPropertyDescriptor(target, key);%0A        Object.defineProperty(target, key, {%0A            set: function (value) {%0A                var _this = this;%0A                setTimeout(function () {%0A                    d.set.call(_this, value);%0A                }, 0);%0A                if (original && original.set) {%0A                    original.set.call(this, value);%0A                }%0A            }%0A        });%0A        return function () { return hookSetter(target, key, original || {}); };%0A    }%0A    function getWindowHeight() {%0A        return (window.innerHeight ||%0A            (document.documentElement && document.documentElement.clientHeight) ||%0A            (document.body && document.body.clientHeight));%0A    }%0A    function getWindowWidth() {%0A        return (window.innerWidth ||%0A            (document.documentElement && document.documentElement.clientWidth) ||%0A            (document.body && document.body.clientWidth));%0A    }%0A%0A    var EventType;%0A    (function (EventType) {%0A        EventType[EventType[\\\\\\"DomContentLoaded\\\\\\"] = 0] = \\\\\\"DomContentLoaded\\\\\\";%0A        EventType[EventType[\\\\\\"Load\\\\\\"] = 1] = \\\\\\"Load\\\\\\";%0A        EventType[EventType[\\\\\\"FullSnapshot\\\\\\"] = 2] = \\\\\\"FullSnapshot\\\\\\";%0A        EventType[EventType[\\\\\\"IncrementalSnapshot\\\\\\"] = 3] = \\\\\\"IncrementalSnapshot\\\\\\";%0A        EventType[EventType[\\\\\\"Meta\\\\\\"] = 4] = \\\\\\"Meta\\\\\\";%0A    })(EventType || (EventType = {}));%0A    var IncrementalSource;%0A    (function (IncrementalSource) {%0A        IncrementalSource[IncrementalSource[\\\\\\"Mutation\\\\\\"] = 0] = \\\\\\"Mutation\\\\\\";%0A        IncrementalSource[IncrementalSource[\\\\\\"MouseMove\\\\\\"] = 1] = \\\\\\"MouseMove\\\\\\";%0A        IncrementalSource[IncrementalSource[\\\\\\"MouseInteraction\\\\\\"] = 2] = \\\\\\"MouseInteraction\\\\\\";%0A        IncrementalSource[IncrementalSource[\\\\\\"Scroll\\\\\\"] = 3] = \\\\\\"Scroll\\\\\\";%0A        IncrementalSource[IncrementalSource[\\\\\\"ViewportResize\\\\\\"] = 4] = \\\\\\"ViewportResize\\\\\\";%0A        IncrementalSource[IncrementalSource[\\\\\\"Input\\\\\\"] = 5] = \\\\\\"Input\\\\\\";%0A    })(IncrementalSource || (IncrementalSource = {}));%0A    var MouseInteractions;%0A    (function (MouseInteractions) {%0A        MouseInteractions[MouseInteractions[\\\\\\"MouseUp\\\\\\"] = 0] = \\\\\\"MouseUp\\\\\\";%0A        MouseInteractions[MouseInteractions[\\\\\\"MouseDown\\\\\\"] = 1] = \\\\\\"MouseDown\\\\\\";%0A        MouseInteractions[MouseInteractions[\\\\\\"Click\\\\\\"] = 2] = \\\\\\"Click\\\\\\";%0A        MouseInteractions[MouseInteractions[\\\\\\"ContextMenu\\\\\\"] = 3] = \\\\\\"ContextMenu\\\\\\";%0A        MouseInteractions[MouseInteractions[\\\\\\"DblClick\\\\\\"] = 4] = \\\\\\"DblClick\\\\\\";%0A        MouseInteractions[MouseInteractions[\\\\\\"Focus\\\\\\"] = 5] = \\\\\\"Focus\\\\\\";%0A        MouseInteractions[MouseInteractions[\\\\\\"Blur\\\\\\"] = 6] = \\\\\\"Blur\\\\\\";%0A        MouseInteractions[MouseInteractions[\\\\\\"TouchStart\\\\\\"] = 7] = \\\\\\"TouchStart\\\\\\";%0A        MouseInteractions[MouseInteractions[\\\\\\"TouchMove\\\\\\"] = 8] = \\\\\\"TouchMove\\\\\\";%0A        MouseInteractions[MouseInteractions[\\\\\\"TouchEnd\\\\\\"] = 9] = \\\\\\"TouchEnd\\\\\\";%0A    })(MouseInteractions || (MouseInteractions = {}));%0A%0A    function initMutationObserver(cb) {%0A        var observer = new MutationObserver(function (mutations) {%0A            var texts = [];%0A            var attributes = [];%0A            var removes = [];%0A            var adds = [];%0A            var dropped = [];%0A            var addsSet = new Set();%0A            var genAdds = function (n) {%0A                addsSet.add(n);%0A                n.childNodes.forEach(function (childN) { return genAdds(childN); });%0A            };%0A            mutations.forEach(function (mutation) {%0A                var type = mutation.type, target = mutation.target, oldValue = mutation.oldValue, addedNodes = mutation.addedNodes, removedNodes = mutation.removedNodes, attributeName = mutation.attributeName;%0A                switch (type) {%0A                    case 'characterData': {%0A                        var value = target.textContent;%0A                        if (value !== oldValue) {%0A                            texts.push({%0A                                value: value,%0A                                node: target%0A                            });%0A                        }%0A                        break;%0A                    }%0A                    case 'attributes': {%0A                        var value = target.getAttribute(attributeName);%0A                        if (value === oldValue) {%0A                            return;%0A                        }%0A                        var item = attributes.find(function (a) { return a.node === target; });%0A                        if (!item) {%0A                            item = {%0A                                node: target,%0A                                attributes: {}%0A                            };%0A                            attributes.push(item);%0A                        }%0A                        item.attributes[attributeName] = value;%0A                    }%0A                    case 'childList': {%0A                        addedNodes.forEach(function (n) { return genAdds(n); });%0A                        removedNodes.forEach(function (n) {%0A                            if (addsSet.has(n)) {%0A                                addsSet[\\\\\\"delete\\\\\\"](n);%0A                                dropped.push(n);%0A                            }%0A                            else if (addsSet.has(target) && !mirror.getId(n)) ;%0A                            else {%0A                                removes.push({%0A                                    parentId: mirror.getId(target),%0A                                    id: mirror.getId(n)%0A                                });%0A                            }%0A                            mirror.removeNodeFromMap(n);%0A                        });%0A                        break;%0A                    }%0A                    default:%0A                        break;%0A                }%0A            });%0A            removes = removes.map(function (remove) {%0A                if (remove.parentNode) {%0A                    remove.parentId = mirror.getId(remove.parentNode);%0A                    delete remove.parentNode;%0A                }%0A                return remove;%0A            });%0A            Array.from(addsSet).forEach(function (n) {%0A                var parentId = mirror.getId(n.parentNode);%0A                if (parentId &&%0A                    !dropped.some(function (d) { return d === n.parentNode; }) &&%0A                    !removes.some(function (r) { return r.id === parentId; })) {%0A                    adds.push({%0A                        parentId: mirror.getId(n.parentNode),%0A                        previousId: !n.previousSibling%0A                            ? n.previousSibling%0A                            : mirror.getId(n.previousSibling),%0A                        nextId: !n.nextSibling%0A                            ? n.nextSibling%0A                            : mirror.getId(n.nextSibling),%0A                        node: serializeNodeWithId(n, document, mirror.map, true)%0A                    });%0A                }%0A                else {%0A                    dropped.push(n);%0A                }%0A            });%0A            cb({%0A                texts: texts%0A                    .map(function (text) { return ({%0A                    id: mirror.getId(text.node),%0A                    value: text.value%0A                }); })%0A                    .filter(function (text) { return mirror.has(text.id); }),%0A                attributes: attributes%0A                    .map(function (attribute) { return ({%0A                    id: mirror.getId(attribute.node),%0A                    attributes: attribute.attributes%0A                }); })%0A                    .filter(function (attribute) { return mirror.has(attribute.id); }),%0A                removes: removes,%0A                adds: adds%0A            });%0A        });%0A        observer.observe(document, {%0A            attributes: true,%0A            attributeOldValue: true,%0A            characterData: true,%0A            characterDataOldValue: true,%0A            childList: true,%0A            subtree: true%0A        });%0A        return observer;%0A    }%0A    function initMousemoveObserver(cb) {%0A        var positions = [];%0A        var timeBaseline;%0A        var wrappedCb = throttle(function () {%0A            var totalOffset = Date.now() - timeBaseline;%0A            cb(positions.map(function (p) {%0A                p.timeOffset -= totalOffset;%0A                return p;%0A            }));%0A            positions = [];%0A            timeBaseline = null;%0A        }, 500);%0A        var updatePosition = throttle(function (evt) {%0A            var clientX = evt.clientX, clientY = evt.clientY, target = evt.target;%0A            if (!timeBaseline) {%0A                timeBaseline = Date.now();%0A            }%0A            positions.push({%0A                x: clientX,%0A                y: clientY,%0A                id: mirror.getId(target),%0A                timeOffset: Date.now() - timeBaseline%0A            });%0A            wrappedCb();%0A        }, 20, {%0A            trailing: false%0A        });%0A        return on('mousemove', updatePosition);%0A    }%0A    function initMouseInteractionObserver(cb) {%0A        var handlers = [];%0A        var getHandler = function (eventKey) {%0A            return function (event) {%0A                var id = mirror.getId(event.target);%0A                var clientX = event.clientX, clientY = event.clientY;%0A                cb({%0A                    type: MouseInteractions[eventKey],%0A                    id: id,%0A                    x: clientX,%0A                    y: clientY%0A                });%0A            };%0A        };%0A        Object.keys(MouseInteractions)%0A            .filter(function (key) { return Number.isNaN(Number(key)); })%0A            .forEach(function (eventKey) {%0A            var eventName = eventKey.toLowerCase();%0A            var handler = getHandler(eventKey);%0A            handlers.push(on(eventName, handler));%0A        });%0A        return function () {%0A            handlers.forEach(function (h) { return h(); });%0A        };%0A    }%0A    function initScrollObserver(cb) {%0A        var updatePosition = throttle(function (evt) {%0A            if (!evt.target) {%0A                return;%0A            }%0A            var id = mirror.getId(evt.target);%0A            if (evt.target === document) {%0A                cb({%0A                    id: id,%0A                    x: document.documentElement.scrollLeft,%0A                    y: document.documentElement.scrollTop%0A                });%0A            }%0A            else {%0A                cb({%0A                    id: id,%0A                    x: evt.target.scrollLeft,%0A                    y: evt.target.scrollTop%0A                });%0A            }%0A        }, 100);%0A        return on('scroll', updatePosition);%0A    }%0A    function initViewportResizeObserver(cb) {%0A        var updateDimension = throttle(function () {%0A            var height = getWindowHeight();%0A            var width = getWindowWidth();%0A            cb({%0A                width: Number(width),%0A                height: Number(height)%0A            });%0A        }, 200);%0A        return on('resize', updateDimension, window);%0A    }%0A    var INPUT_TAGS = ['INPUT', 'TEXTAREA', 'SELECT'];%0A    var HOOK_PROPERTIES = [%0A        [HTMLInputElement.prototype, 'value'],%0A        [HTMLInputElement.prototype, 'checked'],%0A        [HTMLSelectElement.prototype, 'value'],%0A        [HTMLTextAreaElement.prototype, 'value'],%0A    ];%0A    var lastInputValueMap = new WeakMap();%0A    function initInputObserver(cb) {%0A        function eventHandler(event) {%0A            var target = event.target;%0A            if (!target ||%0A                !target.tagName ||%0A                INPUT_TAGS.indexOf(target.tagName) < 0) {%0A                return;%0A            }%0A            var type = target.type;%0A            var text = target.value;%0A            var isChecked = false;%0A            if (type === 'radio' || type === 'checkbox') {%0A                isChecked = target.checked;%0A            }%0A            cbWithDedup(target, { text: text, isChecked: isChecked });%0A            var name = target.name;%0A            if (type === 'radio' && name && isChecked) {%0A                document%0A                    .querySelectorAll(\\\\\\"input[type=\\\\\\\\\\\\\\"radio\\\\\\\\\\\\\\"][name=\\\\\\\\\\\\\\"\\\\\\" + name + \\\\\\"\\\\\\\\\\\\\\"]\\\\\\")%0A                    .forEach(function (el) {%0A                    if (el !== target) {%0A                        cbWithDedup(el, {%0A                            text: el.value,%0A                            isChecked: !isChecked%0A                        });%0A                    }%0A                });%0A            }%0A        }%0A        function cbWithDedup(target, v) {%0A            var lastInputValue = lastInputValueMap.get(target);%0A            if (!lastInputValue ||%0A                lastInputValue.text !== v.text ||%0A                lastInputValue.isChecked !== v.isChecked) {%0A                lastInputValueMap.set(target, v);%0A                var id = mirror.getId(target);%0A                cb(__assign({}, v, { id: id }));%0A            }%0A        }%0A        var handlers = [%0A            'input',%0A            'change',%0A        ].map(function (eventName) { return on(eventName, eventHandler); });%0A        var propertyDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');%0A        if (propertyDescriptor && propertyDescriptor.set) {%0A            handlers.push.apply(handlers, HOOK_PROPERTIES.map(function (p) {%0A                return hookSetter(p[0], p[1], {%0A                    set: function () {%0A                        eventHandler({ target: this });%0A                    }%0A                });%0A            }));%0A        }%0A        return function () {%0A            handlers.forEach(function (h) { return h(); });%0A        };%0A    }%0A    function initObservers(o) {%0A        var mutationObserver = initMutationObserver(o.mutationCb);%0A        var mousemoveHandler = initMousemoveObserver(o.mousemoveCb);%0A        var mouseInteractionHandler = initMouseInteractionObserver(o.mouseInteractionCb);%0A        var scrollHandler = initScrollObserver(o.scrollCb);%0A        var viewportResizeHandler = initViewportResizeObserver(o.viewportResizeCb);%0A        var inputHandler = initInputObserver(o.inputCb);%0A        return {%0A            mutationObserver: mutationObserver,%0A            mousemoveHandler: mousemoveHandler,%0A            mouseInteractionHandler: mouseInteractionHandler,%0A            scrollHandler: scrollHandler,%0A            viewportResizeHandler: viewportResizeHandler,%0A            inputHandler: inputHandler%0A        };%0A    }%0A%0A    function wrapEvent(e) {%0A        return __assign({}, e, { timestamp: Date.now() });%0A    }%0A    function record(options) {%0A        if (options === void 0) { options = {}; }%0A        var emit = options.emit;%0A        if (!emit) {%0A            throw new Error('emit function is required');%0A        }%0A        try {%0A            on('DOMContentLoaded', function () {%0A                emit(wrapEvent({%0A                    type: EventType.DomContentLoaded,%0A                    data: {}%0A                }));%0A            });%0A            var init_1 = function () {%0A                emit(wrapEvent({%0A                    type: EventType.Meta,%0A                    data: {%0A                        href: window.location.href,%0A                        width: getWindowWidth(),%0A                        height: getWindowHeight()%0A                    }%0A                }));%0A                var _a = snapshot(document), node = _a[0], idNodeMap = _a[1];%0A                if (!node) {%0A                    return console.warn('Failed to snapshot the document');%0A                }%0A                mirror.map = idNodeMap;%0A                emit(wrapEvent({%0A                    type: EventType.FullSnapshot,%0A                    data: {%0A                        node: node,%0A                        initialOffset: {%0A                            left: document.documentElement.scrollLeft,%0A                            top: document.documentElement.scrollTop%0A                        }%0A                    }%0A                }));%0A                initObservers({%0A                    mutationCb: function (m) {%0A                        return emit(wrapEvent({%0A                            type: EventType.IncrementalSnapshot,%0A                            data: __assign({ source: IncrementalSource.Mutation }, m)%0A                        }));%0A                    },%0A                    mousemoveCb: function (positions) {%0A                        return emit(wrapEvent({%0A                            type: EventType.IncrementalSnapshot,%0A                            data: {%0A                                source: IncrementalSource.MouseMove,%0A                                positions: positions%0A                            }%0A                        }));%0A                    },%0A                    mouseInteractionCb: function (d) {%0A                        return emit(wrapEvent({%0A                            type: EventType.IncrementalSnapshot,%0A                            data: __assign({ source: IncrementalSource.MouseInteraction }, d)%0A                        }));%0A                    },%0A                    scrollCb: function (p) {%0A                        return emit(wrapEvent({%0A                            type: EventType.IncrementalSnapshot,%0A                            data: __assign({ source: IncrementalSource.Scroll }, p)%0A                        }));%0A                    },%0A                    viewportResizeCb: function (d) {%0A                        return emit(wrapEvent({%0A                            type: EventType.IncrementalSnapshot,%0A                            data: __assign({ source: IncrementalSource.ViewportResize }, d)%0A                        }));%0A                    },%0A                    inputCb: function (v) {%0A                        return emit(wrapEvent({%0A                            type: EventType.IncrementalSnapshot,%0A                            data: __assign({ source: IncrementalSource.Input }, v)%0A                        }));%0A                    }%0A                });%0A            };%0A            if (document.readyState === 'interactive' ||%0A                document.readyState === 'complete') {%0A                init_1();%0A            }%0A            else {%0A                on('load', function () {%0A                    emit(wrapEvent({%0A                        type: EventType.Load,%0A                        data: {}%0A                    }));%0A                    init_1();%0A                }, window);%0A            }%0A        }%0A        catch (error) {%0A            console.warn(error);%0A        }%0A    }%0A%0A    return record;%0A%0A}());%0A%0A      window.Date.now = () => new Date(Date.UTC(2018, 10, 15, 8)).valueOf();%0A      window.snapshots = [];%0A      record({%0A        emit: event => {%0A          console.log(event);%0A          window.snapshots.push(event);%0A        }%0A      });%0A    </script>%0A    </body>%0A    %0A</html>\\",
+      \\"href\\": \\"data:text/html,<!DOCTYPE html>%0A<html lang=\\\\\\"en\\\\\\">%0A<head>%0A  <meta charset=\\\\\\"UTF-8\\\\\\">%0A  <meta name=\\\\\\"viewport\\\\\\" content=\\\\\\"width=device-width, initial-scale=1.0\\\\\\">%0A  <meta http-equiv=\\\\\\"X-UA-Compatible\\\\\\" content=\\\\\\"ie=edge\\\\\\">%0A  <title>Select2 3.5</title>%0A  <link rel=\\\\\\"stylesheet\\\\\\" href=\\\\\\"https://cdn.jsdelivr.net/npm/select2@3.5.1/select2.css\\\\\\">%0A</head>%0A<body>%0A  <blockquote>%0A    Select2 is a jQuery replacement for select boxes.%0A    <br>%0A    In the 3.5 version it use a quite complicated DOM generation strategy which is a good battle-test for rrweb's recorder.%0A  </blockquote>%0A  <select id=\\\\\\"el\\\\\\">%0A    <option value=\\\\\\"a\\\\\\">A</option>%0A    <option value=\\\\\\"b\\\\\\">B</option>%0A  </select>%0A  <script src=\\\\\\"https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js\\\\\\"></script>%0A  <script src=\\\\\\"https://cdn.jsdelivr.net/npm/select2@3.5.2-browserify/select2.min.js\\\\\\"></script>%0A  <script>%0A    $('#el').select2();%0A  </script>%0A%0A    <script>%0A      var record = (function () {%0A    'use strict';%0A%0A    /*! *****************************************************************************%0D%0A    Copyright (c) Microsoft Corporation. All rights reserved.%0D%0A    Licensed under the Apache License, Version 2.0 (the \\\\\\"License\\\\\\"); you may not use%0D%0A    this file except in compliance with the License. You may obtain a copy of the%0D%0A    License at http://www.apache.org/licenses/LICENSE-2.0%0D%0A%0D%0A    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY%0D%0A    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED%0D%0A    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,%0D%0A    MERCHANTABLITY OR NON-INFRINGEMENT.%0D%0A%0D%0A    See the Apache Version 2.0 License for specific language governing permissions%0D%0A    and limitations under the License.%0D%0A    ***************************************************************************** */%0D%0A%0D%0A    var __assign = function() {%0D%0A        __assign = Object.assign || function __assign(t) {%0D%0A            for (var s, i = 1, n = arguments.length; i < n; i++) {%0D%0A                s = arguments[i];%0D%0A                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];%0D%0A            }%0D%0A            return t;%0D%0A        };%0D%0A        return __assign.apply(this, arguments);%0D%0A    };%0A%0A    var NodeType;%0A    (function (NodeType) {%0A        NodeType[NodeType[\\\\\\"Document\\\\\\"] = 0] = \\\\\\"Document\\\\\\";%0A        NodeType[NodeType[\\\\\\"DocumentType\\\\\\"] = 1] = \\\\\\"DocumentType\\\\\\";%0A        NodeType[NodeType[\\\\\\"Element\\\\\\"] = 2] = \\\\\\"Element\\\\\\";%0A        NodeType[NodeType[\\\\\\"Text\\\\\\"] = 3] = \\\\\\"Text\\\\\\";%0A        NodeType[NodeType[\\\\\\"CDATA\\\\\\"] = 4] = \\\\\\"CDATA\\\\\\";%0A        NodeType[NodeType[\\\\\\"Comment\\\\\\"] = 5] = \\\\\\"Comment\\\\\\";%0A    })(NodeType || (NodeType = {}));%0A%0A    var _id = 1;%0A    function genId() {%0A        return _id++;%0A    }%0A    function resetId() {%0A        _id = 1;%0A    }%0A    function getCssRulesString(s) {%0A        try {%0A            var rules = s.rules || s.cssRules;%0A            return rules%0A                ? Array.from(rules).reduce(function (prev, cur) { return (prev += cur.cssText); }, '')%0A                : null;%0A        }%0A        catch (error) {%0A            return null;%0A        }%0A    }%0A    function extractOrigin(url) {%0A        var origin;%0A        if (url.indexOf('//') > -1) {%0A            origin = url%0A                .split('/')%0A                .slice(0, 3)%0A                .join('/');%0A        }%0A        else {%0A            origin = url.split('/')[0];%0A        }%0A        origin = origin.split('?')[0];%0A        return origin;%0A    }%0A    var URL_IN_CSS_REF = /url\\\\\\\\((['\\\\\\"])([^'\\\\\\"]*)\\\\\\\\1\\\\\\\\)/gm;%0A    function absoluteToStylesheet(cssText, href) {%0A        return cssText.replace(URL_IN_CSS_REF, function (_1, _2, filePath) {%0A            if (!/^[./]/.test(filePath)) {%0A                return \\\\\\"url('\\\\\\" + filePath + \\\\\\"')\\\\\\";%0A            }%0A            if (filePath[0] === '/') {%0A                return \\\\\\"url('\\\\\\" + (extractOrigin(href) + filePath) + \\\\\\"')\\\\\\";%0A            }%0A            var stack = href.split('/');%0A            var parts = filePath.split('/');%0A            stack.pop();%0A            for (var _i = 0, parts_1 = parts; _i < parts_1.length; _i++) {%0A                var part = parts_1[_i];%0A                if (part === '.') {%0A                    continue;%0A                }%0A                else if (part === '..') {%0A                    stack.pop();%0A                }%0A                else {%0A                    stack.push(part);%0A                }%0A            }%0A            return \\\\\\"url('\\\\\\" + stack.join('/') + \\\\\\"')\\\\\\";%0A        });%0A    }%0A    var RELATIVE_PATH = /^(\\\\\\\\.\\\\\\\\.|\\\\\\\\.|)\\\\\\\\//;%0A    function absoluteToDoc(doc, attributeValue) {%0A        if (!RELATIVE_PATH.test(attributeValue)) {%0A            return attributeValue;%0A        }%0A        var a = doc.createElement('a');%0A        a.href = attributeValue;%0A        return a.href;%0A    }%0A    function serializeNode(n, doc) {%0A        switch (n.nodeType) {%0A            case n.DOCUMENT_NODE:%0A                return {%0A                    type: NodeType.Document,%0A                    childNodes: []%0A                };%0A            case n.DOCUMENT_TYPE_NODE:%0A                return {%0A                    type: NodeType.DocumentType,%0A                    name: n.name,%0A                    publicId: n.publicId,%0A                    systemId: n.systemId%0A                };%0A            case n.ELEMENT_NODE:%0A                var tagName = n.tagName.toLowerCase();%0A                var attributes_1 = {};%0A                for (var _i = 0, _a = Array.from(n.attributes); _i < _a.length; _i++) {%0A                    var _b = _a[_i], name = _b.name, value = _b.value;%0A                    if (name === 'src' || name === 'href') {%0A                        attributes_1[name] = absoluteToDoc(doc, value);%0A                    }%0A                    else {%0A                        attributes_1[name] = value;%0A                    }%0A                }%0A                if (tagName === 'link') {%0A                    var stylesheet = Array.from(doc.styleSheets).find(function (s) {%0A                        return s.href === n.href;%0A                    });%0A                    var cssText = getCssRulesString(stylesheet);%0A                    if (cssText) {%0A                        attributes_1 = {%0A                            _cssText: absoluteToStylesheet(cssText, stylesheet.href)%0A                        };%0A                    }%0A                }%0A                if (tagName === 'input' ||%0A                    tagName === 'textarea' ||%0A                    tagName === 'select') {%0A                    var value = n.value;%0A                    if (attributes_1.type !== 'radio' &&%0A                        attributes_1.type !== 'checkbox' &&%0A                        value) {%0A                        attributes_1.value = value;%0A                    }%0A                    else if (n.checked) {%0A                        attributes_1.checked = n.checked;%0A                    }%0A                }%0A                if (tagName === 'option') {%0A                    var selectValue = n.parentElement;%0A                    if (attributes_1.value === selectValue.value) {%0A                        attributes_1.selected = n.selected;%0A                    }%0A                }%0A                return {%0A                    type: NodeType.Element,%0A                    tagName: tagName,%0A                    attributes: attributes_1,%0A                    childNodes: []%0A                };%0A            case n.TEXT_NODE:%0A                var parentTagName = n.parentNode && n.parentNode.tagName;%0A                var textContent = n.textContent;%0A                if (parentTagName === 'SCRIPT') {%0A                    textContent = 'SCRIPT_PLACEHOLDER';%0A                }%0A                return {%0A                    type: NodeType.Text,%0A                    textContent: textContent || '',%0A                    isStyle: parentTagName === 'STYLE' ? true : undefined%0A                };%0A            case n.CDATA_SECTION_NODE:%0A                return {%0A                    type: NodeType.CDATA,%0A                    textContent: ''%0A                };%0A            case n.COMMENT_NODE:%0A                return {%0A                    type: NodeType.Comment,%0A                    textContent: n.textContent || ''%0A                };%0A            default:%0A                return false;%0A        }%0A    }%0A    function serializeNodeWithId(n, doc, map, skipChild) {%0A        if (skipChild === void 0) { skipChild = false; }%0A        var _serializedNode = serializeNode(n, doc);%0A        if (!_serializedNode) {%0A            console.warn(n, 'not serialized');%0A            return null;%0A        }%0A        var serializedNode = Object.assign(_serializedNode, {%0A            id: genId()%0A        });%0A        n.__sn = serializedNode;%0A        map[serializedNode.id] = n;%0A        if ((serializedNode.type === NodeType.Document ||%0A            serializedNode.type === NodeType.Element) &&%0A            !skipChild) {%0A            for (var _i = 0, _a = Array.from(n.childNodes); _i < _a.length; _i++) {%0A                var childN = _a[_i];%0A                var serializedChildNode = serializeNodeWithId(childN, doc, map);%0A                if (serializedChildNode) {%0A                    serializedNode.childNodes.push(serializedChildNode);%0A                }%0A            }%0A        }%0A        return serializedNode;%0A    }%0A    function snapshot(n) {%0A        resetId();%0A        var idNodeMap = {};%0A        return [serializeNodeWithId(n, n, idNodeMap), idNodeMap];%0A    }%0A%0A    function on(type, fn, target) {%0A        if (target === void 0) { target = document; }%0A        target.addEventListener(type, fn, { capture: true, passive: true });%0A        return function () { return target.removeEventListener(type, fn); };%0A    }%0A    var mirror = {%0A        map: {},%0A        getId: function (n) {%0A            if (!n.__sn) {%0A                return -1;%0A            }%0A            return n.__sn.id;%0A        },%0A        getNode: function (id) {%0A            return mirror.map[id] || null;%0A        },%0A        removeNodeFromMap: function (n) {%0A            var id = n.__sn && n.__sn.id;%0A            delete mirror.map[id];%0A            if (n.childNodes) {%0A                n.childNodes.forEach(function (child) {%0A                    return mirror.removeNodeFromMap(child);%0A                });%0A            }%0A        },%0A        has: function (id) {%0A            return mirror.map.hasOwnProperty(id);%0A        }%0A    };%0A    function throttle(func, wait, options) {%0A        if (options === void 0) { options = {}; }%0A        var timeout = null;%0A        var previous = 0;%0A        return function () {%0A            var now = Date.now();%0A            if (!previous && options.leading === false) {%0A                previous = now;%0A            }%0A            var remaining = wait - (now - previous);%0A            var context = this;%0A            var args = arguments;%0A            if (remaining <= 0 || remaining > wait) {%0A                if (timeout) {%0A                    window.clearTimeout(timeout);%0A                    timeout = null;%0A                }%0A                previous = now;%0A                func.apply(context, args);%0A            }%0A            else if (!timeout && options.trailing !== false) {%0A                timeout = window.setTimeout(function () {%0A                    previous = options.leading === false ? 0 : Date.now();%0A                    timeout = null;%0A                    func.apply(context, args);%0A                }, remaining);%0A            }%0A        };%0A    }%0A    function hookSetter(target, key, d) {%0A        var original = Object.getOwnPropertyDescriptor(target, key);%0A        Object.defineProperty(target, key, {%0A            set: function (value) {%0A                var _this = this;%0A                setTimeout(function () {%0A                    d.set.call(_this, value);%0A                }, 0);%0A                if (original && original.set) {%0A                    original.set.call(this, value);%0A                }%0A            }%0A        });%0A        return function () { return hookSetter(target, key, original || {}); };%0A    }%0A    function getWindowHeight() {%0A        return (window.innerHeight ||%0A            (document.documentElement && document.documentElement.clientHeight) ||%0A            (document.body && document.body.clientHeight));%0A    }%0A    function getWindowWidth() {%0A        return (window.innerWidth ||%0A            (document.documentElement && document.documentElement.clientWidth) ||%0A            (document.body && document.body.clientWidth));%0A    }%0A%0A    var EventType;%0A    (function (EventType) {%0A        EventType[EventType[\\\\\\"DomContentLoaded\\\\\\"] = 0] = \\\\\\"DomContentLoaded\\\\\\";%0A        EventType[EventType[\\\\\\"Load\\\\\\"] = 1] = \\\\\\"Load\\\\\\";%0A        EventType[EventType[\\\\\\"FullSnapshot\\\\\\"] = 2] = \\\\\\"FullSnapshot\\\\\\";%0A        EventType[EventType[\\\\\\"IncrementalSnapshot\\\\\\"] = 3] = \\\\\\"IncrementalSnapshot\\\\\\";%0A        EventType[EventType[\\\\\\"Meta\\\\\\"] = 4] = \\\\\\"Meta\\\\\\";%0A    })(EventType || (EventType = {}));%0A    var IncrementalSource;%0A    (function (IncrementalSource) {%0A        IncrementalSource[IncrementalSource[\\\\\\"Mutation\\\\\\"] = 0] = \\\\\\"Mutation\\\\\\";%0A        IncrementalSource[IncrementalSource[\\\\\\"MouseMove\\\\\\"] = 1] = \\\\\\"MouseMove\\\\\\";%0A        IncrementalSource[IncrementalSource[\\\\\\"MouseInteraction\\\\\\"] = 2] = \\\\\\"MouseInteraction\\\\\\";%0A        IncrementalSource[IncrementalSource[\\\\\\"Scroll\\\\\\"] = 3] = \\\\\\"Scroll\\\\\\";%0A        IncrementalSource[IncrementalSource[\\\\\\"ViewportResize\\\\\\"] = 4] = \\\\\\"ViewportResize\\\\\\";%0A        IncrementalSource[IncrementalSource[\\\\\\"Input\\\\\\"] = 5] = \\\\\\"Input\\\\\\";%0A    })(IncrementalSource || (IncrementalSource = {}));%0A    var MouseInteractions;%0A    (function (MouseInteractions) {%0A        MouseInteractions[MouseInteractions[\\\\\\"MouseUp\\\\\\"] = 0] = \\\\\\"MouseUp\\\\\\";%0A        MouseInteractions[MouseInteractions[\\\\\\"MouseDown\\\\\\"] = 1] = \\\\\\"MouseDown\\\\\\";%0A        MouseInteractions[MouseInteractions[\\\\\\"Click\\\\\\"] = 2] = \\\\\\"Click\\\\\\";%0A        MouseInteractions[MouseInteractions[\\\\\\"ContextMenu\\\\\\"] = 3] = \\\\\\"ContextMenu\\\\\\";%0A        MouseInteractions[MouseInteractions[\\\\\\"DblClick\\\\\\"] = 4] = \\\\\\"DblClick\\\\\\";%0A        MouseInteractions[MouseInteractions[\\\\\\"Focus\\\\\\"] = 5] = \\\\\\"Focus\\\\\\";%0A        MouseInteractions[MouseInteractions[\\\\\\"Blur\\\\\\"] = 6] = \\\\\\"Blur\\\\\\";%0A        MouseInteractions[MouseInteractions[\\\\\\"TouchStart\\\\\\"] = 7] = \\\\\\"TouchStart\\\\\\";%0A        MouseInteractions[MouseInteractions[\\\\\\"TouchMove\\\\\\"] = 8] = \\\\\\"TouchMove\\\\\\";%0A        MouseInteractions[MouseInteractions[\\\\\\"TouchEnd\\\\\\"] = 9] = \\\\\\"TouchEnd\\\\\\";%0A    })(MouseInteractions || (MouseInteractions = {}));%0A%0A    function initMutationObserver(cb) {%0A        var observer = new MutationObserver(function (mutations) {%0A            var texts = [];%0A            var attributes = [];%0A            var removes = [];%0A            var adds = [];%0A            var dropped = [];%0A            var addsSet = new Set();%0A            var genAdds = function (n) {%0A                addsSet.add(n);%0A                n.childNodes.forEach(function (childN) { return genAdds(childN); });%0A            };%0A            mutations.forEach(function (mutation) {%0A                var type = mutation.type, target = mutation.target, oldValue = mutation.oldValue, addedNodes = mutation.addedNodes, removedNodes = mutation.removedNodes, attributeName = mutation.attributeName;%0A                switch (type) {%0A                    case 'characterData': {%0A                        var value = target.textContent;%0A                        if (value !== oldValue) {%0A                            texts.push({%0A                                value: value,%0A                                node: target%0A                            });%0A                        }%0A                        break;%0A                    }%0A                    case 'attributes': {%0A                        var value = target.getAttribute(attributeName);%0A                        if (value === oldValue) {%0A                            return;%0A                        }%0A                        var item = attributes.find(function (a) { return a.node === target; });%0A                        if (!item) {%0A                            item = {%0A                                node: target,%0A                                attributes: {}%0A                            };%0A                            attributes.push(item);%0A                        }%0A                        item.attributes[attributeName] = value;%0A                    }%0A                    case 'childList': {%0A                        addedNodes.forEach(function (n) { return genAdds(n); });%0A                        removedNodes.forEach(function (n) {%0A                            if (addsSet.has(n)) {%0A                                addsSet[\\\\\\"delete\\\\\\"](n);%0A                                dropped.push(n);%0A                            }%0A                            else if (addsSet.has(target) && !mirror.getId(n)) ;%0A                            else {%0A                                removes.push({%0A                                    parentId: mirror.getId(target),%0A                                    id: mirror.getId(n)%0A                                });%0A                            }%0A                            mirror.removeNodeFromMap(n);%0A                        });%0A                        break;%0A                    }%0A                    default:%0A                        break;%0A                }%0A            });%0A            removes = removes.map(function (remove) {%0A                if (remove.parentNode) {%0A                    remove.parentId = mirror.getId(remove.parentNode);%0A                    delete remove.parentNode;%0A                }%0A                return remove;%0A            });%0A            Array.from(addsSet).forEach(function (n) {%0A                var parentId = mirror.getId(n.parentNode);%0A                if (parentId &&%0A                    !dropped.some(function (d) { return d === n.parentNode; }) &&%0A                    !removes.some(function (r) { return r.id === parentId; })) {%0A                    adds.push({%0A                        parentId: mirror.getId(n.parentNode),%0A                        previousId: !n.previousSibling%0A                            ? n.previousSibling%0A                            : mirror.getId(n.previousSibling),%0A                        nextId: !n.nextSibling%0A                            ? n.nextSibling%0A                            : mirror.getId(n.nextSibling),%0A                        node: serializeNodeWithId(n, document, mirror.map, true)%0A                    });%0A                }%0A                else {%0A                    dropped.push(n);%0A                }%0A            });%0A            cb({%0A                texts: texts%0A                    .map(function (text) { return ({%0A                    id: mirror.getId(text.node),%0A                    value: text.value%0A                }); })%0A                    .filter(function (text) { return mirror.has(text.id); }),%0A                attributes: attributes%0A                    .map(function (attribute) { return ({%0A                    id: mirror.getId(attribute.node),%0A                    attributes: attribute.attributes%0A                }); })%0A                    .filter(function (attribute) { return mirror.has(attribute.id); }),%0A                removes: removes,%0A                adds: adds%0A            });%0A        });%0A        observer.observe(document, {%0A            attributes: true,%0A            attributeOldValue: true,%0A            characterData: true,%0A            characterDataOldValue: true,%0A            childList: true,%0A            subtree: true%0A        });%0A        return observer;%0A    }%0A    function initMousemoveObserver(cb) {%0A        var positions = [];%0A        var timeBaseline;%0A        var wrappedCb = throttle(function () {%0A            var totalOffset = Date.now() - timeBaseline;%0A            cb(positions.map(function (p) {%0A                p.timeOffset -= totalOffset;%0A                return p;%0A            }));%0A            positions = [];%0A            timeBaseline = null;%0A        }, 500);%0A        var updatePosition = throttle(function (evt) {%0A            var clientX = evt.clientX, clientY = evt.clientY, target = evt.target;%0A            if (!timeBaseline) {%0A                timeBaseline = Date.now();%0A            }%0A            positions.push({%0A                x: clientX,%0A                y: clientY,%0A                id: mirror.getId(target),%0A                timeOffset: Date.now() - timeBaseline%0A            });%0A            wrappedCb();%0A        }, 20, {%0A            trailing: false%0A        });%0A        return on('mousemove', updatePosition);%0A    }%0A    function initMouseInteractionObserver(cb) {%0A        var handlers = [];%0A        var getHandler = function (eventKey) {%0A            return function (event) {%0A                var id = mirror.getId(event.target);%0A                var clientX = event.clientX, clientY = event.clientY;%0A                cb({%0A                    type: MouseInteractions[eventKey],%0A                    id: id,%0A                    x: clientX,%0A                    y: clientY%0A                });%0A            };%0A        };%0A        Object.keys(MouseInteractions)%0A            .filter(function (key) { return Number.isNaN(Number(key)); })%0A            .forEach(function (eventKey) {%0A            var eventName = eventKey.toLowerCase();%0A            var handler = getHandler(eventKey);%0A            handlers.push(on(eventName, handler));%0A        });%0A        return function () {%0A            handlers.forEach(function (h) { return h(); });%0A        };%0A    }%0A    function initScrollObserver(cb) {%0A        var updatePosition = throttle(function (evt) {%0A            if (!evt.target) {%0A                return;%0A            }%0A            var id = mirror.getId(evt.target);%0A            if (evt.target === document) {%0A                cb({%0A                    id: id,%0A                    x: document.documentElement.scrollLeft,%0A                    y: document.documentElement.scrollTop%0A                });%0A            }%0A            else {%0A                cb({%0A                    id: id,%0A                    x: evt.target.scrollLeft,%0A                    y: evt.target.scrollTop%0A                });%0A            }%0A        }, 100);%0A        return on('scroll', updatePosition);%0A    }%0A    function initViewportResizeObserver(cb) {%0A        var updateDimension = throttle(function () {%0A            var height = getWindowHeight();%0A            var width = getWindowWidth();%0A            cb({%0A                width: Number(width),%0A                height: Number(height)%0A            });%0A        }, 200);%0A        return on('resize', updateDimension, window);%0A    }%0A    var INPUT_TAGS = ['INPUT', 'TEXTAREA', 'SELECT'];%0A    var HOOK_PROPERTIES = [%0A        [HTMLInputElement.prototype, 'value'],%0A        [HTMLInputElement.prototype, 'checked'],%0A        [HTMLSelectElement.prototype, 'value'],%0A        [HTMLTextAreaElement.prototype, 'value'],%0A    ];%0A    var lastInputValueMap = new WeakMap();%0A    function initInputObserver(cb) {%0A        function eventHandler(event) {%0A            var target = event.target;%0A            if (!target ||%0A                !target.tagName ||%0A                INPUT_TAGS.indexOf(target.tagName) < 0) {%0A                return;%0A            }%0A            var type = target.type;%0A            var text = target.value;%0A            var isChecked = false;%0A            if (type === 'radio' || type === 'checkbox') {%0A                isChecked = target.checked;%0A            }%0A            cbWithDedup(target, { text: text, isChecked: isChecked });%0A            var name = target.name;%0A            if (type === 'radio' && name && isChecked) {%0A                document%0A                    .querySelectorAll(\\\\\\"input[type=\\\\\\\\\\\\\\"radio\\\\\\\\\\\\\\"][name=\\\\\\\\\\\\\\"\\\\\\" + name + \\\\\\"\\\\\\\\\\\\\\"]\\\\\\")%0A                    .forEach(function (el) {%0A                    if (el !== target) {%0A                        cbWithDedup(el, {%0A                            text: el.value,%0A                            isChecked: !isChecked%0A                        });%0A                    }%0A                });%0A            }%0A        }%0A        function cbWithDedup(target, v) {%0A            var lastInputValue = lastInputValueMap.get(target);%0A            if (!lastInputValue ||%0A                lastInputValue.text !== v.text ||%0A                lastInputValue.isChecked !== v.isChecked) {%0A                lastInputValueMap.set(target, v);%0A                var id = mirror.getId(target);%0A                cb(__assign({}, v, { id: id }));%0A            }%0A        }%0A        var handlers = [%0A            'input',%0A            'change',%0A        ].map(function (eventName) { return on(eventName, eventHandler); });%0A        var propertyDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');%0A        if (propertyDescriptor && propertyDescriptor.set) {%0A            handlers.push.apply(handlers, HOOK_PROPERTIES.map(function (p) {%0A                return hookSetter(p[0], p[1], {%0A                    set: function () {%0A                        eventHandler({ target: this });%0A                    }%0A                });%0A            }));%0A        }%0A        return function () {%0A            handlers.forEach(function (h) { return h(); });%0A        };%0A    }%0A    function initObservers(o) {%0A        var mutationObserver = initMutationObserver(o.mutationCb);%0A        var mousemoveHandler = initMousemoveObserver(o.mousemoveCb);%0A        var mouseInteractionHandler = initMouseInteractionObserver(o.mouseInteractionCb);%0A        var scrollHandler = initScrollObserver(o.scrollCb);%0A        var viewportResizeHandler = initViewportResizeObserver(o.viewportResizeCb);%0A        var inputHandler = initInputObserver(o.inputCb);%0A        return {%0A            mutationObserver: mutationObserver,%0A            mousemoveHandler: mousemoveHandler,%0A            mouseInteractionHandler: mouseInteractionHandler,%0A            scrollHandler: scrollHandler,%0A            viewportResizeHandler: viewportResizeHandler,%0A            inputHandler: inputHandler%0A        };%0A    }%0A%0A    function wrapEvent(e) {%0A        return __assign({}, e, { timestamp: Date.now() });%0A    }%0A    function record(options) {%0A        if (options === void 0) { options = {}; }%0A        var emit = options.emit;%0A        if (!emit) {%0A            throw new Error('emit function is required');%0A        }%0A        try {%0A            on('DOMContentLoaded', function () {%0A                emit(wrapEvent({%0A                    type: EventType.DomContentLoaded,%0A                    data: {}%0A                }));%0A            });%0A            var init_1 = function () {%0A                emit(wrapEvent({%0A                    type: EventType.Meta,%0A                    data: {%0A                        href: window.location.href,%0A                        width: getWindowWidth(),%0A                        height: getWindowHeight()%0A                    }%0A                }));%0A                var _a = snapshot(document), node = _a[0], idNodeMap = _a[1];%0A                if (!node) {%0A                    return console.warn('Failed to snapshot the document');%0A                }%0A                mirror.map = idNodeMap;%0A                emit(wrapEvent({%0A                    type: EventType.FullSnapshot,%0A                    data: {%0A                        node: node,%0A                        initialOffset: {%0A                            left: document.documentElement.scrollLeft,%0A                            top: document.documentElement.scrollTop%0A                        }%0A                    }%0A                }));%0A                initObservers({%0A                    mutationCb: function (m) {%0A                        return emit(wrapEvent({%0A                            type: EventType.IncrementalSnapshot,%0A                            data: __assign({ source: IncrementalSource.Mutation }, m)%0A                        }));%0A                    },%0A                    mousemoveCb: function (positions) {%0A                        return emit(wrapEvent({%0A                            type: EventType.IncrementalSnapshot,%0A                            data: {%0A                                source: IncrementalSource.MouseMove,%0A                                positions: positions%0A                            }%0A                        }));%0A                    },%0A                    mouseInteractionCb: function (d) {%0A                        return emit(wrapEvent({%0A                            type: EventType.IncrementalSnapshot,%0A                            data: __assign({ source: IncrementalSource.MouseInteraction }, d)%0A                        }));%0A                    },%0A                    scrollCb: function (p) {%0A                        return emit(wrapEvent({%0A                            type: EventType.IncrementalSnapshot,%0A                            data: __assign({ source: IncrementalSource.Scroll }, p)%0A                        }));%0A                    },%0A                    viewportResizeCb: function (d) {%0A                        return emit(wrapEvent({%0A                            type: EventType.IncrementalSnapshot,%0A                            data: __assign({ source: IncrementalSource.ViewportResize }, d)%0A                        }));%0A                    },%0A                    inputCb: function (v) {%0A                        return emit(wrapEvent({%0A                            type: EventType.IncrementalSnapshot,%0A                            data: __assign({ source: IncrementalSource.Input }, v)%0A                        }));%0A                    }%0A                });%0A            };%0A            if (document.readyState === 'interactive' ||%0A                document.readyState === 'complete') {%0A                init_1();%0A            }%0A            else {%0A                on('load', function () {%0A                    emit(wrapEvent({%0A                        type: EventType.Load,%0A                        data: {}%0A                    }));%0A                    init_1();%0A                }, window);%0A            }%0A        }%0A        catch (error) {%0A            console.warn(error);%0A        }%0A    }%0A%0A    return record;%0A%0A}());%0A%0A      window.Date.now = () => new Date(Date.UTC(2018, 10, 15, 8)).valueOf();%0A      window.snapshots = [];%0A      record({%0A        emit: event => {%0A          console.log(event);%0A          window.snapshots.push(event);%0A        }%0A      });%0A    </script>%0A    </body>%0A    %0A</html>\\",
       \\"width\\": 1920,
       \\"height\\": 1080
     },
@@ -1910,6 +1910,7 @@ exports[`select2 1`] = `
         },
         {
           \\"parentId\\": 18,
+          \\"previousId\\": -1,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 2,
@@ -2046,6 +2047,7 @@ exports[`select2 1`] = `
         {
           \\"parentId\\": 84,
           \\"previousId\\": null,
+          \\"nextId\\": -1,
           \\"node\\": {
             \\"type\\": 2,
             \\"tagName\\": \\"li\\",
@@ -2076,6 +2078,7 @@ exports[`select2 1`] = `
         {
           \\"parentId\\": 86,
           \\"previousId\\": null,
+          \\"nextId\\": -1,
           \\"node\\": {
             \\"type\\": 2,
             \\"tagName\\": \\"span\\",
@@ -2130,6 +2133,7 @@ exports[`select2 1`] = `
         {
           \\"parentId\\": 90,
           \\"previousId\\": null,
+          \\"nextId\\": -1,
           \\"node\\": {
             \\"type\\": 2,
             \\"tagName\\": \\"span\\",