Bug 218035

Summary:

Web Inspector: Can't edit certain style rules on twitter.com (created by React Native StyleSheet)

Product:

WebKit

Reporter:

Nikita Vasilyev <nvasilyev>

Component:

Web Inspector

Assignee:

Nikita Vasilyev <nvasilyev>

Status:

ASSIGNED ---

Severity:

Normal

CC:

hi, inspector-bugzilla-changes, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

WebKit Nightly Build

Hardware:

All

OS:

All

URL:

https://reactnative.dev/docs/stylesheet

Attachments:

Description	Flags
[HTML] Reduction	none
[HTML] Reduction	none
WIP	nvasilyev: review-, nvasilyev: commit-queue-

Description Nikita Vasilyev 2020-10-21 10:09:01 PDT

Steps:
1. Open https://twitter.com (either logged in or not)
2. Inspect <body>
3. In the Styles sidebar, find "body {margin-top: 0px;}"
4. Click on "margin-top" to start editing

Editing doesn't start. The rule appears read-only for no apparent reason.
Note that the other body's CSS rules are editable.

Comment 1 Radar WebKit Bug Importer 2020-10-21 10:09:14 PDT

<rdar://problem/70533893>

Comment 2 Nikita Vasilyev 2020-10-21 10:57:49 PDT

When clicking on "margin-top":

[Error] TypeError: null is not an object (evaluating 'this._styleSheetTextRange.collapseToEnd')
	_rangeAfterPropertyAtIndex (CSSStyleDeclaration.js:547)
	newBlankProperty (CSSStyleDeclaration.js:412)
	addBlankProperty (SpreadsheetCSSStyleDeclarationEditor.js:326)
	_handleClick (SpreadsheetCSSStyleDeclarationSection.js:608)
	_handleClick

Comment 3 Nikita Vasilyev 2020-10-21 11:12:22 PDT

In Twitter HTML, I see this:

```
<style>
html, body {
    height: 100%;
}

body {
    -ms-overflow-style: scrollbar;
    overflow-y: scroll;
    overscroll-behavior-y: none;
}
</style>
<style id="react-native-stylesheet">
[stylesheet-group="0"] {
}

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
    margin: 0;
}
```

Everything in the 1st <style> element is editable just fine. Everything in the 2nd is not.

This CSSStyleDeclaration instance doesn't have `this._styleSheetTextRange` yet it has this.ownerStyleSheet. That's very odd.

Comment 4 Nikita Vasilyev 2020-10-21 11:23:33 PDT

None of these work: https://reactnative.dev/docs/stylesheet
This must have impacted many websites.

Investigating how React Native constructs stylesheets. My guess would be that it uses CSSOM.

Comment 5 Nikita Vasilyev 2020-10-28 11:31:26 PDT

*** Bug 218297 has been marked as a duplicate of this bug. ***

Comment 6 Nikita Vasilyev 2020-11-04 13:21:38 PST

Created attachment 413201 [details]
[HTML] Reduction

Comment 7 Nikita Vasilyev 2020-11-04 13:22:41 PST

Created attachment 413202 [details]
[HTML] Reduction

Comment 8 Nikita Vasilyev 2020-11-04 14:02:13 PST

Created attachment 413205 [details]
WIP

This diff has front-end changes necessary to make CSS properties editable. However, I discovered that the backend part is broken, too :(

```
<style id="style_element"></style>
<script>
style_element.sheet.insertRule("body {color: green}", 0);
</script>
```

With this WIP applied, inspect <body> and change the color from "green" to "blue". The following error will happen:

[Error] Error saving style: – "NotFoundError"
	styleTextDidChange (CSSStyleDeclaration.js:238)

The error is coming from the backend. Specifically, `target.CSSAgent.setStyleText(style.id, text, didSetStyleText)` can't seem to be able to find and update dynamically created styles.