@sentry/replay 7.67.0-beta.0 → 7.68.0

package/cjs/index.js

@@ -19,9 +19,6 @@ const SESSION_IDLE_PAUSE_DURATION = 300000; // 5 minutes in ms
 // The idle limit for a session after which the session expires.
 const SESSION_IDLE_EXPIRE_DURATION = 900000; // 15 minutes in ms
 
-// The maximum length of a session
-const MAX_SESSION_LIFE = 3600000; // 60 minutes in ms
-
 /** Default flush delays */
 const DEFAULT_FLUSH_MIN_DELAY = 5000;
 // XXX: Temp fix for our debounce logic where `maxWait` would never occur if it
@@ -53,6 +50,9 @@ const MIN_REPLAY_DURATION = 4999;
 /* The max. allowed value that the minReplayDuration can be set to. */
 const MIN_REPLAY_DURATION_LIMIT = 15000;
 
+/** The max. length of a replay. */
+const MAX_REPLAY_DURATION = 3600000; // 60 minutes in ms;
+
 var NodeType$1;
 (function (NodeType) {
     NodeType[NodeType["Document"] = 0] = "Document";
@@ -63,135 +63,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);
-}
-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;');
-    }
-    return cssText;
-}
-function getCssRulesString(s) {
-    try {
-        const rules = s.rules || s.cssRules;
-        return rules
-            ? fixBrowserCompatibilityIssuesInCSS(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);
+    return Boolean(host && host.shadowRoot && host.shadowRoot === n);
 }
-function validateStringifiedCssRule(cssStringified) {
-    if (cssStringified.includes(':')) {
-        const regex = /(\[(?:[\w-]+)[^\\])(:(?:[\w-]+)\])/gm;
-        return cssStringified.replace(regex, '$1\\$2');
+function isInputTypeMasked({ maskInputOptions, tagName, type, }) {
+    if (tagName.toLowerCase() === 'option') {
+        tagName = 'select';
     }
-    return cssStringified;
+    const actualType = typeof type === 'string' ? type.toLowerCase() : undefined;
+    return (maskInputOptions[tagName.toLowerCase()] ||
+        (actualType && maskInputOptions[actualType]) ||
+        actualType === 'password' ||
+        (tagName === 'input' && !type && maskInputOptions['text']));
 }
-function isCSSImportRule(rule) {
-    return 'styleSheet' in rule;
+function hasInputMaskOptions({ tagName, type, maskInputOptions, maskInputSelector, }) {
+    return (maskInputSelector || isInputTypeMasked({ maskInputOptions, tagName, type }));
 }
-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) {
@@ -217,11 +126,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') || '';
     }
@@ -231,6 +140,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++;
 }
@@ -238,12 +150,42 @@ 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)
@@ -265,8 +207,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) => {
@@ -275,7 +216,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)) {
@@ -310,7 +251,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;
@@ -318,7 +259,7 @@ function getAbsoluteSrcsetString(doc, attributeValue) {
         }
         return '';
     }
-    const output = [];
+    let output = [];
     while (true) {
         collectCharacters(SRCSET_COMMAS_OR_SPACES);
         if (pos >= attributeValue.length) {
@@ -334,7 +275,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;
@@ -377,12 +318,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] !== '#') {
@@ -401,113 +343,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;
@@ -541,36 +449,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') {
@@ -578,12 +468,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:
@@ -595,39 +487,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,
@@ -644,236 +699,17 @@ 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);
-        }
+function lowerIfExists(maybeAttr) {
+    if (maybeAttr === undefined || maybeAttr === null) {
+        return '';
     }
-    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);
-        }
+    else {
+        return maybeAttr.toLowerCase();
     }
