@openreplay/tracker 4.0.1 → 4.1.0

package/lib/modules/cssrules.js

@@ -1,5 +1,7 @@
-import { CSSInsertRuleURLBased, CSSDeleteRule, TechnicalInfo } from '../app/messages.gen.js';
+import { AdoptedSSInsertRuleURLBased, // TODO: rename to common StyleSheet names
+AdoptedSSDeleteRule, AdoptedSSAddOwner, TechnicalInfo, } from '../app/messages.gen.js';
 import { hasTag } from '../app/guards.js';
+import { nextID, styleSheetIDMap } from './constructedStyleSheets.js';
 export default function (app) {
     if (app === null) {
         return;
@@ -8,42 +10,88 @@ export default function (app) {
         app.send(TechnicalInfo('no_stylesheet_prototype_in_window', ''));
         return;
     }
-    const processOperation = app.safe((stylesheet, index, rule) => {
-        const sendMessage = typeof rule === 'string'
-            ? (nodeID) => app.send(CSSInsertRuleURLBased(nodeID, rule, index, app.getBaseHref()))
-            : (nodeID) => app.send(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 = 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(AdoptedSSInsertRuleURLBased(sheetID, rule, index, app.getBaseHref()));
+        }
+        else {
+            app.send(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 = styleSheetIDMap.get(sheet);
+        if (!sheetID) {
+            app.debug.warn('No sheedID found for', sheet, styleSheetIDMap);
+            return;
+        }
+        const cssText = topmostRule.cssText;
+        const ruleList = sheet.cssRules;
+        const idx = Array.from(ruleList).indexOf(topmostRule);
+        if (idx >= 0) {
+            app.send(AdoptedSSInsertRuleURLBased(sheetID, cssText, idx, app.getBaseHref()));
+            app.send(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 (!hasTag(node, 'STYLE') || !node.sheet) {
+        if (!(hasTag(node, 'STYLE') || 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 = nextID();
+        styleSheetIDMap.set(sheet, sheetID);
+        app.send(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/lib/modules/img.js

@@ -1,4 +1,4 @@
-import { timestamp, isURL } from '../utils.js';
+import { timestamp, isURL, IS_FIREFOX, MAX_STR_LEN } from '../utils.js';
 import { ResourceTiming, SetNodeAttributeURLBased, SetNodeAttribute } from '../app/messages.gen.js';
 import { hasTag } from '../app/guards.js';
 function resolveURL(url, location = document.location) {
@@ -8,7 +8,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;
     }
@@ -16,6 +16,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 IS_FIREFOX && (url.startsWith('data:image/svg+xml') || url.match(/.svg$|/i));
+}
 const PLACEHOLDER_SRC = 'https://static.openreplay.com/tracker/placeholder.jpeg';
 export default function (app) {
     function sendPlaceholder(id, node) {
@@ -40,30 +44,34 @@ export default function (app) {
         app.send(SetNodeAttribute(id, 'srcset', resolvedSrcset));
     };
     const sendSrc = function (id, img) {
-        const src = img.src;
-        app.send(SetNodeAttributeURLBased(id, 'src', src, app.getBaseHref()));
+        if (img.src.length > MAX_STR_LEN) {
+            sendPlaceholder(id, img);
+        }
+        app.send(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 (isURL(resolvedSrc)) {
+            app.send(ResourceTiming(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 (isURL(resolvedSrc)) {
-                app.send(ResourceTiming(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) => {
@@ -90,9 +98,9 @@ export default function (app) {
         if (!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/lib/modules/input.js

@@ -1,4 +1,4 @@
-import { normSpaces, IN_BROWSER, getLabelAttribute, hasOpenreplayAttribute } from '../utils.js';
+import { normSpaces, IN_BROWSER, getLabelAttribute } from '../utils.js';
 import { hasTag } from '../app/guards.js';
 import { SetInputTarget, SetInputValue, SetInputChecked } from '../app/messages.gen.js';
 const INPUT_TYPES = ['text', 'password', 'email', 'search', 'number', 'range', 'date'];
@@ -76,10 +76,10 @@ export default function (app, opts) {
     function sendInputValue(id, node) {
         let value = node.value;
         let inputMode = options.defaultInputMode;
-        if (node.type === 'password' || hasOpenreplayAttribute(node, 'hidden')) {
+        if (node.type === 'password' || app.sanitizer.isHidden(id)) {
             inputMode = 2 /* Hidden */;
         }
-        else if (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/lib/modules/mouse.js

@@ -96,11 +96,13 @@ export default function (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) {
@@ -108,25 +110,27 @@ export default function (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;
@@ -144,6 +148,6 @@ export default function (app) {
             patchDocument(node);
         }
     });
-    patchDocument(document);
+    patchDocument(document, true);
     app.ticker.attach(sendMouseMove, 10);
 }

package/lib/modules/scroll.js

@@ -1,20 +1,33 @@
 import { SetViewportScroll, SetNodeScroll } from '../app/messages.gen.js';
-import { isElementNode, isRootNode } from '../app/guards.js';
+import { isNode, isElementNode, isRootNode, isDocument } from '../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,
+    ];
+}
 export default function (app) {
     let documentScroll = false;
     const nodeScroll = new Map();
     function setNodeScroll(target) {
-        if (target instanceof Element) {
+        if (!isNode(target)) {
+            return;
+        }
+        if (isElementNode(target)) {
             nodeScroll.set(target, [target.scrollLeft, target.scrollTop]);
         }
+        if (isDocument(target)) {
+            nodeScroll.set(target, getDocumentScroll(target));
+        }
     }
-    const sendSetViewportScroll = app.safe(() => app.send(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(SetViewportScroll(...getDocumentScroll(document))));
     const sendSetNodeScroll = app.safe((s, node) => {
         const id = app.nodes.getID(node);
         if (id !== undefined) {
@@ -27,12 +40,19 @@ export default function (app) {
         nodeScroll.clear();
     });
     app.nodes.attachNodeCallback((node, isStart) => {
-        if (isStart && 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 (isElementNode(node) && node.scrollLeft + node.scrollTop > 0) {
+                nodeScroll.set(node, [node.scrollLeft, node.scrollTop]);
+            }
+            else if (isDocument(node)) {
+                // DRY somehow?
+                nodeScroll.set(node, getDocumentScroll(node));
+            }
         }
-        else if (isRootNode(node)) {
+        if (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/lib/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/lib/utils.js

@@ -1,6 +1,12 @@
-export function timestamp() {
-    return Math.round(performance.now()) + performance.timing.navigationStart;
-}
+const DEPRECATED_ATTRS = { htmlmasked: 'hidden', masked: 'obscured' };
+export const IN_BROWSER = !(typeof window === 'undefined');
+export const IS_FIREFOX = IN_BROWSER && navigator.userAgent.match(/firefox|fxios/i);
+export const MAX_STR_LEN = 1e5;
+const navigationStart = (IN_BROWSER && performance.timing.navigationStart) || performance.timeOrigin;
+// performance.now() is buggy in some browsers
+export const timestamp = IN_BROWSER && performance.now() && navigationStart
+    ? () => Math.round(performance.now() + navigationStart)
+    : () => Date.now();
 export const stars = 'repeat' in String.prototype
     ? (str) => '*'.repeat(str.length)
     : (str) => str.replace(/./g, '*');
@@ -11,7 +17,6 @@ export function normSpaces(str) {
 export function isURL(s) {
     return s.startsWith('https://') || s.startsWith('http://');
 }
-export const 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.
 export const DOCS_HOST = 'https://docs.openreplay.com';
 const warnedFeatures = {};
@@ -33,14 +38,15 @@ export function getLabelAttribute(e) {
     }
     return value;
 }
-export function hasOpenreplayAttribute(e, name) {
-    const newName = `data-openreplay-${name}`;
+export 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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openreplay/tracker",
   "description": "The OpenReplay tracker main package",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "keywords": [
     "logging",
     "replay"

package/cjs/modules/adoptedStyleSheets.d.ts

@@ -1,2 +0,0 @@
-import type App from '../app/index.js';
-export default function (app: App | null): void;

package/lib/modules/adoptedStyleSheets.d.ts

@@ -1,2 +0,0 @@
-import type App from '../app/index.js';
-export default function (app: App | null): void;