clarity-js 0.7.53 → 0.7.57

package/build/clarity.js

@@ -85,11 +85,11 @@ function setup() {
         w[c] = function () {
             (w[c].q = w[c].q || []).push(arguments);
             // if the start function was called, don't queue it and instead process the queue
-            arguments[0] === "start" && w[c].q.unshift(w[c].q.pop()) && process$7();
+            arguments[0] === "start" && w[c].q.unshift(w[c].q.pop()) && process$8();
         };
     }
 }
-function process$7() {
+function process$8() {
     if (typeof w !== "undefined") {
         // Do not execute or reset global "clarity" variable if a version of Clarity is already running on the page
         if (w[c] && w[c].v) {
@@ -138,6 +138,7 @@ var config$2 = {
     throttleDom: true,
     conversions: false,
     longTask: 30,
+    includeSubdomains: true,
 };
 
 function api(method) {
@@ -165,7 +166,7 @@ function stop$F() {
     startTime = 0;
 }
 
-var version$1 = "0.7.53";
+var version$1 = "0.7.57";
 
 // tslint:disable: no-bitwise
 function hash (input, precision) {
@@ -542,16 +543,16 @@ function clearTimeout(handle) {
 var data$h;
 var last = 0;
 var interval = 0;
-var timeout$6 = null;
+var timeout$7 = null;
 function start$F() {
     interval = 60000 /* Setting.PingInterval */;
     last = 0;
 }
 function reset$q() {
-    if (timeout$6) {
-        clearTimeout(timeout$6);
+    if (timeout$7) {
+        clearTimeout(timeout$7);
     }
-    timeout$6 = setTimeout(ping, interval);
+    timeout$7 = setTimeout(ping, interval);
     last = time();
 }
 function ping() {
@@ -559,14 +560,14 @@ function ping() {
     data$h = { gap: now - last };
     encode$1(25 /* Event.Ping */);
     if (data$h.gap < 300000 /* Setting.PingTimeout */) {
-        timeout$6 = setTimeout(ping, interval);
+        timeout$7 = setTimeout(ping, interval);
     }
     else {
         suspend();
     }
 }
 function stop$C() {
-    clearTimeout(timeout$6);
+    clearTimeout(timeout$7);
     last = 0;
     interval = 0;
 }
@@ -1158,7 +1159,7 @@ function add(node, parent, data, source) {
     };
     privacy(node, values[id], parentValue);
     updateSelector(values[id]);
-    size$1(values[id]);
+    updateImageSize(values[id]);
     track$6(id, source);
 }
 function update$1(node, parent, data, source) {
@@ -1235,6 +1236,7 @@ function iframe(node) {
     return doc && iframeMap.has(doc) ? iframeMap.get(doc) : null;
 }
 function privacy(node, value, parent) {
+    var _a;
     var data = value.data;
     var metadata = value.metadata;
     var current = metadata.privacy;
@@ -1279,6 +1281,12 @@ function privacy(node, value, parent) {
             // In a mode where we mask sensitive information by default, look through class names to aggressively mask content
             metadata.privacy = inspect(attributes["class" /* Constant.Class */], maskText, metadata);
             break;
+        case tag === "IMG" /* Constant.ImageTag */:
+            // Mask images with blob src as it is not publicly available anyway.
+            if ((_a = attributes.src) === null || _a === void 0 ? void 0 : _a.startsWith('blob:')) {
+                metadata.privacy = 3 /* Privacy.TextImage */;
+            }
+            break;
     }
 }
 function inspect(input, lookup, metadata) {
@@ -1385,9 +1393,17 @@ function removeNodeFromNodesMap(id) {
         }
     }
 }
-function size$1(value) {
+function updateImageSize(value) {
     // If this element is a image node, and is masked, then track box model for the current element
     if (value.data.tag === "IMG" /* Constant.ImageTag */ && value.metadata.privacy === 3 /* Privacy.TextImage */) {
+        var img_1 = getNode(value.id);
+        // We will not capture the natural image dimensions until it loads. 
+        if (img_1 && (!img_1.complete || img_1.naturalWidth === 0)) {
+            // This will trigger mutation to update the original width and height after image loads.
+            bind(img_1, 'load', function () {
+                img_1.setAttribute('data-clarity-loaded', "".concat(shortid()));
+            });
+        }
         value.metadata.size = [];
     }
 }
@@ -1898,7 +1914,7 @@ function stop$s() {
     reset$h();
 }
 
-var timeout$5 = null;
+var timeout$6 = null;
 var state$6 = [];
 function start$t() {
     reset$g();
@@ -1924,23 +1940,23 @@ function recompute$6(evt) {
             state$6.pop();
         }
         state$6.push({ time: time(evt), event: 27 /* Event.Input */, data: data });
-        clearTimeout(timeout$5);
-        timeout$5 = setTimeout(process$6, 1000 /* Setting.InputLookAhead */, 27 /* Event.Input */);
+        clearTimeout(timeout$6);
+        timeout$6 = setTimeout(process$7, 1000 /* Setting.InputLookAhead */, 27 /* Event.Input */);
     }
 }
-function process$6(event) {
+function process$7(event) {
     schedule$1(encode$3.bind(this, event));
 }
 function reset$g() {
     state$6 = [];
 }
 function stop$r() {
-    clearTimeout(timeout$5);
+    clearTimeout(timeout$6);
     reset$g();
 }
 
 var state$5 = [];
-var timeout$4 = null;
+var timeout$5 = null;
 function start$s() {
     reset$f();
 }
@@ -2005,16 +2021,16 @@ function handler$2(current) {
                 state$5.pop();
             }
             state$5.push(current);
-            clearTimeout(timeout$4);
-            timeout$4 = setTimeout(process$5, 500 /* Setting.LookAhead */, current.event);
+            clearTimeout(timeout$5);
+            timeout$5 = setTimeout(process$6, 500 /* Setting.LookAhead */, current.event);
             break;
         default:
             state$5.push(current);
-            process$5(current.event);
+            process$6(current.event);
             break;
     }
 }
-function process$5(event) {
+function process$6(event) {
     schedule$1(encode$3.bind(this, event));
 }
 function reset$f() {
@@ -2029,14 +2045,15 @@ function similar$1(last, current) {
     return current.event === last.event && match && distance < 20 /* Setting.Distance */ && gap < 25 /* Setting.Interval */;
 }
 function stop$q() {
-    clearTimeout(timeout$4);
+    clearTimeout(timeout$5);
     // Send out any pending pointer events in the pipeline
     if (state$5.length > 0) {
-        process$5(state$5[state$5.length - 1].event);
+        process$6(state$5[state$5.length - 1].event);
     }
 }
 
 var data$b;
+var timeout$4 = null;
 function start$r() {
     bind(window, "resize", recompute$5);
     recompute$5();
@@ -2049,10 +2066,15 @@ function recompute$5() {
         width: de && "clientWidth" in de ? Math.min(de.clientWidth, window.innerWidth) : window.innerWidth,
         height: de && "clientHeight" in de ? Math.min(de.clientHeight, window.innerHeight) : window.innerHeight,
     };
-    encode$3(11 /* Event.Resize */);
+    clearTimeout(timeout$4);
+    timeout$4 = setTimeout(process$5, 500 /* Setting.LookAhead */, 11 /* Event.Resize */);
+}
+function process$5(event) {
+    schedule$1(encode$3.bind(this, event));
 }
 function reset$e() {
     data$b = null;
+    clearTimeout(timeout$4);
 }
 function stop$p() {
     reset$e();
@@ -2351,6 +2373,7 @@ function traverse (root, timer, source, timestamp) {
 
 var observers = [];
 var mutations = [];
+var throttledMutations = {};
 var insertRule = null;
 var deleteRule = null;
 var attachShadow = null;
@@ -2358,6 +2381,7 @@ var mediaInsertRule = null;
 var mediaDeleteRule = null;
 var queue$2 = [];
 var timeout$1 = null;
+var throttleDelay = null;
 var activePeriod = null;
 var history$4 = {};
 function start$k() {
@@ -2461,6 +2485,7 @@ function stop$i() {
     observers = [];
     history$4 = {};
     mutations = [];
+    throttledMutations = [];
     queue$2 = [];
     activePeriod = 0;
     timeout$1 = null;
@@ -2478,36 +2503,24 @@ function handle$1(m) {
         measure(compute$6)();
     });
 }
-function process$2() {
+function processMutation(timer, mutation, instance, timestamp) {
     return __awaiter(this, void 0, void 0, function () {
-        var timer, record, instance, _i, _a, mutation, state, target, type, value;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
+        var state, target, type;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
                 case 0:
-                    timer = { id: id(), cost: 3 /* Metric.LayoutCost */ };
-                    start$y(timer);
-                    _b.label = 1;
-                case 1:
-                    if (!(mutations.length > 0)) return [3 /*break*/, 8];
-                    record = mutations.shift();
-                    instance = time();
-                    _i = 0, _a = record.mutations;
-                    _b.label = 2;
-                case 2:
-                    if (!(_i < _a.length)) return [3 /*break*/, 6];
-                    mutation = _a[_i];
                     state = state$a(timer);
-                    if (!(state === 0 /* Task.Wait */)) return [3 /*break*/, 4];
+                    if (!(state === 0 /* Task.Wait */)) return [3 /*break*/, 2];
                     return [4 /*yield*/, suspend$1(timer)];
-                case 3:
-                    state = _b.sent();
-                    _b.label = 4;
-                case 4:
+                case 1:
+                    state = _a.sent();
+                    _a.label = 2;
+                case 2:
                     if (state === 2 /* Task.Stop */) {
-                        return [3 /*break*/, 6];
+                        return [2 /*return*/];
                     }
                     target = mutation.target;
-                    type = config$2.throttleDom ? track$5(mutation, timer, instance, record.time) : mutation.type;
+                    type = config$2.throttleDom ? track$5(mutation, timer, instance, timestamp) : mutation.type;
                     if (type && target && target.ownerDocument) {
                         parse$1(target.ownerDocument);
                     }
@@ -2516,31 +2529,60 @@ function process$2() {
                     }
                     switch (type) {
                         case "attributes" /* Constant.Attributes */:
-                            processNode(target, 3 /* Source.Attributes */, record.time);
+                            processNode(target, 3 /* Source.Attributes */, timestamp);
                             break;
                         case "characterData" /* Constant.CharacterData */:
-                            processNode(target, 4 /* Source.CharacterData */, record.time);
+                            processNode(target, 4 /* Source.CharacterData */, timestamp);
                             break;
                         case "childList" /* Constant.ChildList */:
-                            processNodeList(mutation.addedNodes, 1 /* Source.ChildListAdd */, timer, record.time);
-                            processNodeList(mutation.removedNodes, 2 /* Source.ChildListRemove */, timer, record.time);
-                            break;
-                        case "suspend" /* Constant.Suspend */:
-                            value = get(target);
-                            if (value) {
-                                value.metadata.suspend = true;
-                            }
+                            processNodeList(mutation.addedNodes, 1 /* Source.ChildListAdd */, timer, timestamp);
+                            processNodeList(mutation.removedNodes, 2 /* Source.ChildListRemove */, timer, timestamp);
                             break;
                     }
-                    _b.label = 5;
-                case 5:
-                    _i++;
-                    return [3 /*break*/, 2];
-                case 6: return [4 /*yield*/, encode$4(6 /* Event.Mutation */, timer, record.time)];
-                case 7:
-                    _b.sent();
+                    return [2 /*return*/];
+            }
+        });
+    });
+}
+function process$2() {
+    return __awaiter(this, void 0, void 0, function () {
+        var timer, record, instance, _i, _a, mutation, processedMutations, _b, _c, key, throttledMutationToProcess;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
+                case 0:
+                    timer = { id: id(), cost: 3 /* Metric.LayoutCost */ };
+                    start$y(timer);
+                    _d.label = 1;
+                case 1:
+                    if (!(mutations.length > 0)) return [3 /*break*/, 3];
+                    record = mutations.shift();
+                    instance = time();
+                    for (_i = 0, _a = record.mutations; _i < _a.length; _i++) {
+                        mutation = _a[_i];
+                        processMutation(timer, mutation, instance, record.time);
+                    }
+                    return [4 /*yield*/, encode$4(6 /* Event.Mutation */, timer, record.time)];
+                case 2:
+                    _d.sent();
                     return [3 /*break*/, 1];
-                case 8:
+                case 3:
+                    processedMutations = false;
+                    for (_b = 0, _c = Object.keys(throttledMutations); _b < _c.length; _b++) {
+                        key = _c[_b];
+                        throttledMutationToProcess = throttledMutations[key];
+                        delete throttledMutations[key];
+                        processMutation(timer, throttledMutationToProcess.mutation, time(), throttledMutationToProcess.timestamp);
+                        processedMutations = true;
+                    }
+                    if (Object.keys(throttledMutations).length > 0) {
+                        processThrottledMutations();
+                    }
+                    if (!(Object.keys(throttledMutations).length === 0 && processedMutations)) return [3 /*break*/, 5];
+                    return [4 /*yield*/, encode$4(6 /* Event.Mutation */, timer, time())];
+                case 4:
+                    _d.sent();
+                    _d.label = 5;
+                case 5:
                     stop$w(timer);
                     return [2 /*return*/];
             }
@@ -2571,14 +2613,16 @@ function track$5(m, timer, instance, timestamp) {
         h[0] = inactive ? (h[1] === instance ? h[0] : h[0] + 1) : 1;
         h[1] = instance;
         // Return updated mutation type based on if we have already hit the threshold or not
-        if (h[0] === 10 /* Setting.MutationSuspendThreshold */) {
+        if (h[0] >= 10 /* Setting.MutationSuspendThreshold */) {
             // Store a reference to removedNodes so we can process them later
             // when we resume mutations again on user interactions
             h[2] = m.removedNodes;
-            return "suspend" /* Constant.Suspend */;
-        }
-        else if (h[0] > 10 /* Setting.MutationSuspendThreshold */) {
-            return "" /* Constant.Empty */;
+            if (instance > timestamp + 3000 /* Setting.MutationActivePeriod */) {
+                return m.type;
+            }
+            // we only store the most recent mutation for a given key if it is being throttled
+            throttledMutations[key] = { mutation: m, timestamp: timestamp };
+            return "throttle" /* Constant.Throttle */;
         }
     }
     return m.type;
@@ -2625,6 +2669,12 @@ function processNodeList(list, source, timer, timestamp) {
         });
     });
 }
+function processThrottledMutations() {
+    if (throttleDelay) {
+        clearTimeout(throttleDelay);
+    }
+    throttleDelay = setTimeout(function () { schedule$1(process$2, 1 /* Priority.High */); }, 33 /* Setting.LookAhead */);
+}
 function schedule(node) {
     // Only schedule manual trigger for this node if it's not already in the queue
     if (queue$2.indexOf(node) < 0) {
@@ -2702,9 +2752,6 @@ function ld(json) {
                     max(12 /* Metric.RatingCount */, num$1(json["ratingCount" /* JsonLD.RatingCount */]));
                     max(17 /* Metric.ReviewCount */, num$1(json["reviewCount" /* JsonLD.ReviewCount */]));
                     break;
-                case "person" /* JsonLD.Author */:
-                    log(8 /* Dimension.AuthorName */, json["name" /* JsonLD.Name */]);
-                    break;
                 case "offer" /* JsonLD.Offer */:
                     log(7 /* Dimension.ProductAvailability */, json["availability" /* JsonLD.Availability */]);
                     log(14 /* Dimension.ProductCondition */, json["itemCondition" /* JsonLD.ItemCondition */]);
@@ -3120,6 +3167,7 @@ var state$2 = [];
 var elementAnimate = null;
 var animationPlay = null;
 var animationPause = null;
+var animationCommitStyles = null;
 var animationCancel = null;
 var animationFinish = null;
 var animationId = 'clarityAnimationId';
@@ -3127,12 +3175,15 @@ var operationCount = 'clarityOperationCount';
 var maxOperations = 20;
 function start$i() {
     if (window["Animation"] &&
+        window["Animation"].prototype &&
         window["KeyframeEffect"] &&
+        window["KeyframeEffect"].prototype &&
         window["KeyframeEffect"].prototype.getKeyframes &&
         window["KeyframeEffect"].prototype.getTiming) {
         reset$7();
         overrideAnimationHelper(animationPlay, "play");
         overrideAnimationHelper(animationPause, "pause");
+        overrideAnimationHelper(animationCommitStyles, "commitStyles");
         overrideAnimationHelper(animationCancel, "cancel");
         overrideAnimationHelper(animationFinish, "finish");
         if (elementAnimate === null) {
@@ -3216,6 +3267,9 @@ function trackAnimationOperation(animation, name) {
                     case "finish":
                         operation = 4 /* AnimationOperation.Finish */;
                         break;
+                    case "commitStyles":
+                        operation = 5 /* AnimationOperation.CommitStyles */;
+                        break;
                 }
                 if (operation) {
                     track$4(time(), animation[animationId], operation);
@@ -4500,8 +4554,11 @@ function check$2(bytes) {
 }
 function trigger(reason) {
     data$4.check = reason;
-    clear();
-    stop();
+    // limit the dimensions we collect, but we don't need to stop Clarity entirely if we hit the limit
+    if (reason !== 5 /* Check.Collection */) {
+        clear();
+        stop();
+    }
 }
 function compute$3() {
     if (data$4.check !== 0 /* Check.None */) {
@@ -4514,13 +4571,16 @@ function stop$a() {
 
 var data$3 = null;
 var updates = null;
+var limited = false;
 function start$a() {
     data$3 = {};
     updates = {};
+    limited = false;
 }
 function stop$9() {
     data$3 = {};
     updates = {};
+    limited = false;
 }
 function log(dimension, value) {
     // Check valid value before moving ahead
@@ -4531,6 +4591,14 @@ function log(dimension, value) {
             data$3[dimension] = [];
         }
         if (data$3[dimension].indexOf(value) < 0) {
+            // Limit check to ensure we have a cap on number of dimensions we can collect
+            if (data$3[dimension].length > 128 /* Setting.CollectionLimit */) {
+                if (!limited) {
+                    limited = true;
+                    trigger(5 /* Check.Collection */);
+                }
+                return;
+            }
             data$3[dimension].push(value);
             // If this is a new value, track it as part of updates object
             // This allows us to only send back new values in subsequent payloads
@@ -4538,10 +4606,6 @@ function log(dimension, value) {
                 updates[dimension] = [];
             }
             updates[dimension].push(value);
-            // Limit check to ensure we have a cap on number of dimensions we can collect
-            if (data$3[dimension].length > 128 /* Setting.CollectionLimit */) {
-                trigger(5 /* Check.Collection */);
-            }
         }
     }
 }
@@ -4550,6 +4614,7 @@ function compute$2() {
 }
 function reset$3() {
     updates = {};
+    limited = false;
 }
 
 function config$1(track) {
@@ -4758,7 +4823,7 @@ function shortid() {
 }
 function session() {
     var output = { session: shortid(), ts: Math.round(Date.now()), count: 1, upgrade: null, upload: "" /* Constant.Empty */ };
-    var value = getCookie("_clsk" /* Constant.SessionKey */);
+    var value = getCookie("_clsk" /* Constant.SessionKey */, !config$2.includeSubdomains);
     if (value) {
         var parts = value.split("|" /* Constant.Pipe */);
         // Making it backward & forward compatible by using greater than comparison (v0.6.21)
@@ -4778,7 +4843,7 @@ function num(string, base) {
 }
 function user() {
     var output = { id: shortid(), version: 0, expiry: null, consent: 0 /* BooleanFlag.False */, dob: 0 };
-    var cookie = getCookie("_clck" /* Constant.CookieKey */);
+    var cookie = getCookie("_clck" /* Constant.CookieKey */, !config$2.includeSubdomains);
     if (cookie && cookie.length > 0) {
         // Splitting and looking up first part for forward compatibility, in case we wish to store additional information in a cookie
         var parts = cookie.split("|" /* Constant.Pipe */);
@@ -4820,8 +4885,9 @@ function user() {
     }
     return output;
 }
-function getCookie(key) {
+function getCookie(key, limit) {
     var _a;
+    if (limit === void 0) { limit = false; }
     if (supported(document, "cookie" /* Constant.Cookie */)) {
         var cookies = document.cookie.split(";" /* Constant.Semicolon */);
         if (cookies) {
@@ -4838,6 +4904,12 @@ function getCookie(key) {
                     while (isEncoded) {
                         _a = decodeCookieValue(decodedValue), isEncoded = _a[0], decodedValue = _a[1];
                     }
+                    // If we are limiting cookies, check if the cookie value is limited
+                    if (limit) {
+                        return decodedValue.endsWith("".concat("~" /* Constant.Tilde */, "1"))
+                            ? decodedValue.substring(0, decodedValue.length - 2)
+                            : null;
+                    }
                     return decodedValue;
                 }
             }
@@ -5507,7 +5579,7 @@ function start(config$1) {
         // If it's an internal call to start, without explicit configuration,
         // re-process any newly accumulated items in the queue
         if (config$1 === null) {
-            process$7();
+            process$8();
         }
     }
 }