grabbing css content for electron apps rather than references

lerna.json

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

package.json

@@ -1,7 +1,7 @@
 {
   "name": "clarity",
   "private": true,
-  "version": "0.7.15",
+  "version": "0.7.16",
   "repository": "https://github.com/microsoft/clarity.git",
   "author": "Sarvesh Nagpal <sarveshn@microsoft.com>",
   "license": "MIT",

packages/clarity-decode/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-decode",
-  "version": "0.7.15",
+  "version": "0.7.16",
   "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.15"
+    "clarity-js": "^0.7.16"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^24.0.0",

packages/clarity-devtools/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-devtools",
-  "version": "0.7.15",
+  "version": "0.7.16",
   "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.15",
-    "clarity-js": "^0.7.15",
-    "clarity-visualize": "^0.7.15"
+    "clarity-decode": "^0.7.16",
+    "clarity-js": "^0.7.16",
+    "clarity-visualize": "^0.7.16"
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^15.0.0",

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.15",
-  "version_name": "0.7.15",
+  "version": "0.7.16",
+  "version_name": "0.7.16",
   "minimum_chrome_version": "50",
   "devtools_page": "devtools.html",
   "icons": {

packages/clarity-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-js",
-  "version": "0.7.15",
+  "version": "0.7.16",
   "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.15";
+let version = "0.7.16";
 export default version;

packages/clarity-js/src/data/metadata.ts

@@ -11,14 +11,15 @@ import { set } from "@src/data/variable";
 
 export let data: Metadata = null;
 export let callbacks: MetadataCallbackOptions[] = [];
+export let electron = BooleanFlag.False;
 let rootDomain = null;
 
 export function start(): void {
   rootDomain = null;
   const ua = navigator && "userAgent" in navigator ? navigator.userAgent : Constant.Empty;
   const title = document && document.title ? document.title : Constant.Empty;
-  const electron = ua.indexOf(Constant.Electron) > 0 ? BooleanFlag.True : BooleanFlag.False;
-
+  electron = ua.indexOf(Constant.Electron) > 0 ? BooleanFlag.True : BooleanFlag.False;
+  
   // Populate ids for this page
   let s = session();
   let u = user();

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

@@ -6,6 +6,7 @@ import * as internal from "@src/diagnostic/internal";
 import * as interaction from "@src/interaction";
 import * as mutation from "@src/layout/mutation";
 import * as schema from "@src/layout/schema";
+import { electron } from "@src/data/metadata";
 
 const IGNORE_ATTRIBUTES = ["title", "alt", "onload", "onfocus", "onerror", "data-drupal-form-submit-last"];
 const newlineRegex = /[\r\n]+/g;
@@ -157,6 +158,24 @@ export default function (node: Node, source: Source): Node {
                     }
                     dom[call](node, parent, frameData, source);
                     break;
+                case "LINK":
+                    // electron stylesheets reference the local file system - translating those
+                    // to inline styles so playback can work
+                    if (electron && attributes['rel'] === Constant.StyleSheet) {
+                        for (var styleSheetIndex in Object.keys(document.styleSheets)) {
+                            var currentStyleSheet = document.styleSheets[styleSheetIndex];
+                            if (currentStyleSheet.ownerNode == element) {
+                                let syntheticStyleData = { tag: "STYLE", attributes, value: getCssRules(currentStyleSheet) };
+                                dom[call](node, parent, syntheticStyleData, source);
+                                break;
+                            }
+                        }
+                        break;
+                    }
+                    // for links that aren't electron style sheets we can process them normally
+                    let linkData = { tag, attributes };
+                    dom[call](node, parent, linkData, source);
+                    break;
                 default:
                     let data = { tag, attributes };
                     if (element.shadowRoot) { child = element.shadowRoot; }

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

@@ -121,7 +121,8 @@ export const enum Constant {
     ogType = "og:type",
     ogTitle = "og:title",
     SvgStyle = "svg:style",
-    ExcludeClassNames = "load,active,fixed,visible,focus,show,collaps,animat"
+    ExcludeClassNames = "load,active,fixed,visible,focus,show,collaps,animat",
+    StyleSheet = "stylesheet"
 }
 
 export const enum JsonLD { 

packages/clarity-visualize/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-visualize",
-  "version": "0.7.15",
+  "version": "0.7.16",
   "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.15"
+    "clarity-decode": "^0.7.16"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^24.0.0",

packages/clarity-visualize/src/layout.ts

@@ -221,15 +221,15 @@ export class LayoutHelper {
                     if (!node.attributes) { node.attributes = {}; }
                     this.setAttributes(linkElement as HTMLElement, node);
                     if ("rel" in node.attributes) {
-                        if (node.attributes["rel"] === "stylesheet") {
+                        if (node.attributes["rel"] === Constant.StyleSheet) {
                             this.stylesheets.push(new Promise((resolve: () => void): void => {
                                 const proxy = useproxy ?? this.state.options.useproxy;
                                 if (proxy) {
                                     if (linkElement.integrity) {
                                         linkElement.removeAttribute('integrity');
                                     }
 
-                                    linkElement.href = proxy(linkElement.href, linkElement.id, "stylesheet");
+                                    linkElement.href = proxy(linkElement.href, linkElement.id, Constant.StyleSheet);
                                 } 
                                 linkElement.onload = linkElement.onerror = this.style.bind(this, linkElement, resolve);
                                 setTimeout(resolve, LayoutHelper.TIMEOUT);

packages/clarity-visualize/types/visualize.d.ts

@@ -173,7 +173,8 @@ export const enum Constant {
     FormTag = "form",
     InputTag = "input",
     AutoComplete = "autocomplete",
-    NewPassword = "new-password"
+    NewPassword = "new-password",
+    StyleSheet = "stylesheet"
 }
 
 export const enum Setting {