Visualization updates and removing backward compatibility code from 0…

….5.3

lerna.json

@@ -2,7 +2,7 @@
   "packages": [
     "packages/*"
   ],
-  "version": "0.5.2",
+  "version": "0.5.3",
   "npmClient": "yarn",
   "useWorkspaces": true
 }

packages/clarity-decode/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-decode",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "An analytics library that uses web page interactions to generate aggregated insights",
   "author": "Microsoft Corp.",
   "license": "MIT",
@@ -26,7 +26,7 @@
     "url": "https://github.com/Microsoft/clarity/issues"
   },
   "dependencies": {
-    "clarity-js": "^0.5.2"
+    "clarity-js": "^0.5.3"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^11.1.0",

packages/clarity-decode/src/clarity.ts

@@ -91,17 +91,6 @@ export function decode(input: string): DecodedPayload {
                 if (payload.click === undefined) { payload.click = []; }
                 let clickEntry = interaction.decode(entry) as ClickEvent;
                 payload.click.push(clickEntry);
-
-                // Extra processing introduced for backward compatibility in v1.0.0-b21.
-                if (payload.pointer === undefined) { payload.pointer = []; }
-                let clickData = clickEntry.data;
-                payload.pointer.push({
-                    time: clickEntry.time, event: clickEntry.event, data: {
-                        target: clickData.target,
-                        x: clickData.x,
-                        y: clickData.y
-                    }
-                } as PointerEvent);
                 break;
             case Data.Event.Scroll:
                 if (payload.scroll === undefined) { payload.scroll = []; }

packages/clarity-decode/types/data.d.ts

@@ -8,6 +8,7 @@ import { NavigationEvent, NetworkEvent, PaintEvent } from "./performance";
 import { PartialEvent } from "./core";
 
 /* Redeclare enums */
+export import Envelope = Data.Envelope;
 export import Code = Data.Code;
 export import Event = Data.Event;
 export import Metric = Data.Metric;

packages/clarity-devtools/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-devtools",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "private": true,
   "description": "Adds Clarity debugging support to browser devtools",
   "author": "Microsoft Corp.",
@@ -24,9 +24,9 @@
     "url": "https://github.com/Microsoft/clarity/issues"
   },
   "dependencies": {
-    "clarity-decode": "^0.5.2",
-    "clarity-js": "^0.5.2",
-    "clarity-visualize": "^0.5.2"
+    "clarity-decode": "^0.5.3",
+    "clarity-js": "^0.5.3",
+    "clarity-visualize": "^0.5.3"
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^7.1.3",

packages/clarity-devtools/src/content.ts

@@ -23,12 +23,12 @@ function activate(): void {
     }, (items: any) => {
       if (items.clarity.showText) { document.body.setAttribute(Layout.Constant.UNMASK_ATTRIBUTE, "true"); }
       clarity.start({
-        lookahead: 250,
-        delay: 250,
+        lookahead: 0,
+        delay: 50,
         lean: items.clarity.leanMode,
         regions,
         upload,
-        projectId: "clarity-inspector"
+        projectId: "clarity-devtools"
       });
     });
     window["clarity"] = clarity;

packages/clarity-devtools/src/panel.ts

@@ -16,7 +16,7 @@ function save(encoded: boolean = true): void {
 
     let a = document.createElement("a");
     let suffix = encoded ? "encoded" : "decoded";
-    a.setAttribute("download", `clarity-vnext-${id.toUpperCase()}-${suffix}.json`);
+    a.setAttribute("download", `clarity-${id.toUpperCase()}-${suffix}.json`);
     a.href = url;
     a.click();
 }
@@ -25,26 +25,47 @@ background.onMessage.addListener(function(message: any): void {
     // Handle responses from the background page, if any
     if (message && message.payload) {
         let decoded = decode(message.payload);
-        if (decoded.envelope.sequence === 1) { reset(); }
         eJson.push(JSON.parse(message.payload));
         dJson.push(decoded);
         data.process(decoded);
         id = decoded.envelope.pageId;
         let info = document.getElementById("info");
-        let header = document.getElementById("header") as HTMLElement;
+        let metadata = document.getElementById("header") as HTMLDivElement;
         let download = document.getElementById("download") as HTMLElement;
         let iframe = document.getElementById("clarity") as HTMLIFrameElement;
         info.style.display = "none";
-        header.style.display = "block";
+        metadata.style.display = "block";
         download.style.display = "block";
         iframe.style.display = "block";
-        visualize.render(decoded, iframe, header);
+        if (decoded.envelope.sequence === 1) { reset(decoded.envelope); }
+        visualize.replay(decoded);
     }
 });
 
-function reset(): void {
+function resize(width: number, height: number): void {
+    let margin = 10;
+    let px = "px";
+    let iframe = document.getElementById("clarity") as HTMLIFrameElement;
+    let container = iframe.ownerDocument.documentElement;
+    let offsetTop = iframe.offsetTop;
+    let availableWidth = container.clientWidth - (2 * margin);
+    let availableHeight = container.clientHeight - offsetTop - (2 * margin);
+    let scale = Math.min(Math.min(availableWidth / width, 1), Math.min(availableHeight / height, 1));
+    iframe.removeAttribute("style");
+    iframe.style.position = "relative";
+    iframe.style.width = width + px;
+    iframe.style.height = height + px;
+    iframe.style.transformOrigin = "0 0 0";
+    iframe.style.transform = "scale(" + scale + ")";
+    iframe.style.border = "1px solid #cccccc";
+    iframe.style.overflow = "hidden";
+    iframe.style.left = ((container.clientWidth - (width * scale)) / 2) + px;
+}
+
+function reset(envelope: Data.Envelope): void {
     if (console) { console.clear(); }
-    let iframe = document.getElementById("clarity");
+    let metadata = document.getElementById("header") as HTMLDivElement;
+    let iframe = document.getElementById("clarity") as HTMLIFrameElement;
     let download = document.getElementById("download") as HTMLElement;
     if (iframe) { iframe.parentElement.removeChild(iframe); }
     iframe = document.createElement("iframe");
@@ -58,4 +79,5 @@ function reset(): void {
     id = "";
     (download.firstChild as HTMLElement).onclick = function(): void { save(true); };
     (download.lastChild as HTMLElement).onclick = function(): void { save(false); };
+    visualize.setup(envelope.version, iframe, resize, metadata);
 }

packages/clarity-devtools/static/manifest.json

@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "Clarity Developer Tools",
   "description": "Get insights about how customers use your website.",
-  "version": "0.5.2",
-  "version_name": "0.5.2",  
+  "version": "0.5.3",
+  "version_name": "0.5.3",  
   "minimum_chrome_version": "50",
   "devtools_page": "devtools.html",
   "icons": {

packages/clarity-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-js",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "An analytics library that uses web page interactions to generate aggregated insights",
   "author": "Microsoft Corp.",
   "license": "MIT",

packages/clarity-js/src/core/offset.ts

@@ -0,0 +1,13 @@
+import { OffsetDistance } from "@clarity-types/core";
+
+export default function(element: HTMLElement): OffsetDistance {
+    let output: OffsetDistance = { x: 0, y: 0 };
+    if (element && element.offsetParent) {
+        do {
+            output.x += element.offsetLeft;
+            output.y += element.offsetTop;
+            element = element.offsetParent as HTMLElement;
+        } while (element);
+    }
+    return output;
+}

packages/clarity-js/src/core/time.ts

@@ -4,8 +4,9 @@ export function start(): void {
     startTime = performance.now();
 }
 
-export function time(): number {
-    return Math.round(performance.now() - startTime);
+export function time(ts: number = null): number {
+    ts = ts ? ts : performance.now();
+    return Math.max(Math.round(ts - startTime), 0);
 }
 
 export function end(): void {

packages/clarity-js/src/core/version.ts

@@ -1,2 +1,2 @@
-let version = "0.5.2";
+let version = "0.5.3";
 export default version;

packages/clarity-js/src/interaction/click.ts

@@ -1,6 +1,7 @@
 import { Event } from "@clarity-types/data";
 import { ClickData } from "@clarity-types/interaction";
 import { bind } from "@src/core/event";
+import offset from "@src/core/offset";
 import { schedule } from "@src/core/task";
 import { link, target, track } from "@src/data/target";
 import { iframe } from "@src/layout/dom";
@@ -22,8 +23,11 @@ function handler(event: Event, root: Node, evt: MouseEvent): void {
     let x = "pageX" in evt ? Math.round(evt.pageX) : ("clientX" in evt ? Math.round(evt["clientX"] + d.scrollLeft) : null);
     let y = "pageY" in evt ? Math.round(evt.pageY) : ("clientY" in evt ? Math.round(evt["clientY"] + d.scrollTop) : null);
     // In case of iframe, we adjust (x,y) to be relative to top parent's origin
-    x = x && frame ? x + frame.offsetLeft : x;
-    y = y && frame ? y + frame.offsetTop : y;
+    if (frame) {
+        let distance = offset(frame);
+        x = x ? x + distance.x : x;
+        y = y ? y + distance.y : y;
+    }
 
     let t = target(evt);
     // Find nearest anchor tag (<a/>) parent if current target node is part of one

packages/clarity-js/src/interaction/pointer.ts

@@ -2,6 +2,7 @@ import { Event } from "@clarity-types/data";
 import { PointerState } from "@clarity-types/interaction";
 import config from "@src/core/config";
 import { bind } from "@src/core/event";
+import offset from "@src/core/offset";
 import { schedule } from "@src/core/task";
 import { time } from "@src/core/time";
 import { clearTimeout, setTimeout } from "@src/core/timeout";
@@ -34,8 +35,11 @@ function mouse(event: Event, root: Node, evt: MouseEvent): void {
     let x = "pageX" in evt ? Math.round(evt.pageX) : ("clientX" in evt ? Math.round(evt["clientX"] + d.scrollLeft) : null);
     let y = "pageY" in evt ? Math.round(evt.pageY) : ("clientY" in evt ? Math.round(evt["clientY"] + d.scrollTop) : null);
     // In case of iframe, we adjust (x,y) to be relative to top parent's origin
-    x = x && frame ? x + frame.offsetLeft : x;
-    y = y && frame ? y + frame.offsetTop : y;
+    if (frame) {
+        let distance = offset(frame);
+        x = x ? x + distance.x : x;
+        y = y ? y + distance.y : y;
+    }
 
     // Check for null values before processing this event
     if (x !== null && y !== null) { handler({ time: time(), event, data: { target: track(target(evt)), x, y } }); }

packages/clarity-js/src/performance/longtask.ts

@@ -1,5 +1,6 @@
 import { Event } from "@clarity-types/data";
 import { LongTaskEntry, LongTaskState } from "@clarity-types/performance";
+import { time } from "@src/core/time";
 import encode from "./encode";
 
 // Reference: https://w3c.github.io/longtasks/#sec-PerformanceLongTaskTiming
@@ -10,7 +11,7 @@ export function reset(): void {
 }
 
 export function compute(entry: LongTaskEntry): void {
-    state = { time: Math.round(entry.startTime),
+    state = { time: time(entry.startTime),
         data: {
             duration: Math.round(entry.duration),
             attributionName: entry.attribution && entry.attribution.length > 0 ? entry.attribution[0].name : null,

packages/clarity-js/src/performance/network.ts

@@ -2,6 +2,7 @@ import { Event } from "@clarity-types/data";
 import { NetworkState } from "@clarity-types/performance";
 import config from "@src/core/config";
 import { schedule } from "@src/core/task";
+import { time } from "@src/core/time";
 import { clearTimeout, setTimeout } from "@src/core/timeout";
 import encode from "./encode";
 
@@ -18,7 +19,7 @@ export function compute(entry: PerformanceResourceTiming): void {
     state.push({
         url: entry.name,
         data: {
-            start: Math.round(entry.startTime),
+            start: time(entry.startTime),
             duration: Math.round(entry.duration),
             size: "transferSize" in entry ? Math.round(entry.transferSize) : null,
             target: null,

packages/clarity-js/src/performance/paint.ts

@@ -1,5 +1,6 @@
 import { Event } from "@clarity-types/data";
 import { PaintState } from "@clarity-types/performance";
+import { time } from "@src/core/time";
 import encode from "./encode";
 
 // Reference: https://www.w3.org/TR/paint-timing/
@@ -10,6 +11,6 @@ export function reset(): void {
 }
 
 export function compute(entry: PerformanceEntry): void {
-    state = { time: Math.round(entry.startTime), data: { name: entry.name } };
+    state = { time: time(entry.startTime), data: { name: entry.name } };
     encode(Event.Paint);
 }

packages/clarity-js/types/core.d.ts

@@ -47,6 +47,11 @@ export interface AsyncTask {
     resolve: TaskResolve;
 }
 
+export interface OffsetDistance {
+    x: number;
+    y: number;
+}
+
 export interface BrowserEvent {
     event: string;
     target: EventTarget;

packages/clarity-visualize/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-visualize",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "An analytics library that uses web page interactions to generate aggregated insights",
   "author": "Microsoft Corp.",
   "license": "MIT",
@@ -27,7 +27,7 @@
     "url": "https://github.com/Microsoft/clarity/issues"
   },
   "dependencies": {
-    "clarity-decode": "^0.5.2"
+    "clarity-decode": "^0.5.3"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^11.1.0",