Merge branch 'master' into jb/perf/replay

packages/rrweb/src/record/mutation.ts

@@ -436,7 +436,8 @@ export default class MutationBuffer {
 
     const texts = [];
     for (let i = 0; i < this.texts.length; i++) {
-      if (!this.mirror.getId(this.texts[i].node)) {
+      const id = this.mirror.getId(this.texts[i].node);
+      if (addedIds.has(id) || this.mirror.has(id)) {
         continue;
       }
       texts.push({
@@ -448,9 +449,28 @@ export default class MutationBuffer {
     const attributes = [];
     for (let i = 0; i < this.attributes.length; i++) {
       const id = this.mirror.getId(this.attributes[i].node);
-      if (!id && id !== 0) {
+      if (addedIds.has(id) || this.mirror.has(id)) {
         continue;
       }
+
+      const { attributes: elAttributes } = this.attributes[i];
+      if (typeof elAttributes.style === 'string') {
+        const diffAsStr = JSON.stringify(this.attributes[i].styleDiff);
+        const unchangedAsStr = JSON.stringify(this.attributes[i]._unchangedStyles);
+        // check if the style diff is actually shorter than the regular string based mutation
+        // (which was the whole point of #464 'compact style mutation').
+        if (diffAsStr.length < elAttributes.style.length) {
+          // also: CSSOM fails badly when var() is present on shorthand properties, so only proceed with
+          // the compact style mutation if these have all been accounted for
+          if (
+            (diffAsStr + unchangedAsStr).split('var(').length ===
+            elAttributes.style.split('var(').length
+          ) {
+            elAttributes.style = this.attributes[i].styleDiff;
+          }
+        }
+      }
+
       attributes.push({
         id,
         attributes: this.attributes[i].attributes,
@@ -459,9 +479,7 @@ export default class MutationBuffer {
 
     const payload = {
       texts,
-      // text mutation's id was not in the mirror map means the target node has been removed
       attributes,
-      // attribute mutation's id was not in the mirror map means the target node has been removed
       removes: this.removes,
       adds,
     };
@@ -575,47 +593,7 @@ export default class MutationBuffer {
           target.setAttribute('data-rr-is-password', 'true');
         }
 
-        if (attributeName === 'style') {
-          let unattachedDoc;
-          try {
-            // avoid upsetting original document from a Content Security point of view
-            unattachedDoc = document.implementation.createHTMLDocument();
-          } catch (e) {
-            // fallback to more direct method
-            unattachedDoc = this.doc;
-          }
-          const old = unattachedDoc.createElement('span');
-          if (m.oldValue) {
-            old.setAttribute('style', m.oldValue);
-          }
-          if (
-            item.attributes.style === undefined ||
-            item.attributes.style === null
-          ) {
-            item.attributes.style = {};
-          }
-          const styleObj = item.attributes.style as styleAttributeValue;
-          for (const pname of Array.from(target.style)) {
-            const newValue = target.style.getPropertyValue(pname);
-            const newPriority = target.style.getPropertyPriority(pname);
-            if (
-              newValue !== old.style.getPropertyValue(pname) ||
-              newPriority !== old.style.getPropertyPriority(pname)
-            ) {
-              if (newPriority === '') {
-                styleObj[pname] = newValue;
-              } else {
-                styleObj[pname] = [newValue, newPriority];
-              }
-            }
-          }
-          for (const pname of Array.from(old.style)) {
-            if (target.style.getPropertyValue(pname) === '') {
-              // "if not set, returns the empty string"
-              styleObj[pname] = false; // delete
-            }
-          }
-        } else if (!ignoreAttribute(target.tagName, attributeName, value)) {
+        if (!ignoreAttribute(target.tagName, attributeName, value)) {
           // overwrite attribute if the mutations was triggered in same time
           item.attributes[attributeName] = transformAttribute(
             this.doc,
@@ -624,6 +602,14 @@ export default class MutationBuffer {
             value,
           );
           if (attributeName === 'style') {
+            let unattachedDoc;
+          try {
+            // avoid upsetting original document from a Content Security point of view
+            unattachedDoc = document.implementation.createHTMLDocument();
+          } catch (e) {
+            // fallback to more direct method
+            unattachedDoc = this.doc;
+          }
             const old = unattachedDoc.createElement('span');
             if (m.oldValue) {
               old.setAttribute('style', m.oldValue);