Bug 209489

Summary: Web Inspector: Styles: modified CSS property doesn't get saved properly
Product: WebKit Reporter: Nikita Vasilyev <nvasilyev>
Component: Web InspectorAssignee: Nikita Vasilyev <nvasilyev>
Status: ASSIGNED ---    
Severity: Normal CC: inspector-bugzilla-changes, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: WebKit Nightly Build   
Hardware: All   
OS: All   

Description Nikita Vasilyev 2020-03-24 13:00:22 PDT 
<rdar://problem/56167918>

To reproduce:
1. Open about:blank and inspect <body>
2. Under Style Attribute...
3. Add a new item of type "display"
4. Hit tab to go to the value field and press down arrow over a number of items. Select one.
5. Delete the value of the previously specified item and repeat step 4, selecting a different one.
6. Repeat step #5, but by typing part of the element and the accepting it using the enter key

For example, I chose -webkit-inline-flex as the value this time, but it received value -webkit-box.

Also the html elements inspector shows that I received style value:
display: inline-flex;lex;ne-flex;n;ne-flex;ne-flex;
Comment 1 Nikita Vasilyev 2020-03-24 13:22:05 PDT 
Over the last 3 years, I've seen >5 bugs like this one. The problem has been that text ranges (CSSProperty#styleSheetTextRange and CSSProperty#styleSheetTextRange) are out of sync with the text.

I'm going to try a different approach this time.

When saving CSS property changes, instead of relying on text ranges, format the entire CSSStyleDeclaration (using generateCSSRuleString or similar). This way we wouldn't need to use text ranges at all. CSSProperty model would be the single source of truth.

The only downside is that the original formatting would get changed. I don't think it's that important. My guesstimate is that >90% of people use either CSS preprocessors or CSS in JS. They don't care about formatting. The remaining <10% might care about formatting, but even out of those I imagine <5% save entire CSS resources from Web Inspector. If this is more or less true, I'm willing to always save formatted CSS.