[REPLAY] Add support for adoptedStyleSheets

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-core/test/createIsolatedDom.ts

@@ -20,6 +20,8 @@ export function createIsolatedDom() {
     element(s: TemplateStringsArray) {
       return append(s[0])
     },
+    doc,
+    window: iframe.contentWindow! as Window & { CSSStyleSheet: typeof CSSStyleSheet },
     append,
     clear() {
       iframe.parentNode!.removeChild(iframe)

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: undefined },
+      { cssRules: ['a { color: red; }'], disabled: undefined, 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 || undefined,
+      media: cssStyleSheet.media.length > 0 ? Array.from(cssStyleSheet.media) : undefined,
+    }
+    return styleSheet
+  })
+}

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

@@ -1,4 +1,10 @@
-import { isIE, noop, resetExperimentalFeatures, updateExperimentalFeatures } from '@datadog/browser-core'
+import {
+  isAdoptedStyleSheetsSupported,
+  isIE,
+  noop,
+  resetExperimentalFeatures,
+  updateExperimentalFeatures,
+} from '@datadog/browser-core'
 import type { RumConfiguration } from '@datadog/browser-rum-core'
 import { STABLE_ATTRIBUTES, DEFAULT_PROGRAMMATIC_ACTION_NAME_ATTRIBUTE } from '@datadog/browser-rum-core'
 import {
@@ -19,6 +25,7 @@ import {
 } from '../../../test/htmlAst'
 import type { ElementNode, SerializedNodeWithId, TextNode } from '../../types'
 import { NodeType } from '../../types'
+import { createIsolatedDom } from '../../../../rum-core/test/createIsolatedDom'
 import { hasSerializedNode } from './serializationUtils'
 import type { SerializationContext, SerializeOptions } from './serialize'
 import {
@@ -86,6 +93,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 +445,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 +477,7 @@ describe('serializeNodeWithId', () => {
           {
             type: NodeType.DocumentFragment,
             isShadowRoot: true,
+            adoptedStyleSheets: undefined,
             childNodes: [
               {
                 type: NodeType.Element,
@@ -684,6 +694,30 @@ describe('serializeDocumentNode handles', function testAllowDomTree() {
     }
   })
 
+  it('serializes a document with adoptedStyleSheets', () => {
+    if (!isAdoptedStyleSheetsSupported()) {
+      pending('no adoptedStyleSheets support')
+    }
+    const isolatedDom = createIsolatedDom()
+    const styleSheet = new isolatedDom.window.CSSStyleSheet()
+    styleSheet.insertRule('div { width: 100%; }')
+    isolatedDom.doc.adoptedStyleSheets = [styleSheet]
+    expect(serializeDocument(isolatedDom.doc, DEFAULT_CONFIGURATION, DEFAULT_SERIALIZATION_CONTEXT)).toEqual({
+      type: NodeType.Document,
+      childNodes: [jasmine.objectContaining({ type: NodeType.Element, tagName: 'html' })],
+      adoptedStyleSheets: [
+        {
+          cssRules: ['div { width: 100%; }'],
+          disabled: undefined,
+          media: undefined,
+        },
+      ],
+      id: jasmine.any(Number) as unknown as number,
+    })
+
+    isolatedDom.clear()
+  })
+
   it('a masked DOM Document itself is still serialized ', () => {
     const serializeOptionsMask: SerializeOptions = {
       ...DEFAULT_OPTIONS,
@@ -692,6 +726,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,
   }
 }