Bug 207562 – Web Inspector: Incline swatches for variables with colors should update when variable value changes

• Status: ASSIGNED
• Component: Web Inspector

[Nikita Vasilyev]

Color previews for variables with colors will be introduced in bug 205482. Color previews won't update when variable value changes:

# STEPS TO REPRODUCE:
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.

# STEPS TO REPRODUCE
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

[Radar WebKit Bug Importer]

<rdar://problem/59353418>

[Nikita Vasilyev]

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.