Bug 218035 - Web Inspector: Can't edit certain style rules on twitter.com (created by React Native StyleSheet)
Summary: Web Inspector: Can't edit certain style rules on twitter.com (created by Reac...
Status: ASSIGNED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Normal
Assignee: Nikita Vasilyev
URL: https://reactnative.dev/docs/stylesheet
Keywords: InRadar
: 218297 (view as bug list)
Depends on:
Blocks:
 
Reported: 2020-10-21 10:09 PDT by Nikita Vasilyev
Modified: 2020-11-04 14:02 PST (History)
3 users (show)

See Also:

Attachments
[HTML] Reduction (112 bytes, text/html)
2020-11-04 13:21 PST, Nikita Vasilyev 		no flags Details
[HTML] Reduction (117 bytes, text/html)
2020-11-04 13:22 PST, Nikita Vasilyev 		no flags Details
WIP (4.67 KB, patch)
2020-11-04 14:02 PST, Nikita Vasilyev 		nvasilyev: review-
nvasilyev: commit-queue-
Details | Formatted Diff | Diff
Show Obsolete (1) View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
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.