Bug 183755 - Web Inspector: Styles: Don't remove or add style sections while CSS property or selector is focused
Summary: Web Inspector: Styles: Don't remove or add style sections while CSS property ...
Status: ASSIGNED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Normal
Assignee: Nikita Vasilyev
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2018-03-19 16:05 PDT by Nikita Vasilyev
Modified: 2018-03-19 16:06 PDT (History)
2 users (show)

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Nikita Vasilyev 2018-03-19 16:05:35 PDT 
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.
Comment 1 Radar WebKit Bug Importer 2018-03-19 16:05:57 PDT 
<rdar://problem/38639984>