[WIP] hack together stylesheet observer

[jperl]

This is my very hacky fix implementing #104

[marcospassos]

Hi @jperl, thank you for working on this.

One problem I see with your suggestion is the lack of support of Proxy. While not sure if this is the best way to tackle the problem, I would recommend using monkey-patching instead of a proxy. Even not ideal, it ensures backward compatibility.

[jperl]

@marcospassos Good point I just copied in this code without thinking about it -- that is an easy change to make.

Where do you recommend I inject the monkey patch -- for both the initial load and newly created elements?

Also how do you recommend testing this?

[marcospassos]

@jperl, I'd take another path for solving this problem:

• Monkey-patch the insertRule and removeRule globally, so that we don't need to track recently changed or newly added elements.
• Create a mechanism to stop listening to changes as soon as the recorder is turned off
• Create a new incremental snapshot event to explicitly report a CSS rule addition or removal
• Change the replayer to apply those changes to the document

Benefits

• Better performance, as we don't have to watch elements being added or changed
• More granularity in the event reporting (we'll only track the changes rather than the entire stylesheet)
• Improved browser support

// How to monkey-patch the insertRule globally
const insertRule = CSSStyleSheet.prototype.insertRule;

CSSStyleSheet.prototype.insertRule = function (rule: string) {
    dispatchEvent(/*...*/);

    return insertRule.apply(this, arguments);
}

[jperl]

@marcospassos That sounds like a much better approach.

@Yuyz0112 if you can confirm that you would be willing to merge the approach @marcospassos recommended, I am happy to take a stab at implementing it.

[Yuyz0112]

@marcospassos Thanks for the review!
@jperl I agree with the suggestions from @marcospassos and feel free to ping me if you meet any issue during implement this.

If you want to split this implementation into multiple PRs(which is recommended), I think it can be done with:

1. patch insertRule/deleteRule APIs.
2. add incremental events and observers in recording side.
3. replay the stylesheet events in the replaying side.

[jperl]

Sounds good I will split it into multiple PRs. EDIT: tracking in my sprint board here https://github.com/qawolf/qawolf/issues/121

[dcramer]

@jperl I might take a stab at moving forward with your work unless you were still actively looking into this. Let me know!

[jperl]

@dcramer Please do! Sorry I have been too busy to tackle this yet.

[dcramer]

I'm working on adapting this patch, and hoping someone can help clarify something.

I've disabled the observers and written a test which uses insertRule/deleteRule, however the test passes successfully where I'd expect it to fail. I believe thats because of the existing element mutation observers. How do I actually reproduce the core issue in isolation?

[dcramer]

NEVERMIND

[Yuyz0112]

Looks like we can close this one since #177 has been merged?

@jperl @dcramer

[dcramer]

👍 i just need to figure out how to get things into the replayer but ill work on that next opportunity i get