From 925fb21bc031a345f3a8e1b47e38c3e061d8cb1d Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Fri, 15 Jan 2021 17:29:41 +0000
Subject: [PATCH 1/3] Don't store the full style attribute change, as small
 mutations to single style properties result in storage of a rewrite for the
 full style attribute, which may be very large.

Had an example of a website using http://schillmania.com/projects/snowstorm/ where many direct style changes were happening every second across many 'snowflake' elements, with each attribute change looking like:
"style":"color: rgb(255, 255, 255); position: absolute; width: 8px; height: 8px; font-family: arial, verdana; overflow: hidden; font-weight: normal; z-index: 0; display: block; bottom: auto; opacity: 1; padding: 0px; margin: 0px; font-size: 10px; line-height: 10px; text-align: center; vertical-align: baseline; left: 242.807px; top: 85.7332px;"
even though maybe just the left/top position had been changed
---
 src/record/mutation.ts                      | 43 +++++++++++++++++----
 src/replay/index.ts                         | 32 +++++++++------
 src/types.ts                                |  8 +++-
 test/__snapshots__/integration.test.ts.snap | 29 +++++++++++++-
 test/utils.ts                               | 19 +++++----
 5 files changed, 101 insertions(+), 30 deletions(-)

diff --git a/src/record/mutation.ts b/src/record/mutation.ts
index 04f0065b80..a7a65b25a8 100644
--- a/src/record/mutation.ts
+++ b/src/record/mutation.ts
@@ -449,6 +449,7 @@ export default class MutationBuffer {
         break;
       }
       case 'attributes': {
+        const target = (m.target as HTMLElement);
         let value = (m.target as HTMLElement).getAttribute(m.attributeName!);
         if (m.attributeName === 'value') {
           value = maskInputValue({
@@ -472,13 +473,41 @@ export default class MutationBuffer {
           };
           this.attributes.push(item);
         }
-        // overwrite attribute if the mutations was triggered in same time
-        item.attributes[m.attributeName!] = transformAttribute(
-          this.doc,
-          (m.target as HTMLElement).tagName,
-          m.attributeName!,
-          value!,
-        );
+        if (m.attributeName === 'style') {
+          const old = this.doc.createElement('span');
+          old.setAttribute('style', m.oldValue);
+          if (item.attributes['style'] === undefined) {
+            item.attributes['style'] = {};
+          }
+          for (let i=0; i<target.style.length; i++) {
+            let pname = target.style[i];
+            if (target.style.getPropertyValue(pname) !=
+                old.style.getPropertyValue(pname) ||
+                target.style.getPropertyPriority(pname) !=
+                old.style.getPropertyPriority(pname)) {
+              item.attributes['style'][pname] = [
+                target.style.getPropertyValue(pname),
+                target.style.getPropertyPriority(pname)
+              ];
+            }
+          }
+          for (let i=0; i<old.style.length; i++) {
+            let pname = old.style[i];
+            if (target.style.getPropertyValue(pname) === '' ||
+                !target.style.getPropertyValue(pname)  // covering potential non-standard browsers
+               ) {
+              item.attributes['style'][pname] = false;  // delete
+            }
+          }
+        } else {
+          // overwrite attribute if the mutations was triggered in same time
+          item.attributes[m.attributeName!] = transformAttribute(
+            this.doc,
+            (m.target as HTMLElement).tagName,
+            m.attributeName!,
+            value!,
+          );
+        }
         break;
       }
       case 'childList': {
diff --git a/src/replay/index.ts b/src/replay/index.ts
index b5cbacb95c..8e5c3fe079 100644
--- a/src/replay/index.ts
+++ b/src/replay/index.ts
@@ -1310,18 +1310,28 @@ export class Replayer {
       for (const attributeName in mutation.attributes) {
         if (typeof attributeName === 'string') {
           const value = mutation.attributes[attributeName];
-          try {
-            if (value !== null) {
-              ((target as Node) as Element).setAttribute(attributeName, value);
-            } else {
-              ((target as Node) as Element).removeAttribute(attributeName);
+          if (typeof value === 'string') {
+            try {
+              if (value !== null) {
+                ((target as Node) as Element).setAttribute(attributeName, value);
+              } else {
+                ((target as Node) as Element).removeAttribute(attributeName);
+              }
+            } catch (error) {
+              if (this.config.showWarning) {
+                console.warn(
+                  'An error occurred may due to the checkout feature.',
+                  error,
+                );
+              }
             }
-          } catch (error) {
-            if (this.config.showWarning) {
-              console.warn(
-                'An error occurred may due to the checkout feature.',
-                error,
-              );
+          } else if (attributeName === 'style') {
+            for (var s in value) {
+              if (value[s] === false) {
+                ((target as Node) as Element).style.removeProperty(s);
+              } else {
+                ((target as Node) as Element).style.setProperty(s, value[s][0], value[s][1]);
+              }
             }
           }
         }
diff --git a/src/types.ts b/src/types.ts
index d90ea4f845..96bd4de72b 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -294,16 +294,20 @@ export type textMutation = {
   value: string | null;
 };
 
+export type styleAttributeValue = {
+  [key:string]: [string, string] | false;
+};
+
 export type attributeCursor = {
   node: Node;
   attributes: {
-    [key: string]: string | null;
+    [key: string]: string | styleAttributeValue | null;
   };
 };
 export type attributeMutation = {
   id: number;
   attributes: {
-    [key: string]: string | null;
+    [key: string]: string | styleAttributeValue | null;
   };
 };
 
diff --git a/test/__snapshots__/integration.test.ts.snap b/test/__snapshots__/integration.test.ts.snap
index 35294f80f4..21144ceb68 100644
--- a/test/__snapshots__/integration.test.ts.snap
+++ b/test/__snapshots__/integration.test.ts.snap
@@ -7428,14 +7428,39 @@ exports[`select2 1`] = `
           \\"id\\": 36,
           \\"attributes\\": {
             \\"id\\": \\"select2-drop\\",
-            \\"style\\": \\"left: Npx; width: Npx; top: Npx; bottom: auto; display: block;\\",
+            \\"style\\": {
+              \\"left\\": [
+                \\"Npx\\",
+                \\"\\"
+              ],
+              \\"width\\": [
+                \\"Npx\\",
+                \\"\\"
+              ],
+              \\"top\\": [
+                \\"Npx\\",
+                \\"\\"
+              ],
+              \\"bottom\\": [
+                \\"auto\\",
+                \\"\\"
+              ],
+              \\"display\\": [
+                \\"block\\",
+                \\"\\"
+              ],
+              \\"position\\": false,
+              \\"visibility\\": false
+            },
             \\"class\\": \\"select2-drop select2-display-none select2-with-searchbox select2-drop-active\\"
           }
         },
         {
           \\"id\\": 70,
           \\"attributes\\": {
-            \\"style\\": \\"\\"
+            \\"style\\": {
+              \\"display\\": false
+            }
           }
         },
         {
diff --git a/test/utils.ts b/test/utils.ts
index 348bed7164..87dfa31fa5 100644
--- a/test/utils.ts
+++ b/test/utils.ts
@@ -75,14 +75,16 @@ function stringifySnapshots(snapshots: eventWithTime[]): string {
           s.data.source === IncrementalSource.Mutation
         ) {
           s.data.attributes.forEach((a) => {
-            if (
-              'style' in a.attributes &&
-              coordinatesReg.test(a.attributes.style!)
-            ) {
-              a.attributes.style = a.attributes.style!.replace(
-                coordinatesReg,
-                '$1: Npx',
-              );
+            if ('style' in a.attributes && a.attributes.style && typeof a.attributes.style === 'object') {
+	            for (const [k, v] of Object.entries(a.attributes.style)) {
+		            if (Array.isArray(v)) {
+		              if (coordinatesReg.test(k + ': ' + v[0])) {
+		                // TODO: could round the number here instead depending on what's coming out of various test envs
+		                a.attributes.style[k] = ['Npx', v[1]];
+		              }
+		            }
+		            coordinatesReg.lastIndex = 0; // wow, a real wart in ECMAScript
+	            }
             }
           });
           s.data.adds.forEach((add) => {
@@ -97,6 +99,7 @@ function stringifySnapshots(snapshots: eventWithTime[]): string {
                 '$1: Npx',
               );
             }
+	    coordinatesReg.lastIndex = 0; // wow, a real wart in ECMAScript
           });
         }
         delete s.timestamp;

From 83072561b0707543f1799190827418143ebc2f59 Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Wed, 20 Jan 2021 15:54:35 +0000
Subject: [PATCH 2/3] More compact storage for the much more common attribute
 value without an `!important` flag - saves 6 chars per style attr in the json
 :)

---
 src/record/mutation.ts                      | 17 ++++----
 src/replay/index.ts                         |  4 +-
 src/types.ts                                |  2 +-
 test/__snapshots__/integration.test.ts.snap | 47 ++++++++++++---------
 test/integration.test.ts                    |  3 +-
 test/utils.ts                               |  6 ++-
 6 files changed, 47 insertions(+), 32 deletions(-)

diff --git a/src/record/mutation.ts b/src/record/mutation.ts
index a7a65b25a8..2344265c27 100644
--- a/src/record/mutation.ts
+++ b/src/record/mutation.ts
@@ -481,14 +481,15 @@ export default class MutationBuffer {
           }
           for (let i=0; i<target.style.length; i++) {
             let pname = target.style[i];
-            if (target.style.getPropertyValue(pname) !=
-                old.style.getPropertyValue(pname) ||
-                target.style.getPropertyPriority(pname) !=
-                old.style.getPropertyPriority(pname)) {
-              item.attributes['style'][pname] = [
-                target.style.getPropertyValue(pname),
-                target.style.getPropertyPriority(pname)
-              ];
+            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 == '') {
+                item.attributes['style'][pname] = newValue;
+              } else {
+                item.attributes['style'][pname] = [newValue, newPriority];
+              }
             }
           }
           for (let i=0; i<old.style.length; i++) {
diff --git a/src/replay/index.ts b/src/replay/index.ts
index 8e5c3fe079..de4b80a785 100644
--- a/src/replay/index.ts
+++ b/src/replay/index.ts
@@ -1329,8 +1329,10 @@ export class Replayer {
             for (var s in value) {
               if (value[s] === false) {
                 ((target as Node) as Element).style.removeProperty(s);
-              } else {
+              } else if (Array.isArray(value[s])) {
                 ((target as Node) as Element).style.setProperty(s, value[s][0], value[s][1]);
+              } else {
+                ((target as Node) as Element).style.setProperty(s, value[s]);
               }
             }
           }
diff --git a/src/types.ts b/src/types.ts
index 96bd4de72b..baa50b47a9 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -295,7 +295,7 @@ export type textMutation = {
 };
 
 export type styleAttributeValue = {
-  [key:string]: [string, string] | false;
+  [key:string]: [string, string] | string | false;
 };
 
 export type attributeCursor = {
diff --git a/test/__snapshots__/integration.test.ts.snap b/test/__snapshots__/integration.test.ts.snap
index 21144ceb68..ca16fefbef 100644
--- a/test/__snapshots__/integration.test.ts.snap
+++ b/test/__snapshots__/integration.test.ts.snap
@@ -7429,26 +7429,11 @@ exports[`select2 1`] = `
           \\"attributes\\": {
             \\"id\\": \\"select2-drop\\",
             \\"style\\": {
-              \\"left\\": [
-                \\"Npx\\",
-                \\"\\"
-              ],
-              \\"width\\": [
-                \\"Npx\\",
-                \\"\\"
-              ],
-              \\"top\\": [
-                \\"Npx\\",
-                \\"\\"
-              ],
-              \\"bottom\\": [
-                \\"auto\\",
-                \\"\\"
-              ],
-              \\"display\\": [
-                \\"block\\",
-                \\"\\"
-              ],
+              \\"left\\": \\"Npx\\",
+              \\"width\\": \\"Npx\\",
+              \\"top\\": \\"Npx\\",
+              \\"bottom\\": \\"auto\\",
+              \\"display\\": \\"block\\",
               \\"position\\": false,
               \\"visibility\\": false
             },
@@ -7875,6 +7860,28 @@ exports[`select2 1`] = `
       \\"type\\": 0,
       \\"id\\": 70
     }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [
+        {
+          \\"id\\": 36,
+          \\"attributes\\": {
+            \\"style\\": {
+              \\"color\\": [
+                \\"black\\",
+                \\"important\\"
+              ]
+            }
+          }
+        }
+      ],
+      \\"removes\\": [],
+      \\"adds\\": []
+    }
   }
 ]"
 `;
diff --git a/test/integration.test.ts b/test/integration.test.ts
index 9c0c52c867..5949b75325 100644
--- a/test/integration.test.ts
+++ b/test/integration.test.ts
@@ -184,7 +184,8 @@ describe('record integration tests', function (this: ISuite) {
 
     // toggle the select box
     await page.click('.select2-container', { clickCount: 2, delay: 100 });
-
+    // test storage of !important style
+    await page.evaluate('document.getElementById("select2-drop").setAttribute("style", document.getElementById("select2-drop").style.cssText + "color:black !important")');
     const snapshots = await page.evaluate('window.snapshots');
     assertSnapshot(snapshots, __filename, 'select2');
   });
diff --git a/test/utils.ts b/test/utils.ts
index 87dfa31fa5..d920501182 100644
--- a/test/utils.ts
+++ b/test/utils.ts
@@ -82,6 +82,10 @@ function stringifySnapshots(snapshots: eventWithTime[]): string {
 		                // TODO: could round the number here instead depending on what's coming out of various test envs
 		                a.attributes.style[k] = ['Npx', v[1]];
 		              }
+		            } else if (typeof v === 'string') {
+		              if (coordinatesReg.test(k + ': ' + v)) {
+		                a.attributes.style[k] = 'Npx';
+		              }
 		            }
 		            coordinatesReg.lastIndex = 0; // wow, a real wart in ECMAScript
 	            }
@@ -99,7 +103,7 @@ function stringifySnapshots(snapshots: eventWithTime[]): string {
                 '$1: Npx',
               );
             }
-	    coordinatesReg.lastIndex = 0; // wow, a real wart in ECMAScript
+            coordinatesReg.lastIndex = 0; // wow, a real wart in ECMAScript
           });
         }
         delete s.timestamp;

From ea78955261ef341e2c367717baf8c4bad2595e6d Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Fri, 25 Jun 2021 14:33:06 +0100
Subject: [PATCH 3/3] Fix bug: attributes weren't getting removed after changes
 to treatment of 'style' attributes

---
 src/replay/index.ts | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/replay/index.ts b/src/replay/index.ts
index de4b80a785..a9d2152c7b 100644
--- a/src/replay/index.ts
+++ b/src/replay/index.ts
@@ -1310,13 +1310,11 @@ export class Replayer {
       for (const attributeName in mutation.attributes) {
         if (typeof attributeName === 'string') {
           const value = mutation.attributes[attributeName];
-          if (typeof value === 'string') {
+          if (value === null) {
+            ((target as Node) as Element).removeAttribute(attributeName);
+          } else if (typeof value === 'string') {
             try {
-              if (value !== null) {
-                ((target as Node) as Element).setAttribute(attributeName, value);
-              } else {
-                ((target as Node) as Element).removeAttribute(attributeName);
-              }
+              ((target as Node) as Element).setAttribute(attributeName, value);
             } catch (error) {
               if (this.config.showWarning) {
                 console.warn(