From adc2a1a4a20ccf61228775cd0433001af2d258c6 Mon Sep 17 00:00:00 2001 From: Sam Martin Date: Thu, 11 Jul 2024 16:34:46 -0700 Subject: [PATCH] missing the case where an animation was created directly via element.animate --- lerna.json | 2 +- package.json | 2 +- packages/clarity-decode/package.json | 4 +- packages/clarity-devtools/package.json | 8 +- .../clarity-devtools/static/manifest.json | 4 +- packages/clarity-js/package.json | 2 +- packages/clarity-js/src/core/version.ts | 2 +- packages/clarity-js/src/layout/animation.ts | 86 +++++++++++-------- packages/clarity-visualize/package.json | 4 +- 9 files changed, 63 insertions(+), 51 deletions(-) diff --git a/lerna.json b/lerna.json index d496c329..dd700384 100644 --- 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 index ded2e47f..5316edc4 100644 --- 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 ", "license": "MIT", diff --git a/packages/clarity-decode/package.json b/packages/clarity-decode/package.json index 9e9b82d7..116340fb 100644 --- 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 index 4326a434..7ed316ba 100644 --- 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 index e74c06f7..71de4ab1 100644 --- 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 index 30c26e99..e6616c94 100644 --- 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 index d935a230..60da91d4 100644 --- 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 index 2977ee5d..6eb9291b 100644 --- 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 = 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); } } - } \ No newline at end of file + } + +function animateWorker(animation: Animation, name: string) { + if (core.active()) { + let effect = animation.effect; + let target = getId((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); + } + } + } + } +} \ No newline at end of file diff --git a/packages/clarity-visualize/package.json b/packages/clarity-visualize/package.json index 36d45e8f..2e35f154 100644 --- 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",