[REPLAY] Add support for adoptedStylesheets in serialisation

packages/core/src/tools/browserDetection.ts

@@ -5,3 +5,7 @@ export function isIE() {
 export function isChromium() {
   return !!(window as any).chrome || /HeadlessChrome/.test(window.navigator.userAgent)
 }
+
+export function isAdoptedStyleSheetsSupported() {
+  return Boolean((document as any).adoptedStyleSheets)
+}

packages/rum/src/domain/record/browser.types.ts

@@ -0,0 +1,12 @@
+// TODO: remove this once typescript has been update to 4.8+
+declare global {
+  interface ShadowRoot {
+    adoptedStyleSheets: CSSStyleSheet[] | undefined
+  }
+
+  interface Document {
+    adoptedStyleSheets: CSSStyleSheet[] | undefined
+  }
+}
+
+export {}

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

@@ -1,11 +1,12 @@
-import { isIE } from '@datadog/browser-core'
+import { isAdoptedStyleSheetsSupported, isIE } from '@datadog/browser-core'
 import { NodePrivacyLevel } from '../../constants'
 import {
   getSerializedNodeId,
   hasSerializedNode,
   setSerializedNodeId,
   getElementInputValue,
   switchToAbsoluteUrl,
+  getStyleSheets,
 } from './serializationUtils'
 
 describe('serialized Node storage in DOM Nodes', () => {
@@ -183,3 +184,27 @@ describe('switchToAbsoluteUrl', () => {
     })
   })
 })
+
+describe('getStyleSheets', () => {
+  beforeEach(() => {
+    if (!isAdoptedStyleSheetsSupported()) {
+      pending('no adoptedStyleSheets support')
+    }
+  })
+  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.spec.ts

@@ -86,6 +86,7 @@ describe('serializeNodeWithId', () => {
           jasmine.objectContaining({ type: NodeType.DocumentType, name: 'html', publicId: '', systemId: '' }),
           jasmine.objectContaining({ type: NodeType.Element, tagName: 'html' }),
         ],
+        adoptedStyleSheets: undefined,
         id: jasmine.any(Number) as unknown as number,
       })
     })
@@ -437,6 +438,7 @@ describe('serializeNodeWithId', () => {
             isShadowRoot: true,
             childNodes: [],
             id: jasmine.any(Number) as unknown as number,
+            adoptedStyleSheets: undefined,
           },
         ],
         id: jasmine.any(Number) as unknown as number,
@@ -468,6 +470,7 @@ describe('serializeNodeWithId', () => {
           {
             type: NodeType.DocumentFragment,
             isShadowRoot: true,
+            adoptedStyleSheets: undefined,
             childNodes: [
               {
                 type: NodeType.Element,
@@ -692,6 +695,7 @@ describe('serializeDocumentNode handles', function testAllowDomTree() {
     expect(serializeDocumentNode(document, serializeOptionsMask)).toEqual({
       type: NodeType.Document,
       childNodes: serializeChildNodes(document, serializeOptionsMask),
+      adoptedStyleSheets: undefined,
     })
   })
 

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

@@ -31,10 +31,12 @@ import {
   setSerializedNodeId,
   getElementInputValue,
   switchToAbsoluteUrl,
+  getStyleSheets,
 } from './serializationUtils'
 import { forEach } from './utils'
 import type { ElementsScrollPositions } from './elementsScrollPositions'
 import type { ShadowRootsController } from './shadowRootsController'
+import './browser.types'
 
 // Those values are the only one that can be used when inheriting privacy levels from parent to
 // children during serialization, since HIDDEN and IGNORE shouldn't serialize their children. This
@@ -125,6 +127,7 @@ export function serializeDocumentNode(document: Document, options: SerializeOpti
   return {
     type: NodeType.Document,
     childNodes: serializeChildNodes(document, options),
+    adoptedStyleSheets: getStyleSheets(document.adoptedStyleSheets),
   }
 }
 
@@ -155,6 +158,7 @@ function serializeDocumentFragmentNode(
     type: NodeType.DocumentFragment,
     childNodes,
     isShadowRoot,
+    adoptedStyleSheets: isShadowRoot ? getStyleSheets(element.adoptedStyleSheets) : undefined,
   }
 }