Bug 183755 – Web Inspector: Styles: Don't remove or add style sections while CSS property or selector is focused

• Status: ASSIGNED
• Component: Web Inspector

[Nikita Vasilyev]

Steps:
1. Open Web Inspector.
2. Navigate to http://nv.github.io/webkit-inspector-bugs/styles-redesign/tests/style-added-removed-via-js.html
3. Inspect any <p> element.
4. Add a "font-family" property to Style Attribute.
5. Press Tab to focus on the value field.
6. Wait for 3 seconds.

Actual:
Focus is lost and "font-family" property is discarded.

Expected:
Focus stays on the "font-family" value field.

Notes:
On the reduction page, `p {color: mediumpurple}` gets added or removed every 3 seconds.
Currently, the styles sidebar panel updates when it happens.

Possible solutions are:
A) Update styles sidebar without reseting the focus (by using virtual DOM or some other way to do smart partial updates).
B) Don't insert/remove style sections while a CSS property or selector is focused. This is what the legacy styles editor does.

While option A would be idea, due to time constraints, I suggest to implement B.

[Radar WebKit Bug Importer]

<rdar://problem/38639984>