-    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, 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 '';
-    }
-    else {
-        return maybeAttr.toLowerCase();
-    }
-}
-function slimDOMExcluded(sn, slimDOMOptions) {
-    if (slimDOMOptions.comment && sn.type === NodeType$1.Comment) {
-        return true;
+}
+function slimDOMExcluded(sn, slimDOMOptions) {
+    if (slimDOMOptions.comment && sn.type === NodeType$1.Comment) {
+        return true;
     }
     else if (sn.type === NodeType$1.Element) {
         if (slimDOMOptions.script &&
@@ -944,37 +780,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 &&
@@ -987,10 +821,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);
     }
@@ -998,33 +833,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,
@@ -1035,8 +869,6 @@ function serializeNodeWithId(n, options) {
             onSerialize,
             onIframeLoad,
             iframeLoadTimeout,
-            onStylesheetLoad,
-            stylesheetLoadTimeout,
             keepIframeSrcFn,
         };
         for (const childN of Array.from(n.childNodes)) {
@@ -1045,20 +877,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 &&
@@ -1068,19 +897,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,
@@ -1091,8 +920,6 @@ function serializeNodeWithId(n, options) {
                     onSerialize,
                     onIframeLoad,
                     iframeLoadTimeout,
-                    onStylesheetLoad,
-                    stylesheetLoadTimeout,
                     keepIframeSrcFn,
                 });
                 if (serializedIframeNode) {
@@ -1101,50 +928,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,
@@ -1183,43 +971,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,' +
@@ -1259,13 +1151,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);
@@ -1302,8 +1195,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);
@@ -1322,36 +1214,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) ||
@@ -1362,38 +1227,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;
+    return isBlocked(node.parentNode, blockClass, blockSelector, unblockSelector);
 }
-function isSerialized(n, mirror) {
-    return mirror.getId(n) !== -1;
-}
-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)) {
@@ -1412,7 +1287,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) {
@@ -1425,9 +1300,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 {
@@ -1439,142 +1313,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;
@@ -1583,7 +1330,6 @@ class DoubleLinkedList {
     constructor() {
         this.length = 0;
         this.head = null;
-        this.tail = null;
     }
     get(position) {
         if (position >= this.length) {
@@ -1629,9 +1375,6 @@ class DoubleLinkedList {
             node.next = this.head;
             this.head = node;
         }
-        if (node.next === null) {
-            this.tail = node;
-        }
         this.length++;
     }
     removeNode(n) {
@@ -1644,18 +1387,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;
@@ -1664,6 +1401,9 @@ class DoubleLinkedList {
     }
 }
 const moveKey = (id, parentId) => `${id}@${parentId}`;
+function isINode(n) {
+    return '__sn' in n;
+}
 class MutationBuffer {
     constructor() {
         this.frozen = false;
@@ -1685,7 +1425,6 @@ class MutationBuffer {
                 return;
             }
             const adds = [];
-            const addedIds = new Set();
             const addList = new DoubleLinkedList();
             const getNextId = (n) => {
                 let ns = n;
@@ -1697,56 +1436,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({
@@ -1754,7 +1496,6 @@ class MutationBuffer {
                         nextId,
                         node: sn,
                     });
-                    addedIds.add(sn.id);
                 }
             };
             while (this.mapRemoves.length) {
@@ -1790,33 +1531,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;
-                                    }
-                                }
-                            }
                         }
                     }
                 }
@@ -1836,27 +1559,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,
@@ -1877,23 +1585,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, '*')
@@ -1905,99 +1605,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;
-                        }
-                    }
                     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)) {
@@ -2014,9 +1698,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);
@@ -2026,36 +1708,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) {
@@ -2064,28 +1738,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];
         });
@@ -2121,11 +1791,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;
@@ -2134,14 +1799,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;
@@ -2149,31 +1809,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;
 };
 
@@ -2190,8 +1842,7 @@ function getEventTarget(event) {
             return event.path[0];
         }
     }
-    catch (_a) {
-    }
+    catch (_a) { }
     return event && event.target;
 }
 function initMutationObserver(options, rootEl) {
@@ -2210,7 +1861,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,
@@ -2224,8 +1875,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'
@@ -2233,41 +1883,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());
@@ -2275,68 +1925,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)
@@ -2344,19 +1957,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(() => {
@@ -2364,47 +1966,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);
@@ -2414,42 +2016,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({
-            maskInputOptions,
-            tagName,
-            type,
-        });
-        const forceMask = needMaskingText(target, maskTextClass, maskTextSelector, unmaskTextClass, unmaskTextSelector, isInputMasked);
         if (type === 'radio' || type === 'checkbox') {
             isChecked = target.checked;
         }
-        text = maskInputValue({
-            isMasked: forceMask,
-            element: target,
-            value: text,
-            maskInputFn,
-        });
+        if (hasInputMaskOptions({
+            maskInputOptions,
+            maskInputSelector,
+            tagName,
+            type,
+        })) {
+            text = maskInputValue({
+                input: el,
+                maskInputOptions,
+                maskInputSelector,
+                unmaskInputSelector,
+                tagName,
+                type,
+                value: text,
+                maskInputFn,
+            });
+        }
         cbWithDedup(target, callbackWrapper(wrapEventWithUserTriggeredFlag)({ text, isChecked, userTriggered }, userTriggeredOnInput));
         const name = target.name;
         if (type === 'radio' && name && isChecked) {
@@ -2458,8 +2065,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,
                     });
