WIP

packages/rum/src/domain/record/serializationUtils.spec.ts

@@ -6,6 +6,7 @@ import {
   setSerializedNodeId,
   getElementInputValue,
   switchToAbsoluteUrl,
+  getStyleSheets,
 } from './serializationUtils'
 
 describe('serialized Node storage in DOM Nodes', () => {
@@ -183,3 +184,23 @@ describe('switchToAbsoluteUrl', () => {
     })
   })
 })
+
+describe('getStyleSheets', () => {
+  it('should return undefined if no stylesheets', () => {
+    expect(getStyleSheets(undefined)).toBe(undefined)
+    expect(getStyleSheets([])).toBe(undefined)
+  })
+
+  it('should return serialized stylesheet', () => {
+    const disabledStylesheet = new CSSStyleSheet({ disabled: true })
+    disabledStylesheet.insertRule('div { width: 100%; }')
+    const printStylesheet = new CSSStyleSheet({ disabled: false, media: 'print' })
+    printStylesheet.insertRule('a { color: red; }')
+
+
+    expect(getStyleSheets([disabledStylesheet, printStylesheet])).toEqual([
+      { cssRules: ['div { width: 100%; }'], disabled: true, media: [] },
+      { cssRules: ['a { color: red; }'], disabled: false, media: ['print'] },
+    ])
+  })
+})

packages/rum/src/domain/record/serializationUtils.ts

@@ -2,6 +2,7 @@ import { buildUrl } from '@datadog/browser-core'
 import { getParentNode, isNodeShadowRoot } from '@datadog/browser-rum-core'
 import type { NodePrivacyLevel } from '../../constants'
 import { CENSORED_STRING_MARK } from '../../constants'
+import type { StyleSheet } from '../../types'
 import { shouldMaskNode } from './privacy'
 
 export type NodeWithSerializedNode = Node & { s: 'Node with serialized node' }
@@ -106,3 +107,20 @@ export function makeUrlAbsolute(url: string, baseUrl: string): string {
     return url
   }
 }
+
+export function getStyleSheets(cssStyleSheets: CSSStyleSheet[] | undefined): StyleSheet[] | undefined {
+  if (cssStyleSheets === undefined || cssStyleSheets.length === 0) {
+    return undefined
+  }
+  return cssStyleSheets.map((cssStyleSheet) => {
+    const rules = cssStyleSheet.rules || cssStyleSheet.cssRules
+    const cssRules = Array.from(rules, (cssRule) => cssRule.cssText)
+
+    const styleSheet: StyleSheet = {
+      cssRules,
+      disabled: cssStyleSheet.disabled,
+      media: Array.from(cssStyleSheet.media),
+    }
+    return styleSheet
+  })
+}

packages/rum/src/domain/record/serialize.ts

@@ -31,6 +31,7 @@ import {
   setSerializedNodeId,
   getElementInputValue,
   switchToAbsoluteUrl,
+  getStyleSheets,
 } from './serializationUtils'
 import { forEach } from './utils'
 import type { ElementsScrollPositions } from './elementsScrollPositions'
@@ -125,6 +126,7 @@ export function serializeDocumentNode(document: Document, options: SerializeOpti
   return {
     type: NodeType.Document,
     childNodes: serializeChildNodes(document, options),
+    // adoptedStyleSheets: getStyleSheets(document.adoptedStyleSheets),
   }
 }
 
@@ -155,6 +157,7 @@ function serializeDocumentFragmentNode(
     type: NodeType.DocumentFragment,
     childNodes,
     isShadowRoot,
+    adoptedStyleSheets: isShadowRoot ? getStyleSheets(element.adoptedStyleSheets) : undefined,
   }
 }