@openreplay/tracker 4.0.1 → 4.0.2

package/cjs/modules/{adoptedStyleSheets.js → constructedStyleSheets.js}

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.styleSheetIDMap = exports.nextID = void 0;
 const messages_gen_js_1 = require("../app/messages.gen.js");
 const guards_js_1 = require("../app/guards.js");
 function hasAdoptedSS(node) {
@@ -7,6 +8,13 @@ function hasAdoptedSS(node) {
         // @ts-ignore
         !!node.adoptedStyleSheets);
 }
+// TODO: incapsulate to be init-ed on-start and join with cssrules.ts under one folder
+let _id = 0xf;
+function nextID() {
+    return _id++;
+}
+exports.nextID = nextID;
+exports.styleSheetIDMap = new Map();
 function default_1(app) {
     if (app === null) {
         return;
@@ -18,10 +26,9 @@ function default_1(app) {
         });
         return;
     }
-    let nextID = 0xf;
     const styleSheetIDMap = new Map();
     const adoptedStyleSheetsOwnings = new Map();
-    const updateAdoptedStyleSheets = (root) => {
+    const sendAdoptedStyleSheetsUpdate = (root) => {
         let nodeID = app.nodes.getID(root);
         if (root === document) {
             nodeID = 0; // main document doesn't have nodeID. ID count starts from the documentElement
@@ -39,7 +46,7 @@ function default_1(app) {
             let sheetID = styleSheetIDMap.get(s);
             const init = !sheetID;
             if (!sheetID) {
-                sheetID = ++nextID;
+                sheetID = nextID();
             }
             nowOwning.push(sheetID);
             if (!pastOwning.includes(sheetID)) {
@@ -65,12 +72,20 @@ function default_1(app) {
             Object.defineProperty(prototype, 'adoptedStyleSheets', Object.assign(Object.assign({}, nativeAdoptedStyleSheetsDescriptor), { set: function (value) {
                     // @ts-ignore
                     const retVal = nativeAdoptedStyleSheetsDescriptor.set.call(this, value);
-                    updateAdoptedStyleSheets(this);
+                    sendAdoptedStyleSheetsUpdate(this);
                     return retVal;
                 } }));
         }
     }
     const patchContext = (context) => {
+        // @ts-ignore
+        if (context.__openreplay_adpss_patched__) {
+            return;
+        }
+        else {
+            // @ts-ignore
+            context.__openreplay_adpss_patched__ = true;
+        }
         patchAdoptedStyleSheets(context.Document.prototype);
         patchAdoptedStyleSheets(context.ShadowRoot.prototype);
         //@ts-ignore TODO: configure ts (use necessary lib)
@@ -93,20 +108,6 @@ function default_1(app) {
             }
             return replaceSync.call(this, text);
         };
-        context.CSSStyleSheet.prototype.insertRule = function (rule, index = 0) {
-            const sheetID = styleSheetIDMap.get(this);
-            if (sheetID) {
-                app.send((0, messages_gen_js_1.AdoptedSSInsertRuleURLBased)(sheetID, rule, index, app.getBaseHref()));
-            }
-            return insertRule.call(this, rule, index);
-        };
-        context.CSSStyleSheet.prototype.deleteRule = function (index) {
-            const sheetID = styleSheetIDMap.get(this);
-            if (sheetID) {
-                app.send((0, messages_gen_js_1.AdoptedSSDeleteRule)(sheetID, index));
-            }
-            return deleteRule.call(this, index);
-        };
     };
     patchContext(window);
     app.observer.attachContextCallback(patchContext);
@@ -116,11 +117,11 @@ function default_1(app) {
     });
     // So far main Document is not triggered with nodeCallbacks
     app.attachStartCallback(() => {
-        updateAdoptedStyleSheets(document);
+        sendAdoptedStyleSheetsUpdate(document);
     });
     app.nodes.attachNodeCallback((node) => {
         if (hasAdoptedSS(node)) {
-            updateAdoptedStyleSheets(node);
+            sendAdoptedStyleSheetsUpdate(node);
         }
     });
 }

package/cjs/modules/cssrules.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const messages_gen_js_1 = require("../app/messages.gen.js");
 const guards_js_1 = require("../app/guards.js");
+const constructedStyleSheets_js_1 = require("./constructedStyleSheets.js");
 function default_1(app) {
     if (app === null) {
         return;
@@ -10,42 +11,88 @@ function default_1(app) {
         app.send((0, messages_gen_js_1.TechnicalInfo)('no_stylesheet_prototype_in_window', ''));
         return;
     }
-    const processOperation = app.safe((stylesheet, index, rule) => {
-        const sendMessage = typeof rule === 'string'
-            ? (nodeID) => app.send((0, messages_gen_js_1.CSSInsertRuleURLBased)(nodeID, rule, index, app.getBaseHref()))
-            : (nodeID) => app.send((0, messages_gen_js_1.CSSDeleteRule)(nodeID, index));
-        // TODO: Extend messages to maintain nested rules (CSSGroupingRule prototype, as well as CSSKeyframesRule)
-        if (stylesheet.ownerNode == null) {
-            throw new Error('Owner Node not found');
-        }
-        const nodeID = app.nodes.getID(stylesheet.ownerNode);
-        if (nodeID !== undefined) {
-            sendMessage(nodeID);
-        } // else error?
+    const sendInserDeleteRule = app.safe((sheet, index, rule) => {
+        const sheetID = constructedStyleSheets_js_1.styleSheetIDMap.get(sheet);
+        if (!sheetID) {
+            // OK-case. Sheet haven't been registered yet. Rules will be sent on registration.
+            return;
+        }
+        if (typeof rule === 'string') {
+            app.send((0, messages_gen_js_1.AdoptedSSInsertRuleURLBased)(sheetID, rule, index, app.getBaseHref()));
+        }
+        else {
+            app.send((0, messages_gen_js_1.AdoptedSSDeleteRule)(sheetID, index));
+        }
+    });
+    // TODO: proper rule insertion/removal (how?)
+    const sendReplaceGroupingRule = app.safe((rule) => {
+        let topmostRule = rule;
+        while (topmostRule.parentRule) {
+            topmostRule = topmostRule.parentRule;
+        }
+        const sheet = topmostRule.parentStyleSheet;
+        if (!sheet) {
+            app.debug.warn('No parent StyleSheet found for', topmostRule, rule);
+            return;
+        }
+        const sheetID = constructedStyleSheets_js_1.styleSheetIDMap.get(sheet);
+        if (!sheetID) {
+            app.debug.warn('No sheedID found for', sheet, constructedStyleSheets_js_1.styleSheetIDMap);
+            return;
+        }
+        const cssText = topmostRule.cssText;
+        const ruleList = sheet.cssRules;
+        const idx = Array.from(ruleList).indexOf(topmostRule);
+        if (idx >= 0) {
+            app.send((0, messages_gen_js_1.AdoptedSSInsertRuleURLBased)(sheetID, cssText, idx, app.getBaseHref()));
+            app.send((0, messages_gen_js_1.AdoptedSSDeleteRule)(sheetID, idx + 1)); // Remove previous clone
+        }
+        else {
+            app.debug.warn('Rule index not found in', sheet, topmostRule);
+        }
     });
     const patchContext = (context) => {
         const { insertRule, deleteRule } = context.CSSStyleSheet.prototype;
+        const { insertRule: groupInsertRule, deleteRule: groupDeleteRule } = context.CSSGroupingRule.prototype;
         context.CSSStyleSheet.prototype.insertRule = function (rule, index = 0) {
-            processOperation(this, index, rule);
+            sendInserDeleteRule(this, index, rule);
             return insertRule.call(this, rule, index);
         };
         context.CSSStyleSheet.prototype.deleteRule = function (index) {
-            processOperation(this, index);
+            sendInserDeleteRule(this, index);
             return deleteRule.call(this, index);
         };
+        context.CSSGroupingRule.prototype.insertRule = function (rule, index = 0) {
+            const result = groupInsertRule.call(this, rule, index);
+            sendReplaceGroupingRule(this);
+            return result;
+        };
+        context.CSSGroupingRule.prototype.deleteRule = function (index = 0) {
+            const result = groupDeleteRule.call(this, index);
+            sendReplaceGroupingRule(this);
+            return result;
+        };
     };
     patchContext(window);
     app.observer.attachContextCallback(patchContext);
     app.nodes.attachNodeCallback((node) => {
-        if (!(0, guards_js_1.hasTag)(node, 'STYLE') || !node.sheet) {
+        if (!((0, guards_js_1.hasTag)(node, 'STYLE') || (0, guards_js_1.hasTag)(node, 'style')) || !node.sheet) {
             return;
         }
         if (node.textContent !== null && node.textContent.trim().length > 0) {
-            return; // Only fully virtual sheets maintained so far
+            return; // Non-virtual styles captured by the observer as a text
+        }
+        const nodeID = app.nodes.getID(node);
+        if (!nodeID) {
+            return;
         }
-        const rules = node.sheet.cssRules;
+        const sheet = node.sheet;
+        const sheetID = (0, constructedStyleSheets_js_1.nextID)();
+        constructedStyleSheets_js_1.styleSheetIDMap.set(sheet, sheetID);
+        app.send((0, messages_gen_js_1.AdoptedSSAddOwner)(sheetID, nodeID));
+        const rules = sheet.cssRules;
         for (let i = 0; i < rules.length; i++) {
-            processOperation(node.sheet, i, rules[i].cssText);
+            sendInserDeleteRule(sheet, i, rules[i].cssText);
         }
     });
 }

package/cjs/modules/img.js

@@ -10,7 +10,7 @@ function resolveURL(url, location = document.location) {
     }
     else if (url.startsWith('http://') ||
         url.startsWith('https://') ||
-        url.startsWith('data:') // any other possible value here?
+        url.startsWith('data:') // any other possible value here? https://bugzilla.mozilla.org/show_bug.cgi?id=1758035
     ) {
         return url;
     }
@@ -18,6 +18,10 @@ function resolveURL(url, location = document.location) {
         return location.origin + location.pathname + url;
     }
 }
+// https://bugzilla.mozilla.org/show_bug.cgi?id=1607081
+function isSVGInFireFox(url) {
+    return utils_js_1.IS_FIREFOX && (url.startsWith('data:image/svg+xml') || url.match(/.svg$|/i));
+}
 const PLACEHOLDER_SRC = 'https://static.openreplay.com/tracker/placeholder.jpeg';
 function default_1(app) {
     function sendPlaceholder(id, node) {
@@ -42,30 +46,34 @@ function default_1(app) {
         app.send((0, messages_gen_js_1.SetNodeAttribute)(id, 'srcset', resolvedSrcset));
     };
     const sendSrc = function (id, img) {
-        const src = img.src;
-        app.send((0, messages_gen_js_1.SetNodeAttributeURLBased)(id, 'src', src, app.getBaseHref()));
+        if (img.src.length > utils_js_1.MAX_STR_LEN) {
+            sendPlaceholder(id, img);
+        }
+        app.send((0, messages_gen_js_1.SetNodeAttributeURLBased)(id, 'src', img.src, app.getBaseHref()));
     };
-    const sendImgAttrs = app.safe(function () {
-        const id = app.nodes.getID(this);
+    const sendImgError = app.safe(function (img) {
+        const resolvedSrc = resolveURL(img.src || ''); // Src type is null sometimes. - is it true?
+        if ((0, utils_js_1.isURL)(resolvedSrc)) {
+            app.send((0, messages_gen_js_1.ResourceTiming)((0, utils_js_1.timestamp)(), 0, 0, 0, 0, 0, resolvedSrc, 'img'));
+        }
+    });
+    const sendImgAttrs = app.safe(function (img) {
+        const id = app.nodes.getID(img);
         if (id === undefined) {
             return;
         }
-        const { src, complete, naturalWidth, naturalHeight, srcset } = this;
-        if (!complete) {
+        if (!img.complete) {
             return;
         }
-        const resolvedSrc = resolveURL(src || ''); // Src type is null sometimes. - is it true?
-        if (naturalWidth === 0 && naturalHeight === 0) {
-            if ((0, utils_js_1.isURL)(resolvedSrc)) {
-                app.send((0, messages_gen_js_1.ResourceTiming)((0, utils_js_1.timestamp)(), 0, 0, 0, 0, 0, resolvedSrc, 'img'));
-            }
+        if (img.naturalHeight === 0 && img.naturalWidth === 0 && !isSVGInFireFox(img.src)) {
+            sendImgError(img);
         }
-        else if (resolvedSrc.length >= 1e5 || app.sanitizer.isMasked(id)) {
-            sendPlaceholder(id, this);
+        else if (app.sanitizer.isHidden(id) || app.sanitizer.isObscured(id)) {
+            sendPlaceholder(id, img);
         }
         else {
-            sendSrc(id, this);
-            sendSrcset(id, this);
+            sendSrc(id, img);
+            sendSrcset(id, img);
         }
     });
     const observer = new MutationObserver((mutations) => {
@@ -92,9 +100,9 @@ function default_1(app) {
         if (!(0, guards_js_1.hasTag)(node, 'IMG')) {
             return;
         }
-        app.nodes.attachElementListener('error', node, sendImgAttrs.bind(node));
-        app.nodes.attachElementListener('load', node, sendImgAttrs.bind(node));
-        sendImgAttrs.call(node);
+        app.nodes.attachNodeListener(node, 'error', () => sendImgError(node));
+        app.nodes.attachNodeListener(node, 'load', () => sendImgAttrs(node));
+        sendImgAttrs(node);
         observer.observe(node, { attributes: true, attributeFilter: ['src', 'srcset'] });
     });
 }

package/cjs/modules/input.js

@@ -80,10 +80,10 @@ function default_1(app, opts) {
     function sendInputValue(id, node) {
         let value = node.value;
         let inputMode = options.defaultInputMode;
-        if (node.type === 'password' || (0, utils_js_1.hasOpenreplayAttribute)(node, 'hidden')) {
+        if (node.type === 'password' || app.sanitizer.isHidden(id)) {
             inputMode = 2 /* Hidden */;
         }
-        else if ((0, utils_js_1.hasOpenreplayAttribute)(node, 'obscured') ||
+        else if (app.sanitizer.isObscured(id) ||
             (inputMode === 0 /* Plain */ &&
                 ((options.obscureInputNumbers && node.type !== 'date' && /\d\d\d\d/.test(value)) ||
                     (options.obscureInputDates && node.type === 'date') ||

package/cjs/modules/mouse.js

@@ -98,11 +98,13 @@ function default_1(app) {
     let mousePositionChanged = false;
     let mouseTarget = null;
     let mouseTargetTime = 0;
+    let selectorMap = {};
     app.attachStopCallback(() => {
         mousePositionX = -1;
         mousePositionY = -1;
         mousePositionChanged = false;
         mouseTarget = null;
+        selectorMap = {};
     });
     const sendMouseMove = () => {
         if (mousePositionChanged) {
@@ -110,25 +112,27 @@ function default_1(app) {
             mousePositionChanged = false;
         }
     };
-    const patchDocument = (document) => {
-        const selectorMap = {};
+    const patchDocument = (document, topframe = false) => {
         function getSelector(id, target) {
             return (selectorMap[id] = selectorMap[id] || _getSelector(target, document));
         }
-        app.attachEventListener(document.documentElement, 'mouseover', (e) => {
+        const attachListener = topframe
+            ? app.attachEventListener.bind(app) // attached/removed on start/stop
+            : app.nodes.attachNodeListener.bind(app.nodes); // attached/removed on node register/unregister
+        attachListener(document.documentElement, 'mouseover', (e) => {
             const target = getTarget(e.target, document);
             if (target !== mouseTarget) {
                 mouseTarget = target;
                 mouseTargetTime = performance.now();
             }
         });
-        app.attachEventListener(document, 'mousemove', (e) => {
-            const { top, left } = app.observer.getDocumentOffset(document);
+        attachListener(document, 'mousemove', (e) => {
+            const [left, top] = app.observer.getDocumentOffset(document); // MBTODO?: document-id related message
             mousePositionX = e.clientX + left;
             mousePositionY = e.clientY + top;
             mousePositionChanged = true;
         }, false);
-        app.attachEventListener(document, 'click', (e) => {
+        attachListener(document, 'click', (e) => {
             const target = getTarget(e.target, document);
             if ((!e.clientX && !e.clientY) || target === null) {
                 return;
@@ -146,7 +150,7 @@ function default_1(app) {
             patchDocument(node);
         }
     });
-    patchDocument(document);
+    patchDocument(document, true);
     app.ticker.attach(sendMouseMove, 10);
 }
 exports.default = default_1;

package/cjs/modules/scroll.js

@@ -2,21 +2,34 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const messages_gen_js_1 = require("../app/messages.gen.js");
 const guards_js_1 = require("../app/guards.js");
+function getDocumentScroll(doc) {
+    const win = doc.defaultView;
+    return [
+        (win && win.pageXOffset) ||
+            (doc.documentElement && doc.documentElement.scrollLeft) ||
+            (doc.body && doc.body.scrollLeft) ||
+            0,
+        (win && win.pageYOffset) ||
+            (doc.documentElement && doc.documentElement.scrollTop) ||
+            (doc.body && doc.body.scrollTop) ||
+            0,
+    ];
+}
 function default_1(app) {
     let documentScroll = false;
     const nodeScroll = new Map();
     function setNodeScroll(target) {
-        if (target instanceof Element) {
+        if (!(0, guards_js_1.isNode)(target)) {
+            return;
+        }
+        if ((0, guards_js_1.isElementNode)(target)) {
             nodeScroll.set(target, [target.scrollLeft, target.scrollTop]);
         }
+        if ((0, guards_js_1.isDocument)(target)) {
+            nodeScroll.set(target, getDocumentScroll(target));
+        }
     }
-    const sendSetViewportScroll = app.safe(() => app.send((0, messages_gen_js_1.SetViewportScroll)(window.pageXOffset ||
-        (document.documentElement && document.documentElement.scrollLeft) ||
-        (document.body && document.body.scrollLeft) ||
-        0, window.pageYOffset ||
-        (document.documentElement && document.documentElement.scrollTop) ||
-        (document.body && document.body.scrollTop) ||
-        0)));
+    const sendSetViewportScroll = app.safe(() => app.send((0, messages_gen_js_1.SetViewportScroll)(...getDocumentScroll(document))));
     const sendSetNodeScroll = app.safe((s, node) => {
         const id = app.nodes.getID(node);
         if (id !== undefined) {
@@ -29,12 +42,19 @@ function default_1(app) {
         nodeScroll.clear();
     });
     app.nodes.attachNodeCallback((node, isStart) => {
-        if (isStart && (0, guards_js_1.isElementNode)(node) && node.scrollLeft + node.scrollTop > 0) {
-            nodeScroll.set(node, [node.scrollLeft, node.scrollTop]);
+        // MBTODO: iterate over all the nodes on start instead of using isStart hack
+        if (isStart) {
+            if ((0, guards_js_1.isElementNode)(node) && node.scrollLeft + node.scrollTop > 0) {
+                nodeScroll.set(node, [node.scrollLeft, node.scrollTop]);
+            }
+            else if ((0, guards_js_1.isDocument)(node)) {
+                // DRY somehow?
+                nodeScroll.set(node, getDocumentScroll(node));
+            }
         }
-        else if ((0, guards_js_1.isRootNode)(node)) {
+        if ((0, guards_js_1.isRootNode)(node)) {
             // scroll is not-composed event (https://javascript.info/shadow-dom-events)
-            app.attachEventListener(node, 'scroll', (e) => {
+            app.nodes.attachNodeListener(node, 'scroll', (e) => {
                 setNodeScroll(e.target);
             });
         }

package/cjs/utils.d.ts

@@ -1,9 +1,11 @@
-export declare function timestamp(): number;
+export declare const IN_BROWSER: boolean;
+export declare const IS_FIREFOX: false | RegExpMatchArray | null;
+export declare const MAX_STR_LEN = 100000;
+export declare const timestamp: () => number;
 export declare const stars: (str: string) => string;
 export declare function normSpaces(str: string): string;
 export declare function isURL(s: string): boolean;
-export declare const IN_BROWSER: boolean;
 export declare const DOCS_HOST = "https://docs.openreplay.com";
 export declare function deprecationWarn(nameOfFeature: string, useInstead: string, docsPath?: string): void;
 export declare function getLabelAttribute(e: Element): string | null;
-export declare function hasOpenreplayAttribute(e: Element, name: string): boolean;
+export declare function hasOpenreplayAttribute(e: Element, attr: string): boolean;

package/cjs/utils.js

@@ -1,10 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.hasOpenreplayAttribute = exports.getLabelAttribute = exports.deprecationWarn = exports.DOCS_HOST = exports.IN_BROWSER = exports.isURL = exports.normSpaces = exports.stars = exports.timestamp = void 0;
-function timestamp() {
-    return Math.round(performance.now()) + performance.timing.navigationStart;
-}
-exports.timestamp = timestamp;
+exports.hasOpenreplayAttribute = exports.getLabelAttribute = exports.deprecationWarn = exports.DOCS_HOST = exports.isURL = exports.normSpaces = exports.stars = exports.timestamp = exports.MAX_STR_LEN = exports.IS_FIREFOX = exports.IN_BROWSER = void 0;
+const DEPRECATED_ATTRS = { htmlmasked: 'hidden', masked: 'obscured' };
+exports.IN_BROWSER = !(typeof window === 'undefined');
+exports.IS_FIREFOX = exports.IN_BROWSER && navigator.userAgent.match(/firefox|fxios/i);
+exports.MAX_STR_LEN = 1e5;
+const navigationStart = (exports.IN_BROWSER && performance.timing.navigationStart) || performance.timeOrigin;
+// performance.now() is buggy in some browsers
+exports.timestamp = exports.IN_BROWSER && performance.now() && navigationStart
+    ? () => Math.round(performance.now() + navigationStart)
+    : () => Date.now();
 exports.stars = 'repeat' in String.prototype
     ? (str) => '*'.repeat(str.length)
     : (str) => str.replace(/./g, '*');
@@ -17,7 +22,6 @@ function isURL(s) {
     return s.startsWith('https://') || s.startsWith('http://');
 }
 exports.isURL = isURL;
-exports.IN_BROWSER = !(typeof window === 'undefined');
 // TODO: JOIN IT WITH LOGGER somehow (use logging decorators?); Don't forget about index.js loggin when there is no logger instance.
 exports.DOCS_HOST = 'https://docs.openreplay.com';
 const warnedFeatures = {};
@@ -41,14 +45,15 @@ function getLabelAttribute(e) {
     return value;
 }
 exports.getLabelAttribute = getLabelAttribute;
-function hasOpenreplayAttribute(e, name) {
-    const newName = `data-openreplay-${name}`;
+function hasOpenreplayAttribute(e, attr) {
+    const newName = `data-openreplay-${attr}`;
     if (e.hasAttribute(newName)) {
-        return true;
-    }
-    const oldName = `data-asayer-${name}`;
-    if (e.hasAttribute(oldName)) {
-        deprecationWarn(`"${oldName}" attribute`, `"${newName}" attribute`, '/installation/sanitize-data');
+        // @ts-ignore
+        if (DEPRECATED_ATTRS[attr]) {
+            deprecationWarn(`"${newName}" attribute`, 
+            // @ts-ignore
+            `"${DEPRECATED_ATTRS[attr]}" attribute`, '/installation/sanitize-data');
+        }
         return true;
     }
     return false;

package/lib/app/guards.d.ts

@@ -1,3 +1,4 @@
+export declare function isNode(sth: any): sth is Node;
 export declare function isSVGElement(node: Element): node is SVGElement;
 export declare function isElementNode(node: Node): node is Element;
 export declare function isTextNode(node: Node): node is Text;

package/lib/app/guards.js

@@ -1,3 +1,7 @@
+//@ts-ignore
+export function isNode(sth) {
+    return !!sth && sth.nodeType != null;
+}
 export function isSVGElement(node) {
     return node.namespaceURI === 'http://www.w3.org/2000/svg';
 }

package/lib/app/index.d.ts

@@ -77,7 +77,7 @@ export default class App {
     private _debug;
     send(message: Message, urgent?: boolean): void;
     private commit;
-    safe<T extends (...args: any[]) => void>(fn: T): T;
+    safe<T extends (this: any, ...args: any[]) => void>(fn: T): T;
     attachCommitCallback(cb: CommitCallback): void;
     attachStartCallback(cb: StartCallback, useSafe?: boolean): void;
     attachStopCallback(cb: () => any, useSafe?: boolean): void;