@@ -2479,35 +2090,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());
@@ -2528,7 +2130,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);
@@ -2537,33 +2139,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 }],
                 });
             }
@@ -2574,53 +2161,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;
@@ -2645,11 +2195,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,
@@ -2667,11 +2216,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] },
                         ],
@@ -2684,74 +2232,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,
@@ -2766,16 +2262,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,
                     },
@@ -2790,29 +2282,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());
@@ -2821,8 +2311,7 @@ function initMediaInteractionObserver({ mediaInteractionCb, blockClass, blockSel
 function initFontObserver({ fontCb, doc }) {
     const win = doc.defaultView;
     if (!win) {
-        return () => {
-        };
+        return () => { };
     }
     const handlers = [];
     const fontMap = new WeakMap();
@@ -2835,19 +2324,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]);
         };
     });
@@ -2859,59 +2349,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);
@@ -2978,46 +2417,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));
@@ -3031,12 +2449,13 @@ function initObservers(o, hooks = {}) {
         viewportResizeHandler();
         inputHandler();
         mediaInteractionHandler();
-        styleSheetObserver();
-        adoptedStyleSheetObserver();
-        styleDeclarationObserver();
+        try {
+            styleSheetObserver();
+            styleDeclarationObserver();
+        }
+        catch (e) {
+        }
         fontObserver();
-        selectionObserver();
-        customElementObserver();
         pluginHandlers.forEach((h) => h());
     });
 }
