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

See Also:

https://bugs.webkit.org/show_bug.cgi?id=273760

Attachments:

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

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-	Details Formatted Diff Diff
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.