@sentry/replay 7.70.0-beta.0 → 7.70.0

package/esm/index.js

@@ -61,159 +61,44 @@ var NodeType$1;
     NodeType[NodeType["Comment"] = 5] = "Comment";
 })(NodeType$1 || (NodeType$1 = {}));
 
-function isElement$1(n) {
+function isElement(n) {
     return n.nodeType === n.ELEMENT_NODE;
 }
 function isShadowRoot(n) {
     const host = n === null || n === void 0 ? void 0 : n.host;
-    return Boolean((host === null || host === void 0 ? void 0 : host.shadowRoot) === n);
+    return Boolean(host && host.shadowRoot && host.shadowRoot === n);
 }
-function isNativeShadowDom(shadowRoot) {
-    return Object.prototype.toString.call(shadowRoot) === '[object ShadowRoot]';
-}
-function fixBrowserCompatibilityIssuesInCSS(cssText) {
-    if (cssText.includes(' background-clip: text;') &&
-        !cssText.includes(' -webkit-background-clip: text;')) {
-        cssText = cssText.replace(' background-clip: text;', ' -webkit-background-clip: text; background-clip: text;');
+function isInputTypeMasked({ maskInputOptions, tagName, type, }) {
+    if (tagName.toLowerCase() === 'option') {
+        tagName = 'select';
     }
-    return cssText;
+    const actualType = typeof type === 'string' ? type.toLowerCase() : undefined;
+    return (maskInputOptions[tagName.toLowerCase()] ||
+        (actualType && maskInputOptions[actualType]) ||
+        actualType === 'password' ||
+        (tagName === 'input' && !type && maskInputOptions['text']));
 }
-function escapeImportStatement(rule) {
-    const { cssText } = rule;
-    if (cssText.split('"').length < 3)
-        return cssText;
-    const statement = ['@import', `url(${JSON.stringify(rule.href)})`];
-    if (rule.layerName === '') {
-        statement.push(`layer`);
-    }
-    else if (rule.layerName) {
-        statement.push(`layer(${rule.layerName})`);
-    }
-    if (rule.supportsText) {
-        statement.push(`supports(${rule.supportsText})`);
-    }
-    if (rule.media.length) {
-        statement.push(rule.media.mediaText);
-    }
-    return statement.join(' ') + ';';
-}
-function stringifyStylesheet(s) {
-    try {
-        const rules = s.rules || s.cssRules;
-        return rules
-            ? fixBrowserCompatibilityIssuesInCSS(Array.from(rules, stringifyRule).join(''))
-            : null;
-    }
-    catch (error) {
-        return null;
-    }
+function hasInputMaskOptions({ tagName, type, maskInputOptions, maskInputSelector, }) {
+    return (maskInputSelector || isInputTypeMasked({ maskInputOptions, tagName, type }));
 }
-function stringifyRule(rule) {
-    let importStringified;
-    if (isCSSImportRule(rule)) {
-        try {
-            importStringified =
-                stringifyStylesheet(rule.styleSheet) ||
-                    escapeImportStatement(rule);
-        }
-        catch (error) {
-        }
-    }
-    else if (isCSSStyleRule(rule) && rule.selectorText.includes(':')) {
-        return fixSafariColons(rule.cssText);
-    }
-    return importStringified || rule.cssText;
-}
-function fixSafariColons(cssStringified) {
-    const regex = /(\[(?:[\w-]+)[^\\])(:(?:[\w-]+)\])/gm;
-    return cssStringified.replace(regex, '$1\\$2');
-}
-function isCSSImportRule(rule) {
-    return 'styleSheet' in rule;
-}
-function isCSSStyleRule(rule) {
-    return 'selectorText' in rule;
-}
-class Mirror {
-    constructor() {
-        this.idNodeMap = new Map();
-        this.nodeMetaMap = new WeakMap();
-    }
-    getId(n) {
-        var _a;
-        if (!n)
-            return -1;
-        const id = (_a = this.getMeta(n)) === null || _a === void 0 ? void 0 : _a.id;
-        return id !== null && id !== void 0 ? id : -1;
-    }
-    getNode(id) {
-        return this.idNodeMap.get(id) || null;
-    }
-    getIds() {
-        return Array.from(this.idNodeMap.keys());
+function maskInputValue({ input, maskInputSelector, unmaskInputSelector, maskInputOptions, tagName, type, value, maskInputFn, }) {
+    let text = value || '';
+    if (unmaskInputSelector && input.matches(unmaskInputSelector)) {
+        return text;
     }
-    getMeta(n) {
-        return this.nodeMetaMap.get(n) || null;
+    if (input.hasAttribute('data-rr-is-password')) {
+        type = 'password';
     }
-    removeNodeFromMap(n) {
-        const id = this.getId(n);
-        this.idNodeMap.delete(id);
-        if (n.childNodes) {
-            n.childNodes.forEach((childNode) => this.removeNodeFromMap(childNode));
+    if (isInputTypeMasked({ maskInputOptions, tagName, type }) ||
+        (maskInputSelector && input.matches(maskInputSelector))) {
+        if (maskInputFn) {
+            text = maskInputFn(text);
         }
-    }
-    has(id) {
-        return this.idNodeMap.has(id);
-    }
-    hasNode(node) {
-        return this.nodeMetaMap.has(node);
-    }
-    add(n, meta) {
-        const id = meta.id;
-        this.idNodeMap.set(id, n);
-        this.nodeMetaMap.set(n, meta);
-    }
-    replace(id, n) {
-        const oldNode = this.getNode(id);
-        if (oldNode) {
-            const meta = this.nodeMetaMap.get(oldNode);
-            if (meta)
-                this.nodeMetaMap.set(n, meta);
+        else {
+            text = '*'.repeat(text.length);
         }
-        this.idNodeMap.set(id, n);
-    }
-    reset() {
-        this.idNodeMap = new Map();
-        this.nodeMetaMap = new WeakMap();
     }
-}
-function createMirror() {
-    return new Mirror();
-}
-function shouldMaskInput({ maskInputOptions, tagName, type, }) {
-    if (tagName === 'OPTION') {
-        tagName = 'SELECT';
-    }
-    return Boolean(maskInputOptions[tagName.toLowerCase()] ||
-        (type && maskInputOptions[type]) ||
-        type === 'password' ||
-        (tagName === 'INPUT' && !type && maskInputOptions['text']));
-}
-function maskInputValue({ isMasked, element, value, maskInputFn, }) {
-    let text = value || '';
-    if (!isMasked) {
-        return text;
-    }
-    if (maskInputFn) {
-        text = maskInputFn(text, element);
-    }
-    return '*'.repeat(text.length);
-}
-function toLowerCase(str) {
-    return str.toLowerCase();
-}
-function toUpperCase(str) {
-    return str.toUpperCase();
+    return text;
 }
 const ORIGINAL_ATTRIBUTE_NAME = '__rrweb_original__';
 function is2DCanvasBlank(canvas) {
@@ -239,11 +124,11 @@ function getInputType(element) {
     return element.hasAttribute('data-rr-is-password')
         ? 'password'
         : type
-            ?
-                toLowerCase(type)
+            ? type.toLowerCase()
             : null;
 }
 function getInputValue(el, tagName, type) {
+    typeof type === 'string' ? type.toLowerCase() : '';
     if (tagName === 'INPUT' && (type === 'radio' || type === 'checkbox')) {
         return el.getAttribute('value') || '';
     }
@@ -253,6 +138,9 @@ function getInputValue(el, tagName, type) {
 let _id = 1;
 const tagNameRegex = new RegExp('[^a-z0-9-_:]');
 const IGNORED_NODE = -2;
+function defaultMaskFn(str) {
+    return str ? str.replace(/[\S]/g, '*') : '';
+}
 function genId() {
     return _id++;
 }
@@ -260,12 +148,49 @@ function getValidTagName(element) {
     if (element instanceof HTMLFormElement) {
         return 'form';
     }
-    const processedTagName = toLowerCase(element.tagName);
+    const processedTagName = element.tagName.toLowerCase().trim();
     if (tagNameRegex.test(processedTagName)) {
         return 'div';
     }
     return processedTagName;
 }
+function getCssRulesString(s) {
+    try {
+        const rules = s.rules || s.cssRules;
+        return rules ? Array.from(rules).map(getCssRuleString).join('') : null;
+    }
+    catch (error) {
+        return null;
+    }
+}
+function getCssRuleString(rule) {
+    let cssStringified = rule.cssText;
+    if (isCSSImportRule(rule)) {
+        try {
+            cssStringified = getCssRulesString(rule.styleSheet) || cssStringified;
+        }
+        catch (_a) {
+        }
+    }
+    return validateStringifiedCssRule(cssStringified);
+}
+function validateStringifiedCssRule(cssStringified) {
+    if (cssStringified.indexOf(':') > -1) {
+        const regex = /(\[(?:[\w-]+)[^\\])(:(?:[\w-]+)\])/gm;
+        return cssStringified.replace(regex, '$1\\$2');
+    }
+    return cssStringified;
+}
+function isCSSImportRule(rule) {
+    return 'styleSheet' in rule;
+}
+function stringifyStyleSheet(sheet) {
+    return sheet.cssRules
+        ? Array.from(sheet.cssRules)
+            .map((rule) => rule.cssText ? validateStringifiedCssRule(rule.cssText) : '')
+            .join('')
+        : '';
+}
 function extractOrigin(url) {
     let origin = '';
     if (url.indexOf('//') > -1) {
@@ -280,8 +205,7 @@ function extractOrigin(url) {
 let canvasService;
 let canvasCtx;
 const URL_IN_CSS_REF = /url\((?:(')([^']*)'|(")(.*?)"|([^)]*))\)/gm;
-const URL_PROTOCOL_MATCH = /^(?:[a-z+]+:)?\/\//i;
-const URL_WWW_MATCH = /^www\..*/i;
+const RELATIVE_PATH = /^(?!www\.|(?:http|ftp)s?:\/\/|[A-Za-z]:\\|\/\/|#).*/;
 const DATA_URI = /^(data:)([^,]*),(.*)/i;
 function absoluteToStylesheet(cssText, href) {
     return (cssText || '').replace(URL_IN_CSS_REF, (origin, quote1, path1, quote2, path2, path3) => {
@@ -290,7 +214,7 @@ function absoluteToStylesheet(cssText, href) {
         if (!filePath) {
             return origin;
         }
-        if (URL_PROTOCOL_MATCH.test(filePath) || URL_WWW_MATCH.test(filePath)) {
+        if (!RELATIVE_PATH.test(filePath)) {
             return `url(${maybeQuote}${filePath}${maybeQuote})`;
         }
         if (DATA_URI.test(filePath)) {
@@ -325,7 +249,7 @@ function getAbsoluteSrcsetString(doc, attributeValue) {
     let pos = 0;
     function collectCharacters(regEx) {
         let chars;
-        const match = regEx.exec(attributeValue.substring(pos));
+        let match = regEx.exec(attributeValue.substring(pos));
         if (match) {
             chars = match[0];
             pos += chars.length;
@@ -333,7 +257,7 @@ function getAbsoluteSrcsetString(doc, attributeValue) {
         }
         return '';
     }
-    const output = [];
+    let output = [];
     while (true) {
         collectCharacters(SRCSET_COMMAS_OR_SPACES);
         if (pos >= attributeValue.length) {
@@ -349,7 +273,7 @@ function getAbsoluteSrcsetString(doc, attributeValue) {
             url = absoluteToDoc(doc, url);
             let inParens = false;
             while (true) {
-                const c = attributeValue.charAt(pos);
+                let c = attributeValue.charAt(pos);
                 if (c === '') {
                     output.push((url + descriptorsStr).trim());
                     break;
@@ -392,12 +316,13 @@ function getHref() {
     a.href = '';
     return a.href;
 }
-function transformAttribute(doc, tagName, name, value, element, maskAttributeFn) {
+function transformAttribute(doc, element, _tagName, _name, value, maskAllText, unmaskTextSelector, maskTextFn) {
     if (!value) {
         return value;
     }
-    if (name === 'src' ||
-        (name === 'href' && !(tagName === 'use' && value[0] === '#'))) {
+    const name = _name.toLowerCase();
+    const tagName = _tagName.toLowerCase();
+    if (name === 'src' || name === 'href') {
         return absoluteToDoc(doc, value);
     }
     else if (name === 'xlink:href' && value[0] !== '#') {
@@ -416,113 +341,79 @@ function transformAttribute(doc, tagName, name, value, element, maskAttributeFn)
     else if (tagName === 'object' && name === 'data') {
         return absoluteToDoc(doc, value);
     }
-    if (typeof maskAttributeFn === 'function') {
-        return maskAttributeFn(name, value, element);
+    else if (maskAllText &&
+        _shouldMaskAttribute(element, name, tagName, unmaskTextSelector)) {
+        return maskTextFn ? maskTextFn(value) : defaultMaskFn(value);
     }
     return value;
 }
-function ignoreAttribute(tagName, name, _value) {
-    return (tagName === 'video' || tagName === 'audio') && name === 'autoplay';
+function _shouldMaskAttribute(element, attribute, tagName, unmaskTextSelector) {
+    if (unmaskTextSelector && element.matches(unmaskTextSelector)) {
+        return false;
+    }
+    return (['placeholder', 'title', 'aria-label'].indexOf(attribute) > -1 ||
+        (tagName === 'input' &&
+            attribute === 'value' &&
+            element.hasAttribute('type') &&
+            ['submit', 'button'].indexOf(element.getAttribute('type').toLowerCase()) > -1));
 }
 function _isBlockedElement(element, blockClass, blockSelector, unblockSelector) {
-    try {
-        if (unblockSelector && element.matches(unblockSelector)) {
-            return false;
+    if (unblockSelector && element.matches(unblockSelector)) {
+        return false;
+    }
+    if (typeof blockClass === 'string') {
+        if (element.classList.contains(blockClass)) {
+            return true;
         }
-        if (typeof blockClass === 'string') {
-            if (element.classList.contains(blockClass)) {
+    }
+    else {
+        for (let eIndex = 0; eIndex < element.classList.length; eIndex++) {
+            const className = element.classList[eIndex];
+            if (blockClass.test(className)) {
                 return true;
             }
         }
-        else {
-            for (let eIndex = element.classList.length; eIndex--;) {
-                const className = element.classList[eIndex];
-                if (blockClass.test(className)) {
-                    return true;
-                }
-            }
-        }
-        if (blockSelector) {
-            return element.matches(blockSelector);
-        }
     }
-    catch (e) {
+    if (blockSelector) {
+        return element.matches(blockSelector);
     }
     return false;
 }
-function elementClassMatchesRegex(el, regex) {
-    for (let eIndex = el.classList.length; eIndex--;) {
-        const className = el.classList[eIndex];
-        if (regex.test(className)) {
-            return true;
-        }
+function needMaskingText(node, maskTextClass, maskTextSelector, unmaskTextSelector, maskAllText) {
+    if (!node) {
+        return false;
     }
-    return false;
-}
-function distanceToMatch(node, matchPredicate, limit = Infinity, distance = 0) {
-    if (!node)
-        return -1;
-    if (node.nodeType !== node.ELEMENT_NODE)
-        return -1;
-    if (distance > limit)
-        return -1;
-    if (matchPredicate(node))
-        return distance;
-    return distanceToMatch(node.parentNode, matchPredicate, limit, distance + 1);
-}
-function createMatchPredicate(className, selector) {
-    return (node) => {
-        const el = node;
-        if (el === null)
+    if (node.nodeType !== node.ELEMENT_NODE) {
+        return needMaskingText(node.parentNode, maskTextClass, maskTextSelector, unmaskTextSelector, maskAllText);
+    }
+    if (unmaskTextSelector) {
+        if (node.matches(unmaskTextSelector) ||
+            node.closest(unmaskTextSelector)) {
             return false;
-        if (className) {
-            if (typeof className === 'string') {
-                if (el.matches(`.${className}`))
-                    return true;
-            }
-            else if (elementClassMatchesRegex(el, className)) {
-                return true;
-            }
         }
-        if (selector && el.matches(selector))
+    }
+    if (maskAllText) {
+        return true;
+    }
+    if (typeof maskTextClass === 'string') {
+        if (node.classList.contains(maskTextClass)) {
             return true;
-        return false;
-    };
-}
-function needMaskingText(node, maskTextClass, maskTextSelector, unmaskTextClass, unmaskTextSelector, maskAllText) {
-    try {
-        const el = node.nodeType === node.ELEMENT_NODE
-            ? node
-            : node.parentElement;
-        if (el === null)
-            return false;
-        let maskDistance = -1;
-        let unmaskDistance = -1;
-        if (maskAllText) {
-            unmaskDistance = distanceToMatch(el, createMatchPredicate(unmaskTextClass, unmaskTextSelector));
-            if (unmaskDistance < 0) {
-                return true;
-            }
-            maskDistance = distanceToMatch(el, createMatchPredicate(maskTextClass, maskTextSelector), unmaskDistance >= 0 ? unmaskDistance : Infinity);
         }
-        else {
-            maskDistance = distanceToMatch(el, createMatchPredicate(maskTextClass, maskTextSelector));
-            if (maskDistance < 0) {
-                return false;
+    }
+    else {
+        for (let eIndex = 0; eIndex < node.classList.length; eIndex++) {
+            const className = node.classList[eIndex];
+            if (maskTextClass.test(className)) {
+                return true;
             }
-            unmaskDistance = distanceToMatch(el, createMatchPredicate(unmaskTextClass, unmaskTextSelector), maskDistance >= 0 ? maskDistance : Infinity);
         }
-        return maskDistance >= 0
-            ? unmaskDistance >= 0
-                ? maskDistance <= unmaskDistance
-                : true
-            : unmaskDistance >= 0
-                ? false
-                : !!maskAllText;
     }
-    catch (e) {
+    if (maskTextSelector) {
+        if (node.matches(maskTextSelector)) {
+            return true;
+        }
     }
-    return !!maskAllText;
+    return needMaskingText(node.parentNode, maskTextClass, maskTextSelector, unmaskTextSelector, maskAllText);
 }
 function onceIframeLoaded(iframeEl, listener, iframeLoadTimeout) {
     const win = iframeEl.contentWindow;
@@ -556,36 +447,18 @@ function onceIframeLoaded(iframeEl, listener, iframeLoadTimeout) {
         iframeEl.src === blankUrl ||
         iframeEl.src === '') {
         setTimeout(listener, 0);
-        return iframeEl.addEventListener('load', listener);
-    }
-    iframeEl.addEventListener('load', listener);
-}
-function onceStylesheetLoaded(link, listener, styleSheetLoadTimeout) {
-    let fired = false;
-    let styleSheetLoaded;
-    try {
-        styleSheetLoaded = link.sheet;
-    }
-    catch (error) {
         return;
     }
-    if (styleSheetLoaded)
-        return;
-    const timer = setTimeout(() => {
-        if (!fired) {
-            listener();
-            fired = true;
-        }
-    }, styleSheetLoadTimeout);
-    link.addEventListener('load', () => {
-        clearTimeout(timer);
-        fired = true;
-        listener();
-    });
+    iframeEl.addEventListener('load', listener);
 }
 function serializeNode(n, options) {
-    const { doc, mirror, blockClass, blockSelector, unblockSelector, maskAllText, maskAttributeFn, maskTextClass, unmaskTextClass, maskTextSelector, unmaskTextSelector, inlineStylesheet, maskInputOptions = {}, maskTextFn, maskInputFn, dataURLOptions = {}, inlineImages, recordCanvas, keepIframeSrcFn, newlyAddedElement = false, } = options;
-    const rootId = getRootId(doc, mirror);
+    var _a;
+    const { doc, blockClass, blockSelector, unblockSelector, maskTextClass, maskTextSelector, unmaskTextSelector, inlineStylesheet, maskInputSelector, unmaskInputSelector, maskAllText, maskInputOptions = {}, maskTextFn, maskInputFn, dataURLOptions = {}, inlineImages, recordCanvas, keepIframeSrcFn, } = options;
+    let rootId;
+    if (doc.__sn) {
+        const docId = doc.__sn.id;
+        rootId = docId === 1 ? undefined : docId;
+    }
     switch (n.nodeType) {
         case n.DOCUMENT_NODE:
             if (n.compatMode !== 'CSS1Compat') {
@@ -593,12 +466,14 @@ function serializeNode(n, options) {
                     type: NodeType$1.Document,
                     childNodes: [],
                     compatMode: n.compatMode,
+                    rootId,
                 };
             }
             else {
                 return {
                     type: NodeType$1.Document,
                     childNodes: [],
+                    rootId,
                 };
             }
         case n.DOCUMENT_TYPE_NODE:
@@ -610,39 +485,202 @@ function serializeNode(n, options) {
                 rootId,
             };
         case n.ELEMENT_NODE:
-            return serializeElementNode(n, {
-                doc,
-                blockClass,
-                blockSelector,
-                unblockSelector,
-                inlineStylesheet,
-                maskAttributeFn,
-                maskInputOptions,
-                maskInputFn,
-                dataURLOptions,
-                inlineImages,
-                recordCanvas,
-                keepIframeSrcFn,
-                newlyAddedElement,
+            const needBlock = _isBlockedElement(n, blockClass, blockSelector, unblockSelector);
+            const tagName = getValidTagName(n);
+            let attributes = {};
+            for (const { name, value } of Array.from(n.attributes)) {
+                if (!skipAttribute(tagName, name)) {
+                    attributes[name] = transformAttribute(doc, n, tagName, name, value, maskAllText, unmaskTextSelector, maskTextFn);
+                }
+            }
+            if (tagName === 'link' && inlineStylesheet) {
+                const stylesheet = Array.from(doc.styleSheets).find((s) => {
+                    return s.href === n.href;
+                });
+                let cssText = null;
+                if (stylesheet) {
+                    cssText = getCssRulesString(stylesheet);
+                }
+                if (cssText) {
+                    delete attributes.rel;
+                    delete attributes.href;
+                    attributes._cssText = absoluteToStylesheet(cssText, stylesheet.href);
+                }
+            }
+            if (tagName === 'style' &&
+                n.sheet &&
+                !(n.innerText ||
+                    n.textContent ||
+                    '').trim().length) {
+                const cssText = getCssRulesString(n.sheet);
+                if (cssText) {
+                    attributes._cssText = absoluteToStylesheet(cssText, getHref());
+                }
+            }
+            if (tagName === 'input' ||
+                tagName === 'textarea' ||
+                tagName === 'select' ||
+                tagName === 'option') {
+                const el = n;
+                const type = getInputType(el);
+                const value = getInputValue(el, tagName.toUpperCase(), type);
+                const checked = n.checked;
+                if (type !== 'submit' &&
+                    type !== 'button' &&
+                    value) {
+                    attributes.value = maskInputValue({
+                        input: el,
+                        type,
+                        tagName,
+                        value,
+                        maskInputSelector,
+                        unmaskInputSelector,
+                        maskInputOptions,
+                        maskInputFn,
+                    });
+                }
+                if (checked) {
+                    attributes.checked = checked;
+                }
+            }
+            if (tagName === 'option') {
+                if (n.selected && !maskInputOptions['select']) {
+                    attributes.selected = true;
+                }
+                else {
+                    delete attributes.selected;
+                }
+            }
+            if (tagName === 'canvas' && recordCanvas) {
+                if (n.__context === '2d') {
+                    if (!is2DCanvasBlank(n)) {
+                        attributes.rr_dataURL = n.toDataURL(dataURLOptions.type, dataURLOptions.quality);
+                    }
+                }
+                else if (!('__context' in n)) {
+                    const canvasDataURL = n.toDataURL(dataURLOptions.type, dataURLOptions.quality);
+                    const blankCanvas = document.createElement('canvas');
+                    blankCanvas.width = n.width;
+                    blankCanvas.height = n.height;
+                    const blankCanvasDataURL = blankCanvas.toDataURL(dataURLOptions.type, dataURLOptions.quality);
+                    if (canvasDataURL !== blankCanvasDataURL) {
+                        attributes.rr_dataURL = canvasDataURL;
+                    }
+                }
+            }
+            if (tagName === 'img' && inlineImages) {
+                if (!canvasService) {
+                    canvasService = doc.createElement('canvas');
+                    canvasCtx = canvasService.getContext('2d');
+                }
+                const image = n;
+                const oldValue = image.crossOrigin;
+                image.crossOrigin = 'anonymous';
+                const recordInlineImage = () => {
+                    try {
+                        canvasService.width = image.naturalWidth;
+                        canvasService.height = image.naturalHeight;
+                        canvasCtx.drawImage(image, 0, 0);
+                        attributes.rr_dataURL = canvasService.toDataURL(dataURLOptions.type, dataURLOptions.quality);
+                    }
+                    catch (err) {
+                        console.warn(`Cannot inline img src=${image.currentSrc}! Error: ${err}`);
+                    }
+                    oldValue
+                        ? (attributes.crossOrigin = oldValue)
+                        : delete attributes.crossOrigin;
+                };
+                if (image.complete && image.naturalWidth !== 0)
+                    recordInlineImage();
+                else
+                    image.onload = recordInlineImage;
+            }
+            if (tagName === 'audio' || tagName === 'video') {
+                attributes.rr_mediaState = n.paused
+                    ? 'paused'
+                    : 'played';
+                attributes.rr_mediaCurrentTime = n.currentTime;
+            }
+            if (n.scrollLeft) {
+                attributes.rr_scrollLeft = n.scrollLeft;
+            }
+            if (n.scrollTop) {
+                attributes.rr_scrollTop = n.scrollTop;
+            }
+            if (needBlock) {
+                const { width, height } = n.getBoundingClientRect();
+                attributes = {
+                    class: attributes.class,
+                    rr_width: `${width}px`,
+                    rr_height: `${height}px`,
+                };
+            }
+            if (tagName === 'iframe' && !keepIframeSrcFn(attributes.src)) {
+                if (!n.contentDocument) {
+                    attributes.rr_src = attributes.src;
+                }
+                delete attributes.src;
+            }
+            return {
+                type: NodeType$1.Element,
+                tagName,
+                attributes,
+                childNodes: [],
+                isSVG: isSVGElement(n) || undefined,
+                needBlock,
                 rootId,
-                maskAllText,
-                maskTextClass,
-                unmaskTextClass,
-                maskTextSelector,
-                unmaskTextSelector,
-            });
+            };
         case n.TEXT_NODE:
-            return serializeTextNode(n, {
-                maskAllText,
-                maskTextClass,
-                unmaskTextClass,
-                maskTextSelector,
-                unmaskTextSelector,
-                maskTextFn,
-                maskInputOptions,
-                maskInputFn,
+            const parentTagName = n.parentNode && n.parentNode.tagName;
+            let textContent = n.textContent;
+            const isStyle = parentTagName === 'STYLE' ? true : undefined;
+            const isScript = parentTagName === 'SCRIPT' ? true : undefined;
+            if (isStyle && textContent) {
+                try {
+                    if (n.nextSibling || n.previousSibling) {
+                    }
+                    else if ((_a = n.parentNode.sheet) === null || _a === void 0 ? void 0 : _a.cssRules) {
+                        textContent = stringifyStyleSheet(n.parentNode.sheet);
+                    }
+                }
+                catch (err) {
+                    console.warn(`Cannot get CSS styles from text's parentNode. Error: ${err}`, n);
+                }
+                textContent = absoluteToStylesheet(textContent, getHref());
+            }
+            if (isScript) {
+                textContent = 'SCRIPT_PLACEHOLDER';
+            }
+            if (parentTagName === 'TEXTAREA' && textContent) {
+                textContent = '';
+            }
+            else if (parentTagName === 'OPTION' && textContent) {
+                const option = n.parentNode;
+                textContent = maskInputValue({
+                    input: option,
+                    type: null,
+                    tagName: parentTagName,
+                    value: textContent,
+                    maskInputSelector,
+                    unmaskInputSelector,
+                    maskInputOptions,
+                    maskInputFn,
+                });
+            }
+            else if (!isStyle &&
+                !isScript &&
+                needMaskingText(n, maskTextClass, maskTextSelector, unmaskTextSelector, maskAllText) &&
+                textContent) {
+                textContent = maskTextFn
+                    ? maskTextFn(textContent)
+                    : defaultMaskFn(textContent);
+            }
+            return {
+                type: NodeType$1.Text,
+                textContent: textContent || '',
+                isStyle,
                 rootId,
-            });
+            };
         case n.CDATA_SECTION_NODE:
             return {
                 type: NodeType$1.CDATA,
@@ -659,225 +697,6 @@ function serializeNode(n, options) {
             return false;
     }
 }
-function getRootId(doc, mirror) {
-    if (!mirror.hasNode(doc))
-        return undefined;
-    const docId = mirror.getId(doc);
-    return docId === 1 ? undefined : docId;
-}
-function serializeTextNode(n, options) {
-    var _a;
-    const { maskAllText, maskTextClass, unmaskTextClass, maskTextSelector, unmaskTextSelector, maskTextFn, maskInputOptions, maskInputFn, rootId, } = options;
-    const parentTagName = n.parentNode && n.parentNode.tagName;
-    let textContent = n.textContent;
-    const isStyle = parentTagName === 'STYLE' ? true : undefined;
-    const isScript = parentTagName === 'SCRIPT' ? true : undefined;
-    const isTextarea = parentTagName === 'TEXTAREA' ? true : undefined;
-    if (isStyle && textContent) {
-        try {
-            if (n.nextSibling || n.previousSibling) {
-            }
-            else if ((_a = n.parentNode.sheet) === null || _a === void 0 ? void 0 : _a.cssRules) {
-                textContent = stringifyStylesheet(n.parentNode.sheet);
-            }
-        }
-        catch (err) {
-            console.warn(`Cannot get CSS styles from text's parentNode. Error: ${err}`, n);
-        }
-        textContent = absoluteToStylesheet(textContent, getHref());
-    }
-    if (isScript) {
-        textContent = 'SCRIPT_PLACEHOLDER';
-    }
-    const forceMask = needMaskingText(n, maskTextClass, maskTextSelector, unmaskTextClass, unmaskTextSelector, maskAllText);
-    if (!isStyle && !isScript && !isTextarea && textContent && forceMask) {
-        textContent = maskTextFn
-            ? maskTextFn(textContent)
-            : textContent.replace(/[\S]/g, '*');
-    }
-    if (isTextarea && textContent && (maskInputOptions.textarea || forceMask)) {
-        textContent = maskInputFn
-            ? maskInputFn(textContent, n.parentNode)
-            : textContent.replace(/[\S]/g, '*');
-    }
-    if (parentTagName === 'OPTION' && textContent) {
-        const isInputMasked = shouldMaskInput({
-            type: null,
-            tagName: parentTagName,
-            maskInputOptions,
-        });
-        textContent = maskInputValue({
-            isMasked: needMaskingText(n, maskTextClass, maskTextSelector, unmaskTextClass, unmaskTextSelector, isInputMasked),
-            element: n,
-            value: textContent,
-            maskInputFn,
-        });
-    }
-    return {
-        type: NodeType$1.Text,
-        textContent: textContent || '',
-        isStyle,
-        rootId,
-    };
-}
-function serializeElementNode(n, options) {
-    const { doc, blockClass, blockSelector, unblockSelector, inlineStylesheet, maskInputOptions = {}, maskAttributeFn, maskInputFn, dataURLOptions = {}, inlineImages, recordCanvas, keepIframeSrcFn, newlyAddedElement = false, rootId, maskAllText, maskTextClass, unmaskTextClass, maskTextSelector, unmaskTextSelector, } = options;
-    const needBlock = _isBlockedElement(n, blockClass, blockSelector, unblockSelector);
-    const tagName = getValidTagName(n);
-    let attributes = {};
-    const len = n.attributes.length;
-    for (let i = 0; i < len; i++) {
-        const attr = n.attributes[i];
-        if (!ignoreAttribute(tagName, attr.name, attr.value)) {
-            attributes[attr.name] = transformAttribute(doc, tagName, toLowerCase(attr.name), attr.value, n, maskAttributeFn);
-        }
-    }
-    if (tagName === 'link' && inlineStylesheet) {
-        const stylesheet = Array.from(doc.styleSheets).find((s) => {
-            return s.href === n.href;
-        });
-        let cssText = null;
-        if (stylesheet) {
-            cssText = stringifyStylesheet(stylesheet);
-        }
-        if (cssText) {
-            delete attributes.rel;
-            delete attributes.href;
-            attributes._cssText = absoluteToStylesheet(cssText, stylesheet.href);
-        }
-    }
-    if (tagName === 'style' &&
-        n.sheet &&
-        !(n.innerText || n.textContent || '').trim().length) {
-        const cssText = stringifyStylesheet(n.sheet);
-        if (cssText) {
-            attributes._cssText = absoluteToStylesheet(cssText, getHref());
-        }
-    }
-    if (tagName === 'input' ||
-        tagName === 'textarea' ||
-        tagName === 'select' ||
-        tagName === 'option') {
-        const el = n;
-        const type = getInputType(el);
-        const value = getInputValue(el, toUpperCase(tagName), type);
-        const checked = el.checked;
-        if (type !== 'submit' && type !== 'button' && value) {
-            const forceMask = needMaskingText(el, maskTextClass, maskTextSelector, unmaskTextClass, unmaskTextSelector, shouldMaskInput({
-                type,
-                tagName: toUpperCase(tagName),
-                maskInputOptions,
-            }));
-            attributes.value = maskInputValue({
-                isMasked: forceMask,
-                element: el,
-                value,
-                maskInputFn,
-            });
-        }
-        if (checked) {
-            attributes.checked = checked;
-        }
-    }
-    if (tagName === 'option') {
-        if (n.selected && !maskInputOptions['select']) {
-            attributes.selected = true;
-        }
-        else {
-            delete attributes.selected;
-        }
-    }
-    if (tagName === 'canvas' && recordCanvas) {
-        if (n.__context === '2d') {
-            if (!is2DCanvasBlank(n)) {
-                attributes.rr_dataURL = n.toDataURL(dataURLOptions.type, dataURLOptions.quality);
-            }
-        }
-        else if (!('__context' in n)) {
-            const canvasDataURL = n.toDataURL(dataURLOptions.type, dataURLOptions.quality);
-            const blankCanvas = document.createElement('canvas');
-            blankCanvas.width = n.width;
-            blankCanvas.height = n.height;
-            const blankCanvasDataURL = blankCanvas.toDataURL(dataURLOptions.type, dataURLOptions.quality);
-            if (canvasDataURL !== blankCanvasDataURL) {
-                attributes.rr_dataURL = canvasDataURL;
-            }
-        }
-    }
-    if (tagName === 'img' && inlineImages) {
-        if (!canvasService) {
-            canvasService = doc.createElement('canvas');
-            canvasCtx = canvasService.getContext('2d');
-        }
-        const image = n;
-        const oldValue = image.crossOrigin;
-        image.crossOrigin = 'anonymous';
-        const recordInlineImage = () => {
-            image.removeEventListener('load', recordInlineImage);
-            try {
-                canvasService.width = image.naturalWidth;
-                canvasService.height = image.naturalHeight;
-                canvasCtx.drawImage(image, 0, 0);
-                attributes.rr_dataURL = canvasService.toDataURL(dataURLOptions.type, dataURLOptions.quality);
-            }
-            catch (err) {
-                console.warn(`Cannot inline img src=${image.currentSrc}! Error: ${err}`);
-            }
-            oldValue
-                ? (attributes.crossOrigin = oldValue)
-                : image.removeAttribute('crossorigin');
-        };
-        if (image.complete && image.naturalWidth !== 0)
-            recordInlineImage();
-        else
-            image.addEventListener('load', recordInlineImage);
-    }
-    if (tagName === 'audio' || tagName === 'video') {
-        attributes.rr_mediaState = n.paused
-            ? 'paused'
-            : 'played';
-        attributes.rr_mediaCurrentTime = n.currentTime;
-    }
-    if (!newlyAddedElement) {
-        if (n.scrollLeft) {
-            attributes.rr_scrollLeft = n.scrollLeft;
-        }
-        if (n.scrollTop) {
-            attributes.rr_scrollTop = n.scrollTop;
-        }
-    }
-    if (needBlock) {
-        const { width, height } = n.getBoundingClientRect();
-        attributes = {
-            class: attributes.class,
-            rr_width: `${width}px`,
-            rr_height: `${height}px`,
-        };
-    }
-    if (tagName === 'iframe' && !keepIframeSrcFn(attributes.src)) {
-        if (!n.contentDocument) {
-            attributes.rr_src = attributes.src;
-        }
-        delete attributes.src;
-    }
-    let isCustomElement;
-    try {
-        if (customElements.get(tagName))
-            isCustomElement = true;
-    }
-    catch (e) {
-    }
-    return {
-        type: NodeType$1.Element,
-        tagName,
-        attributes,
-        childNodes: [],
-        isSVG: isSVGElement(n) || undefined,
-        needBlock,
-        rootId,
-        isCustom: isCustomElement,
-    };
-}
 function lowerIfExists(maybeAttr) {
     if (maybeAttr === undefined || maybeAttr === null) {
         return '';
@@ -959,37 +778,35 @@ function slimDOMExcluded(sn, slimDOMOptions) {
     return false;
 }
 function serializeNodeWithId(n, options) {
-    const { doc, mirror, blockClass, blockSelector, unblockSelector, maskAllText, maskTextClass, unmaskTextClass, maskTextSelector, unmaskTextSelector, skipChild = false, inlineStylesheet = true, maskInputOptions = {}, maskAttributeFn, maskTextFn, maskInputFn, slimDOMOptions, dataURLOptions = {}, inlineImages = false, recordCanvas = false, onSerialize, onIframeLoad, iframeLoadTimeout = 5000, onStylesheetLoad, stylesheetLoadTimeout = 5000, keepIframeSrcFn = () => false, newlyAddedElement = false, } = options;
+    const { doc, map, blockClass, blockSelector, unblockSelector, maskTextClass, maskTextSelector, unmaskTextSelector, skipChild = false, inlineStylesheet = true, maskInputSelector, unmaskInputSelector, maskAllText, maskInputOptions = {}, maskTextFn, maskInputFn, slimDOMOptions, dataURLOptions = {}, inlineImages = false, recordCanvas = false, onSerialize, onIframeLoad, iframeLoadTimeout = 5000, keepIframeSrcFn = () => false, } = options;
     let { preserveWhiteSpace = true } = options;
     const _serializedNode = serializeNode(n, {
         doc,
-        mirror,
         blockClass,
         blockSelector,
-        maskAllText,
         unblockSelector,
         maskTextClass,
-        unmaskTextClass,
         maskTextSelector,
         unmaskTextSelector,
         inlineStylesheet,
+        maskInputSelector,
+        unmaskInputSelector,
+        maskAllText,
         maskInputOptions,
-        maskAttributeFn,
         maskTextFn,
         maskInputFn,
         dataURLOptions,
         inlineImages,
         recordCanvas,
         keepIframeSrcFn,
-        newlyAddedElement,
     });
     if (!_serializedNode) {
         console.warn(n, 'not serialized');
         return null;
     }
     let id;
-    if (mirror.hasNode(n)) {
-        id = mirror.getId(n);
+    if ('__sn' in n) {
+        id = n.__sn.id;
     }
     else if (slimDOMExcluded(_serializedNode, slimDOMOptions) ||
         (!preserveWhiteSpace &&
@@ -1002,10 +819,11 @@ function serializeNodeWithId(n, options) {
         id = genId();
     }
     const serializedNode = Object.assign(_serializedNode, { id });
-    mirror.add(n, serializedNode);
+    n.__sn = serializedNode;
     if (id === IGNORED_NODE) {
         return null;
     }
+    map[id] = n;
     if (onSerialize) {
         onSerialize(n);
     }
@@ -1013,33 +831,32 @@ function serializeNodeWithId(n, options) {
     if (serializedNode.type === NodeType$1.Element) {
         recordChild = recordChild && !serializedNode.needBlock;
         delete serializedNode.needBlock;
-        const shadowRoot = n.shadowRoot;
-        if (shadowRoot && isNativeShadowDom(shadowRoot))
+        if (n.shadowRoot)
             serializedNode.isShadowHost = true;
     }
     if ((serializedNode.type === NodeType$1.Document ||
         serializedNode.type === NodeType$1.Element) &&
         recordChild) {
         if (slimDOMOptions.headWhitespace &&
-            serializedNode.type === NodeType$1.Element &&
-            serializedNode.tagName === 'head') {
+            _serializedNode.type === NodeType$1.Element &&
+            _serializedNode.tagName === 'head') {
             preserveWhiteSpace = false;
         }
         const bypassOptions = {
             doc,
-            mirror,
+            map,
             blockClass,
             blockSelector,
-            maskAllText,
             unblockSelector,
             maskTextClass,
-            unmaskTextClass,
             maskTextSelector,
             unmaskTextSelector,
             skipChild,
             inlineStylesheet,
+            maskInputSelector,
+            unmaskInputSelector,
+            maskAllText,
             maskInputOptions,
-            maskAttributeFn,
             maskTextFn,
             maskInputFn,
             slimDOMOptions,
@@ -1050,8 +867,6 @@ function serializeNodeWithId(n, options) {
             onSerialize,
             onIframeLoad,
             iframeLoadTimeout,
-            onStylesheetLoad,
-            stylesheetLoadTimeout,
             keepIframeSrcFn,
         };
         for (const childN of Array.from(n.childNodes)) {
@@ -1060,20 +875,17 @@ function serializeNodeWithId(n, options) {
                 serializedNode.childNodes.push(serializedChildNode);
             }
         }
-        if (isElement$1(n) && n.shadowRoot) {
+        if (isElement(n) && n.shadowRoot) {
             for (const childN of Array.from(n.shadowRoot.childNodes)) {
                 const serializedChildNode = serializeNodeWithId(childN, bypassOptions);
                 if (serializedChildNode) {
-                    isNativeShadowDom(n.shadowRoot) &&
-                        (serializedChildNode.isShadow = true);
+                    serializedChildNode.isShadow = true;
                     serializedNode.childNodes.push(serializedChildNode);
                 }
             }
         }
     }
-    if (n.parentNode &&
-        isShadowRoot(n.parentNode) &&
-        isNativeShadowDom(n.parentNode)) {
+    if (n.parentNode && isShadowRoot(n.parentNode)) {
         serializedNode.isShadow = true;
     }
     if (serializedNode.type === NodeType$1.Element &&
@@ -1083,19 +895,19 @@ function serializeNodeWithId(n, options) {
             if (iframeDoc && onIframeLoad) {
                 const serializedIframeNode = serializeNodeWithId(iframeDoc, {
                     doc: iframeDoc,
-                    mirror,
+                    map,
                     blockClass,
                     blockSelector,
                     unblockSelector,
-                    maskAllText,
                     maskTextClass,
-                    unmaskTextClass,
                     maskTextSelector,
                     unmaskTextSelector,
                     skipChild: false,
                     inlineStylesheet,
+                    maskInputSelector,
+                    unmaskInputSelector,
+                    maskAllText,
                     maskInputOptions,
-                    maskAttributeFn,
                     maskTextFn,
                     maskInputFn,
                     slimDOMOptions,
@@ -1106,8 +918,6 @@ function serializeNodeWithId(n, options) {
                     onSerialize,
                     onIframeLoad,
                     iframeLoadTimeout,
-                    onStylesheetLoad,
-                    stylesheetLoadTimeout,
                     keepIframeSrcFn,
                 });
                 if (serializedIframeNode) {
@@ -1116,50 +926,11 @@ function serializeNodeWithId(n, options) {
             }
         }, iframeLoadTimeout);
     }
-    if (serializedNode.type === NodeType$1.Element &&
-        serializedNode.tagName === 'link' &&
-        serializedNode.attributes.rel === 'stylesheet') {
-        onceStylesheetLoaded(n, () => {
-            if (onStylesheetLoad) {
-                const serializedLinkNode = serializeNodeWithId(n, {
-                    doc,
-                    mirror,
-                    blockClass,
-                    blockSelector,
-                    unblockSelector,
-                    maskAllText,
-                    maskTextClass,
-                    unmaskTextClass,
-                    maskTextSelector,
-                    unmaskTextSelector,
-                    skipChild: false,
-                    inlineStylesheet,
-                    maskInputOptions,
-                    maskAttributeFn,
-                    maskTextFn,
-                    maskInputFn,
-                    slimDOMOptions,
-                    dataURLOptions,
-                    inlineImages,
-                    recordCanvas,
-                    preserveWhiteSpace,
-                    onSerialize,
-                    onIframeLoad,
-                    iframeLoadTimeout,
-                    onStylesheetLoad,
-                    stylesheetLoadTimeout,
-                    keepIframeSrcFn,
-                });
-                if (serializedLinkNode) {
-                    onStylesheetLoad(n, serializedLinkNode);
-                }
-            }
-        }, stylesheetLoadTimeout);
-    }
     return serializedNode;
 }
 function snapshot(n, options) {
-    const { mirror = new Mirror(), blockClass = 'rr-block', blockSelector = null, unblockSelector = null, maskAllText = false, maskTextClass = 'rr-mask', unmaskTextClass = null, maskTextSelector = null, unmaskTextSelector = null, inlineStylesheet = true, inlineImages = false, recordCanvas = false, maskAllInputs = false, maskAttributeFn, maskTextFn, maskInputFn, slimDOM = false, dataURLOptions, preserveWhiteSpace, onSerialize, onIframeLoad, iframeLoadTimeout, onStylesheetLoad, stylesheetLoadTimeout, keepIframeSrcFn = () => false, } = options || {};
+    const { blockClass = 'rr-block', blockSelector = null, unblockSelector = null, maskTextClass = 'rr-mask', maskTextSelector = null, unmaskTextSelector = null, inlineStylesheet = true, inlineImages = false, recordCanvas = false, maskInputSelector = null, unmaskInputSelector = null, maskAllText = false, maskAllInputs = false, maskTextFn, maskInputFn, slimDOM = false, dataURLOptions, preserveWhiteSpace, onSerialize, onIframeLoad, iframeLoadTimeout, keepIframeSrcFn = () => false, } = options || {};
+    const idNodeMap = {};
     const maskInputOptions = maskAllInputs === true
         ? {
             color: true,
@@ -1198,43 +969,147 @@ function snapshot(n, options) {
         : slimDOM === false
             ? {}
             : slimDOM;
-    return serializeNodeWithId(n, {
-        doc: n,
-        mirror,
-        blockClass,
-        blockSelector,
-        unblockSelector,
-        maskAllText,
-        maskTextClass,
-        unmaskTextClass,
-        maskTextSelector,
-        unmaskTextSelector,
-        skipChild: false,
-        inlineStylesheet,
-        maskInputOptions,
-        maskAttributeFn,
-        maskTextFn,
-        maskInputFn,
-        slimDOMOptions,
-        dataURLOptions,
-        inlineImages,
-        recordCanvas,
-        preserveWhiteSpace,
-        onSerialize,
-        onIframeLoad,
-        iframeLoadTimeout,
-        onStylesheetLoad,
-        stylesheetLoadTimeout,
-        keepIframeSrcFn,
-        newlyAddedElement: false,
-    });
+    return [
+        serializeNodeWithId(n, {
+            doc: n,
+            map: idNodeMap,
+            blockClass,
+            blockSelector,
+            unblockSelector,
+            maskTextClass,
+            maskTextSelector,
+            unmaskTextSelector,
+            skipChild: false,
+            inlineStylesheet,
+            maskInputSelector,
+            unmaskInputSelector,
+            maskAllText,
+            maskInputOptions,
+            maskTextFn,
+            maskInputFn,
+            slimDOMOptions,
+            dataURLOptions,
+            inlineImages,
+            recordCanvas,
+            preserveWhiteSpace,
+            onSerialize,
+            onIframeLoad,
+            iframeLoadTimeout,
+            keepIframeSrcFn,
+        }),
+        idNodeMap,
+    ];
 }
+function skipAttribute(tagName, attributeName, value) {
+    return ((tagName === 'video' || tagName === 'audio') && attributeName === 'autoplay');
+}
+
+var EventType;
+(function (EventType) {
+    EventType[EventType["DomContentLoaded"] = 0] = "DomContentLoaded";
+    EventType[EventType["Load"] = 1] = "Load";
+    EventType[EventType["FullSnapshot"] = 2] = "FullSnapshot";
+    EventType[EventType["IncrementalSnapshot"] = 3] = "IncrementalSnapshot";
+    EventType[EventType["Meta"] = 4] = "Meta";
+    EventType[EventType["Custom"] = 5] = "Custom";
+    EventType[EventType["Plugin"] = 6] = "Plugin";
+})(EventType || (EventType = {}));
+var IncrementalSource;
+(function (IncrementalSource) {
+    IncrementalSource[IncrementalSource["Mutation"] = 0] = "Mutation";
+    IncrementalSource[IncrementalSource["MouseMove"] = 1] = "MouseMove";
+    IncrementalSource[IncrementalSource["MouseInteraction"] = 2] = "MouseInteraction";
+    IncrementalSource[IncrementalSource["Scroll"] = 3] = "Scroll";
+    IncrementalSource[IncrementalSource["ViewportResize"] = 4] = "ViewportResize";
+    IncrementalSource[IncrementalSource["Input"] = 5] = "Input";
+    IncrementalSource[IncrementalSource["TouchMove"] = 6] = "TouchMove";
+    IncrementalSource[IncrementalSource["MediaInteraction"] = 7] = "MediaInteraction";
+    IncrementalSource[IncrementalSource["StyleSheetRule"] = 8] = "StyleSheetRule";
+    IncrementalSource[IncrementalSource["CanvasMutation"] = 9] = "CanvasMutation";
+    IncrementalSource[IncrementalSource["Font"] = 10] = "Font";
+    IncrementalSource[IncrementalSource["Log"] = 11] = "Log";
+    IncrementalSource[IncrementalSource["Drag"] = 12] = "Drag";
+    IncrementalSource[IncrementalSource["StyleDeclaration"] = 13] = "StyleDeclaration";
+})(IncrementalSource || (IncrementalSource = {}));
+var MouseInteractions;
+(function (MouseInteractions) {
+    MouseInteractions[MouseInteractions["MouseUp"] = 0] = "MouseUp";
+    MouseInteractions[MouseInteractions["MouseDown"] = 1] = "MouseDown";
+    MouseInteractions[MouseInteractions["Click"] = 2] = "Click";
+    MouseInteractions[MouseInteractions["ContextMenu"] = 3] = "ContextMenu";
+    MouseInteractions[MouseInteractions["DblClick"] = 4] = "DblClick";
+    MouseInteractions[MouseInteractions["Focus"] = 5] = "Focus";
+    MouseInteractions[MouseInteractions["Blur"] = 6] = "Blur";
+    MouseInteractions[MouseInteractions["TouchStart"] = 7] = "TouchStart";
+    MouseInteractions[MouseInteractions["TouchMove_Departed"] = 8] = "TouchMove_Departed";
+    MouseInteractions[MouseInteractions["TouchEnd"] = 9] = "TouchEnd";
+    MouseInteractions[MouseInteractions["TouchCancel"] = 10] = "TouchCancel";
+})(MouseInteractions || (MouseInteractions = {}));
+var CanvasContext;
+(function (CanvasContext) {
+    CanvasContext[CanvasContext["2D"] = 0] = "2D";
+    CanvasContext[CanvasContext["WebGL"] = 1] = "WebGL";
+    CanvasContext[CanvasContext["WebGL2"] = 2] = "WebGL2";
+})(CanvasContext || (CanvasContext = {}));
+var MediaInteractions;
+(function (MediaInteractions) {
+    MediaInteractions[MediaInteractions["Play"] = 0] = "Play";
+    MediaInteractions[MediaInteractions["Pause"] = 1] = "Pause";
+    MediaInteractions[MediaInteractions["Seeked"] = 2] = "Seeked";
+    MediaInteractions[MediaInteractions["VolumeChange"] = 3] = "VolumeChange";
+})(MediaInteractions || (MediaInteractions = {}));
+var ReplayerEvents;
+(function (ReplayerEvents) {
+    ReplayerEvents["Start"] = "start";
+    ReplayerEvents["Pause"] = "pause";
+    ReplayerEvents["Resume"] = "resume";
+    ReplayerEvents["Resize"] = "resize";
+    ReplayerEvents["Finish"] = "finish";
+    ReplayerEvents["FullsnapshotRebuilded"] = "fullsnapshot-rebuilded";
+    ReplayerEvents["LoadStylesheetStart"] = "load-stylesheet-start";
+    ReplayerEvents["LoadStylesheetEnd"] = "load-stylesheet-end";
+    ReplayerEvents["SkipStart"] = "skip-start";
+    ReplayerEvents["SkipEnd"] = "skip-end";
+    ReplayerEvents["MouseInteraction"] = "mouse-interaction";
+    ReplayerEvents["EventCast"] = "event-cast";
+    ReplayerEvents["CustomEvent"] = "custom-event";
+    ReplayerEvents["Flush"] = "flush";
+    ReplayerEvents["StateChange"] = "state-change";
+    ReplayerEvents["PlayBack"] = "play-back";
+})(ReplayerEvents || (ReplayerEvents = {}));
 
 function on(type, fn, target = document) {
     const options = { capture: true, passive: true };
     target.addEventListener(type, fn, options);
     return () => target.removeEventListener(type, fn, options);
 }
+function createMirror() {
+    return {
+        map: {},
+        getId(n) {
+            if (!n || !n.__sn) {
+                return -1;
+            }
+            return n.__sn.id;
+        },
+        getNode(id) {
+            return this.map[id] || null;
+        },
+        removeNodeFromMap(n) {
+            const id = n.__sn && n.__sn.id;
+            delete this.map[id];
+            if (n.childNodes) {
+                n.childNodes.forEach((child) => this.removeNodeFromMap(child));
+            }
+        },
+        has(id) {
+            return this.map.hasOwnProperty(id);
+        },
+        reset() {
+            this.map = {};
+        },
+    };
+}
 const DEPARTED_MIRROR_ACCESS_WARNING = 'Please stop import mirror directly. Instead of that,' +
     '\r\n' +
     'now you can use replayer.getMirror() to access the mirror instance of a replayer,' +
@@ -1274,13 +1149,14 @@ if (typeof window !== 'undefined' && window.Proxy && window.Reflect) {
 function throttle$1(func, wait, options = {}) {
     let timeout = null;
     let previous = 0;
-    return function (...args) {
-        const now = Date.now();
+    return function (arg) {
+        let now = Date.now();
         if (!previous && options.leading === false) {
             previous = now;
         }
-        const remaining = wait - (now - previous);
-        const context = this;
+        let remaining = wait - (now - previous);
+        let context = this;
+        let args = arguments;
         if (remaining <= 0 || remaining > wait) {
             if (timeout) {
                 clearTimeout(timeout);
@@ -1317,8 +1193,7 @@ function hookSetter(target, key, d, isRevoked, win = window) {
 function patch(source, name, replacement) {
     try {
         if (!(name in source)) {
-            return () => {
-            };
+            return () => { };
         }
         const original = source[name];
         const wrapped = replacement(original);
@@ -1337,36 +1212,9 @@ function patch(source, name, replacement) {
         };
     }
     catch (_a) {
-        return () => {
-        };
+        return () => { };
     }
 }
-let nowTimestamp = Date.now;
-if (!(/[1-9][0-9]{12}/.test(Date.now().toString()))) {
-    nowTimestamp = () => new Date().getTime();
-}
-function getWindowScroll(win) {
-    var _a, _b, _c, _d, _e, _f;
-    const doc = win.document;
-    return {
-        left: doc.scrollingElement
-            ? doc.scrollingElement.scrollLeft
-            : win.pageXOffset !== undefined
-                ? win.pageXOffset
-                : (doc === null || doc === void 0 ? void 0 : doc.documentElement.scrollLeft) ||
-                    ((_b = (_a = doc === null || doc === void 0 ? void 0 : doc.body) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.scrollLeft) ||
-                    ((_c = doc === null || doc === void 0 ? void 0 : doc.body) === null || _c === void 0 ? void 0 : _c.scrollLeft) ||
-                    0,
-        top: doc.scrollingElement
-            ? doc.scrollingElement.scrollTop
-            : win.pageYOffset !== undefined
-                ? win.pageYOffset
-                : (doc === null || doc === void 0 ? void 0 : doc.documentElement.scrollTop) ||
-                    ((_e = (_d = doc === null || doc === void 0 ? void 0 : doc.body) === null || _d === void 0 ? void 0 : _d.parentElement) === null || _e === void 0 ? void 0 : _e.scrollTop) ||
-                    ((_f = doc === null || doc === void 0 ? void 0 : doc.body) === null || _f === void 0 ? void 0 : _f.scrollTop) ||
-                    0,
-    };
-}
 function getWindowHeight() {
     return (window.innerHeight ||
         (document.documentElement && document.documentElement.clientHeight) ||
@@ -1377,38 +1225,48 @@ function getWindowWidth() {
         (document.documentElement && document.documentElement.clientWidth) ||
         (document.body && document.body.clientWidth));
 }
-function isBlocked(node, blockClass, blockSelector, unblockSelector, checkAncestors) {
+function isBlocked(node, blockClass, blockSelector, unblockSelector) {
     if (!node) {
         return false;
     }
-    const el = node.nodeType === node.ELEMENT_NODE
-        ? node
-        : node.parentElement;
-    if (!el)
-        return false;
-    const blockedPredicate = createMatchPredicate(blockClass, blockSelector);
-    if (!checkAncestors) {
-        const isUnblocked = unblockSelector && el.matches(unblockSelector);
-        return blockedPredicate(el) && !isUnblocked;
-    }
-    const blockDistance = distanceToMatch(el, blockedPredicate);
-    let unblockDistance = -1;
-    if (blockDistance < 0) {
-        return false;
-    }
-    if (unblockSelector) {
-        unblockDistance = distanceToMatch(el, createMatchPredicate(null, unblockSelector));
+    if (node.nodeType === node.ELEMENT_NODE) {
+        let needBlock = false;
+        const needUnblock = unblockSelector && node.matches(unblockSelector);
+        if (typeof blockClass === 'string') {
+            if (node.closest !== undefined) {
+                needBlock =
+                    !needUnblock &&
+                        node.closest('.' + blockClass) !== null;
+            }
+            else {
+                needBlock =
+                    !needUnblock && node.classList.contains(blockClass);
+            }
+        }
+        else {
+            !needUnblock &&
+                node.classList.forEach((className) => {
+                    if (blockClass.test(className)) {
+                        needBlock = true;
+                    }
+                });
+        }
+        if (!needBlock && blockSelector) {
+            needBlock = node.matches(blockSelector);
+        }
+        return ((!needUnblock && needBlock) ||
+            isBlocked(node.parentNode, blockClass, blockSelector, unblockSelector));
     }
-    if (blockDistance > -1 && unblockDistance < 0) {
-        return true;
+    if (node.nodeType === node.TEXT_NODE) {
+        return isBlocked(node.parentNode, blockClass, blockSelector, unblockSelector);
     }
-    return blockDistance < unblockDistance;
-}
-function isSerialized(n, mirror) {
-    return mirror.getId(n) !== -1;
+    return isBlocked(node.parentNode, blockClass, blockSelector, unblockSelector);
 }
-function isIgnored(n, mirror) {
-    return mirror.getId(n) === IGNORED_NODE;
+function isIgnored(n) {
+    if ('__sn' in n) {
+        return n.__sn.id === IGNORED_NODE;
+    }
+    return false;
 }
 function isAncestorRemoved(target, mirror) {
     if (isShadowRoot(target)) {
@@ -1427,7 +1285,7 @@ function isAncestorRemoved(target, mirror) {
     }
     return isAncestorRemoved(target.parentNode, mirror);
 }
-function legacy_isTouchEvent(event) {
+function isTouchEvent(event) {
     return Boolean(event.changedTouches);
 }
 function polyfill(win = window) {
@@ -1440,9 +1298,8 @@ function polyfill(win = window) {
             .forEach;
     }
     if (!Node.prototype.contains) {
-        Node.prototype.contains = (...args) => {
-            let node = args[0];
-            if (!(0 in args)) {
+        Node.prototype.contains = function contains(node) {
+            if (!(0 in arguments)) {
                 throw new TypeError('1 argument is required');
             }
             do {
@@ -1454,142 +1311,15 @@ function polyfill(win = window) {
         };
     }
 }
-function isSerializedIframe(n, mirror) {
-    return Boolean(n.nodeName === 'IFRAME' && mirror.getMeta(n));
-}
-function isSerializedStylesheet(n, mirror) {
-    return Boolean(n.nodeName === 'LINK' &&
-        n.nodeType === n.ELEMENT_NODE &&
-        n.getAttribute &&
-        n.getAttribute('rel') === 'stylesheet' &&
-        mirror.getMeta(n));
+function isIframeINode(node) {
+    if ('__sn' in node) {
+        return (node.__sn.type === NodeType$1.Element && node.__sn.tagName === 'iframe');
+    }
+    return false;
 }
 function hasShadowRoot(n) {
     return Boolean(n === null || n === void 0 ? void 0 : n.shadowRoot);
 }
-class StyleSheetMirror {
-    constructor() {
-        this.id = 1;
-        this.styleIDMap = new WeakMap();
-        this.idStyleMap = new Map();
-    }
-    getId(stylesheet) {
-        var _a;
-        return (_a = this.styleIDMap.get(stylesheet)) !== null && _a !== void 0 ? _a : -1;
-    }
-    has(stylesheet) {
-        return this.styleIDMap.has(stylesheet);
-    }
-    add(stylesheet, id) {
-        if (this.has(stylesheet))
-            return this.getId(stylesheet);
-        let newId;
-        if (id === undefined) {
-            newId = this.id++;
-        }
-        else
-            newId = id;
-        this.styleIDMap.set(stylesheet, newId);
-        this.idStyleMap.set(newId, stylesheet);
-        return newId;
-    }
-    getStyle(id) {
-        return this.idStyleMap.get(id) || null;
-    }
-    reset() {
-        this.styleIDMap = new WeakMap();
-        this.idStyleMap = new Map();
-        this.id = 1;
-    }
-    generateId() {
-        return this.id++;
-    }
-}
-function getShadowHost(n) {
-    var _a, _b;
-    let shadowHost = null;
-    if (((_b = (_a = n.getRootNode) === null || _a === void 0 ? void 0 : _a.call(n)) === null || _b === void 0 ? void 0 : _b.nodeType) === Node.DOCUMENT_FRAGMENT_NODE &&
-        n.getRootNode().host)
-        shadowHost = n.getRootNode().host;
-    return shadowHost;
-}
-function getRootShadowHost(n) {
-    let rootShadowHost = n;
-    let shadowHost;
-    while ((shadowHost = getShadowHost(rootShadowHost)))
-        rootShadowHost = shadowHost;
-    return rootShadowHost;
-}
-function shadowHostInDom(n) {
-    const doc = n.ownerDocument;
-    if (!doc)
-        return false;
-    const shadowHost = getRootShadowHost(n);
-    return doc.contains(shadowHost);
-}
-function inDom(n) {
-    const doc = n.ownerDocument;
-    if (!doc)
-        return false;
-    return doc.contains(n) || shadowHostInDom(n);
-}
-
-var EventType = /* @__PURE__ */ ((EventType2) => {
-  EventType2[EventType2["DomContentLoaded"] = 0] = "DomContentLoaded";
-  EventType2[EventType2["Load"] = 1] = "Load";
-  EventType2[EventType2["FullSnapshot"] = 2] = "FullSnapshot";
-  EventType2[EventType2["IncrementalSnapshot"] = 3] = "IncrementalSnapshot";
-  EventType2[EventType2["Meta"] = 4] = "Meta";
-  EventType2[EventType2["Custom"] = 5] = "Custom";
-  EventType2[EventType2["Plugin"] = 6] = "Plugin";
-  return EventType2;
-})(EventType || {});
-var IncrementalSource = /* @__PURE__ */ ((IncrementalSource2) => {
-  IncrementalSource2[IncrementalSource2["Mutation"] = 0] = "Mutation";
-  IncrementalSource2[IncrementalSource2["MouseMove"] = 1] = "MouseMove";
-  IncrementalSource2[IncrementalSource2["MouseInteraction"] = 2] = "MouseInteraction";
-  IncrementalSource2[IncrementalSource2["Scroll"] = 3] = "Scroll";
-  IncrementalSource2[IncrementalSource2["ViewportResize"] = 4] = "ViewportResize";
-  IncrementalSource2[IncrementalSource2["Input"] = 5] = "Input";
-  IncrementalSource2[IncrementalSource2["TouchMove"] = 6] = "TouchMove";
-  IncrementalSource2[IncrementalSource2["MediaInteraction"] = 7] = "MediaInteraction";
-  IncrementalSource2[IncrementalSource2["StyleSheetRule"] = 8] = "StyleSheetRule";
-  IncrementalSource2[IncrementalSource2["CanvasMutation"] = 9] = "CanvasMutation";
-  IncrementalSource2[IncrementalSource2["Font"] = 10] = "Font";
-  IncrementalSource2[IncrementalSource2["Log"] = 11] = "Log";
-  IncrementalSource2[IncrementalSource2["Drag"] = 12] = "Drag";
-  IncrementalSource2[IncrementalSource2["StyleDeclaration"] = 13] = "StyleDeclaration";
-  IncrementalSource2[IncrementalSource2["Selection"] = 14] = "Selection";
-  IncrementalSource2[IncrementalSource2["AdoptedStyleSheet"] = 15] = "AdoptedStyleSheet";
-  IncrementalSource2[IncrementalSource2["CustomElement"] = 16] = "CustomElement";
-  return IncrementalSource2;
-})(IncrementalSource || {});
-var MouseInteractions = /* @__PURE__ */ ((MouseInteractions2) => {
-  MouseInteractions2[MouseInteractions2["MouseUp"] = 0] = "MouseUp";
-  MouseInteractions2[MouseInteractions2["MouseDown"] = 1] = "MouseDown";
-  MouseInteractions2[MouseInteractions2["Click"] = 2] = "Click";
-  MouseInteractions2[MouseInteractions2["ContextMenu"] = 3] = "ContextMenu";
-  MouseInteractions2[MouseInteractions2["DblClick"] = 4] = "DblClick";
-  MouseInteractions2[MouseInteractions2["Focus"] = 5] = "Focus";
-  MouseInteractions2[MouseInteractions2["Blur"] = 6] = "Blur";
-  MouseInteractions2[MouseInteractions2["TouchStart"] = 7] = "TouchStart";
-  MouseInteractions2[MouseInteractions2["TouchMove_Departed"] = 8] = "TouchMove_Departed";
-  MouseInteractions2[MouseInteractions2["TouchEnd"] = 9] = "TouchEnd";
-  MouseInteractions2[MouseInteractions2["TouchCancel"] = 10] = "TouchCancel";
-  return MouseInteractions2;
-})(MouseInteractions || {});
-var PointerTypes = /* @__PURE__ */ ((PointerTypes2) => {
-  PointerTypes2[PointerTypes2["Mouse"] = 0] = "Mouse";
-  PointerTypes2[PointerTypes2["Pen"] = 1] = "Pen";
-  PointerTypes2[PointerTypes2["Touch"] = 2] = "Touch";
-  return PointerTypes2;
-})(PointerTypes || {});
-var CanvasContext = /* @__PURE__ */ ((CanvasContext2) => {
-  CanvasContext2[CanvasContext2["2D"] = 0] = "2D";
-  CanvasContext2[CanvasContext2["WebGL"] = 1] = "WebGL";
-  CanvasContext2[CanvasContext2["WebGL2"] = 2] = "WebGL2";
-  return CanvasContext2;
-})(CanvasContext || {});
 
 function isNodeInLinkedList(n) {
     return '__ln' in n;
@@ -1598,7 +1328,6 @@ class DoubleLinkedList {
     constructor() {
         this.length = 0;
         this.head = null;
-        this.tail = null;
     }
     get(position) {
         if (position >= this.length) {
@@ -1644,9 +1373,6 @@ class DoubleLinkedList {
             node.next = this.head;
             this.head = node;
         }
-        if (node.next === null) {
-            this.tail = node;
-        }
         this.length++;
     }
     removeNode(n) {
@@ -1659,18 +1385,12 @@ class DoubleLinkedList {
             if (this.head) {
                 this.head.previous = null;
             }
-            else {
-                this.tail = null;
-            }
         }
         else {
             current.previous.next = current.next;
             if (current.next) {
                 current.next.previous = current.previous;
             }
-            else {
-                this.tail = current.previous;
-            }
         }
         if (n.__ln) {
             delete n.__ln;
@@ -1679,6 +1399,9 @@ class DoubleLinkedList {
     }
 }
 const moveKey = (id, parentId) => `${id}@${parentId}`;
+function isINode(n) {
+    return '__sn' in n;
+}
 class MutationBuffer {
     constructor() {
         this.frozen = false;
@@ -1700,7 +1423,6 @@ class MutationBuffer {
                 return;
             }
             const adds = [];
-            const addedIds = new Set();
             const addList = new DoubleLinkedList();
             const getNextId = (n) => {
                 let ns = n;
@@ -1712,56 +1434,59 @@ class MutationBuffer {
                 return nextId;
             };
             const pushAdd = (n) => {
-                if (!n.parentNode || !inDom(n)) {
+                var _a, _b, _c, _d, _e;
+                const shadowHost = n.getRootNode
+                    ? (_a = n.getRootNode()) === null || _a === void 0 ? void 0 : _a.host
+                    : null;
+                let rootShadowHost = shadowHost;
+                while ((_c = (_b = rootShadowHost === null || rootShadowHost === void 0 ? void 0 : rootShadowHost.getRootNode) === null || _b === void 0 ? void 0 : _b.call(rootShadowHost)) === null || _c === void 0 ? void 0 : _c.host)
+                    rootShadowHost =
+                        ((_e = (_d = rootShadowHost === null || rootShadowHost === void 0 ? void 0 : rootShadowHost.getRootNode) === null || _d === void 0 ? void 0 : _d.call(rootShadowHost)) === null || _e === void 0 ? void 0 : _e.host) ||
+                            null;
+                const notInDoc = !this.doc.contains(n) &&
+                    (!rootShadowHost || !this.doc.contains(rootShadowHost));
+                if (!n.parentNode || notInDoc) {
                     return;
                 }
                 const parentId = isShadowRoot(n.parentNode)
-                    ? this.mirror.getId(getShadowHost(n))
+                    ? this.mirror.getId(shadowHost)
                     : this.mirror.getId(n.parentNode);
                 const nextId = getNextId(n);
                 if (parentId === -1 || nextId === -1) {
                     return addList.addNode(n);
                 }
-                const sn = serializeNodeWithId(n, {
+                let sn = serializeNodeWithId(n, {
                     doc: this.doc,
-                    mirror: this.mirror,
+                    map: this.mirror.map,
                     blockClass: this.blockClass,
                     blockSelector: this.blockSelector,
-                    maskAllText: this.maskAllText,
                     unblockSelector: this.unblockSelector,
                     maskTextClass: this.maskTextClass,
-                    unmaskTextClass: this.unmaskTextClass,
                     maskTextSelector: this.maskTextSelector,
                     unmaskTextSelector: this.unmaskTextSelector,
+                    maskInputSelector: this.maskInputSelector,
+                    unmaskInputSelector: this.unmaskInputSelector,
                     skipChild: true,
-                    newlyAddedElement: true,
                     inlineStylesheet: this.inlineStylesheet,
+                    maskAllText: this.maskAllText,
                     maskInputOptions: this.maskInputOptions,
-                    maskAttributeFn: this.maskAttributeFn,
                     maskTextFn: this.maskTextFn,
                     maskInputFn: this.maskInputFn,
                     slimDOMOptions: this.slimDOMOptions,
-                    dataURLOptions: this.dataURLOptions,
                     recordCanvas: this.recordCanvas,
                     inlineImages: this.inlineImages,
                     onSerialize: (currentN) => {
-                        if (isSerializedIframe(currentN, this.mirror)) {
+                        if (isIframeINode(currentN)) {
                             this.iframeManager.addIframe(currentN);
                         }
-                        if (isSerializedStylesheet(currentN, this.mirror)) {
-                            this.stylesheetManager.trackLinkElement(currentN);
-                        }
                         if (hasShadowRoot(n)) {
-                            this.shadowDomManager.addShadowRoot(n.shadowRoot, this.doc);
+                            this.shadowDomManager.addShadowRoot(n.shadowRoot, document);
                         }
                     },
                     onIframeLoad: (iframe, childSn) => {
                         this.iframeManager.attachIframe(iframe, childSn);
                         this.shadowDomManager.observeAttachShadow(iframe);
                     },
-                    onStylesheetLoad: (link, childSn) => {
-                        this.stylesheetManager.attachLinkElement(link, childSn);
-                    },
                 });
                 if (sn) {
                     adds.push({
@@ -1769,7 +1494,6 @@ class MutationBuffer {
                         nextId,
                         node: sn,
                     });
-                    addedIds.add(sn.id);
                 }
             };
             while (this.mapRemoves.length) {
@@ -1805,33 +1529,15 @@ class MutationBuffer {
                     }
                 }
                 if (!node) {
-                    let tailNode = addList.tail;
-                    while (tailNode) {
-                        const _node = tailNode;
-                        tailNode = tailNode.previous;
+                    for (let index = addList.length - 1; index >= 0; index--) {
+                        const _node = addList.get(index);
                         if (_node) {
                             const parentId = this.mirror.getId(_node.value.parentNode);
                             const nextId = getNextId(_node.value);
-                            if (nextId === -1)
-                                continue;
-                            else if (parentId !== -1) {
+                            if (parentId !== -1 && nextId !== -1) {
                                 node = _node;
                                 break;
                             }
-                            else {
-                                const unhandledNode = _node.value;
-                                if (unhandledNode.parentNode &&
-                                    unhandledNode.parentNode.nodeType ===
-                                        Node.DOCUMENT_FRAGMENT_NODE) {
-                                    const shadowHost = unhandledNode.parentNode
-                                        .host;
-                                    const parentId = this.mirror.getId(shadowHost);
-                                    if (parentId !== -1) {
-                                        node = _node;
-                                        break;
-                                    }
-                                }
-                            }
                         }
                     }
                 }
@@ -1851,27 +1557,12 @@ class MutationBuffer {
                     id: this.mirror.getId(text.node),
                     value: text.value,
                 }))
-                    .filter((text) => !addedIds.has(text.id))
                     .filter((text) => this.mirror.has(text.id)),
                 attributes: this.attributes
-                    .map((attribute) => {
-                    const { attributes } = attribute;
-                    if (typeof attributes.style === 'string') {
-                        const diffAsStr = JSON.stringify(attribute.styleDiff);
-                        const unchangedAsStr = JSON.stringify(attribute._unchangedStyles);
-                        if (diffAsStr.length < attributes.style.length) {
-                            if ((diffAsStr + unchangedAsStr).split('var(').length ===
-                                attributes.style.split('var(').length) {
-                                attributes.style = attribute.styleDiff;
-                            }
-                        }
-                    }
-                    return {
-                        id: this.mirror.getId(attribute.node),
-                        attributes: attributes,
-                    };
-                })
-                    .filter((attribute) => !addedIds.has(attribute.id))
+                    .map((attribute) => ({
+                    id: this.mirror.getId(attribute.node),
+                    attributes: attribute.attributes,
+                }))
                     .filter((attribute) => this.mirror.has(attribute.id)),
                 removes: this.removes,
                 adds,
@@ -1892,23 +1583,15 @@ class MutationBuffer {
             this.mutationCb(payload);
         };
         this.processMutation = (m) => {
-            if (isIgnored(m.target, this.mirror)) {
+            if (isIgnored(m.target)) {
                 return;
             }
-            let unattachedDoc;
-            try {
-                unattachedDoc = document.implementation.createHTMLDocument();
-            }
-            catch (e) {
-                unattachedDoc = this.doc;
-            }
             switch (m.type) {
                 case 'characterData': {
                     const value = m.target.textContent;
-                    if (!isBlocked(m.target, this.blockClass, this.blockSelector, this.unblockSelector, false) &&
-                        value !== m.oldValue) {
+                    if (!isBlocked(m.target, this.blockClass, this.blockSelector, this.unblockSelector) && value !== m.oldValue) {
                         this.texts.push({
-                            value: needMaskingText(m.target, this.maskTextClass, this.maskTextSelector, this.unmaskTextClass, this.unmaskTextSelector, this.maskAllText) && value
+                            value: needMaskingText(m.target, this.maskTextClass, this.maskTextSelector, this.unmaskTextSelector, this.maskAllText) && value
                                 ? this.maskTextFn
                                     ? this.maskTextFn(value)
                                     : value.replace(/[\S]/g, '*')
@@ -1920,99 +1603,83 @@ class MutationBuffer {
                 }
                 case 'attributes': {
                     const target = m.target;
-                    let attributeName = m.attributeName;
-                    let value = m.target.getAttribute(attributeName);
-                    if (attributeName === 'value') {
-                        const type = getInputType(target);
-                        const tagName = target.tagName;
-                        value = getInputValue(target, tagName, type);
-                        const isInputMasked = shouldMaskInput({
-                            maskInputOptions: this.maskInputOptions,
-                            tagName,
-                            type,
-                        });
-                        const forceMask = needMaskingText(m.target, this.maskTextClass, this.maskTextSelector, this.unmaskTextClass, this.unmaskTextSelector, isInputMasked);
+                    let value = target.getAttribute(m.attributeName);
+                    if (m.attributeName === 'value') {
                         value = maskInputValue({
-                            isMasked: forceMask,
-                            element: target,
+                            input: target,
+                            maskInputSelector: this.maskInputSelector,
+                            unmaskInputSelector: this.unmaskInputSelector,
+                            maskInputOptions: this.maskInputOptions,
+                            tagName: target.tagName,
+                            type: target.getAttribute('type'),
                             value,
                             maskInputFn: this.maskInputFn,
                         });
                     }
-                    if (isBlocked(m.target, this.blockClass, this.blockSelector, this.unblockSelector, false) ||
-                        value === m.oldValue) {
+                    if (isBlocked(m.target, this.blockClass, this.blockSelector, this.unblockSelector) || value === m.oldValue) {
                         return;
                     }
-                    let item = this.attributes.find((a) => a.node === m.target);
-                    if (target.tagName === 'IFRAME' &&
-                        attributeName === 'src' &&
-                        !this.keepIframeSrcFn(value)) {
-                        if (!target.contentDocument) {
-                            attributeName = 'rr_src';
-                        }
-                        else {
-                            return;
-                        }
-                    }
+                    let item = this.attributes.find((a) => a.node === m.target);
                     if (!item) {
                         item = {
                             node: m.target,
                             attributes: {},
-                            styleDiff: {},
-                            _unchangedStyles: {},
                         };
                         this.attributes.push(item);
                     }
-                    if (attributeName === 'type' &&
+                    if (m.attributeName === 'type' &&
                         target.tagName === 'INPUT' &&
                         (m.oldValue || '').toLowerCase() === 'password') {
                         target.setAttribute('data-rr-is-password', 'true');
                     }
-                    if (!ignoreAttribute(target.tagName, attributeName)) {
-                        item.attributes[attributeName] = transformAttribute(this.doc, toLowerCase(target.tagName), toLowerCase(attributeName), value, target, this.maskAttributeFn);
-                        if (attributeName === 'style') {
-                            const old = unattachedDoc.createElement('span');
-                            if (m.oldValue) {
-                                old.setAttribute('style', m.oldValue);
-                            }
+                    if (m.attributeName === 'style') {
+                        const old = this.doc.createElement('span');
+                        if (m.oldValue) {
+                            old.setAttribute('style', m.oldValue);
+                        }
+                        if (item.attributes.style === undefined ||
+                            item.attributes.style === null) {
+                            item.attributes.style = {};
+                        }
+                        try {
+                            const styleObj = item.attributes.style;
                             for (const pname of Array.from(target.style)) {
                                 const newValue = target.style.getPropertyValue(pname);
                                 const newPriority = target.style.getPropertyPriority(pname);
                                 if (newValue !== old.style.getPropertyValue(pname) ||
                                     newPriority !== old.style.getPropertyPriority(pname)) {
                                     if (newPriority === '') {
-                                        item.styleDiff[pname] = newValue;
+                                        styleObj[pname] = newValue;
                                     }
                                     else {
-                                        item.styleDiff[pname] = [newValue, newPriority];
+                                        styleObj[pname] = [newValue, newPriority];
                                     }
                                 }
-                                else {
-                                    item._unchangedStyles[pname] = [newValue, newPriority];
-                                }
                             }
                             for (const pname of Array.from(old.style)) {
                                 if (target.style.getPropertyValue(pname) === '') {
-                                    item.styleDiff[pname] = false;
+                                    styleObj[pname] = false;
                                 }
                             }
                         }
+                        catch (error) {
+                            console.warn('[rrweb] Error when parsing update to style attribute:', error);
+                        }
+                    }
+                    else {
+                        const element = m.target;
+                        item.attributes[m.attributeName] = transformAttribute(this.doc, element, element.tagName, m.attributeName, value, this.maskAllText, this.unmaskTextSelector, this.maskTextFn);
                     }
                     break;
                 }
                 case 'childList': {
-                    if (isBlocked(m.target, this.blockClass, this.blockSelector, this.unblockSelector, true)) {
-                        return;
-                    }
                     m.addedNodes.forEach((n) => this.genAdds(n, m.target));
                     m.removedNodes.forEach((n) => {
                         const nodeId = this.mirror.getId(n);
                         const parentId = isShadowRoot(m.target)
                             ? this.mirror.getId(m.target.host)
                             : this.mirror.getId(m.target);
-                        if (isBlocked(m.target, this.blockClass, this.blockSelector, this.unblockSelector, false) ||
-                            isIgnored(n, this.mirror) ||
-                            !isSerialized(n, this.mirror)) {
+                        if (isBlocked(m.target, this.blockClass, this.blockSelector, this.unblockSelector) || isIgnored(n)) {
                             return;
                         }
                         if (this.addedSet.has(n)) {
@@ -2029,9 +1696,7 @@ class MutationBuffer {
                             this.removes.push({
                                 parentId,
                                 id: nodeId,
-                                isShadow: isShadowRoot(m.target) && isNativeShadowDom(m.target)
-                                    ? true
-                                    : undefined,
+                                isShadow: isShadowRoot(m.target) ? true : undefined,
                             });
                         }
                         this.mapRemoves.push(n);
@@ -2041,36 +1706,28 @@ class MutationBuffer {
             }
         };
         this.genAdds = (n, target) => {
-            if (this.processedNodeManager.inOtherBuffer(n, this))
-                return;
-            if (this.addedSet.has(n) || this.movedSet.has(n))
+            if (target && isBlocked(target, this.blockClass, this.blockSelector, this.unblockSelector)) {
                 return;
-            if (this.mirror.hasNode(n)) {
-                if (isIgnored(n, this.mirror)) {
+            }
+            if (isINode(n)) {
+                if (isIgnored(n)) {
                     return;
                 }
                 this.movedSet.add(n);
                 let targetId = null;
-                if (target && this.mirror.hasNode(target)) {
-                    targetId = this.mirror.getId(target);
+                if (target && isINode(target)) {
+                    targetId = target.__sn.id;
                 }
-                if (targetId && targetId !== -1) {
-                    this.movedMap[moveKey(this.mirror.getId(n), targetId)] = true;
+                if (targetId) {
+                    this.movedMap[moveKey(n.__sn.id, targetId)] = true;
                 }
             }
             else {
                 this.addedSet.add(n);
                 this.droppedSet.delete(n);
             }
-            if (!isBlocked(n, this.blockClass, this.blockSelector, this.unblockSelector, false)) {
+            if (!isBlocked(n, this.blockClass, this.blockSelector, this.unblockSelector))
                 n.childNodes.forEach((childN) => this.genAdds(childN));
-                if (hasShadowRoot(n)) {
-                    n.shadowRoot.childNodes.forEach((childN) => {
-                        this.processedNodeManager.add(childN, this);
-                        this.genAdds(childN, n);
-                    });
-                }
-            }
         };
     }
     init(options) {
@@ -2079,28 +1736,24 @@ class MutationBuffer {
             'blockClass',
             'blockSelector',
             'unblockSelector',
-            'maskAllText',
             'maskTextClass',
-            'unmaskTextClass',
             'maskTextSelector',
             'unmaskTextSelector',
+            'maskInputSelector',
+            'unmaskInputSelector',
             'inlineStylesheet',
+            'maskAllText',
             'maskInputOptions',
-            'maskAttributeFn',
             'maskTextFn',
             'maskInputFn',
-            'keepIframeSrcFn',
             'recordCanvas',
             'inlineImages',
             'slimDOMOptions',
-            'dataURLOptions',
             'doc',
             'mirror',
             'iframeManager',
-            'stylesheetManager',
             'shadowDomManager',
             'canvasManager',
-            'processedNodeManager',
         ].forEach((key) => {
             this[key] = options[key];
         });
@@ -2136,11 +1789,6 @@ function deepDelete(addsSet, n) {
     n.childNodes.forEach((childN) => deepDelete(addsSet, childN));
 }
 function isParentRemoved(removes, n, mirror) {
-    if (removes.length === 0)
-        return false;
-    return _isParentRemoved(removes, n, mirror);
-}
-function _isParentRemoved(removes, n, mirror) {
     const { parentNode } = n;
     if (!parentNode) {
         return false;
@@ -2149,14 +1797,9 @@ function _isParentRemoved(removes, n, mirror) {
     if (removes.some((r) => r.id === parentId)) {
         return true;
     }
-    return _isParentRemoved(removes, parentNode, mirror);
+    return isParentRemoved(removes, parentNode, mirror);
 }
 function isAncestorInSet(set, n) {
-    if (set.size === 0)
-        return false;
-    return _isAncestorInSet(set, n);
-}
-function _isAncestorInSet(set, n) {
     const { parentNode } = n;
     if (!parentNode) {
         return false;
@@ -2164,32 +1807,23 @@ function _isAncestorInSet(set, n) {
     if (set.has(parentNode)) {
         return true;
     }
-    return _isAncestorInSet(set, parentNode);
+    return isAncestorInSet(set, parentNode);
 }
 
-let errorHandler;
-function registerErrorHandler(handler) {
-    errorHandler = handler;
-}
-function unregisterErrorHandler() {
-    errorHandler = undefined;
-}
 const callbackWrapper = (cb) => {
-    if (!errorHandler) {
-        return cb;
-    }
-    const rrwebWrapped = ((...rest) => {
+    const rrwebWrapped = (...rest) => {
         try {
             return cb(...rest);
         }
         catch (error) {
-            if (errorHandler && errorHandler(error) === true) {
-                return () => {
-                };
+            try {
+                error.__rrweb__ = true;
+            }
+            catch (_a) {
             }
             throw error;
         }
-    });
+    };
     return rrwebWrapped;
 };
 
@@ -2206,8 +1840,7 @@ function getEventTarget(event) {
             return event.path[0];
         }
     }
-    catch (_a) {
-    }
+    catch (_a) { }
     return event && event.target;
 }
 function initMutationObserver(options, rootEl) {
@@ -2226,7 +1859,7 @@ function initMutationObserver(options, rootEl) {
         if (options.onMutation && options.onMutation(mutations) === false) {
             return;
         }
-        mutationBuffer.processMutations.bind(mutationBuffer)(mutations);
+        mutationBuffer.processMutations(mutations);
     }));
     observer.observe(rootEl, {
         attributes: true,
@@ -2240,8 +1873,7 @@ function initMutationObserver(options, rootEl) {
 }
 function initMoveObserver({ mousemoveCb, sampling, doc, mirror, }) {
     if (sampling.mousemove === false) {
-        return () => {
-        };
+        return () => { };
     }
     const threshold = typeof sampling.mousemove === 'number' ? sampling.mousemove : 50;
     const callbackThreshold = typeof sampling.mousemoveCallback === 'number'
@@ -2249,41 +1881,41 @@ function initMoveObserver({ mousemoveCb, sampling, doc, mirror, }) {
         : 500;
     let positions = [];
     let timeBaseline;
-    const wrappedCb = throttle$1(callbackWrapper((source) => {
+    const wrappedCb = throttle$1((source) => {
         const totalOffset = Date.now() - timeBaseline;
-        mousemoveCb(positions.map((p) => {
+        callbackWrapper(mousemoveCb)(positions.map((p) => {
             p.timeOffset -= totalOffset;
             return p;
         }), source);
         positions = [];
         timeBaseline = null;
-    }), callbackThreshold);
-    const updatePosition = callbackWrapper(throttle$1(callbackWrapper((evt) => {
+    }, callbackThreshold);
+    const updatePosition = throttle$1((evt) => {
         const target = getEventTarget(evt);
-        const { clientX, clientY } = legacy_isTouchEvent(evt)
+        const { clientX, clientY } = isTouchEvent(evt)
             ? evt.changedTouches[0]
             : evt;
         if (!timeBaseline) {
-            timeBaseline = nowTimestamp();
+            timeBaseline = Date.now();
         }
         positions.push({
             x: clientX,
             y: clientY,
             id: mirror.getId(target),
-            timeOffset: nowTimestamp() - timeBaseline,
+            timeOffset: Date.now() - timeBaseline,
         });
         wrappedCb(typeof DragEvent !== 'undefined' && evt instanceof DragEvent
             ? IncrementalSource.Drag
             : evt instanceof MouseEvent
                 ? IncrementalSource.MouseMove
                 : IncrementalSource.TouchMove);
-    }), threshold, {
+    }, threshold, {
         trailing: false,
-    }));
+    });
     const handlers = [
-        on('mousemove', updatePosition, doc),
-        on('touchmove', updatePosition, doc),
-        on('drag', updatePosition, doc),
+        on('mousemove', callbackWrapper(updatePosition), doc),
+        on('touchmove', callbackWrapper(updatePosition), doc),
+        on('drag', callbackWrapper(updatePosition), doc),
     ];
     return callbackWrapper(() => {
         handlers.forEach((h) => h());
@@ -2291,68 +1923,31 @@ function initMoveObserver({ mousemoveCb, sampling, doc, mirror, }) {
 }
 function initMouseInteractionObserver({ mouseInteractionCb, doc, mirror, blockClass, blockSelector, unblockSelector, sampling, }) {
     if (sampling.mouseInteraction === false) {
-        return () => {
-        };
+        return () => { };
     }
     const disableMap = sampling.mouseInteraction === true ||
         sampling.mouseInteraction === undefined
         ? {}
         : sampling.mouseInteraction;
     const handlers = [];
-    let currentPointerType = null;
     const getHandler = (eventKey) => {
         return (event) => {
             const target = getEventTarget(event);
-            if (isBlocked(target, blockClass, blockSelector, unblockSelector, true)) {
+            if (isBlocked(target, blockClass, blockSelector, unblockSelector)) {
                 return;
             }
-            let pointerType = null;
-            let thisEventKey = eventKey;
-            if ('pointerType' in event) {
-                switch (event.pointerType) {
-                    case 'mouse':
-                        pointerType = PointerTypes.Mouse;
-                        break;
-                    case 'touch':
-                        pointerType = PointerTypes.Touch;
-                        break;
-                    case 'pen':
-                        pointerType = PointerTypes.Pen;
-                        break;
-                }
-                if (pointerType === PointerTypes.Touch) {
-                    if (MouseInteractions[eventKey] === MouseInteractions.MouseDown) {
-                        thisEventKey = 'TouchStart';
-                    }
-                    else if (MouseInteractions[eventKey] === MouseInteractions.MouseUp) {
-                        thisEventKey = 'TouchEnd';
-                    }
-                }
-                else if (pointerType === PointerTypes.Pen) ;
-            }
-            else if (legacy_isTouchEvent(event)) {
-                pointerType = PointerTypes.Touch;
-            }
-            if (pointerType !== null) {
-                currentPointerType = pointerType;
-                if ((thisEventKey.startsWith('Touch') &&
-                    pointerType === PointerTypes.Touch) ||
-                    (thisEventKey.startsWith('Mouse') &&
-                        pointerType === PointerTypes.Mouse)) {
-                    pointerType = null;
-                }
-            }
-            else if (MouseInteractions[eventKey] === MouseInteractions.Click) {
-                pointerType = currentPointerType;
-                currentPointerType = null;
-            }
-            const e = legacy_isTouchEvent(event) ? event.changedTouches[0] : event;
+            const e = isTouchEvent(event) ? event.changedTouches[0] : event;
             if (!e) {
                 return;
             }
             const id = mirror.getId(target);
             const { clientX, clientY } = e;
-            callbackWrapper(mouseInteractionCb)(Object.assign({ type: MouseInteractions[thisEventKey], id, x: clientX, y: clientY }, (pointerType !== null && { pointerType })));
+            callbackWrapper(mouseInteractionCb)({
+                type: MouseInteractions[eventKey],
+                id,
+                x: clientX,
+                y: clientY,
+            });
         };
     };
     Object.keys(MouseInteractions)
@@ -2360,19 +1955,8 @@ function initMouseInteractionObserver({ mouseInteractionCb, doc, mirror, blockCl
         !key.endsWith('_Departed') &&
         disableMap[key] !== false)
         .forEach((eventKey) => {
-        let eventName = toLowerCase(eventKey);
-        const handler = getHandler(eventKey);
-        if (window.PointerEvent) {
-            switch (MouseInteractions[eventKey]) {
-                case MouseInteractions.MouseDown:
-                case MouseInteractions.MouseUp:
-                    eventName = eventName.replace('mouse', 'pointer');
-                    break;
-                case MouseInteractions.TouchStart:
-                case MouseInteractions.TouchEnd:
-                    return;
-            }
-        }
+        const eventName = eventKey.toLowerCase();
+        const handler = callbackWrapper(getHandler(eventKey));
         handlers.push(on(eventName, handler, doc));
     });
     return callbackWrapper(() => {
@@ -2380,47 +1964,47 @@ function initMouseInteractionObserver({ mouseInteractionCb, doc, mirror, blockCl
     });
 }
 function initScrollObserver({ scrollCb, doc, mirror, blockClass, blockSelector, unblockSelector, sampling, }) {
-    const updatePosition = callbackWrapper(throttle$1(callbackWrapper((evt) => {
+    const updatePosition = throttle$1((evt) => {
         const target = getEventTarget(evt);
         if (!target ||
-            isBlocked(target, blockClass, blockSelector, unblockSelector, true)) {
+            isBlocked(target, blockClass, blockSelector, unblockSelector)) {
             return;
         }
         const id = mirror.getId(target);
-        if (target === doc && doc.defaultView) {
-            const scrollLeftTop = getWindowScroll(doc.defaultView);
-            scrollCb({
+        if (target === doc) {
+            const scrollEl = (doc.scrollingElement || doc.documentElement);
+            callbackWrapper(scrollCb)({
                 id,
-                x: scrollLeftTop.left,
-                y: scrollLeftTop.top,
+                x: scrollEl.scrollLeft,
+                y: scrollEl.scrollTop,
             });
         }
         else {
-            scrollCb({
+            callbackWrapper(scrollCb)({
                 id,
                 x: target.scrollLeft,
                 y: target.scrollTop,
             });
         }
-    }), sampling.scroll || 100));
-    return on('scroll', updatePosition, doc);
+    }, sampling.scroll || 100);
+    return on('scroll', callbackWrapper(updatePosition), doc);
 }
-function initViewportResizeObserver({ viewportResizeCb }, { win }) {
+function initViewportResizeObserver({ viewportResizeCb, }) {
     let lastH = -1;
     let lastW = -1;
-    const updateDimension = callbackWrapper(throttle$1(callbackWrapper(() => {
+    const updateDimension = throttle$1(() => {
         const height = getWindowHeight();
         const width = getWindowWidth();
         if (lastH !== height || lastW !== width) {
-            viewportResizeCb({
+            callbackWrapper(viewportResizeCb)({
                 width: Number(width),
                 height: Number(height),
             });
             lastH = height;
             lastW = width;
         }
-    }), 200));
-    return on('resize', updateDimension, win);
+    }, 200);
+    return on('resize', callbackWrapper(updateDimension), window);
 }
 function wrapEventWithUserTriggeredFlag(v, enable) {
     const value = Object.assign({}, v);
@@ -2430,42 +2014,47 @@ function wrapEventWithUserTriggeredFlag(v, enable) {
 }
 const INPUT_TAGS = ['INPUT', 'TEXTAREA', 'SELECT'];
 const lastInputValueMap = new WeakMap();
-function initInputObserver({ inputCb, doc, mirror, blockClass, blockSelector, unblockSelector, ignoreClass, ignoreSelector, maskInputOptions, maskInputFn, sampling, userTriggeredOnInput, maskTextClass, unmaskTextClass, maskTextSelector, unmaskTextSelector, }) {
+function initInputObserver({ inputCb, doc, mirror, blockClass, blockSelector, unblockSelector, ignoreClass, ignoreSelector, maskInputSelector, unmaskInputSelector, maskInputOptions, maskInputFn, sampling, userTriggeredOnInput, }) {
     function eventHandler(event) {
         let target = getEventTarget(event);
+        const tagName = target && target.tagName;
         const userTriggered = event.isTrusted;
-        const tagName = target && toUpperCase(target.tagName);
         if (tagName === 'OPTION')
             target = target.parentElement;
         if (!target ||
             !tagName ||
             INPUT_TAGS.indexOf(tagName) < 0 ||
-            isBlocked(target, blockClass, blockSelector, unblockSelector, true)) {
+            isBlocked(target, blockClass, blockSelector, unblockSelector)) {
             return;
         }
         const el = target;
+        const type = getInputType(el);
         if (el.classList.contains(ignoreClass) ||
             (ignoreSelector && el.matches(ignoreSelector))) {
             return;
         }
-        const type = getInputType(target);
         let text = getInputValue(el, tagName, type);
         let isChecked = false;
-        const isInputMasked = shouldMaskInput({
+        if (type === 'radio' || type === 'checkbox') {
+            isChecked = target.checked;
+        }
+        if (hasInputMaskOptions({
             maskInputOptions,
+            maskInputSelector,
             tagName,
             type,
-        });
-        const forceMask = needMaskingText(target, maskTextClass, maskTextSelector, unmaskTextClass, unmaskTextSelector, isInputMasked);
-        if (type === 'radio' || type === 'checkbox') {
-            isChecked = target.checked;
+        })) {
+            text = maskInputValue({
+                input: el,
+                maskInputOptions,
+                maskInputSelector,
+                unmaskInputSelector,
+                tagName,
+                type,
+                value: text,
+                maskInputFn,
+            });
         }
-        text = maskInputValue({
-            isMasked: forceMask,
-            element: target,
-            value: text,
-            maskInputFn,
-        });
         cbWithDedup(target, callbackWrapper(wrapEventWithUserTriggeredFlag)({ text, isChecked, userTriggered }, userTriggeredOnInput));
         const name = target.name;
         if (type === 'radio' && name && isChecked) {
@@ -2474,8 +2063,12 @@ function initInputObserver({ inputCb, doc, mirror, blockClass, blockSelector, un
                 .forEach((el) => {
                 if (el !== target) {
                     const text = maskInputValue({
-                        isMasked: forceMask,
-                        element: el,
+                        input: el,
+                        maskInputOptions,
+                        maskInputSelector,
+                        unmaskInputSelector,
+                        tagName,
+                        type,
                         value: getInputValue(el, tagName, type),
                         maskInputFn,
                     });
@@ -2495,35 +2088,26 @@ function initInputObserver({ inputCb, doc, mirror, blockClass, blockSelector, un
             lastInputValue.isChecked !== v.isChecked) {
             lastInputValueMap.set(target, v);
             const id = mirror.getId(target);
-            callbackWrapper(inputCb)(Object.assign(Object.assign({}, v), { id }));
+            inputCb(Object.assign(Object.assign({}, v), { id }));
         }
     }
     const events = sampling.input === 'last' ? ['change'] : ['input', 'change'];
     const handlers = events.map((eventName) => on(eventName, callbackWrapper(eventHandler), doc));
-    const currentWindow = doc.defaultView;
-    if (!currentWindow) {
-        return () => {
-            handlers.forEach((h) => h());
-        };
-    }
-    const propertyDescriptor = currentWindow.Object.getOwnPropertyDescriptor(currentWindow.HTMLInputElement.prototype, 'value');
+    const propertyDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
     const hookProperties = [
-        [currentWindow.HTMLInputElement.prototype, 'value'],
-        [currentWindow.HTMLInputElement.prototype, 'checked'],
-        [currentWindow.HTMLSelectElement.prototype, 'value'],
-        [currentWindow.HTMLTextAreaElement.prototype, 'value'],
-        [currentWindow.HTMLSelectElement.prototype, 'selectedIndex'],
-        [currentWindow.HTMLOptionElement.prototype, 'selected'],
+        [HTMLInputElement.prototype, 'value'],
+        [HTMLInputElement.prototype, 'checked'],
+        [HTMLSelectElement.prototype, 'value'],
+        [HTMLTextAreaElement.prototype, 'value'],
+        [HTMLSelectElement.prototype, 'selectedIndex'],
+        [HTMLOptionElement.prototype, 'selected'],
     ];
     if (propertyDescriptor && propertyDescriptor.set) {
         handlers.push(...hookProperties.map((p) => hookSetter(p[0], p[1], {
             set() {
-                callbackWrapper(eventHandler)({
-                    target: this,
-                    isTrusted: false,
-                });
+                callbackWrapper(eventHandler)({ target: this });
             },
-        }, false, currentWindow)));
+        })));
     }
     return callbackWrapper(() => {
         handlers.forEach((h) => h());
@@ -2544,7 +2128,7 @@ function getNestedCSSRulePositions(rule) {
             const index = rules.indexOf(childRule);
             pos.unshift(index);
         }
-        else if (childRule.parentStyleSheet) {
+        else {
             const rules = Array.from(childRule.parentStyleSheet.cssRules);
             const index = rules.indexOf(childRule);
             pos.unshift(index);
@@ -2553,33 +2137,18 @@ function getNestedCSSRulePositions(rule) {
     }
     return recurse(rule, positions);
 }
-function getIdAndStyleId(sheet, mirror, styleMirror) {
-    let id, styleId;
-    if (!sheet)
-        return {};
-    if (sheet.ownerNode)
-        id = mirror.getId(sheet.ownerNode);
-    else
-        styleId = styleMirror.getId(sheet);
-    return {
-        styleId,
-        id,
-    };
-}
-function initStyleSheetObserver({ styleSheetRuleCb, mirror, stylesheetManager }, { win }) {
+function initStyleSheetObserver({ styleSheetRuleCb, mirror }, { win }) {
     if (!win.CSSStyleSheet || !win.CSSStyleSheet.prototype) {
-        return () => {
-        };
+        return () => { };
     }
     const insertRule = win.CSSStyleSheet.prototype.insertRule;
     win.CSSStyleSheet.prototype.insertRule = new Proxy(insertRule, {
         apply: callbackWrapper((target, thisArg, argumentsList) => {
             const [rule, index] = argumentsList;
-            const { id, styleId } = getIdAndStyleId(thisArg, mirror, stylesheetManager.styleMirror);
-            if ((id && id !== -1) || (styleId && styleId !== -1)) {
+            const id = mirror.getId(thisArg.ownerNode);
+            if (id !== -1) {
                 styleSheetRuleCb({
                     id,
-                    styleId,
                     adds: [{ rule, index }],
                 });
             }
@@ -2590,53 +2159,16 @@ function initStyleSheetObserver({ styleSheetRuleCb, mirror, stylesheetManager },
     win.CSSStyleSheet.prototype.deleteRule = new Proxy(deleteRule, {
         apply: callbackWrapper((target, thisArg, argumentsList) => {
             const [index] = argumentsList;
-            const { id, styleId } = getIdAndStyleId(thisArg, mirror, stylesheetManager.styleMirror);
-            if ((id && id !== -1) || (styleId && styleId !== -1)) {
+            const id = mirror.getId(thisArg.ownerNode);
+            if (id !== -1) {
                 styleSheetRuleCb({
                     id,
-                    styleId,
                     removes: [{ index }],
                 });
             }
             return target.apply(thisArg, argumentsList);
         }),
     });
-    let replace;
-    if (win.CSSStyleSheet.prototype.replace) {
-        replace = win.CSSStyleSheet.prototype.replace;
-        win.CSSStyleSheet.prototype.replace = new Proxy(replace, {
-            apply: callbackWrapper((target, thisArg, argumentsList) => {
-                const [text] = argumentsList;
-                const { id, styleId } = getIdAndStyleId(thisArg, mirror, stylesheetManager.styleMirror);
-                if ((id && id !== -1) || (styleId && styleId !== -1)) {
-                    styleSheetRuleCb({
-                        id,
-                        styleId,
-                        replace: text,
-                    });
-                }
-                return target.apply(thisArg, argumentsList);
-            }),
-        });
-    }
-    let replaceSync;
-    if (win.CSSStyleSheet.prototype.replaceSync) {
-        replaceSync = win.CSSStyleSheet.prototype.replaceSync;
-        win.CSSStyleSheet.prototype.replaceSync = new Proxy(replaceSync, {
-            apply: callbackWrapper((target, thisArg, argumentsList) => {
-                const [text] = argumentsList;
-                const { id, styleId } = getIdAndStyleId(thisArg, mirror, stylesheetManager.styleMirror);
-                if ((id && id !== -1) || (styleId && styleId !== -1)) {
-                    styleSheetRuleCb({
-                        id,
-                        styleId,
-                        replaceSync: text,
-                    });
-                }
-                return target.apply(thisArg, argumentsList);
-            }),
-        });
-    }
     const supportedNestedCSSRuleTypes = {};
     if (canMonkeyPatchNestedCSSRule('CSSGroupingRule')) {
         supportedNestedCSSRuleTypes.CSSGroupingRule = win.CSSGroupingRule;
@@ -2661,11 +2193,10 @@ function initStyleSheetObserver({ styleSheetRuleCb, mirror, stylesheetManager },
         type.prototype.insertRule = new Proxy(unmodifiedFunctions[typeKey].insertRule, {
             apply: callbackWrapper((target, thisArg, argumentsList) => {
                 const [rule, index] = argumentsList;
-                const { id, styleId } = getIdAndStyleId(thisArg.parentStyleSheet, mirror, stylesheetManager.styleMirror);
-                if ((id && id !== -1) || (styleId && styleId !== -1)) {
+                const id = mirror.getId(thisArg.parentStyleSheet.ownerNode);
+                if (id !== -1) {
                     styleSheetRuleCb({
                         id,
-                        styleId,
                         adds: [
                             {
                                 rule,
@@ -2683,11 +2214,10 @@ function initStyleSheetObserver({ styleSheetRuleCb, mirror, stylesheetManager },
         type.prototype.deleteRule = new Proxy(unmodifiedFunctions[typeKey].deleteRule, {
             apply: callbackWrapper((target, thisArg, argumentsList) => {
                 const [index] = argumentsList;
-                const { id, styleId } = getIdAndStyleId(thisArg.parentStyleSheet, mirror, stylesheetManager.styleMirror);
-                if ((id && id !== -1) || (styleId && styleId !== -1)) {
+                const id = mirror.getId(thisArg.parentStyleSheet.ownerNode);
+                if (id !== -1) {
                     styleSheetRuleCb({
                         id,
-                        styleId,
                         removes: [
                             { index: [...getNestedCSSRulePositions(thisArg), index] },
                         ],
@@ -2700,74 +2230,22 @@ function initStyleSheetObserver({ styleSheetRuleCb, mirror, stylesheetManager },
     return callbackWrapper(() => {
         win.CSSStyleSheet.prototype.insertRule = insertRule;
         win.CSSStyleSheet.prototype.deleteRule = deleteRule;
-        replace && (win.CSSStyleSheet.prototype.replace = replace);
-        replaceSync && (win.CSSStyleSheet.prototype.replaceSync = replaceSync);
         Object.entries(supportedNestedCSSRuleTypes).forEach(([typeKey, type]) => {
             type.prototype.insertRule = unmodifiedFunctions[typeKey].insertRule;
             type.prototype.deleteRule = unmodifiedFunctions[typeKey].deleteRule;
         });
     });
 }
-function initAdoptedStyleSheetObserver({ mirror, stylesheetManager, }, host) {
-    var _a, _b, _c;
-    let hostId = null;
-    if (host.nodeName === '#document')
-        hostId = mirror.getId(host);
-    else
-        hostId = mirror.getId(host.host);
-    const patchTarget = host.nodeName === '#document'
-        ? (_a = host.defaultView) === null || _a === void 0 ? void 0 : _a.Document
-        : (_c = (_b = host.ownerDocument) === null || _b === void 0 ? void 0 : _b.defaultView) === null || _c === void 0 ? void 0 : _c.ShadowRoot;
-    const originalPropertyDescriptor = Object.getOwnPropertyDescriptor(patchTarget === null || patchTarget === void 0 ? void 0 : patchTarget.prototype, 'adoptedStyleSheets');
-    if (hostId === null ||
-        hostId === -1 ||
-        !patchTarget ||
-        !originalPropertyDescriptor)
-        return () => {
-        };
-    Object.defineProperty(host, 'adoptedStyleSheets', {
-        configurable: originalPropertyDescriptor.configurable,
-        enumerable: originalPropertyDescriptor.enumerable,
-        get() {
-            var _a;
-            return (_a = originalPropertyDescriptor.get) === null || _a === void 0 ? void 0 : _a.call(this);
-        },
-        set(sheets) {
-            var _a;
-            const result = (_a = originalPropertyDescriptor.set) === null || _a === void 0 ? void 0 : _a.call(this, sheets);
-            if (hostId !== null && hostId !== -1) {
-                try {
-                    stylesheetManager.adoptStyleSheets(sheets, hostId);
-                }
-                catch (e) {
-                }
-            }
-            return result;
-        },
-    });
-    return callbackWrapper(() => {
-        Object.defineProperty(host, 'adoptedStyleSheets', {
-            configurable: originalPropertyDescriptor.configurable,
-            enumerable: originalPropertyDescriptor.enumerable,
-            get: originalPropertyDescriptor.get,
-            set: originalPropertyDescriptor.set,
-        });
-    });
-}
-function initStyleDeclarationObserver({ styleDeclarationCb, mirror, ignoreCSSAttributes, stylesheetManager, }, { win }) {
+function initStyleDeclarationObserver({ styleDeclarationCb, mirror }, { win }) {
     const setProperty = win.CSSStyleDeclaration.prototype.setProperty;
     win.CSSStyleDeclaration.prototype.setProperty = new Proxy(setProperty, {
         apply: callbackWrapper((target, thisArg, argumentsList) => {
-            var _a;
+            var _a, _b;
             const [property, value, priority] = argumentsList;
-            if (ignoreCSSAttributes.has(property)) {
-                return setProperty.apply(thisArg, [property, value, priority]);
-            }
-            const { id, styleId } = getIdAndStyleId((_a = thisArg.parentRule) === null || _a === void 0 ? void 0 : _a.parentStyleSheet, mirror, stylesheetManager.styleMirror);
-            if ((id && id !== -1) || (styleId && styleId !== -1)) {
+            const id = mirror.getId((_b = (_a = thisArg.parentRule) === null || _a === void 0 ? void 0 : _a.parentStyleSheet) === null || _b === void 0 ? void 0 : _b.ownerNode);
+            if (id !== -1) {
                 styleDeclarationCb({
                     id,
-                    styleId,
                     set: {
                         property,
                         value,
@@ -2782,16 +2260,12 @@ function initStyleDeclarationObserver({ styleDeclarationCb, mirror, ignoreCSSAtt
     const removeProperty = win.CSSStyleDeclaration.prototype.removeProperty;
     win.CSSStyleDeclaration.prototype.removeProperty = new Proxy(removeProperty, {
         apply: callbackWrapper((target, thisArg, argumentsList) => {
-            var _a;
+            var _a, _b;
             const [property] = argumentsList;
-            if (ignoreCSSAttributes.has(property)) {
-                return removeProperty.apply(thisArg, [property]);
-            }
-            const { id, styleId } = getIdAndStyleId((_a = thisArg.parentRule) === null || _a === void 0 ? void 0 : _a.parentStyleSheet, mirror, stylesheetManager.styleMirror);
-            if ((id && id !== -1) || (styleId && styleId !== -1)) {
+            const id = mirror.getId((_b = (_a = thisArg.parentRule) === null || _a === void 0 ? void 0 : _a.parentStyleSheet) === null || _b === void 0 ? void 0 : _b.ownerNode);
+            if (id !== -1) {
                 styleDeclarationCb({
                     id,
-                    styleId,
                     remove: {
                         property,
                     },
@@ -2806,29 +2280,27 @@ function initStyleDeclarationObserver({ styleDeclarationCb, mirror, ignoreCSSAtt
         win.CSSStyleDeclaration.prototype.removeProperty = removeProperty;
     });
 }
-function initMediaInteractionObserver({ mediaInteractionCb, blockClass, blockSelector, unblockSelector, mirror, sampling, doc, }) {
-    const handler = callbackWrapper((type) => throttle$1(callbackWrapper((event) => {
+function initMediaInteractionObserver({ mediaInteractionCb, blockClass, blockSelector, unblockSelector, mirror, sampling, }) {
+    const handler = (type) => throttle$1(callbackWrapper((event) => {
         const target = getEventTarget(event);
         if (!target ||
-            isBlocked(target, blockClass, blockSelector, unblockSelector, true)) {
+            isBlocked(target, blockClass, blockSelector, unblockSelector)) {
             return;
         }
-        const { currentTime, volume, muted, playbackRate } = target;
+        const { currentTime, volume, muted } = target;
         mediaInteractionCb({
             type,
             id: mirror.getId(target),
             currentTime,
             volume,
             muted,
-            playbackRate,
         });
-    }), sampling.media || 500));
+    }), sampling.media || 500);
     const handlers = [
-        on('play', handler(0), doc),
-        on('pause', handler(1), doc),
-        on('seeked', handler(2), doc),
-        on('volumechange', handler(3), doc),
-        on('ratechange', handler(4), doc),
+        on('play', handler(0)),
+        on('pause', handler(1)),
+        on('seeked', handler(2)),
+        on('volumechange', handler(3)),
     ];
     return callbackWrapper(() => {
         handlers.forEach((h) => h());
@@ -2837,8 +2309,7 @@ function initMediaInteractionObserver({ mediaInteractionCb, blockClass, blockSel
 function initFontObserver({ fontCb, doc }) {
     const win = doc.defaultView;
     if (!win) {
-        return () => {
-        };
+        return () => { };
     }
     const handlers = [];
     const fontMap = new WeakMap();
@@ -2851,19 +2322,20 @@ function initFontObserver({ fontCb, doc }) {
             descriptors,
             fontSource: typeof source === 'string'
                 ? source
-                : JSON.stringify(Array.from(new Uint8Array(source))),
+                :
+                    JSON.stringify(Array.from(new Uint8Array(source))),
         });
         return fontFace;
     };
     const restoreHandler = patch(doc.fonts, 'add', function (original) {
         return function (fontFace) {
-            setTimeout(callbackWrapper(() => {
+            setTimeout(() => {
                 const p = fontMap.get(fontFace);
                 if (p) {
                     fontCb(p);
                     fontMap.delete(fontFace);
                 }
-            }), 0);
+            }, 0);
             return original.apply(this, [fontFace]);
         };
     });
@@ -2875,59 +2347,8 @@ function initFontObserver({ fontCb, doc }) {
         handlers.forEach((h) => h());
     });
 }
-function initSelectionObserver(param) {
-    const { doc, mirror, blockClass, blockSelector, unblockSelector, selectionCb, } = param;
-    let collapsed = true;
-    const updateSelection = callbackWrapper(() => {
-        const selection = doc.getSelection();
-        if (!selection || (collapsed && (selection === null || selection === void 0 ? void 0 : selection.isCollapsed)))
-            return;
-        collapsed = selection.isCollapsed || false;
-        const ranges = [];
-        const count = selection.rangeCount || 0;
-        for (let i = 0; i < count; i++) {
-            const range = selection.getRangeAt(i);
-            const { startContainer, startOffset, endContainer, endOffset } = range;
-            const blocked = isBlocked(startContainer, blockClass, blockSelector, unblockSelector, true) ||
-                isBlocked(endContainer, blockClass, blockSelector, unblockSelector, true);
-            if (blocked)
-                continue;
-            ranges.push({
-                start: mirror.getId(startContainer),
-                startOffset,
-                end: mirror.getId(endContainer),
-                endOffset,
-            });
-        }
-        selectionCb({ ranges });
-    });
-    updateSelection();
-    return on('selectionchange', updateSelection);
-}
-function initCustomElementObserver({ doc, customElementCb, }) {
-    const win = doc.defaultView;
-    if (!win || !win.customElements) {
-        return () => {
-        };
-    }
-    const restoreHandler = patch(win.customElements, 'define', function (original) {
-        return function (name, constructor, options) {
-            try {
-                customElementCb({
-                    define: {
-                        name,
-                    },
-                });
-            }
-            catch (e) {
-            }
-            return original.apply(this, [name, constructor, options]);
-        };
-    });
-    return restoreHandler;
-}
 function mergeHooks(o, hooks) {
-    const { mutationCb, mousemoveCb, mouseInteractionCb, scrollCb, viewportResizeCb, inputCb, mediaInteractionCb, styleSheetRuleCb, styleDeclarationCb, canvasMutationCb, fontCb, selectionCb, customElementCb, } = o;
+    const { mutationCb, mousemoveCb, mouseInteractionCb, scrollCb, viewportResizeCb, inputCb, mediaInteractionCb, styleSheetRuleCb, styleDeclarationCb, canvasMutationCb, fontCb, } = o;
     o.mutationCb = (...p) => {
         if (hooks.mutation) {
             hooks.mutation(...p);
@@ -2994,46 +2415,25 @@ function mergeHooks(o, hooks) {
         }
         fontCb(...p);
     };
-    o.selectionCb = (...p) => {
-        if (hooks.selection) {
-            hooks.selection(...p);
-        }
-        selectionCb(...p);
-    };
-    o.customElementCb = (...c) => {
-        if (hooks.customElement) {
-            hooks.customElement(...c);
-        }
-        customElementCb(...c);
-    };
 }
 function initObservers(o, hooks = {}) {
     const currentWindow = o.doc.defaultView;
     if (!currentWindow) {
-        return () => {
-        };
+        return () => { };
     }
     mergeHooks(o, hooks);
     const mutationObserver = initMutationObserver(o, o.doc);
     const mousemoveHandler = initMoveObserver(o);
     const mouseInteractionHandler = initMouseInteractionObserver(o);
     const scrollHandler = initScrollObserver(o);
-    const viewportResizeHandler = initViewportResizeObserver(o, {
-        win: currentWindow,
-    });
+    const viewportResizeHandler = initViewportResizeObserver(o);
     const inputHandler = initInputObserver(o);
     const mediaInteractionHandler = initMediaInteractionObserver(o);
     const styleSheetObserver = initStyleSheetObserver(o, { win: currentWindow });
-    const adoptedStyleSheetObserver = initAdoptedStyleSheetObserver(o, o.doc);
     const styleDeclarationObserver = initStyleDeclarationObserver(o, {
         win: currentWindow,
     });
-    const fontObserver = o.collectFonts
-        ? initFontObserver(o)
-        : () => {
-        };
-    const selectionObserver = initSelectionObserver(o);
-    const customElementObserver = initCustomElementObserver(o);
+    const fontObserver = o.collectFonts ? initFontObserver(o) : () => { };
     const pluginHandlers = [];
     for (const plugin of o.plugins) {
         pluginHandlers.push(plugin.observer(plugin.callback, currentWindow, plugin.options));
@@ -3047,12 +2447,13 @@ function initObservers(o, hooks = {}) {
         viewportResizeHandler();
         inputHandler();
         mediaInteractionHandler();
-        styleSheetObserver();
-        adoptedStyleSheetObserver();
-        styleDeclarationObserver();
+        try {
+            styleSheetObserver();
+            styleDeclarationObserver();
+        }
+        catch (e) {
+        }
         fontObserver();
-        selectionObserver();
-        customElementObserver();
         pluginHandlers.forEach((h) => h());
     });
 }
@@ -3066,88 +2467,13 @@ function canMonkeyPatchNestedCSSRule(prop) {
         'deleteRule' in window[prop].prototype);
 }
 
-class CrossOriginIframeMirror {
-    constructor(generateIdFn) {
-        this.generateIdFn = generateIdFn;
-        this.iframeIdToRemoteIdMap = new WeakMap();
-        this.iframeRemoteIdToIdMap = new WeakMap();
-    }
-    getId(iframe, remoteId, idToRemoteMap, remoteToIdMap) {
-        const idToRemoteIdMap = idToRemoteMap || this.getIdToRemoteIdMap(iframe);
-        const remoteIdToIdMap = remoteToIdMap || this.getRemoteIdToIdMap(iframe);
-        let id = idToRemoteIdMap.get(remoteId);
-        if (!id) {
-            id = this.generateIdFn();
-            idToRemoteIdMap.set(remoteId, id);
-            remoteIdToIdMap.set(id, remoteId);
-        }
-        return id;
-    }
-    getIds(iframe, remoteId) {
-        const idToRemoteIdMap = this.getIdToRemoteIdMap(iframe);
-        const remoteIdToIdMap = this.getRemoteIdToIdMap(iframe);
-        return remoteId.map((id) => this.getId(iframe, id, idToRemoteIdMap, remoteIdToIdMap));
-    }
-    getRemoteId(iframe, id, map) {
-        const remoteIdToIdMap = map || this.getRemoteIdToIdMap(iframe);
-        if (typeof id !== 'number')
-            return id;
-        const remoteId = remoteIdToIdMap.get(id);
-        if (!remoteId)
-            return -1;
-        return remoteId;
-    }
-    getRemoteIds(iframe, ids) {
-        const remoteIdToIdMap = this.getRemoteIdToIdMap(iframe);
-        return ids.map((id) => this.getRemoteId(iframe, id, remoteIdToIdMap));
-    }
-    reset(iframe) {
-        if (!iframe) {
-            this.iframeIdToRemoteIdMap = new WeakMap();
-            this.iframeRemoteIdToIdMap = new WeakMap();
-            return;
-        }
-        this.iframeIdToRemoteIdMap.delete(iframe);
-        this.iframeRemoteIdToIdMap.delete(iframe);
-    }
-    getIdToRemoteIdMap(iframe) {
-        let idToRemoteIdMap = this.iframeIdToRemoteIdMap.get(iframe);
-        if (!idToRemoteIdMap) {
-            idToRemoteIdMap = new Map();
-            this.iframeIdToRemoteIdMap.set(iframe, idToRemoteIdMap);
-        }
-        return idToRemoteIdMap;
-    }
-    getRemoteIdToIdMap(iframe) {
-        let remoteIdToIdMap = this.iframeRemoteIdToIdMap.get(iframe);
-        if (!remoteIdToIdMap) {
-            remoteIdToIdMap = new Map();
-            this.iframeRemoteIdToIdMap.set(iframe, remoteIdToIdMap);
-        }
-        return remoteIdToIdMap;
-    }
-}
-
 class IframeManager {
     constructor(options) {
         this.iframes = new WeakMap();
-        this.crossOriginIframeMap = new WeakMap();
-        this.crossOriginIframeMirror = new CrossOriginIframeMirror(genId);
-        this.crossOriginIframeRootIdMap = new WeakMap();
         this.mutationCb = options.mutationCb;
-        this.wrappedEmit = options.wrappedEmit;
-        this.stylesheetManager = options.stylesheetManager;
-        this.recordCrossOriginIframes = options.recordCrossOriginIframes;
-        this.crossOriginIframeStyleMirror = new CrossOriginIframeMirror(this.stylesheetManager.styleMirror.generateId.bind(this.stylesheetManager.styleMirror));
-        this.mirror = options.mirror;
-        if (this.recordCrossOriginIframes) {
-            window.addEventListener('message', this.handleMessage.bind(this));
-        }
     }
     addIframe(iframeEl) {
         this.iframes.set(iframeEl, true);
-        if (iframeEl.contentWindow)
-            this.crossOriginIframeMap.set(iframeEl.contentWindow, iframeEl);
     }
     addLoadListener(cb) {
         this.loadListener = cb;
@@ -3157,7 +2483,7 @@ class IframeManager {
         this.mutationCb({
             adds: [
                 {
-                    parentId: this.mirror.getId(iframeEl),
+                    parentId: iframeEl.__sn.id,
                     nextId: null,
                     node: childSn,
                 },
@@ -3168,239 +2494,49 @@ class IframeManager {
             isAttachIframe: true,
         });
         (_a = this.loadListener) === null || _a === void 0 ? void 0 : _a.call(this, iframeEl);
-        if (iframeEl.contentDocument &&
-            iframeEl.contentDocument.adoptedStyleSheets &&
-            iframeEl.contentDocument.adoptedStyleSheets.length > 0)
-            this.stylesheetManager.adoptStyleSheets(iframeEl.contentDocument.adoptedStyleSheets, this.mirror.getId(iframeEl.contentDocument));
-    }
-    handleMessage(message) {
-        const crossOriginMessageEvent = message;
-        if (crossOriginMessageEvent.data.type !== 'rrweb' ||
-            crossOriginMessageEvent.origin !== crossOriginMessageEvent.data.origin)
-            return;
-        const iframeSourceWindow = message.source;
-        if (!iframeSourceWindow)
-            return;
-        const iframeEl = this.crossOriginIframeMap.get(message.source);
-        if (!iframeEl)
-            return;
-        const transformedEvent = this.transformCrossOriginEvent(iframeEl, crossOriginMessageEvent.data.event);
-        if (transformedEvent)
-            this.wrappedEmit(transformedEvent, crossOriginMessageEvent.data.isCheckout);
-    }
-    transformCrossOriginEvent(iframeEl, e) {
-        var _a;
-        switch (e.type) {
-            case EventType.FullSnapshot: {
-                this.crossOriginIframeMirror.reset(iframeEl);
-                this.crossOriginIframeStyleMirror.reset(iframeEl);
-                this.replaceIdOnNode(e.data.node, iframeEl);
-                const rootId = e.data.node.id;
-                this.crossOriginIframeRootIdMap.set(iframeEl, rootId);
-                this.patchRootIdOnNode(e.data.node, rootId);
-                return {
-                    timestamp: e.timestamp,
-                    type: EventType.IncrementalSnapshot,
-                    data: {
-                        source: IncrementalSource.Mutation,
-                        adds: [
-                            {
-                                parentId: this.mirror.getId(iframeEl),
-                                nextId: null,
-                                node: e.data.node,
-                            },
-                        ],
-                        removes: [],
-                        texts: [],
-                        attributes: [],
-                        isAttachIframe: true,
-                    },
-                };
-            }
-            case EventType.Meta:
-            case EventType.Load:
-            case EventType.DomContentLoaded: {
-                return false;
-            }
-            case EventType.Plugin: {
-                return e;
-            }
-            case EventType.Custom: {
-                this.replaceIds(e.data.payload, iframeEl, ['id', 'parentId', 'previousId', 'nextId']);
-                return e;
-            }
-            case EventType.IncrementalSnapshot: {
-                switch (e.data.source) {
-                    case IncrementalSource.Mutation: {
-                        e.data.adds.forEach((n) => {
-                            this.replaceIds(n, iframeEl, [
-                                'parentId',
-                                'nextId',
-                                'previousId',
-                            ]);
-                            this.replaceIdOnNode(n.node, iframeEl);
-                            const rootId = this.crossOriginIframeRootIdMap.get(iframeEl);
-                            rootId && this.patchRootIdOnNode(n.node, rootId);
-                        });
-                        e.data.removes.forEach((n) => {
-                            this.replaceIds(n, iframeEl, ['parentId', 'id']);
-                        });
-                        e.data.attributes.forEach((n) => {
-                            this.replaceIds(n, iframeEl, ['id']);
-                        });
-                        e.data.texts.forEach((n) => {
-                            this.replaceIds(n, iframeEl, ['id']);
-                        });
-                        return e;
-                    }
-                    case IncrementalSource.Drag:
-                    case IncrementalSource.TouchMove:
-                    case IncrementalSource.MouseMove: {
-                        e.data.positions.forEach((p) => {
-                            this.replaceIds(p, iframeEl, ['id']);
-                        });
-                        return e;
-                    }
-                    case IncrementalSource.ViewportResize: {
-                        return false;
-                    }
-                    case IncrementalSource.MediaInteraction:
-                    case IncrementalSource.MouseInteraction:
-                    case IncrementalSource.Scroll:
-                    case IncrementalSource.CanvasMutation:
-                    case IncrementalSource.Input: {
-                        this.replaceIds(e.data, iframeEl, ['id']);
-                        return e;
-                    }
-                    case IncrementalSource.StyleSheetRule:
-                    case IncrementalSource.StyleDeclaration: {
-                        this.replaceIds(e.data, iframeEl, ['id']);
-                        this.replaceStyleIds(e.data, iframeEl, ['styleId']);
-                        return e;
-                    }
-                    case IncrementalSource.Font: {
-                        return e;
-                    }
-                    case IncrementalSource.Selection: {
-                        e.data.ranges.forEach((range) => {
-                            this.replaceIds(range, iframeEl, ['start', 'end']);
-                        });
-                        return e;
-                    }
-                    case IncrementalSource.AdoptedStyleSheet: {
-                        this.replaceIds(e.data, iframeEl, ['id']);
-                        this.replaceStyleIds(e.data, iframeEl, ['styleIds']);
-                        (_a = e.data.styles) === null || _a === void 0 ? void 0 : _a.forEach((style) => {
-                            this.replaceStyleIds(style, iframeEl, ['styleId']);
-                        });
-                        return e;
-                    }
-                }
-            }
-        }
-        return false;
-    }
-    replace(iframeMirror, obj, iframeEl, keys) {
-        for (const key of keys) {
-            if (!Array.isArray(obj[key]) && typeof obj[key] !== 'number')
-                continue;
-            if (Array.isArray(obj[key])) {
-                obj[key] = iframeMirror.getIds(iframeEl, obj[key]);
-            }
-            else {
-                obj[key] = iframeMirror.getId(iframeEl, obj[key]);
-            }
-        }
-        return obj;
-    }
-    replaceIds(obj, iframeEl, keys) {
-        return this.replace(this.crossOriginIframeMirror, obj, iframeEl, keys);
-    }
-    replaceStyleIds(obj, iframeEl, keys) {
-        return this.replace(this.crossOriginIframeStyleMirror, obj, iframeEl, keys);
-    }
-    replaceIdOnNode(node, iframeEl) {
-        this.replaceIds(node, iframeEl, ['id', 'rootId']);
-        if ('childNodes' in node) {
-            node.childNodes.forEach((child) => {
-                this.replaceIdOnNode(child, iframeEl);
-            });
-        }
-    }
-    patchRootIdOnNode(node, rootId) {
-        if (node.type !== NodeType$1.Document && !node.rootId)
-            node.rootId = rootId;
-        if ('childNodes' in node) {
-            node.childNodes.forEach((child) => {
-                this.patchRootIdOnNode(child, rootId);
-            });
-        }
     }
 }
 
 class ShadowDomManager {
     constructor(options) {
-        this.shadowDoms = new WeakSet();
-        this.restoreHandlers = [];
+        this.restorePatches = [];
         this.mutationCb = options.mutationCb;
         this.scrollCb = options.scrollCb;
         this.bypassOptions = options.bypassOptions;
         this.mirror = options.mirror;
-        this.init();
-    }
-    init() {
-        this.reset();
-        this.patchAttachShadow(Element, document);
-    }
-    addShadowRoot(shadowRoot, doc) {
-        if (!isNativeShadowDom(shadowRoot))
-            return;
-        if (this.shadowDoms.has(shadowRoot))
-            return;
-        this.shadowDoms.add(shadowRoot);
-        const observer = initMutationObserver(Object.assign(Object.assign({}, this.bypassOptions), { doc, mutationCb: this.mutationCb, mirror: this.mirror, shadowDomManager: this }), shadowRoot);
-        this.restoreHandlers.push(() => observer.disconnect());
-        this.restoreHandlers.push(initScrollObserver(Object.assign(Object.assign({}, this.bypassOptions), { scrollCb: this.scrollCb, doc: shadowRoot, mirror: this.mirror })));
-        setTimeout(() => {
-            if (shadowRoot.adoptedStyleSheets &&
-                shadowRoot.adoptedStyleSheets.length > 0)
-                this.bypassOptions.stylesheetManager.adoptStyleSheets(shadowRoot.adoptedStyleSheets, this.mirror.getId(shadowRoot.host));
-            this.restoreHandlers.push(initAdoptedStyleSheetObserver({
-                mirror: this.mirror,
-                stylesheetManager: this.bypassOptions.stylesheetManager,
-            }, shadowRoot));
-        }, 0);
-    }
-    observeAttachShadow(iframeElement) {
-        if (!iframeElement.contentWindow || !iframeElement.contentDocument)
-            return;
-        this.patchAttachShadow(iframeElement.contentWindow.Element, iframeElement.contentDocument);
-    }
-    patchAttachShadow(element, doc) {
         const manager = this;
-        this.restoreHandlers.push(patch(element.prototype, 'attachShadow', function (original) {
-            return function (option) {
-                const shadowRoot = original.call(this, option);
-                if (this.shadowRoot && inDom(this))
-                    manager.addShadowRoot(this.shadowRoot, doc);
+        this.restorePatches.push(patch(HTMLElement.prototype, 'attachShadow', function (original) {
+            return function () {
+                const shadowRoot = original.apply(this, arguments);
+                if (this.shadowRoot)
+                    manager.addShadowRoot(this.shadowRoot, this.ownerDocument);
                 return shadowRoot;
             };
         }));
     }
+    addShadowRoot(shadowRoot, doc) {
+        initMutationObserver(Object.assign(Object.assign({}, this.bypassOptions), { doc, mutationCb: this.mutationCb, mirror: this.mirror, shadowDomManager: this }), shadowRoot);
+        initScrollObserver(Object.assign(Object.assign({}, this.bypassOptions), { scrollCb: this.scrollCb, doc: shadowRoot, mirror: this.mirror }));
+    }
+    observeAttachShadow(iframeElement) {
+        if (iframeElement.contentWindow) {
+            const manager = this;
+            this.restorePatches.push(patch(iframeElement.contentWindow.HTMLElement.prototype, 'attachShadow', function (original) {
+                return function () {
+                    const shadowRoot = original.apply(this, arguments);
+                    if (this.shadowRoot)
+                        manager.addShadowRoot(this.shadowRoot, iframeElement.contentDocument);
+                    return shadowRoot;
+                };
+            }));
+        }
+    }
     reset() {
-        this.restoreHandlers.forEach((handler) => {
-            try {
-                handler();
-            }
-            catch (e) {
-            }
-        });
-        this.restoreHandlers = [];
-        this.shadowDoms = new WeakSet();
+        this.restorePatches.forEach((restorePatch) => restorePatch());
     }
 }
 
-/*! *****************************************************************************
+/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -3424,22 +2560,88 @@ function __rest(s, e) {
             if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                 t[p[i]] = s[p[i]];
         }
-    return t;
+    return t;
+}
+
+function initCanvas2DMutationObserver(cb, win, blockClass, unblockSelector, blockSelector, mirror) {
+    const handlers = [];
+    const props2D = Object.getOwnPropertyNames(win.CanvasRenderingContext2D.prototype);
+    for (const prop of props2D) {
+        try {
+            if (typeof win.CanvasRenderingContext2D.prototype[prop] !== 'function') {
+                continue;
+            }
+            const restoreHandler = patch(win.CanvasRenderingContext2D.prototype, prop, function (original) {
+                return function (...args) {
+                    if (!isBlocked(this.canvas, blockClass, blockSelector, unblockSelector)) {
+                        setTimeout(() => {
+                            const recordArgs = [...args];
+                            if (prop === 'drawImage') {
+                                if (recordArgs[0] &&
+                                    recordArgs[0] instanceof HTMLCanvasElement) {
+                                    const canvas = recordArgs[0];
+                                    const ctx = canvas.getContext('2d');
+                                    let imgd = ctx === null || ctx === void 0 ? void 0 : ctx.getImageData(0, 0, canvas.width, canvas.height);
+                                    let pix = imgd === null || imgd === void 0 ? void 0 : imgd.data;
+                                    recordArgs[0] = JSON.stringify(pix);
+                                }
+                            }
+                            cb(this.canvas, {
+                                type: CanvasContext['2D'],
+                                property: prop,
+                                args: recordArgs,
+                            });
+                        }, 0);
+                    }
+                    return original.apply(this, args);
+                };
+            });
+            handlers.push(restoreHandler);
+        }
+        catch (_a) {
+            const hookHandler = hookSetter(win.CanvasRenderingContext2D.prototype, prop, {
+                set(v) {
+                    cb(this.canvas, {
+                        type: CanvasContext['2D'],
+                        property: prop,
+                        args: [v],
+                        setter: true,
+                    });
+                },
+            });
+            handlers.push(hookHandler);
+        }
+    }
+    return () => {
+        handlers.forEach((h) => h());
+    };
 }
 
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
+function initCanvasContextObserver(win, blockClass, blockSelector, unblockSelector) {
+    const handlers = [];
+    try {
+        const restoreHandler = patch(win.HTMLCanvasElement.prototype, 'getContext', function (original) {
+            return function (contextType, ...args) {
+                if (!isBlocked(this, blockClass, blockSelector, unblockSelector)) {
+                    if (!('__context' in this))
+                        this.__context = contextType;
+                }
+                return original.apply(this, [contextType, ...args]);
+            };
+        });
+        handlers.push(restoreHandler);
+    }
+    catch (_a) {
+        console.error('failed to patch HTMLCanvasElement.prototype.getContext');
+    }
+    return () => {
+        handlers.forEach((h) => h());
+    };
 }
 
 /*
- * base64-arraybuffer 1.0.1 <https://github.com/niklasvh/base64-arraybuffer>
- * Copyright (c) 2021 Niklas von Hertzen <https://hertzen.com>
+ * base64-arraybuffer 1.0.2 <https://github.com/niklasvh/base64-arraybuffer>
+ * Copyright (c) 2022 Niklas von Hertzen <https://hertzen.com>
  * Released under MIT License
  */
 var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
@@ -3465,12 +2667,12 @@ var encode = function (arraybuffer) {
     return base64;
 };
 
-const canvasVarMap = new Map();
+const webGLVarMap = new Map();
 function variableListFor(ctx, ctor) {
-    let contextMap = canvasVarMap.get(ctx);
+    let contextMap = webGLVarMap.get(ctx);
     if (!contextMap) {
         contextMap = new Map();
-        canvasVarMap.set(ctx, contextMap);
+        webGLVarMap.set(ctx, contextMap);
     }
     if (!contextMap.has(ctor)) {
         contextMap.set(ctor, []);
@@ -3539,14 +2741,6 @@ function serializeArg(value, win, ctx) {
             src,
         };
     }
-    else if (value instanceof HTMLCanvasElement) {
-        const name = 'HTMLImageElement';
-        const src = value.toDataURL();
-        return {
-            rr_type: name,
-            src,
-        };
-    }
     else if (value instanceof ImageData) {
         const name = value.constructor.name;
         return {
@@ -3585,102 +2779,10 @@ const isInstanceOfWebGLObject = (value, win) => {
     return Boolean(supportedWebGLConstructorNames.find((name) => value instanceof win[name]));
 };
 
-function initCanvas2DMutationObserver(cb, win, blockClass, blockSelector, unblockSelector) {
-    const handlers = [];
-    const props2D = Object.getOwnPropertyNames(win.CanvasRenderingContext2D.prototype);
-    for (const prop of props2D) {
-        try {
-            if (typeof win.CanvasRenderingContext2D.prototype[prop] !== 'function') {
-                continue;
-            }
-            const restoreHandler = patch(win.CanvasRenderingContext2D.prototype, prop, function (original) {
-                return function (...args) {
-                    if (!isBlocked(this.canvas, blockClass, blockSelector, unblockSelector, true)) {
-                        setTimeout(() => {
-                            const recordArgs = serializeArgs([...args], win, this);
-                            cb(this.canvas, {
-                                type: CanvasContext['2D'],
-                                property: prop,
-                                args: recordArgs,
-                            });
-                        }, 0);
-                    }
-                    return original.apply(this, args);
-                };
-            });
-            handlers.push(restoreHandler);
-        }
-        catch (_a) {
-            const hookHandler = hookSetter(win.CanvasRenderingContext2D.prototype, prop, {
-                set(v) {
-                    cb(this.canvas, {
-                        type: CanvasContext['2D'],
-                        property: prop,
-                        args: [v],
-                        setter: true,
-                    });
-                },
-            });
-            handlers.push(hookHandler);
-        }
-    }
-    return () => {
-        handlers.forEach((h) => h());
-    };
-}
-
-function getNormalizedContextName(contextType) {
-    return contextType === 'experimental-webgl' ? 'webgl' : contextType;
-}
-function initCanvasContextObserver(win, blockClass, blockSelector, unblockSelector, setPreserveDrawingBufferToTrue) {
-    const handlers = [];
-    try {
-        const restoreHandler = patch(win.HTMLCanvasElement.prototype, 'getContext', function (original) {
-            return function (contextType, ...args) {
-                if (!isBlocked(this, blockClass, blockSelector, unblockSelector, true)) {
-                    const ctxName = getNormalizedContextName(contextType);
-                    if (!('__context' in this))
-                        this.__context = ctxName;
-                    if (setPreserveDrawingBufferToTrue &&
-                        ['webgl', 'webgl2'].includes(ctxName)) {
-                        if (args[0] && typeof args[0] === 'object') {
-                            const contextAttributes = args[0];
-                            if (!contextAttributes.preserveDrawingBuffer) {
-                                contextAttributes.preserveDrawingBuffer = true;
-                            }
-                        }
-                        else {
-                            args.splice(0, 1, {
-                                preserveDrawingBuffer: true,
-                            });
-                        }
-                    }
-                }
-                return original.apply(this, [contextType, ...args]);
-            };
-        });
-        handlers.push(restoreHandler);
-    }
-    catch (_a) {
-        console.error('failed to patch HTMLCanvasElement.prototype.getContext');
-    }
-    return () => {
-        handlers.forEach((h) => h());
-    };
-}
-
-function patchGLPrototype(prototype, type, cb, blockClass, blockSelector, unblockSelector, mirror, win) {
+function patchGLPrototype(prototype, type, cb, blockClass, unblockSelector, blockSelector, mirror, win) {
     const handlers = [];
     const props = Object.getOwnPropertyNames(prototype);
     for (const prop of props) {
-        if ([
-            'isContextLost',
-            'canvas',
-            'drawingBufferWidth',
-            'drawingBufferHeight',
-        ].includes(prop)) {
-            continue;
-        }
         try {
             if (typeof prototype[prop] !== 'function') {
                 continue;
@@ -3688,10 +2790,10 @@ function patchGLPrototype(prototype, type, cb, blockClass, blockSelector, unbloc
             const restoreHandler = patch(prototype, prop, function (original) {
                 return function (...args) {
                     const result = original.apply(this, args);
-                    saveWebGLVar(result, win, this);
-                    if ('tagName' in this.canvas &&
-                        !isBlocked(this.canvas, blockClass, blockSelector, unblockSelector, true)) {
-                        const recordArgs = serializeArgs([...args], win, this);
+                    saveWebGLVar(result, win, prototype);
+                    if (!isBlocked(this.canvas, blockClass, blockSelector, unblockSelector)) {
+                        const id = mirror.getId(this.canvas);
+                        const recordArgs = serializeArgs([...args], win, prototype);
                         const mutation = {
                             type,
                             property: prop,
@@ -3731,38 +2833,6 @@ function initCanvasWebGLMutationObserver(cb, win, blockClass, blockSelector, unb
     };
 }
 
-function decodeBase64(base64, enableUnicode) {
-    var binaryString = atob(base64);
-    if (enableUnicode) {
-        var binaryView = new Uint8Array(binaryString.length);
-        for (var i = 0, n = binaryString.length; i < n; ++i) {
-            binaryView[i] = binaryString.charCodeAt(i);
-        }
-        return String.fromCharCode.apply(null, new Uint16Array(binaryView.buffer));
-    }
-    return binaryString;
-}
-
-function createURL(base64, sourcemapArg, enableUnicodeArg) {
-    var sourcemap = sourcemapArg === undefined ? null : sourcemapArg;
-    var enableUnicode = enableUnicodeArg === undefined ? false : enableUnicodeArg;
-    var source = decodeBase64(base64, enableUnicode);
-    var start = source.indexOf('\n', 10) + 1;
-    var body = source.substring(start) + (sourcemap ? '\/\/# sourceMappingURL=' + sourcemap : '');
-    var blob = new Blob([body], { type: 'application/javascript' });
-    return URL.createObjectURL(blob);
-}
-
-function createBase64WorkerFactory(base64, sourcemapArg, enableUnicodeArg) {
-    var url;
-    return function WorkerFactory(options) {
-        url = url || createURL(base64, sourcemapArg, enableUnicodeArg);
-        return new Worker(url, options);
-    };
-}
-
-var WorkerFactory = createBase64WorkerFactory('Lyogcm9sbHVwLXBsdWdpbi13ZWItd29ya2VyLWxvYWRlciAqLwooZnVuY3Rpb24gKCkgewogICAgJ3VzZSBzdHJpY3QnOwoKICAgIC8qISAqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKg0KICAgIENvcHlyaWdodCAoYykgTWljcm9zb2Z0IENvcnBvcmF0aW9uLg0KDQogICAgUGVybWlzc2lvbiB0byB1c2UsIGNvcHksIG1vZGlmeSwgYW5kL29yIGRpc3RyaWJ1dGUgdGhpcyBzb2Z0d2FyZSBmb3IgYW55DQogICAgcHVycG9zZSB3aXRoIG9yIHdpdGhvdXQgZmVlIGlzIGhlcmVieSBncmFudGVkLg0KDQogICAgVEhFIFNPRlRXQVJFIElTIFBST1ZJREVEICJBUyBJUyIgQU5EIFRIRSBBVVRIT1IgRElTQ0xBSU1TIEFMTCBXQVJSQU5USUVTIFdJVEgNCiAgICBSRUdBUkQgVE8gVEhJUyBTT0ZUV0FSRSBJTkNMVURJTkcgQUxMIElNUExJRUQgV0FSUkFOVElFUyBPRiBNRVJDSEFOVEFCSUxJVFkNCiAgICBBTkQgRklUTkVTUy4gSU4gTk8gRVZFTlQgU0hBTEwgVEhFIEFVVEhPUiBCRSBMSUFCTEUgRk9SIEFOWSBTUEVDSUFMLCBESVJFQ1QsDQogICAgSU5ESVJFQ1QsIE9SIENPTlNFUVVFTlRJQUwgREFNQUdFUyBPUiBBTlkgREFNQUdFUyBXSEFUU09FVkVSIFJFU1VMVElORyBGUk9NDQogICAgTE9TUyBPRiBVU0UsIERBVEEgT1IgUFJPRklUUywgV0hFVEhFUiBJTiBBTiBBQ1RJT04gT0YgQ09OVFJBQ1QsIE5FR0xJR0VOQ0UgT1INCiAgICBPVEhFUiBUT1JUSU9VUyBBQ1RJT04sIEFSSVNJTkcgT1VUIE9GIE9SIElOIENPTk5FQ1RJT04gV0lUSCBUSEUgVVNFIE9SDQogICAgUEVSRk9STUFOQ0UgT0YgVEhJUyBTT0ZUV0FSRS4NCiAgICAqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKiAqLw0KDQogICAgZnVuY3Rpb24gX19hd2FpdGVyKHRoaXNBcmcsIF9hcmd1bWVudHMsIFAsIGdlbmVyYXRvcikgew0KICAgICAgICBmdW5jdGlvbiBhZG9wdCh2YWx1ZSkgeyByZXR1cm4gdmFsdWUgaW5zdGFuY2VvZiBQID8gdmFsdWUgOiBuZXcgUChmdW5jdGlvbiAocmVzb2x2ZSkgeyByZXNvbHZlKHZhbHVlKTsgfSk7IH0NCiAgICAgICAgcmV0dXJuIG5ldyAoUCB8fCAoUCA9IFByb21pc2UpKShmdW5jdGlvbiAocmVzb2x2ZSwgcmVqZWN0KSB7DQogICAgICAgICAgICBmdW5jdGlvbiBmdWxmaWxsZWQodmFsdWUpIHsgdHJ5IHsgc3RlcChnZW5lcmF0b3IubmV4dCh2YWx1ZSkpOyB9IGNhdGNoIChlKSB7IHJlamVjdChlKTsgfSB9DQogICAgICAgICAgICBmdW5jdGlvbiByZWplY3RlZCh2YWx1ZSkgeyB0cnkgeyBzdGVwKGdlbmVyYXRvclsidGhyb3ciXSh2YWx1ZSkpOyB9IGNhdGNoIChlKSB7IHJlamVjdChlKTsgfSB9DQogICAgICAgICAgICBmdW5jdGlvbiBzdGVwKHJlc3VsdCkgeyByZXN1bHQuZG9uZSA/IHJlc29sdmUocmVzdWx0LnZhbHVlKSA6IGFkb3B0KHJlc3VsdC52YWx1ZSkudGhlbihmdWxmaWxsZWQsIHJlamVjdGVkKTsgfQ0KICAgICAgICAgICAgc3RlcCgoZ2VuZXJhdG9yID0gZ2VuZXJhdG9yLmFwcGx5KHRoaXNBcmcsIF9hcmd1bWVudHMgfHwgW10pKS5uZXh0KCkpOw0KICAgICAgICB9KTsNCiAgICB9CgogICAgLyoKICAgICAqIGJhc2U2NC1hcnJheWJ1ZmZlciAxLjAuMSA8aHR0cHM6Ly9naXRodWIuY29tL25pa2xhc3ZoL2Jhc2U2NC1hcnJheWJ1ZmZlcj4KICAgICAqIENvcHlyaWdodCAoYykgMjAyMSBOaWtsYXMgdm9uIEhlcnR6ZW4gPGh0dHBzOi8vaGVydHplbi5jb20+CiAgICAgKiBSZWxlYXNlZCB1bmRlciBNSVQgTGljZW5zZQogICAgICovCiAgICB2YXIgY2hhcnMgPSAnQUJDREVGR0hJSktMTU5PUFFSU1RVVldYWVphYmNkZWZnaGlqa2xtbm9wcXJzdHV2d3h5ejAxMjM0NTY3ODkrLyc7CiAgICAvLyBVc2UgYSBsb29rdXAgdGFibGUgdG8gZmluZCB0aGUgaW5kZXguCiAgICB2YXIgbG9va3VwID0gdHlwZW9mIFVpbnQ4QXJyYXkgPT09ICd1bmRlZmluZWQnID8gW10gOiBuZXcgVWludDhBcnJheSgyNTYpOwogICAgZm9yICh2YXIgaSA9IDA7IGkgPCBjaGFycy5sZW5ndGg7IGkrKykgewogICAgICAgIGxvb2t1cFtjaGFycy5jaGFyQ29kZUF0KGkpXSA9IGk7CiAgICB9CiAgICB2YXIgZW5jb2RlID0gZnVuY3Rpb24gKGFycmF5YnVmZmVyKSB7CiAgICAgICAgdmFyIGJ5dGVzID0gbmV3IFVpbnQ4QXJyYXkoYXJyYXlidWZmZXIpLCBpLCBsZW4gPSBieXRlcy5sZW5ndGgsIGJhc2U2NCA9ICcnOwogICAgICAgIGZvciAoaSA9IDA7IGkgPCBsZW47IGkgKz0gMykgewogICAgICAgICAgICBiYXNlNjQgKz0gY2hhcnNbYnl0ZXNbaV0gPj4gMl07CiAgICAgICAgICAgIGJhc2U2NCArPSBjaGFyc1soKGJ5dGVzW2ldICYgMykgPDwgNCkgfCAoYnl0ZXNbaSArIDFdID4+IDQpXTsKICAgICAgICAgICAgYmFzZTY0ICs9IGNoYXJzWygoYnl0ZXNbaSArIDFdICYgMTUpIDw8IDIpIHwgKGJ5dGVzW2kgKyAyXSA+PiA2KV07CiAgICAgICAgICAgIGJhc2U2NCArPSBjaGFyc1tieXRlc1tpICsgMl0gJiA2M107CiAgICAgICAgfQogICAgICAgIGlmIChsZW4gJSAzID09PSAyKSB7CiAgICAgICAgICAgIGJhc2U2NCA9IGJhc2U2NC5zdWJzdHJpbmcoMCwgYmFzZTY0Lmxlbmd0aCAtIDEpICsgJz0nOwogICAgICAgIH0KICAgICAgICBlbHNlIGlmIChsZW4gJSAzID09PSAxKSB7CiAgICAgICAgICAgIGJhc2U2NCA9IGJhc2U2NC5zdWJzdHJpbmcoMCwgYmFzZTY0Lmxlbmd0aCAtIDIpICsgJz09JzsKICAgICAgICB9CiAgICAgICAgcmV0dXJuIGJhc2U2NDsKICAgIH07CgogICAgY29uc3QgbGFzdEJsb2JNYXAgPSBuZXcgTWFwKCk7DQogICAgY29uc3QgdHJhbnNwYXJlbnRCbG9iTWFwID0gbmV3IE1hcCgpOw0KICAgIGZ1bmN0aW9uIGdldFRyYW5zcGFyZW50QmxvYkZvcih3aWR0aCwgaGVpZ2h0LCBkYXRhVVJMT3B0aW9ucykgew0KICAgICAgICByZXR1cm4gX19hd2FpdGVyKHRoaXMsIHZvaWQgMCwgdm9pZCAwLCBmdW5jdGlvbiogKCkgew0KICAgICAgICAgICAgY29uc3QgaWQgPSBgJHt3aWR0aH0tJHtoZWlnaHR9YDsNCiAgICAgICAgICAgIGlmICgnT2Zmc2NyZWVuQ2FudmFzJyBpbiBnbG9iYWxUaGlzKSB7DQogICAgICAgICAgICAgICAgaWYgKHRyYW5zcGFyZW50QmxvYk1hcC5oYXMoaWQpKQ0KICAgICAgICAgICAgICAgICAgICByZXR1cm4gdHJhbnNwYXJlbnRCbG9iTWFwLmdldChpZCk7DQogICAgICAgICAgICAgICAgY29uc3Qgb2Zmc2NyZWVuID0gbmV3IE9mZnNjcmVlbkNhbnZhcyh3aWR0aCwgaGVpZ2h0KTsNCiAgICAgICAgICAgICAgICBvZmZzY3JlZW4uZ2V0Q29udGV4dCgnMmQnKTsNCiAgICAgICAgICAgICAgICBjb25zdCBibG9iID0geWllbGQgb2Zmc2NyZWVuLmNvbnZlcnRUb0Jsb2IoZGF0YVVSTE9wdGlvbnMpOw0KICAgICAgICAgICAgICAgIGNvbnN0IGFycmF5QnVmZmVyID0geWllbGQgYmxvYi5hcnJheUJ1ZmZlcigpOw0KICAgICAgICAgICAgICAgIGNvbnN0IGJhc2U2NCA9IGVuY29kZShhcnJheUJ1ZmZlcik7DQogICAgICAgICAgICAgICAgdHJhbnNwYXJlbnRCbG9iTWFwLnNldChpZCwgYmFzZTY0KTsNCiAgICAgICAgICAgICAgICByZXR1cm4gYmFzZTY0Ow0KICAgICAgICAgICAgfQ0KICAgICAgICAgICAgZWxzZSB7DQogICAgICAgICAgICAgICAgcmV0dXJuICcnOw0KICAgICAgICAgICAgfQ0KICAgICAgICB9KTsNCiAgICB9DQogICAgY29uc3Qgd29ya2VyID0gc2VsZjsNCiAgICB3b3JrZXIub25tZXNzYWdlID0gZnVuY3Rpb24gKGUpIHsNCiAgICAgICAgcmV0dXJuIF9fYXdhaXRlcih0aGlzLCB2b2lkIDAsIHZvaWQgMCwgZnVuY3Rpb24qICgpIHsNCiAgICAgICAgICAgIGlmICgnT2Zmc2NyZWVuQ2FudmFzJyBpbiBnbG9iYWxUaGlzKSB7DQogICAgICAgICAgICAgICAgY29uc3QgeyBpZCwgYml0bWFwLCB3aWR0aCwgaGVpZ2h0LCBkYXRhVVJMT3B0aW9ucyB9ID0gZS5kYXRhOw0KICAgICAgICAgICAgICAgIGNvbnN0IHRyYW5zcGFyZW50QmFzZTY0ID0gZ2V0VHJhbnNwYXJlbnRCbG9iRm9yKHdpZHRoLCBoZWlnaHQsIGRhdGFVUkxPcHRpb25zKTsNCiAgICAgICAgICAgICAgICBjb25zdCBvZmZzY3JlZW4gPSBuZXcgT2Zmc2NyZWVuQ2FudmFzKHdpZHRoLCBoZWlnaHQpOw0KICAgICAgICAgICAgICAgIGNvbnN0IGN0eCA9IG9mZnNjcmVlbi5nZXRDb250ZXh0KCcyZCcpOw0KICAgICAgICAgICAgICAgIGN0eC5kcmF3SW1hZ2UoYml0bWFwLCAwLCAwKTsNCiAgICAgICAgICAgICAgICBiaXRtYXAuY2xvc2UoKTsNCiAgICAgICAgICAgICAgICBjb25zdCBibG9iID0geWllbGQgb2Zmc2NyZWVuLmNvbnZlcnRUb0Jsb2IoZGF0YVVSTE9wdGlvbnMpOw0KICAgICAgICAgICAgICAgIGNvbnN0IHR5cGUgPSBibG9iLnR5cGU7DQogICAgICAgICAgICAgICAgY29uc3QgYXJyYXlCdWZmZXIgPSB5aWVsZCBibG9iLmFycmF5QnVmZmVyKCk7DQogICAgICAgICAgICAgICAgY29uc3QgYmFzZTY0ID0gZW5jb2RlKGFycmF5QnVmZmVyKTsNCiAgICAgICAgICAgICAgICBpZiAoIWxhc3RCbG9iTWFwLmhhcyhpZCkgJiYgKHlpZWxkIHRyYW5zcGFyZW50QmFzZTY0KSA9PT0gYmFzZTY0KSB7DQogICAgICAgICAgICAgICAgICAgIGxhc3RCbG9iTWFwLnNldChpZCwgYmFzZTY0KTsNCiAgICAgICAgICAgICAgICAgICAgcmV0dXJuIHdvcmtlci5wb3N0TWVzc2FnZSh7IGlkIH0pOw0KICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICBpZiAobGFzdEJsb2JNYXAuZ2V0KGlkKSA9PT0gYmFzZTY0KQ0KICAgICAgICAgICAgICAgICAgICByZXR1cm4gd29ya2VyLnBvc3RNZXNzYWdlKHsgaWQgfSk7DQogICAgICAgICAgICAgICAgd29ya2VyLnBvc3RNZXNzYWdlKHsNCiAgICAgICAgICAgICAgICAgICAgaWQsDQogICAgICAgICAgICAgICAgICAgIHR5cGUsDQogICAgICAgICAgICAgICAgICAgIGJhc2U2NCwNCiAgICAgICAgICAgICAgICAgICAgd2lkdGgsDQogICAgICAgICAgICAgICAgICAgIGhlaWdodCwNCiAgICAgICAgICAgICAgICB9KTsNCiAgICAgICAgICAgICAgICBsYXN0QmxvYk1hcC5zZXQoaWQsIGJhc2U2NCk7DQogICAgICAgICAgICB9DQogICAgICAgICAgICBlbHNlIHsNCiAgICAgICAgICAgICAgICByZXR1cm4gd29ya2VyLnBvc3RNZXNzYWdlKHsgaWQ6IGUuZGF0YS5pZCB9KTsNCiAgICAgICAgICAgIH0NCiAgICAgICAgfSk7DQogICAgfTsKCn0pKCk7Cgo=', null, false);
-
 class CanvasManager {
     reset() {
         this.pendingCanvasMutations.clear();
@@ -3785,7 +2855,7 @@ class CanvasManager {
         this.rafStamps = { latestId: 0, invokeId: null };
         this.frozen = false;
         this.locked = false;
-        this.processMutation = (target, mutation) => {
+        this.processMutation = function (target, mutation) {
             const newFrame = this.rafStamps.invokeId &&
                 this.rafStamps.latestId !== this.rafStamps.invokeId;
             if (newFrame || !this.rafStamps.invokeId)
@@ -3795,108 +2865,16 @@ class CanvasManager {
             }
             this.pendingCanvasMutations.get(target).push(mutation);
         };
-        const { sampling = 'all', win, blockClass, blockSelector, unblockSelector, recordCanvas, dataURLOptions, } = options;
         this.mutationCb = options.mutationCb;
         this.mirror = options.mirror;
-        if (recordCanvas && sampling === 'all')
-            this.initCanvasMutationObserver(win, blockClass, blockSelector, unblockSelector);
-        if (recordCanvas && typeof sampling === 'number')
-            this.initCanvasFPSObserver(sampling, win, blockClass, blockSelector, unblockSelector, {
-                dataURLOptions,
-            });
-    }
-    initCanvasFPSObserver(fps, win, blockClass, blockSelector, unblockSelector, options) {
-        const canvasContextReset = initCanvasContextObserver(win, blockClass, blockSelector, unblockSelector, true);
-        const snapshotInProgressMap = new Map();
-        const worker = new WorkerFactory();
-        worker.onmessage = (e) => {
-            const { id } = e.data;
-            snapshotInProgressMap.set(id, false);
-            if (!('base64' in e.data))
-                return;
-            const { base64, type, width, height } = e.data;
-            this.mutationCb({
-                id,
-                type: CanvasContext['2D'],
-                commands: [
-                    {
-                        property: 'clearRect',
-                        args: [0, 0, width, height],
-                    },
-                    {
-                        property: 'drawImage',
-                        args: [
-                            {
-                                rr_type: 'ImageBitmap',
-                                args: [
-                                    {
-                                        rr_type: 'Blob',
-                                        data: [{ rr_type: 'ArrayBuffer', base64 }],
-                                        type,
-                                    },
-                                ],
-                            },
-                            0,
-                            0,
-                        ],
-                    },
-                ],
-            });
-        };
-        const timeBetweenSnapshots = 1000 / fps;
-        let lastSnapshotTime = 0;
-        let rafId;
-        const getCanvas = () => {
-            const matchedCanvas = [];
-            win.document.querySelectorAll('canvas').forEach((canvas) => {
-                if (!isBlocked(canvas, blockClass, blockSelector, unblockSelector, true)) {
-                    matchedCanvas.push(canvas);
-                }
-            });
-            return matchedCanvas;
-        };
-        const takeCanvasSnapshots = (timestamp) => {
-            if (lastSnapshotTime &&
-                timestamp - lastSnapshotTime < timeBetweenSnapshots) {
-                rafId = requestAnimationFrame(takeCanvasSnapshots);
-                return;
-            }
-            lastSnapshotTime = timestamp;
-            getCanvas()
-                .forEach((canvas) => __awaiter(this, void 0, void 0, function* () {
-                var _a;
-                const id = this.mirror.getId(canvas);
-                if (snapshotInProgressMap.get(id))
-                    return;
-                snapshotInProgressMap.set(id, true);
-                if (['webgl', 'webgl2'].includes(canvas.__context)) {
-                    const context = canvas.getContext(canvas.__context);
-                    if (((_a = context === null || context === void 0 ? void 0 : context.getContextAttributes()) === null || _a === void 0 ? void 0 : _a.preserveDrawingBuffer) === false) {
-                        context.clear(context.COLOR_BUFFER_BIT);
-                    }
-                }
-                const bitmap = yield createImageBitmap(canvas);
-                worker.postMessage({
-                    id,
-                    bitmap,
-                    width: canvas.width,
-                    height: canvas.height,
-                    dataURLOptions: options.dataURLOptions,
-                }, [bitmap]);
-            }));
-            rafId = requestAnimationFrame(takeCanvasSnapshots);
-        };
-        rafId = requestAnimationFrame(takeCanvasSnapshots);
-        this.resetObservers = () => {
-            canvasContextReset();
-            cancelAnimationFrame(rafId);
-        };
+        if (options.recordCanvas === true)
+            this.initCanvasMutationObserver(options.win, options.blockClass, options.blockSelector, options.unblockSelector);
     }
-    initCanvasMutationObserver(win, blockClass, blockSelector, unblockSelector) {
+    initCanvasMutationObserver(win, blockClass, unblockSelector, blockSelector) {
         this.startRAFTimestamping();
         this.startPendingCanvasMutationFlusher();
-        const canvasContextReset = initCanvasContextObserver(win, blockClass, blockSelector, unblockSelector, false);
-        const canvas2DReset = initCanvas2DMutationObserver(this.processMutation.bind(this), win, blockClass, blockSelector, unblockSelector);
+        const canvasContextReset = initCanvasContextObserver(win, blockClass, blockSelector, unblockSelector);
+        const canvas2DReset = initCanvas2DMutationObserver(this.processMutation.bind(this), win, blockClass, blockSelector, unblockSelector, this.mirror);
         const canvasWebGL1and2Reset = initCanvasWebGLMutationObserver(this.processMutation.bind(this), win, blockClass, blockSelector, unblockSelector, this.mirror);
         this.resetObservers = () => {
             canvasContextReset();
@@ -3938,133 +2916,20 @@ class CanvasManager {
     }
 }
 
-class StylesheetManager {
-    constructor(options) {
-        this.trackedLinkElements = new WeakSet();
-        this.styleMirror = new StyleSheetMirror();
-        this.mutationCb = options.mutationCb;
-        this.adoptedStyleSheetCb = options.adoptedStyleSheetCb;
-    }
-    attachLinkElement(linkEl, childSn) {
-        if ('_cssText' in childSn.attributes)
-            this.mutationCb({
-                adds: [],
-                removes: [],
-                texts: [],
-                attributes: [
-                    {
-                        id: childSn.id,
-                        attributes: childSn
-                            .attributes,
-                    },
-                ],
-            });
-        this.trackLinkElement(linkEl);
-    }
-    trackLinkElement(linkEl) {
-        if (this.trackedLinkElements.has(linkEl))
-            return;
-        this.trackedLinkElements.add(linkEl);
-        this.trackStylesheetInLinkElement(linkEl);
-    }
-    adoptStyleSheets(sheets, hostId) {
-        if (sheets.length === 0)
-            return;
-        const adoptedStyleSheetData = {
-            id: hostId,
-            styleIds: [],
-        };
-        const styles = [];
-        for (const sheet of sheets) {
-            let styleId;
-            if (!this.styleMirror.has(sheet)) {
-                styleId = this.styleMirror.add(sheet);
-                styles.push({
-                    styleId,
-                    rules: Array.from(sheet.rules || CSSRule, (r, index) => ({
-                        rule: stringifyRule(r),
-                        index,
-                    })),
-                });
-            }
-            else
-                styleId = this.styleMirror.getId(sheet);
-            adoptedStyleSheetData.styleIds.push(styleId);
-        }
-        if (styles.length > 0)
-            adoptedStyleSheetData.styles = styles;
-        this.adoptedStyleSheetCb(adoptedStyleSheetData);
-    }
-    reset() {
-        this.styleMirror.reset();
-        this.trackedLinkElements = new WeakSet();
-    }
-    trackStylesheetInLinkElement(linkEl) {
-    }
-}
-
-class ProcessedNodeManager {
-    constructor() {
-        this.nodeMap = new WeakMap();
-        this.loop = true;
-        this.periodicallyClear();
-    }
-    periodicallyClear() {
-        requestAnimationFrame(() => {
-            this.clear();
-            if (this.loop)
-                this.periodicallyClear();
-        });
-    }
-    inOtherBuffer(node, thisBuffer) {
-        const buffers = this.nodeMap.get(node);
-        return (buffers && Array.from(buffers).some((buffer) => buffer !== thisBuffer));
-    }
-    add(node, buffer) {
-        this.nodeMap.set(node, (this.nodeMap.get(node) || new Set()).add(buffer));
-    }
-    clear() {
-        this.nodeMap = new WeakMap();
-    }
-    destroy() {
-        this.loop = false;
-    }
-}
-
 function wrapEvent(e) {
-    return Object.assign(Object.assign({}, e), { timestamp: nowTimestamp() });
+    return Object.assign(Object.assign({}, e), { timestamp: Date.now() });
 }
 let wrappedEmit;
 let takeFullSnapshot;
-let canvasManager;
-let recording = false;
 const mirror = createMirror();
 function record(options = {}) {
-    const { emit, checkoutEveryNms, checkoutEveryNth, blockClass = 'rr-block', blockSelector = null, unblockSelector = null, ignoreClass = 'rr-ignore', ignoreSelector = null, maskAllText = false, maskTextClass = 'rr-mask', unmaskTextClass = null, maskTextSelector = null, unmaskTextSelector = null, inlineStylesheet = true, maskAllInputs, maskInputOptions: _maskInputOptions, slimDOMOptions: _slimDOMOptions, maskAttributeFn, maskInputFn, maskTextFn, hooks, packFn, sampling = {}, dataURLOptions = {}, mousemoveWait, recordCanvas = false, recordCrossOriginIframes = false, recordAfter = options.recordAfter === 'DOMContentLoaded'
-        ? options.recordAfter
-        : 'load', userTriggeredOnInput = false, collectFonts = false, inlineImages = false, plugins, keepIframeSrcFn = () => false, ignoreCSSAttributes = new Set([]), errorHandler, onMutation, } = options;
-    registerErrorHandler(errorHandler);
-    const inEmittingFrame = recordCrossOriginIframes
-        ? window.parent === window
-        : true;
-    let passEmitsToParent = false;
-    if (!inEmittingFrame) {
-        try {
-            if (window.parent.document) {
-                passEmitsToParent = false;
-            }
-        }
-        catch (e) {
-            passEmitsToParent = true;
-        }
-    }
-    if (inEmittingFrame && !emit) {
+    const { emit, checkoutEveryNms, checkoutEveryNth, blockClass = 'rr-block', blockSelector = null, unblockSelector = null, ignoreClass = 'rr-ignore', ignoreSelector = null, maskTextClass = 'rr-mask', maskTextSelector = null, maskInputSelector = null, unmaskTextSelector = null, unmaskInputSelector = null, inlineStylesheet = true, maskAllText = false, maskAllInputs, maskInputOptions: _maskInputOptions, slimDOMOptions: _slimDOMOptions, maskInputFn, maskTextFn, hooks, packFn, sampling = {}, mousemoveWait, recordCanvas = false, userTriggeredOnInput = false, collectFonts = false, inlineImages = false, plugins, keepIframeSrcFn = () => false, onMutation, } = options;
+    if (!emit) {
         throw new Error('emit function is required');
     }
     if (mousemoveWait !== undefined && sampling.mousemove === undefined) {
         sampling.mousemove = mousemoveWait;
     }
-    mirror.reset();
     const maskInputOptions = maskAllInputs === true
         ? {
             color: true,
@@ -4113,8 +2978,7 @@ function record(options = {}) {
                 e = plugin.eventProcessor(e);
             }
         }
-        if (packFn &&
-            !passEmitsToParent) {
+        if (packFn) {
             e = packFn(e);
         }
         return e;
@@ -4127,18 +2991,7 @@ function record(options = {}) {
                 e.data.source === IncrementalSource.Mutation)) {
             mutationBuffers.forEach((buf) => buf.unfreeze());
         }
-        if (inEmittingFrame) {
-            emit === null || emit === void 0 ? void 0 : emit(eventProcessor(e), isCheckout);
-        }
-        else if (passEmitsToParent) {
-            const message = {
-                type: 'rrweb',
-                event: eventProcessor(e),
-                origin: window.location.origin,
-                isCheckout,
-            };
-            window.parent.postMessage(message, '*');
-        }
+        emit(eventProcessor(e), isCheckout);
         if (e.type === EventType.FullSnapshot) {
             lastFullSnapshotEvent = e;
             incrementalSnapshotCount = 0;
@@ -4171,31 +3024,10 @@ function record(options = {}) {
         type: EventType.IncrementalSnapshot,
         data: Object.assign({ source: IncrementalSource.CanvasMutation }, p),
     }));
-    const wrappedAdoptedStyleSheetEmit = (a) => wrappedEmit(wrapEvent({
-        type: EventType.IncrementalSnapshot,
-        data: Object.assign({ source: IncrementalSource.AdoptedStyleSheet }, a),
-    }));
-    const stylesheetManager = new StylesheetManager({
-        mutationCb: wrappedMutationEmit,
-        adoptedStyleSheetCb: wrappedAdoptedStyleSheetEmit,
-    });
     const iframeManager = new IframeManager({
-        mirror,
         mutationCb: wrappedMutationEmit,
-        stylesheetManager: stylesheetManager,
-        recordCrossOriginIframes,
-        wrappedEmit,
     });
-    for (const plugin of plugins || []) {
-        if (plugin.getMirror)
-            plugin.getMirror({
-                nodeMirror: mirror,
-                crossOriginIframeMirror: iframeManager.crossOriginIframeMirror,
-                crossOriginIframeStyleMirror: iframeManager.crossOriginIframeStyleMirror,
-            });
-    }
-    const processedNodeManager = new ProcessedNodeManager();
-    canvasManager = new CanvasManager({
+    const canvasManager = new CanvasManager({
         recordCanvas,
         mutationCb: wrappedCanvasMutationEmit,
         win: window,
@@ -4203,8 +3035,6 @@ function record(options = {}) {
         blockSelector,
         unblockSelector,
         mirror,
-        sampling: sampling.canvas,
-        dataURLOptions,
     });
     const shadowDomManager = new ShadowDomManager({
         mutationCb: wrappedMutationEmit,
@@ -4214,15 +3044,14 @@ function record(options = {}) {
             blockClass,
             blockSelector,
             unblockSelector,
-            maskAllText,
             maskTextClass,
-            unmaskTextClass,
             maskTextSelector,
             unmaskTextSelector,
+            maskInputSelector,
+            unmaskInputSelector,
             inlineStylesheet,
+            maskAllText,
             maskInputOptions,
-            dataURLOptions,
-            maskAttributeFn,
             maskTextFn,
             maskInputFn,
             recordCanvas,
@@ -4230,14 +3059,12 @@ function record(options = {}) {
             sampling,
             slimDOMOptions,
             iframeManager,
-            stylesheetManager,
             canvasManager,
-            keepIframeSrcFn,
-            processedNodeManager,
         },
         mirror,
     });
     takeFullSnapshot = (isCheckout = false) => {
+        var _a, _b, _c, _d;
         wrappedEmit(wrapEvent({
             type: EventType.Meta,
             data: {
@@ -4246,35 +3073,27 @@ function record(options = {}) {
                 height: getWindowHeight(),
             },
         }), isCheckout);
-        stylesheetManager.reset();
-        shadowDomManager.init();
         mutationBuffers.forEach((buf) => buf.lock());
-        const node = snapshot(document, {
-            mirror,
+        const [node, idNodeMap] = snapshot(document, {
             blockClass,
             blockSelector,
             unblockSelector,
-            maskAllText,
             maskTextClass,
-            unmaskTextClass,
             maskTextSelector,
             unmaskTextSelector,
+            maskInputSelector,
+            unmaskInputSelector,
             inlineStylesheet,
+            maskAllText,
             maskAllInputs: maskInputOptions,
-            maskAttributeFn,
-            maskInputFn,
             maskTextFn,
             slimDOM: slimDOMOptions,
-            dataURLOptions,
             recordCanvas,
             inlineImages,
             onSerialize: (n) => {
-                if (isSerializedIframe(n, mirror)) {
+                if (isIframeINode(n)) {
                     iframeManager.addIframe(n);
                 }
-                if (isSerializedStylesheet(n, mirror)) {
-                    stylesheetManager.trackLinkElement(n);
-                }
                 if (hasShadowRoot(n)) {
                     shadowDomManager.addShadowRoot(n.shadowRoot, document);
                 }
@@ -4283,27 +3102,42 @@ function record(options = {}) {
                 iframeManager.attachIframe(iframe, childSn);
                 shadowDomManager.observeAttachShadow(iframe);
             },
-            onStylesheetLoad: (linkEl, childSn) => {
-                stylesheetManager.attachLinkElement(linkEl, childSn);
-            },
             keepIframeSrcFn,
         });
         if (!node) {
             return console.warn('Failed to snapshot the document');
         }
+        mirror.map = idNodeMap;
         wrappedEmit(wrapEvent({
             type: EventType.FullSnapshot,
             data: {
                 node,
-                initialOffset: getWindowScroll(window),
+                initialOffset: {
+                    left: window.pageXOffset !== undefined
+                        ? window.pageXOffset
+                        : (document === null || document === void 0 ? void 0 : document.documentElement.scrollLeft) ||
+                            ((_b = (_a = document === null || document === void 0 ? void 0 : document.body) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.scrollLeft) ||
+                            (document === null || document === void 0 ? void 0 : document.body.scrollLeft) ||
+                            0,
+                    top: window.pageYOffset !== undefined
+                        ? window.pageYOffset
+                        : (document === null || document === void 0 ? void 0 : document.documentElement.scrollTop) ||
+                            ((_d = (_c = document === null || document === void 0 ? void 0 : document.body) === null || _c === void 0 ? void 0 : _c.parentElement) === null || _d === void 0 ? void 0 : _d.scrollTop) ||
+                            (document === null || document === void 0 ? void 0 : document.body.scrollTop) ||
+                            0,
+                },
             },
-        }), isCheckout);
+        }));
         mutationBuffers.forEach((buf) => buf.unlock());
-        if (document.adoptedStyleSheets && document.adoptedStyleSheets.length > 0)
-            stylesheetManager.adoptStyleSheets(document.adoptedStyleSheets, mirror.getId(document));
     };
     try {
         const handlers = [];
+        handlers.push(on('DOMContentLoaded', () => {
+            wrappedEmit(wrapEvent({
+                type: EventType.DomContentLoaded,
+                data: {},
+            }));
+        }));
         const observe = (doc) => {
             var _a;
             return callbackWrapper(initObservers)({
@@ -4346,26 +3180,14 @@ function record(options = {}) {
                     type: EventType.IncrementalSnapshot,
                     data: Object.assign({ source: IncrementalSource.Font }, p),
                 })),
-                selectionCb: (p) => {
-                    wrappedEmit(wrapEvent({
-                        type: EventType.IncrementalSnapshot,
-                        data: Object.assign({ source: IncrementalSource.Selection }, p),
-                    }));
-                },
-                customElementCb: (c) => {
-                    wrappedEmit(wrapEvent({
-                        type: EventType.IncrementalSnapshot,
-                        data: Object.assign({ source: IncrementalSource.CustomElement }, c),
-                    }));
-                },
                 blockClass,
                 ignoreClass,
                 ignoreSelector,
-                maskAllText,
                 maskTextClass,
-                unmaskTextClass,
                 maskTextSelector,
                 unmaskTextSelector,
+                maskInputSelector,
+                unmaskInputSelector,
                 maskInputOptions,
                 inlineStylesheet,
                 sampling,
@@ -4374,21 +3196,16 @@ function record(options = {}) {
                 userTriggeredOnInput,
                 collectFonts,
                 doc,
-                maskAttributeFn,
+                maskAllText,
                 maskInputFn,
                 maskTextFn,
-                keepIframeSrcFn,
                 blockSelector,
                 unblockSelector,
                 slimDOMOptions,
-                dataURLOptions,
                 mirror,
                 iframeManager,
-                stylesheetManager,
                 shadowDomManager,
-                processedNodeManager,
                 canvasManager,
-                ignoreCSSAttributes,
                 plugins: ((_a = plugins === null || plugins === void 0 ? void 0 : plugins.filter((p) => p.observer)) === null || _a === void 0 ? void 0 : _a.map((p) => ({
                     observer: p.observer,
                     options: p.options,
@@ -4413,35 +3230,22 @@ function record(options = {}) {
         const init = () => {
             takeFullSnapshot();
             handlers.push(observe(document));
-            recording = true;
         };
         if (document.readyState === 'interactive' ||
             document.readyState === 'complete') {
             init();
         }
         else {
-            handlers.push(on('DOMContentLoaded', () => {
-                wrappedEmit(wrapEvent({
-                    type: EventType.DomContentLoaded,
-                    data: {},
-                }));
-                if (recordAfter === 'DOMContentLoaded')
-                    init();
-            }));
             handlers.push(on('load', () => {
                 wrappedEmit(wrapEvent({
                     type: EventType.Load,
                     data: {},
                 }));
-                if (recordAfter === 'load')
-                    init();
+                init();
             }, window));
         }
         return () => {
             handlers.forEach((h) => h());
-            processedNodeManager.destroy();
-            recording = false;
-            unregisterErrorHandler();
         };
     }
     catch (error) {
@@ -4449,7 +3253,7 @@ function record(options = {}) {
     }
 }
 record.addCustomEvent = (tag, payload) => {
-    if (!recording) {
+    if (!wrappedEmit) {
         throw new Error('please add custom event after start recording');
     }
     wrappedEmit(wrapEvent({
@@ -4464,7 +3268,7 @@ record.freezePage = () => {
     mutationBuffers.forEach((buf) => buf.freeze());
 };
 record.takeFullSnapshot = (isCheckout) => {
-    if (!recording) {
+    if (!takeFullSnapshot) {
         throw new Error('please take full snapshot after start recording');
     }
     takeFullSnapshot(isCheckout);
@@ -4960,25 +3764,27 @@ const handleDomListener = (
 
 /** Get the base DOM breadcrumb. */
 function getBaseDomBreadcrumb(target, message) {
-  const nodeId = record.mirror.getId(target);
-  const node = nodeId && record.mirror.getNode(nodeId);
-  const meta = node && record.mirror.getMeta(node);
-  const element = meta && isElement(meta) ? meta : null;
+  // `__sn` property is the serialized node created by rrweb
+  const serializedNode = target && isRrwebNode(target) && target.__sn.type === NodeType.Element ? target.__sn : null;
 
   return {
     message,
-    data: element
+    data: serializedNode
       ? {
-          nodeId,
+          nodeId: serializedNode.id,
           node: {
-            id: nodeId,
-            tagName: element.tagName,
-            textContent: Array.from(element.childNodes)
-              .map((node) => node.type === NodeType.Text && node.textContent)
-              .filter(Boolean) // filter out empty values
-              .map(text => (text ).trim())
-              .join(''),
-            attributes: getAttributesToRecord(element.attributes),
+            id: serializedNode.id,
+            tagName: serializedNode.tagName,
+            textContent: target
+              ? Array.from(target.childNodes)
+                  .map(
+                    (node) => '__sn' in node && node.__sn.type === NodeType.Text && node.__sn.textContent,
+                  )
+                  .filter(Boolean) // filter out empty values
+                  .map(text => (text ).trim())
+                  .join('')
+              : '',
+            attributes: getAttributesToRecord(serializedNode.attributes),
           },
         }
       : {},
@@ -5015,8 +3821,8 @@ function getDomTarget(handlerData) {
   return { target, message };
 }
 
-function isElement(node) {
-  return node.type === NodeType.Element;
+function isRrwebNode(node) {
+  return '__sn' in node;
 }
 
 /** Handle keyboard events & create breadcrumbs. */
@@ -7841,7 +6647,9 @@ function createLargestContentfulPaint(
     data: {
       value, // LCP "duration" in ms
       size,
-      nodeId: record.mirror.getId(entry.element),
+      // Not sure why this errors, Node should be correct (Argument of type 'Node' is not assignable to parameter of type 'INode')
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      nodeId: record.mirror.getId(entry.element ),
     },
   };
 }
@@ -8117,11 +6925,19 @@ async function prepareReplayEvent({
     typeof client._integrations === 'object' && client._integrations !== null && !Array.isArray(client._integrations)
       ? Object.keys(client._integrations)
       : undefined;
+
+  const eventHint = { event_id, integrations };
+
+  if (client.emit) {
+    client.emit('preprocessEvent', event, eventHint);
+  }
+
   const preparedEvent = (await prepareEvent(
     client.getOptions(),
     event,
-    { event_id, integrations },
+    eventHint,
     scope,
+    client,
   )) ;
 
   // If e.g. a global event processor returned null
@@ -8697,9 +7513,7 @@ class ReplayContainer  {
 
     try {
       logInfo(
-        `[Replay] Stopping Replay${reason ? ` triggered by ${reason}` : ''} ${new Date().toISOString()} ${
-          this._isEnabled
-        }`,
+        `[Replay] Stopping Replay${reason ? ` triggered by ${reason}` : ''}`,
         this._options._experiments.traceInternals,
       );
 
@@ -9632,6 +8446,8 @@ function getPrivacyOptions({
     // We are making the decision to make text and input selectors the same
     maskTextSelector: maskSelector,
     unmaskTextSelector: unmaskSelector,
+    maskInputSelector: maskSelector,
+    unmaskInputSelector: unmaskSelector,
 
     blockSelector: getOption(
       block,
@@ -9667,39 +8483,6 @@ function isElectronNodeRenderer() {
   return typeof process !== 'undefined' && (process ).type === 'renderer';
 }
 
-/**
- * Masks an attribute if necessary, otherwise return attribute value as-is.
- */
-function maskAttribute({
-  el,
-  key,
-  maskAttributes,
-  maskAllText,
-  privacyOptions,
-  value,
-}) {
-  // We only mask attributes if `maskAllText` is true
-  if (!maskAllText) {
-    return value;
-  }
-
-  // unmaskTextSelector takes precendence
-  if (privacyOptions.unmaskTextSelector && el.matches(privacyOptions.unmaskTextSelector)) {
-    return value;
-  }
-
-  if (
-    maskAttributes.includes(key) ||
-    // Need to mask `value` attribute for `<input>` if it's a button-like
-    // type
-    (key === 'value' && el.tagName === 'INPUT' && ['submit', 'button'].includes(el.getAttribute('type') || ''))
-  ) {
-    return value.replace(/[\S]/g, '*');
-  }
-
-  return value;
-}
-
 const MEDIA_SELECTORS =
   'img,image,svg,video,object,picture,embed,map,audio,link[rel="icon"],link[rel="apple-touch-icon"]';
 
@@ -9759,7 +8542,6 @@ class Replay  {
     networkResponseHeaders = [],
 
     mask = [],
-    maskAttributes = ['title', 'placeholder'],
     unmask = [],
     block = [],
     unblock = [],
@@ -9783,36 +8565,25 @@ class Replay  {
   } = {}) {
     this.name = Replay.id;
 
-    const privacyOptions = getPrivacyOptions({
-      mask,
-      unmask,
-      block,
-      unblock,
-      ignore,
-      blockClass,
-      blockSelector,
-      maskTextClass,
-      maskTextSelector,
-      ignoreClass,
-    });
-
     this._recordingOptions = {
       maskAllInputs,
       maskAllText,
       maskInputOptions: { ...(maskInputOptions || {}), password: true },
       maskTextFn: maskFn,
       maskInputFn: maskFn,
-      maskAttributeFn: (key, value, el) =>
-        maskAttribute({
-          maskAttributes,
-          maskAllText,
-          privacyOptions,
-          key,
-          value,
-          el,
-        }),
 
-      ...privacyOptions,
+      ...getPrivacyOptions({
+        mask,
+        unmask,
+        block,
+        unblock,
+        ignore,
+        blockClass,
+        blockSelector,
+        maskTextClass,
+        maskTextSelector,
+        ignoreClass,
+      }),
 
       // Our defaults
       slimDOMOptions: 'all',
@@ -9822,16 +8593,6 @@ class Replay  {
       // collect fonts, but be aware that `sentry.io` needs to be an allowed
       // origin for playback
       collectFonts: true,
-      errorHandler: (err) => {
-        try {
-          // @ts-expect-error Set this so that replay SDK can ignore errors originating from rrweb
-          err.__rrweb__ = true;
-        } catch (e) {
-          // avoid any potential hazards here
-        }
-        // return true to suppress throwing the error inside of rrweb
-        return true;
-      },
     };
 
     this._initialOptions = {