Compact style mutation (#464)

* 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

* More compact storage for the much more common attribute value without an `!important` flag - saves 6 chars per style attr in the json :)

* Fix bug: attributes weren't getting removed after changes to treatment of 'style' attributes

test/__snapshots__/integration.test.ts.snap

@@ -7428,14 +7428,24 @@ 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
+            }
           }
         },
         {
@@ -7850,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\\": []
+    }
   }
 ]"
 `;

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');
   });

test/utils.ts

@@ -75,14 +75,20 @@ 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]];
+		              }
+		            } else if (typeof v === 'string') {
+		              if (coordinatesReg.test(k + ': ' + v)) {
+		                a.attributes.style[k] = 'Npx';
+		              }
+		            }
+		            coordinatesReg.lastIndex = 0; // wow, a real wart in ECMAScript
+	            }
             }
           });
           s.data.adds.forEach((add) => {
@@ -97,6 +103,7 @@ function stringifySnapshots(snapshots: eventWithTime[]): string {
                 '$1: Npx',
               );
             }
+            coordinatesReg.lastIndex = 0; // wow, a real wart in ECMAScript
           });
         }
         delete s.timestamp;