breaking out the style states into 2 fields and ensuring we dont rese…

…t in the middle of capturing subsequent pages

lerna.json

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

packages/clarity-decode/package.json

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

packages/clarity-devtools/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-devtools",
-  "version": "0.7.34",
+  "version": "0.7.35",
   "private": true,
   "description": "Adds Clarity debugging support to browser devtools",
   "author": "Microsoft Corp.",

packages/clarity-devtools/static/manifest.json

@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "Microsoft Clarity Developer Tools",
   "description": "Clarity helps you understand how users are interacting with your website.",
-  "version": "0.7.34",
-  "version_name": "0.7.34",
+  "version": "0.7.35",
+  "version_name": "0.7.35",
   "minimum_chrome_version": "50",
   "devtools_page": "devtools.html",
   "icons": {

packages/clarity-js/package.json

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

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

@@ -1,2 +1,2 @@
-let version = "0.7.34";
+let version = "0.7.35";
 export default version;

packages/clarity-js/src/insight/blank.ts

@@ -1,4 +1,6 @@
 export let state = [];
+export let sheetAdoptionState = [];
+export let sheetUpdateState = [];
 export let data = null;
 
 /* Intentionally blank module with empty code */

packages/clarity-js/src/insight/style.ts

@@ -3,13 +3,12 @@ import { StyleSheetState } from "@clarity-types/layout";
 import * as core from "@src/core";
 import * as metric from "@src/data/metric";
 
-export let state: StyleSheetState[] = [];
+export let sheetAdoptionState: StyleSheetState[] = [];
+export let sheetUpdateState: StyleSheetState[] = [];
 let replace: (text?: string) => Promise<CSSStyleSheet> = null;
 let replaceSync: (text?: string) => void = null;
 
 export function start(): void {
-    reset();
-
     if (replace === null) { 
         replace = CSSStyleSheet.prototype.replace; 
         CSSStyleSheet.prototype.replace = function(): Promise<CSSStyleSheet> {
@@ -44,7 +43,8 @@ export function compute(): void {
 }
 
 export function reset(): void {
-    state = [];
+    sheetAdoptionState = [];
+    sheetUpdateState = [];
 }
 
 export function stop(): void {

packages/clarity-js/src/layout/encode.ts

@@ -38,24 +38,23 @@ export default async function (type: Event, timer: Timer = null, ts: number = nu
             region.reset();
             break;
         case Event.StyleSheetAdoption:
-            for (let entry of style.state) {
+        case Event.StyleSheetUpdate:
+            for (let entry of style.sheetAdoptionState) {
                 tokens = [entry.time, entry.event];
                 tokens.push(entry.data.id);
                 tokens.push(entry.data.operation);
                 tokens.push(entry.data.newIds);
                 queue(tokens);
             }
-            style.reset();
-            break;
-        case Event.StyleSheetUpdate:
-            for (let entry of style.state) {
+            for (let entry of style.sheetUpdateState) {
                 tokens = [entry.time, entry.event];
                 tokens.push(entry.data.id);
                 tokens.push(entry.data.operation);
                 tokens.push(entry.data.cssRules);
                 queue(tokens);
             }
             style.reset();
+            break;
         case Event.Animation:
             for (let entry of animation.state) {
                 tokens = [entry.time, entry.event];

packages/clarity-js/src/layout/style.ts

@@ -7,8 +7,10 @@ import { getId, getNode } from "@src/layout/dom";
 import * as core from "@src/core";
 import { getCssRules } from "./node";
 import * as metric from "@src/data/metric";
+import { schedule } from "@src/core/task";
 
-export let state: StyleSheetState[] = [];
+export let sheetUpdateState: StyleSheetState[] = [];
+export let sheetAdoptionState: StyleSheetState[] = [];
 let replace: (text?: string) => Promise<CSSStyleSheet> = null;
 let replaceSync: (text?: string) => void = null;
 const styleSheetId = 'claritySheetId';
@@ -17,8 +19,6 @@ let styleSheetMap = {};
 let styleTimeMap: {[key: string]: number} = {};
 
 export function start(): void {
-    reset();
-
     if (replace === null) { 
         replace = CSSStyleSheet.prototype.replace; 
         CSSStyleSheet.prototype.replace = function(): Promise<CSSStyleSheet> {
@@ -96,7 +96,8 @@ export function compute(): void {
 }
 
 export function reset(): void {
-    state = [];
+    sheetAdoptionState = [];
+    sheetUpdateState = [];
 }
 
 export function stop(): void {
@@ -106,7 +107,7 @@ export function stop(): void {
 }
 
 function trackStyleChange(time: number, id: string, operation: StyleSheetOperation, cssRules?: string): void {
-    state.push({
+    sheetUpdateState.push({
         time,
         event: Event.StyleSheetUpdate,
         data: {
@@ -120,7 +121,7 @@ function trackStyleChange(time: number, id: string, operation: StyleSheetOperati
 }
 
 function trackStyleAdoption(time: number, id: number, operation: StyleSheetOperation, newIds: string[]): void {
-    state.push({
+    sheetAdoptionState.push({
         time,
         event: Event.StyleSheetAdoption,
         data: {

packages/clarity-visualize/package.json

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