Bug 207562

Summary: Web Inspector: Incline swatches for variables with colors should update when variable value changes
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   
Bug Depends on: 205482    
Bug Blocks:    

Description Nikita Vasilyev 2020-02-11 10:27:45 PST
Color previews for variables with colors will be introduced in bug 205482. Color previews won't update when variable value changes:

1. inspect any page
2. add `color: var(--DoesNotExistVariable);` to the inline style of any node
 => no swatch is shown next to `var(--DoesNotExistVariable)`
3. add `--DoesNotExistVariable: red;` to some _other_ CSS rule that is already being applied to the current node
 => still no swatch next to `var(--DoesNotExistVariable)`

This issue is even more evident if the CSS variable _does_ exist.

1. inspect any page
2. add `--foo: red;` to the inline style of any node
3. add `color: var(--foo);` to the inline style of the same node as step #2
 => red color swatch is shown next to `var(--foo)`
3. add `--foo: blue !important;` to some _other_ CSS rule that is already being applied to the current node
 => still a red color swatch next to `var(--foo)` which _should_  be blue
Comment 1 Radar WebKit Bug Importer 2020-02-11 10:27:55 PST
Comment 2 Nikita Vasilyev 2020-02-11 10:48:43 PST
Here's how I plan to resolve this.

Editing a CSS variable value should cause full style editor layout. The full layout should happen when focus is moved from the value field (on spreadsheetTextFieldDidCommit). It should NOT happen on every key stroke.

The tricky part here is to focus on the right CSS property or selector after the value is committed. SpreadsheetCSSStyleDeclarationEditor handles this currently. However, the full style editor layout removes all SpreadsheetCSSStyleDeclarationEditor instances and creates new ones.

There are two general approaches of solving this:

1. Store what CSS rule, selector and property is pending focus at the higher level of the view hierarchy so it can be restored even after the full layout.

2. Don't update parts of the DOM that didn't change by comparing new data with the rendered data. One example of this approach is a virtual DOM.