ASSIGNED218035
Web Inspector: Can't edit certain style rules on twitter.com (created by React Native StyleSheet) 
https://bugs.webkit.org/show_bug.cgi?id=218035
Summary Web Inspector: Can't edit certain style rules on twitter.com (created by Reac...
Nikita Vasilyev
Reported 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.
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-
DetailsFormatted DiffDiff
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2020-10-21 10:09:14 PDT
<rdar://problem/70533893>
Nikita Vasilyev
Comment 2 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
Nikita Vasilyev
Comment 3 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.
Nikita Vasilyev
Comment 4 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.
Nikita Vasilyev
Comment 5 2020-10-28 11:31:26 PDT
*** Bug 218297 has been marked as a duplicate of this bug. ***
Nikita Vasilyev
Comment 6 2020-11-04 13:21:38 PST
Created attachment 413201 [details] [HTML] Reduction
Nikita Vasilyev
Comment 7 2020-11-04 13:22:41 PST
Created attachment 413202 [details] [HTML] Reduction
Nikita Vasilyev
Comment 8 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.
Note You need to log in before you can comment on or make changes to this bug.