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.

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

[WIP] hack together stylesheet observer #124

Open
wants to merge 1 commit into
base: master
from

Conversation

@jperl
Copy link

jperl commented Aug 25, 2019

This is my very hacky fix implementing #104

@marcospassos

This comment has been minimized.

Copy link
Contributor

marcospassos commented Aug 25, 2019

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

This comment has been minimized.

Copy link
Author

jperl commented Aug 25, 2019

@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

This comment has been minimized.

Copy link
Contributor

marcospassos commented Aug 25, 2019

@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

This comment has been minimized.

Copy link
Author

jperl commented Aug 25, 2019

@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

This comment has been minimized.

Copy link
Member

Yuyz0112 commented Aug 26, 2019

@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

This comment has been minimized.

Copy link
Author

jperl commented Aug 26, 2019

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

@jperl jperl referenced this pull request Nov 5, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.