Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Compact style mutation #464

Merged
merged 3 commits into from
Jul 11, 2021
Merged

Compact style mutation #464

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
925fb21
Don't store the full style attribute change, as small mutations to si…
eoghanmurray Jan 15, 2021
8307256
More compact storage for the much more common attribute value without…
eoghanmurray Jan 20, 2021
ea78955
Fix bug: attributes weren't getting removed after changes to treatmen…
eoghanmurray Jun 25, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 37 additions & 7 deletions src/record/mutation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -472,13 +473,42 @@ 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];
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++) {
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': {
Expand Down
30 changes: 20 additions & 10 deletions src/replay/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
if (value === null) {
((target as Node) as Element).removeAttribute(attributeName);
} else if (typeof value === 'string') {
try {
((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 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]);
}
}
}
}
Expand Down
8 changes: 6 additions & 2 deletions src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -294,16 +294,20 @@ export type textMutation = {
value: string | null;
};

export type styleAttributeValue = {
[key:string]: [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;
};
};

Expand Down
36 changes: 34 additions & 2 deletions test/__snapshots__/integration.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
}
},
{
Expand Down Expand Up @@ -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\\": []
}
}
]"
`;
Expand Down
3 changes: 2 additions & 1 deletion test/integration.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});
Expand Down
23 changes: 15 additions & 8 deletions test/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand All @@ -97,6 +103,7 @@ function stringifySnapshots(snapshots: eventWithTime[]): string {
'$1: Npx',
);
}
coordinatesReg.lastIndex = 0; // wow, a real wart in ECMAScript
});
}
delete s.timestamp;
Expand Down