@@ -3050,88 +2469,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;
@@ -3141,7 +2485,7 @@ class IframeManager {
         this.mutationCb({
             adds: [
                 {
-                    parentId: this.mirror.getId(iframeEl),
+                    parentId: iframeEl.__sn.id,
                     nextId: null,
                     node: childSn,
                 },
@@ -3152,239 +2496,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
@@ -3411,19 +2565,85 @@ function __rest(s, e) {
     return t;
 }
 
-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 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 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+/';
@@ -3449,12 +2669,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, []);
@@ -3523,14 +2743,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 {
@@ -3538,133 +2750,41 @@ function serializeArg(value, win, ctx) {
             args: [serializeArg(value.data, win, ctx), value.width, value.height],
         };
     }
-    else if (isInstanceOfWebGLObject(value, win) || typeof value === 'object') {
-        const name = value.constructor.name;
-        const index = saveWebGLVar(value, win, ctx);
-        return {
-            rr_type: name,
-            index: index,
-        };
-    }
-    return value;
-}
-const serializeArgs = (args, win, ctx) => {
-    return [...args].map((arg) => serializeArg(arg, win, ctx));
-};
-const isInstanceOfWebGLObject = (value, win) => {
-    const webGLConstructorNames = [
-        'WebGLActiveInfo',
-        'WebGLBuffer',
-        'WebGLFramebuffer',
-        'WebGLProgram',
-        'WebGLRenderbuffer',
-        'WebGLShader',
-        'WebGLShaderPrecisionFormat',
-        'WebGLTexture',
-        'WebGLUniformLocation',
-        'WebGLVertexArrayObject',
-        'WebGLVertexArrayObjectOES',
-    ];
-    const supportedWebGLConstructorNames = webGLConstructorNames.filter((name) => typeof win[name] === 'function');
-    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');
+    else if (isInstanceOfWebGLObject(value, win) || typeof value === 'object') {
+        const name = value.constructor.name;
+        const index = saveWebGLVar(value, win, ctx);
+        return {
+            rr_type: name,
+            index: index,
+        };
     }
-    return () => {
-        handlers.forEach((h) => h());
-    };
+    return value;
 }
+const serializeArgs = (args, win, ctx) => {
+    return [...args].map((arg) => serializeArg(arg, win, ctx));
+};
+const isInstanceOfWebGLObject = (value, win) => {
+    const webGLConstructorNames = [
+        'WebGLActiveInfo',
+        'WebGLBuffer',
+        'WebGLFramebuffer',
+        'WebGLProgram',
+        'WebGLRenderbuffer',
+        'WebGLShader',
+        'WebGLShaderPrecisionFormat',
+        'WebGLTexture',
+        'WebGLUniformLocation',
+        'WebGLVertexArrayObject',
+        'WebGLVertexArrayObjectOES',
+    ];
+    const supportedWebGLConstructorNames = webGLConstructorNames.filter((name) => typeof win[name] === 'function');
+    return Boolean(supportedWebGLConstructorNames.find((name) => value instanceof win[name]));
+};
 
-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;
@@ -3672,9 +2792,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 (!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,
@@ -3714,64 +2835,7 @@ 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 {
-    constructor(options) {
-        this.pendingCanvasMutations = new Map();
-        this.rafStamps = { latestId: 0, invokeId: null };
-        this.frozen = false;
-        this.locked = false;
-        this.processMutation = (target, mutation) => {
-            const newFrame = this.rafStamps.invokeId &&
-                this.rafStamps.latestId !== this.rafStamps.invokeId;
-            if (newFrame || !this.rafStamps.invokeId)
-                this.rafStamps.invokeId = this.rafStamps.latestId;
-            if (!this.pendingCanvasMutations.has(target)) {
-                this.pendingCanvasMutations.set(target, []);
-            }
-            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,
-            });
-    }
     reset() {
         this.pendingCanvasMutations.clear();
         this.resetObservers && this.resetObservers();
@@ -3788,98 +2852,31 @@ class CanvasManager {
     unlock() {
         this.locked = false;
     }
-    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;
+    constructor(options) {
+        this.pendingCanvasMutations = new Map();
+        this.rafStamps = { latestId: 0, invokeId: null };
+        this.frozen = false;
+        this.locked = false;
+        this.processMutation = function (target, mutation) {
+            const newFrame = this.rafStamps.invokeId &&
+                this.rafStamps.latestId !== this.rafStamps.invokeId;
+            if (newFrame || !this.rafStamps.invokeId)
+                this.rafStamps.invokeId = this.rafStamps.latestId;
+            if (!this.pendingCanvasMutations.has(target)) {
+                this.pendingCanvasMutations.set(target, []);
             }
-            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);
+            this.pendingCanvasMutations.get(target).push(mutation);
         };
+        this.mutationCb = options.mutationCb;
+        this.mirror = options.mirror;
+        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();
@@ -3921,136 +2918,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);
-                const rules = Array.from(sheet.rules || CSSRule);
-                styles.push({
-                    styleId,
-                    rules: rules.map((r, index) => {
-                        return {
-                            rule: getCssRuleString(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,
@@ -4099,8 +2980,7 @@ function record(options = {}) {
                 e = plugin.eventProcessor(e);
             }
         }
-        if (packFn &&
-            !passEmitsToParent) {
+        if (packFn) {
             e = packFn(e);
         }
         return e;
@@ -4113,18 +2993,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;
@@ -4157,31 +3026,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,
@@ -4189,8 +3037,6 @@ function record(options = {}) {
         blockSelector,
         unblockSelector,
         mirror,
-        sampling: sampling.canvas,
-        dataURLOptions,
     });
     const shadowDomManager = new ShadowDomManager({
         mutationCb: wrappedMutationEmit,
@@ -4200,15 +3046,14 @@ function record(options = {}) {
             blockClass,
             blockSelector,
             unblockSelector,
-            maskAllText,
             maskTextClass,
-            unmaskTextClass,
             maskTextSelector,
             unmaskTextSelector,
+            maskInputSelector,
+            unmaskInputSelector,
             inlineStylesheet,
+            maskAllText,
             maskInputOptions,
-            dataURLOptions,
-            maskAttributeFn,
             maskTextFn,
             maskInputFn,
             recordCanvas,
@@ -4216,14 +3061,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: {
@@ -4232,35 +3075,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);
                 }
@@ -4269,27 +3104,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)({
@@ -4332,26 +3182,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,
@@ -4360,21 +3198,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,
@@ -4399,35 +3232,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) {
@@ -4435,7 +3255,7 @@ function record(options = {}) {
     }
 }
 record.addCustomEvent = (tag, payload) => {
-    if (!recording) {
+    if (!wrappedEmit) {
         throw new Error('please add custom event after start recording');
     }
     wrappedEmit(wrapEvent({
@@ -4450,7 +3270,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);
@@ -4946,25 +3766,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),
           },
         }
       : {},
@@ -5001,8 +3823,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. */
@@ -5740,6 +4562,7 @@ function makeSession(session) {
   const lastActivity = session.lastActivity || now;
   const segmentId = session.segmentId || 0;
   const sampled = session.sampled;
+  const shouldRefresh = typeof session.shouldRefresh === 'boolean' ? session.shouldRefresh : true;
   const previousSessionId = session.previousSessionId;
 
   return {
@@ -5748,6 +4571,7 @@ function makeSession(session) {
     lastActivity,
     segmentId,
     sampled,
+    shouldRefresh,
     previousSessionId,
   };
 }
@@ -5832,29 +4656,64 @@ function isExpired(
 /**
  * Checks to see if session is expired
  */
-function isSessionExpired(session, timeouts, targetTime = +new Date()) {
+function isSessionExpired(
+  session,
+  {
+    maxReplayDuration,
+    sessionIdleExpire,
+    targetTime = Date.now(),
+  },
+) {
   return (
     // First, check that maximum session length has not been exceeded
-    isExpired(session.started, timeouts.maxSessionLife, targetTime) ||
+    isExpired(session.started, maxReplayDuration, targetTime) ||
     // check that the idle timeout has not been exceeded (i.e. user has
     // performed an action within the last `sessionIdleExpire` ms)
-    isExpired(session.lastActivity, timeouts.sessionIdleExpire, targetTime)
+    isExpired(session.lastActivity, sessionIdleExpire, targetTime)
   );
 }
 
-/** If the session should be refreshed or not. */
-function shouldRefreshSession(session, timeouts) {
+/**
+ * Check a session, and either return it or a refreshed version of it.
+ * The refreshed version may be unsampled.
+ * You can check if the session has changed by comparing the session IDs.
+ */
+function maybeRefreshSession(
+  session,
+  {
+    traceInternals,
+    maxReplayDuration,
+    sessionIdleExpire,
+  }
+
+,
+  sessionOptions,
+) {
   // If not expired, all good, just keep the session
-  if (!isSessionExpired(session, timeouts)) {
-    return false;
+  if (!isSessionExpired(session, { sessionIdleExpire, maxReplayDuration })) {
+    return session;
   }
 
-  // If we are buffering & haven't ever flushed yet, always continue
-  if (session.sampled === 'buffer' && session.segmentId === 0) {
-    return false;
+  const isBuffering = session.sampled === 'buffer';
+
+  // If we are buffering & the session may be refreshed, just return it
+  if (isBuffering && session.shouldRefresh) {
+    return session;
+  }
+
+  // If we are buffering & the session may not be refreshed (=it was converted to session previously already)
+  // We return an unsampled new session
+  if (isBuffering) {
+    logInfoNextTick('[Replay] Session should not be refreshed', traceInternals);
+    return makeSession({ sampled: false });
   }
 
-  return true;
+  // Else, we are not buffering, and the session is expired, so we need to create a new one
+  logInfoNextTick('[Replay] Session has expired, creating new one...', traceInternals);
+
+  const newSession = createSession(sessionOptions, { previousSessionId: session.id });
+
+  return newSession;
 }
 
 /**
@@ -5862,29 +4721,26 @@ function shouldRefreshSession(session, timeouts) {
  * Returns a session that may be unsampled.
  */
 function loadOrCreateSession(
+  currentSession,
   {
-    timeouts,
     traceInternals,
-    previousSessionId,
+    sessionIdleExpire,
+    maxReplayDuration,
   }
 
 ,
   sessionOptions,
 ) {
-  const existingSession = sessionOptions.stickySession && fetchSession(traceInternals);
+  // If session exists and is passed, use it instead of always hitting session storage
+  const existingSession = currentSession || (sessionOptions.stickySession && fetchSession(traceInternals));
 
   // No session exists yet, just create a new one
   if (!existingSession) {
-    logInfoNextTick('[Replay] Creating new session', traceInternals);
-    return createSession(sessionOptions, { previousSessionId });
+    logInfoNextTick('[Replay] Created new session', traceInternals);
+    return createSession(sessionOptions);
   }
 
-  if (!shouldRefreshSession(existingSession, timeouts)) {
-    return existingSession;
-  }
-
-  logInfoNextTick('[Replay] Session in sessionStorage is expired, creating new one...');
-  return createSession(sessionOptions, { previousSessionId: existingSession.id });
+  return maybeRefreshSession(existingSession, { sessionIdleExpire, traceInternals, maxReplayDuration }, sessionOptions);
 }
 
 const ReplayEventTypeCustom = 5;
@@ -5923,9 +4779,9 @@ async function addEvent(
   }
 
   // Throw out events that are +60min from the initial timestamp
-  if (timestampInMs > replay.getContext().initialTimestamp + replay.timeouts.maxSessionLife) {
+  if (timestampInMs > replay.getContext().initialTimestamp + replay.getOptions().maxReplayDuration) {
     logInfo(
-      `[Replay] Skipping event with timestamp ${timestampInMs} because it is after maxSessionLife`,
+      `[Replay] Skipping event with timestamp ${timestampInMs} because it is after maxReplayDuration`,
       replay.getOptions()._experiments.traceInternals,
     );
     return null;
@@ -7784,7 +6640,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 ),
     },
   };
 }
@@ -8409,7 +7267,6 @@ class ReplayContainer  {
     this.timeouts = {
       sessionIdlePause: SESSION_IDLE_PAUSE_DURATION,
       sessionIdleExpire: SESSION_IDLE_EXPIRE_DURATION,
-      maxSessionLife: MAX_SESSION_LIFE,
     } ;
     this._lastActivity = Date.now();
     this._isEnabled = false;
@@ -8478,7 +7335,7 @@ class ReplayContainer  {
    * Initializes the plugin based on sampling configuration. Should not be
    * called outside of constructor.
    */
-   initializeSampling(previousSessionId) {
+   initializeSampling() {
     const { errorSampleRate, sessionSampleRate } = this._options;
 
     // If neither sample rate is > 0, then do nothing - user will need to call one of
@@ -8489,7 +7346,7 @@ class ReplayContainer  {
 
     // Otherwise if there is _any_ sample rate set, try to load an existing
     // session, or create a new one.
-    this._initializeSessionForSampling(previousSessionId);
+    this._initializeSessionForSampling();
 
     if (!this.session) {
       // This should not happen, something wrong has occurred
@@ -8534,8 +7391,10 @@ class ReplayContainer  {
     logInfoNextTick('[Replay] Starting replay in session mode', this._options._experiments.traceInternals);
 
     const session = loadOrCreateSession(
+      this.session,
       {
-        timeouts: this.timeouts,
+        maxReplayDuration: this._options.maxReplayDuration,
+        sessionIdleExpire: this.timeouts.sessionIdleExpire,
         traceInternals: this._options._experiments.traceInternals,
       },
       {
@@ -8563,8 +7422,10 @@ class ReplayContainer  {
     logInfoNextTick('[Replay] Starting replay in buffer mode', this._options._experiments.traceInternals);
 
     const session = loadOrCreateSession(
+      this.session,
       {
-        timeouts: this.timeouts,
+        sessionIdleExpire: this.timeouts.sessionIdleExpire,
+        maxReplayDuration: this._options.maxReplayDuration,
         traceInternals: this._options._experiments.traceInternals,
       },
       {
@@ -8630,18 +7491,15 @@ class ReplayContainer  {
       return;
     }
 
-    // We can't move `_isEnabled` after awaiting a flush, otherwise we can
-    // enter into an infinite loop when `stop()` is called while flushing.
-    this._isEnabled = false;
-
     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,
       );
 
+      // We can't move `_isEnabled` after awaiting a flush, otherwise we can
+      // enter into an infinite loop when `stop()` is called while flushing.
+      this._isEnabled = false;
       this._removeListeners();
       this.stopRecording();
 
@@ -8735,6 +7593,16 @@ class ReplayContainer  {
 
     // Once this session ends, we do not want to refresh it
     if (this.session) {
+      this.session.shouldRefresh = false;
+
+      // It's possible that the session lifespan is > max session lifespan
+      // because we have been buffering beyond max session lifespan (we ignore
+      // expiration given that `shouldRefresh` is true). Since we flip
+      // `shouldRefresh`, the session could be considered expired due to
+      // lifespan, which is not what we want. Update session start date to be
+      // the current timestamp, so that session is not considered to be
+      // expired. This means that max replay duration can be MAX_REPLAY_DURATION +
+      // (length of buffer), which we are ok with.
       this._updateUserActivity(activityTime);
       this._updateSessionActivity(activityTime);
       this._maybeSaveSession();
@@ -8990,7 +7858,6 @@ class ReplayContainer  {
 
     // Need to set as enabled before we start recording, as `record()` can trigger a flush with a new checkout
     this._isEnabled = true;
-    this._isPaused = false;
 
     this.startRecording();
   }
@@ -9007,16 +7874,17 @@ class ReplayContainer  {
   /**
    * Loads (or refreshes) the current session.
    */
-   _initializeSessionForSampling(previousSessionId) {
+   _initializeSessionForSampling() {
     // Whenever there is _any_ error sample rate, we always allow buffering
     // Because we decide on sampling when an error occurs, we need to buffer at all times if sampling for errors
     const allowBuffering = this._options.errorSampleRate > 0;
 
     const session = loadOrCreateSession(
+      this.session,
       {
-        timeouts: this.timeouts,
+        sessionIdleExpire: this.timeouts.sessionIdleExpire,
+        maxReplayDuration: this._options.maxReplayDuration,
         traceInternals: this._options._experiments.traceInternals,
-        previousSessionId,
       },
       {
         stickySession: this._options.stickySession,
@@ -9041,27 +7909,37 @@ class ReplayContainer  {
 
     const currentSession = this.session;
 
-    if (shouldRefreshSession(currentSession, this.timeouts)) {
-      void this._refreshSession(currentSession);
+    const newSession = maybeRefreshSession(
+      currentSession,
+      {
+        sessionIdleExpire: this.timeouts.sessionIdleExpire,
+        traceInternals: this._options._experiments.traceInternals,
+        maxReplayDuration: this._options.maxReplayDuration,
+      },
+      {
+        stickySession: Boolean(this._options.stickySession),
+        sessionSampleRate: this._options.sessionSampleRate,
+        allowBuffering: this._options.errorSampleRate > 0,
+      },
+    );
+
+    const isNew = newSession.id !== currentSession.id;
+
+    // If session was newly created (i.e. was not loaded from storage), then
+    // enable flag to create the root replay
+    if (isNew) {
+      this.setInitialState();
+      this.session = newSession;
+    }
+
+    if (!this.session.sampled) {
+      void this.stop({ reason: 'session not refreshed' });
       return false;
     }
 
     return true;
   }
 
-  /**
-   * Refresh a session with a new one.
-   * This stops the current session (without forcing a flush, as that would never work since we are expired),
-   * and then does a new sampling based on the refreshed session.
-   */
-   async _refreshSession(session) {
-    if (!this._isEnabled) {
-      return;
-    }
-    await this.stop({ reason: 'refresh session' });
-    this.initializeSampling(session.id);
-  }
-
   /**
    * Adds listeners to record events for the replay
    */
@@ -9171,7 +8049,10 @@ class ReplayContainer  {
       return;
     }
 
-    const expired = isSessionExpired(this.session, this.timeouts);
+    const expired = isSessionExpired(this.session, {
+      maxReplayDuration: this._options.maxReplayDuration,
+      ...this.timeouts,
+    });
 
     if (breadcrumb && !expired) {
       this._createCustomBreadcrumb(breadcrumb);
@@ -9318,9 +8199,7 @@ class ReplayContainer  {
    * Should never be called directly, only by `flush`
    */
    async _runFlush() {
-    const replayId = this.getSessionId();
-
-    if (!this.session || !this.eventBuffer || !replayId) {
+    if (!this.session || !this.eventBuffer) {
       (typeof __SENTRY_DEBUG__ === 'undefined' || __SENTRY_DEBUG__) && utils.logger.error('[Replay] No session or eventBuffer found to flush.');
       return;
     }
@@ -9340,32 +8219,30 @@ class ReplayContainer  {
       return;
     }
 
-    // if this changed in the meanwhile, e.g. because the session was refreshed or similar, we abort here
-    if (replayId !== this.getSessionId()) {
-      return;
-    }
-
     try {
       // This uses the data from the eventBuffer, so we need to call this before `finish()
       this._updateInitialTimestampFromEventBuffer();
 
+      // Note this empties the event buffer regardless of outcome of sending replay
+      const recordingData = await this.eventBuffer.finish();
+
       const timestamp = Date.now();
 
       // Check total duration again, to avoid sending outdated stuff
       // We leave 30s wiggle room to accomodate late flushing etc.
       // This _could_ happen when the browser is suspended during flushing, in which case we just want to stop
-      if (timestamp - this._context.initialTimestamp > this.timeouts.maxSessionLife + 30000) {
+      if (timestamp - this._context.initialTimestamp > this._options.maxReplayDuration + 30000) {
         throw new Error('Session is too long, not sending replay');
       }
 
+      // NOTE: Copy values from instance members, as it's possible they could
+      // change before the flush finishes.
+      const replayId = this.session.id;
       const eventContext = this._popEventContext();
       // Always increment segmentId regardless of outcome of sending replay
       const segmentId = this.session.segmentId++;
       this._maybeSaveSession();
 
-      // Note this empties the event buffer regardless of outcome of sending replay
-      const recordingData = await this.eventBuffer.finish();
-
       await sendReplay({
         replayId,
         recordingData,
@@ -9422,10 +8299,10 @@ class ReplayContainer  {
     // A flush is about to happen, cancel any queued flushes
     this._debouncedFlush.cancel();
 
-    // If session is too short, or too long (allow some wiggle room over maxSessionLife), do not send it
+    // If session is too short, or too long (allow some wiggle room over maxReplayDuration), do not send it
     // This _should_ not happen, but it may happen if flush is triggered due to a page activity change or similar
     const tooShort = duration < this._options.minReplayDuration;
-    const tooLong = duration > this.timeouts.maxSessionLife + 5000;
+    const tooLong = duration > this._options.maxReplayDuration + 5000;
     if (tooShort || tooLong) {
       logInfo(
         `[Replay] Session duration (${Math.floor(duration / 1000)}s) is too ${
@@ -9572,6 +8449,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,
@@ -9607,39 +8486,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"]';
 
@@ -9676,6 +8522,7 @@ class Replay  {
     flushMinDelay = DEFAULT_FLUSH_MIN_DELAY,
     flushMaxDelay = DEFAULT_FLUSH_MAX_DELAY,
     minReplayDuration = MIN_REPLAY_DURATION,
+    maxReplayDuration = MAX_REPLAY_DURATION,
     stickySession = true,
     useCompression = true,
     _experiments = {},
@@ -9698,7 +8545,6 @@ class Replay  {
     networkResponseHeaders = [],
 
     mask = [],
-    maskAttributes = ['title', 'placeholder'],
     unmask = [],
     block = [],
     unblock = [],
@@ -9722,36 +8568,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',
@@ -9761,22 +8596,13 @@ class Replay  {
       // collect fonts, but be aware that `sentry.io` needs to be an allowed
       // origin for playback
       collectFonts: true,
-      errorHandler: (err) => {
-        try {
-          // @ts-ignore 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 = {
       flushMinDelay,
       flushMaxDelay,
       minReplayDuration: Math.min(minReplayDuration, MIN_REPLAY_DURATION_LIMIT),
+      maxReplayDuration: Math.min(maxReplayDuration, MAX_REPLAY_DURATION),
       stickySession,
       sessionSampleRate,
       errorSampleRate,