From f384c1061f2b607684f6375b3ba86a8c87def4e7 Mon Sep 17 00:00:00 2001
From: Thibaut Gery <thibaut.gery@datadoghq.com>
Date: Tue, 3 Jan 2023 19:46:59 +0100
Subject: [PATCH] WIP

---
 .../domain/record/serializationUtils.spec.ts  | 21 +++++++++++++++++++
 .../src/domain/record/serializationUtils.ts   | 18 ++++++++++++++++
 packages/rum/src/domain/record/serialize.ts   |  3 +++
 3 files changed, 42 insertions(+)

diff --git a/packages/rum/src/domain/record/serializationUtils.spec.ts b/packages/rum/src/domain/record/serializationUtils.spec.ts
index bd709a9c18..de244937a4 100644
--- a/packages/rum/src/domain/record/serializationUtils.spec.ts
+++ b/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'] },
+    ])
+  })
+})
diff --git a/packages/rum/src/domain/record/serializationUtils.ts b/packages/rum/src/domain/record/serializationUtils.ts
index 988b88699e..9703dcfbb5 100644
--- a/packages/rum/src/domain/record/serializationUtils.ts
+++ b/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
+  })
+}
diff --git a/packages/rum/src/domain/record/serialize.ts b/packages/rum/src/domain/record/serialize.ts
index 31919dde75..487d24183a 100644
--- a/packages/rum/src/domain/record/serialize.ts
+++ b/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,
   }
 }