fix: skip calling setAttribute on unchanged attr in diffProps

Author: juliecheng

.changeset/new-turkeys-compare.md

@@ -0,0 +1,5 @@
+---
+"rrdom": patch
+---
+
+In Chrome, calling setAttribute('type', 'text/css') on style elements that already have it causes Chrome to drop CSS rules that were previously added to the stylesheet via insertRule. This fix prevents setAttribute from being called if the attribute already exists.

packages/rrdom/src/diff.ts

@@ -354,7 +354,9 @@ function diffProps(
     } else if (newTree.tagName === 'IFRAME' && name === 'srcdoc') continue;
     else {
       try {
-        oldTree.setAttribute(name, newValue);
+        if (oldTree.getAttribute(name) !== newValue) {
+          oldTree.setAttribute(name, newValue);
+        }
       } catch (err) {
         // We want to continue diffing so we quietly catch
         // this exception. Otherwise, this can throw and bubble up to

packages/rrdom/test/diff.test.ts

@@ -489,6 +489,32 @@ describe('diff algorithm for rrdom', () => {
       diff(element, rrIframe, replayer);
       expect(element.getAttribute('srcdoc')).toBe(null);
     });
+
+    it('can skip setAttribute when value is unchanged', () => {
+      const tagName = 'STYLE';
+      const element = document.createElement(tagName);
+      const sn = Object.assign({}, elementSn, { tagName });
+      mirror.add(element, sn);
+
+      element.setAttribute('type', 'text/css');
+      expect(element.getAttribute('type')).toEqual('text/css');
+      
+      const rrDocument = new RRDocument();
+      const rrNode = rrDocument.createElement(tagName);
+      const sn2 = Object.assign({}, elementSn, { tagName });
+      rrDocument.mirror.add(rrNode, sn2);
+      rrNode.attributes = { type: 'text/css' };
+      
+      const setAttributeSpy = vi.spyOn(element, 'setAttribute');
+      diff(element, rrNode, replayer);
+      expect(setAttributeSpy).not.toHaveBeenCalled();
+      
+      rrNode.attributes = { type: 'application/css' };
+      diff(element, rrNode, replayer);
+      expect(setAttributeSpy).toHaveBeenCalledWith('type', 'application/css');
+      
+      setAttributeSpy.mockRestore();
+    });
   });
 
   describe('diff children', () => {

packages/rrweb/test/events/inline-style-sheet-rule-events.ts

@@ -0,0 +1,153 @@
+import { EventType, IncrementalSource } from '@rrweb/types';
+import type { eventWithTime } from '@rrweb/types';
+
+const now = Date.now();
+const events: eventWithTime[] = [
+  {
+    type: EventType.DomContentLoaded,
+    data: {},
+    timestamp: now,
+  },
+  {
+    type: EventType.Load,
+    data: {},
+    timestamp: now + 100,
+  },
+  {
+    type: EventType.Meta,
+    data: {
+      href: 'http://localhost',
+      width: 1000,
+      height: 800,
+    },
+    timestamp: now + 100,
+  },
+  // full snapshot:
+  {
+    data: {
+      node: {
+        id: 1,
+        type: 0,
+        childNodes: [
+          { id: 2, name: 'html', type: 1, publicId: '', systemId: '' },
+          {
+            id: 3,
+            type: 2,
+            tagName: 'html',
+            attributes: { lang: 'en' },
+            childNodes: [
+              {
+                id: 4,
+                type: 2,
+                tagName: 'head',
+                attributes: {},
+                childNodes: [
+                  {
+                    id: 101,
+                    type: 2,
+                    tagName: 'style',
+                    attributes: {
+                      'data-meta': 'from full-snapshot, gets rule added at 500',
+                    },
+                    childNodes: [
+                      {
+                        id: 102,
+                        type: 3,
+                        isStyle: true,
+                        textContent:
+                          '\n.css-added-at-200-overwritten-at-3000 {\n  opacity: 1;\n  transform: translateX(0);\n}\n',
+                      },
+                    ],
+                  },
+                  {
+                    id: 105,
+                    type: 2,
+                    tagName: 'style',
+                    attributes: {
+                      _cssText:
+                        '.css-added-at-200 { position: fixed; top: 0px; right: 0px; left: 4rem; z-index: 15; flex-shrink: 0; height: 0.25rem; overflow: hidden; background-color: rgb(17, 171, 209); }.css-added-at-200.alt { height: 0.25rem; background-color: rgb(190, 232, 242); opacity: 0; transition: opacity 0.5s ease-in 0.1s; }.css-added-at-200.alt2 { padding-left: 4rem; }',
+                      'data-emotion': 'css',
+                    },
+                    childNodes: [
+                      { id: 106, type: 3, isStyle: true, textContent: '' },
+                    ],
+                  },
+                ],
+              },
+              {
+                id: 107,
+                type: 2,
+                tagName: 'body',
+                attributes: {},
+                childNodes: [
+                  {
+                    id: 108,
+                    type: 2,
+                    tagName: 'style',
+                    attributes: {
+                        'type': 'text/css',
+                        'gs-style-id': 'gs-id-0',
+                        '_cssText': '.original-style-rule { color: red; }'
+                    },
+                    childNodes: [
+                      {
+                        id: 109,
+                        type: 3,
+                        textContent: '',
+                        isStyle: true
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+      initialOffset: { top: 0, left: 0 },
+    },
+    type: EventType.FullSnapshot,
+    timestamp: now + 100,
+  },
+  // mutation that uses insertRule to add a new style rule to the existing body stylesheet
+  {
+    data: {
+      id: 108,
+      adds: [
+        {
+          rule: '.css-inserted-at-500 {border: 1px solid blue;}',
+          index: 1,
+        },
+      ],
+      source: IncrementalSource.StyleSheetRule,
+    },
+    type: EventType.IncrementalSnapshot,
+    timestamp: now + 500,
+  },
+  // mutation that adds a child to the body
+  {
+    type: EventType.IncrementalSnapshot,
+    data: {
+      source: IncrementalSource.Mutation,
+      texts: [],
+      attributes: [],
+      removes: [],
+      adds: [
+        {
+          parentId: 107,
+          nextId: null,
+          node: {
+            type: 2,
+            tagName: 'div',
+            attributes: {},
+            childNodes: [],
+            id: 110,
+          },
+        }
+      ],
+    },
+    timestamp: now + 900,
+  }
+];
+
+export default events;

packages/rrweb/test/replayer.test.ts

@@ -12,6 +12,7 @@ import {
   waitForRAF,
 } from './utils';
 import styleSheetRuleEvents from './events/style-sheet-rule-events';
+import inlineStyleSheetRuleEvents from './events/inline-style-sheet-rule-events';
 import movingStyleSheetOnDiff from './events/moving-style-sheet-on-diff';
 import orderingEvents from './events/ordering';
 import scrollEvents from './events/scroll';
@@ -179,6 +180,26 @@ describe('replayer', function () {
     await assertDomSnapshot(page);
   });
 
+  it('should persist inserted StyleSheetRules on fast forward', async () => {
+    await page.evaluate(`events = ${JSON.stringify(inlineStyleSheetRuleEvents)}`);
+    const result = await page.evaluate(`
+      const { Replayer } = rrweb;
+      const replayer = new Replayer(events);
+      replayer.pause(0);
+
+      // fast forward past the insertedRules at 500 and mutations at 900
+      replayer.pause(905);
+      const styleSheets = Array.from(replayer.iframe.contentDocument.styleSheets);
+
+      // find the inlineStyleSheet that has the cssRule with the selectorText '.original-style-rule'
+      const inlineStyleSheet = styleSheets.find(sheet => Array.from(sheet.cssRules).find(rule => rule.selectorText === '.original-style-rule'));
+      inlineStyleSheet.cssRules.length;
+    `);
+
+    // verify the inserted cssRule didn't get dropped
+    expect(result).toEqual(2);
+  });
+
   it('should persist StyleSheetRule changes when skipping triggers parent style element to move in diff', async () => {
     await page.evaluate(`events = ${JSON.stringify(movingStyleSheetOnDiff)}`);