missing the case where an animation was created directly via element.…

…animate
microsoft · Jul 11, 2024 · adc2a1a · adc2a1a
1 parent 10f8629
commit adc2a1a
Show file tree

Hide file tree

Showing 9 changed files with 63 additions and 51 deletions.
diff --git a/lerna.json b/lerna.json
@@ -2,7 +2,7 @@
   "packages": [
     "packages/*"
   ],
-  "version": "0.7.39",
+  "version": "0.7.40",
   "npmClient": "yarn",
   "useWorkspaces": true
 }
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "clarity",
   "private": true,
-  "version": "0.7.39",
+  "version": "0.7.40",
   "repository": "https://github.com/microsoft/clarity.git",
   "author": "Sarvesh Nagpal <[email protected]>",
   "license": "MIT",

diff --git a/packages/clarity-decode/package.json b/packages/clarity-decode/package.json
@@ -1,6 +1,6 @@
 {
   "name": "clarity-decode",
-  "version": "0.7.39",
+  "version": "0.7.40",
   "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.7.39"
+    "clarity-js": "^0.7.40"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^24.0.0",

diff --git a/packages/clarity-devtools/package.json b/packages/clarity-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "clarity-devtools",
-  "version": "0.7.39",
+  "version": "0.7.40",
   "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.7.39",
-    "clarity-js": "^0.7.39",
-    "clarity-visualize": "^0.7.39"
+    "clarity-decode": "^0.7.40",
+    "clarity-js": "^0.7.40",
+    "clarity-visualize": "^0.7.40"
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^15.0.0",

diff --git a/packages/clarity-devtools/static/manifest.json b/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.39",
-  "version_name": "0.7.39",
+  "version": "0.7.40",
+  "version_name": "0.7.40",
   "minimum_chrome_version": "50",
   "devtools_page": "devtools.html",
   "icons": {

diff --git a/packages/clarity-js/package.json b/packages/clarity-js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "clarity-js",
-  "version": "0.7.39",
+  "version": "0.7.40",
   "description": "An analytics library that uses web page interactions to generate aggregated insights",
   "author": "Microsoft Corp.",
   "license": "MIT",

diff --git a/packages/clarity-js/src/core/version.ts b/packages/clarity-js/src/core/version.ts
@@ -1,2 +1,2 @@
-let version = "0.7.39";
+let version = "0.7.40";
 export default version;
diff --git a/packages/clarity-js/src/layout/animation.ts b/packages/clarity-js/src/layout/animation.ts
@@ -7,6 +7,7 @@ import { getId } from "@src/layout/dom";
 import * as core from "@src/core";
 
 export let state: AnimationState[] = [];
+let elementAnimate: (keyframes: Keyframe[] | PropertyIndexedKeyframes, options?: number | KeyframeAnimationOptions) => Animation = null;
 let animationPlay: () => void = null;
 let animationPause: () => void = null;
 let animationCancel: () => void = null;
@@ -27,6 +28,14 @@ export function start(): void {
         overrideAnimationHelper(animationPause, "pause");
         overrideAnimationHelper(animationCancel, "cancel");
         overrideAnimationHelper(animationFinish, "finish");
+        if (elementAnimate === null) {
+            elementAnimate = Element.prototype.animate;
+            Element.prototype.animate = function(): Animation {
+                var retVal = elementAnimate.apply(this, arguments);
+                animateWorker(retVal, "play");
+                return retVal;
+            }
+        }
     }    
 }
 
@@ -59,43 +68,46 @@ function overrideAnimationHelper(functionToOverride: () => void, name: string) {
     if (functionToOverride === null) {
       functionToOverride = Animation.prototype[name];
       Animation.prototype[name] = function(): void {
-        if (core.active()) {
-            let effect = <KeyframeEffect>this.effect;
-            let target = getId(this.effect.target);
-            if (target !== null && effect.getKeyframes && effect.getTiming) {
-                if (!this[animationId]) {
-                    this[animationId] = shortid();
-                    this[operationCount] = 0;
-
-                    let keyframes = effect.getKeyframes();
-                    let timing = effect.getTiming();
-                    track(time(), this[animationId], AnimationOperation.Create, JSON.stringify(keyframes), JSON.stringify(timing), target);
-                }
-
-                if (this[operationCount]++ < maxOperations)  {
-                    let operation: AnimationOperation = null;
-                    switch (name) {
-                        case "play":
-                            operation = AnimationOperation.Play;
-                            break;
-                        case "pause":
-                            operation = AnimationOperation.Pause;
-                            break;
-                        case "cancel":
-                            operation = AnimationOperation.Cancel;
-                            break;
-                        case "finish":
-                            operation = AnimationOperation.Finish;
-                            break;
-                    }
-                    if (operation) {
-                        track(time(), this[animationId], operation);
-                    }
-                }
-            }            
-        }
-
+        animateWorker(this, name);
         return functionToOverride.apply(this, arguments);
       }
     }
-  }
+  }
+
+function animateWorker(animation: Animation, name: string) {
+    if (core.active()) {
+        let effect = <KeyframeEffect>animation.effect;
+        let target = getId((<any>animation.effect).target);
+        if (target !== null && effect.getKeyframes && effect.getTiming) {
+            if (!animation[animationId]) {
+                animation[animationId] = shortid();
+                animation[operationCount] = 0;
+
+                let keyframes = effect.getKeyframes();
+                let timing = effect.getTiming();
+                track(time(), animation[animationId], AnimationOperation.Create, JSON.stringify(keyframes), JSON.stringify(timing), target);
+            }
+
+            if (animation[operationCount]++ < maxOperations)  {
+                let operation: AnimationOperation = null;
+                switch (name) {
+                    case "play":
+                        operation = AnimationOperation.Play;
+                        break;
+                    case "pause":
+                        operation = AnimationOperation.Pause;
+                        break;
+                    case "cancel":
+                        operation = AnimationOperation.Cancel;
+                        break;
+                    case "finish":
+                        operation = AnimationOperation.Finish;
+                        break;
+                }
+                if (operation) {
+                    track(time(), animation[animationId], operation);
+                }
+            }
+        }            
+    }
+}
diff --git a/packages/clarity-visualize/package.json b/packages/clarity-visualize/package.json
@@ -1,6 +1,6 @@
 {
   "name": "clarity-visualize",
-  "version": "0.7.39",
+  "version": "0.7.40",
   "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.7.39"
+    "clarity-decode": "^0.7.40"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^24.0.0",