Web Inspector: Styles: Typing value and quickly moving focus away may display outdated value in UI

[Nikita Vasilyev]

Created attachment 333332 [details]
[Animated GIF] Bug

Steps:
1. Add a new property "border".
2. Press Tab.
3. Quickly type "10px solid" and press Tab.

Expected:
Styles sidebar shows "border: 10px solid".

Actual:
Styles sidebar may show "border: ;".

Notes:
To make this bug easier to reproduce, change `WI.SpreadsheetStyleProperty.CommitCoalesceDelay = 250` to `1000`.
This is what I did in the attached animated GIF.

[Radar WebKit Bug Importer]

<rdar://problem/37332161>

[Nikita Vasilyev]

    spreadsheetTextFieldDidChange(textField)
    {
        if (textField === this._valueTextField)
            this.debounce(WI.SpreadsheetStyleProperty.CommitCoalesceDelay)._handleValueChange();

Because of the debounce function, values may get saved after losing the focus. When repaint happens, it displays old values.

We may get away by simply not using the debounce for values.

[Nikita Vasilyev]

Created attachment 333345 [details]
Patch

[Nikita Vasilyev]

Updates appear faster without the debounce, it feels better UX overall.

If we do have to throttle, it should be front-end to back-end payload (CSSAgent.setStyleText), not view to model.

[Nikita Vasilyev]

Created attachment 333346 [details]
[Animated GIF] With patch applied

[Matt Baker]

Comment on attachment 333345 [details]
Patch

r=me

[WebKit Commit Bot]

Comment on attachment 333345 [details]
Patch

Clearing flags on attachment: 333345

Committed r228296: <https://trac.webkit.org/changeset/228296>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.