Bug 179040 - Web Inspector: Styles Redesign: Hovering over a selector should highlight matching elements on the page
Summary: Web Inspector: Styles Redesign: Hovering over a selector should highlight mat...
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Normal
Assignee: Nikita Vasilyev
Keywords: InRadar
Depends on:
Blocks: 177471
  Show dependency treegraph
Reported: 2017-10-30 17:39 PDT by Nikita Vasilyev
Modified: 2017-11-01 12:10 PDT (History)
4 users (show)

See Also:

Patch (2.95 KB, patch)
2017-10-31 16:13 PDT, Nikita Vasilyev
hi: review+
Details | Formatted Diff | Diff
[Animated GIF] With patch applied (308.95 KB, image/gif)
2017-10-31 16:15 PDT, Nikita Vasilyev
no flags Details
Patch (2.74 KB, patch)
2017-11-01 11:37 PDT, Nikita Vasilyev
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Nikita Vasilyev 2017-10-30 17:39:50 PDT
A feature of the old Styles sidebar that hasn't been implemented in the redesigned styles sidebar yet.

Comment 1 Nikita Vasilyev 2017-10-31 16:13:03 PDT
Created attachment 325511 [details]
Comment 2 Nikita Vasilyev 2017-10-31 16:15:25 PDT
Created attachment 325512 [details]
[Animated GIF] With patch applied
Comment 3 Nikita Vasilyev 2017-10-31 16:37:57 PDT
Besides mouseover/mouseout, the old styles sidebar has code to highlight selectors when focusing on the selector field. This is nearly useless, since there's no way to Tab or Shift-Tab into a selector field, e.g. selector fields don't have appropriate tabIndex and pressing Tab or Shift-Tab when editing properties doesn't move focus away from CodeMirror instances.

In addition to this, highlighting selectors on focus may create a few confusing states:
1. Focus on selector ".foo".
2. Hover over selector ".bar". Should it highlight ".foo" or ".bar"?
3. Move the mouse cursor away from ".bar". Should it highlight ".foo" or nothing?

I think we should keep things simple and only highlight selectors when hovering over them.
Comment 4 Devin Rousso 2017-10-31 19:43:54 PDT
Comment on attachment 325511 [details]

View in context: https://bugs.webkit.org/attachment.cgi?id=325511&action=review

> Source/WebInspectorUI/ChangeLog:13
> +        Use mouseenter/mouseleave events instead of mousein/mouseout (as in the old styles sidebar)
> +        to avoid unnecessary events being fired:
> +          - mouseenter/mouseleave fires once when the mouse cursor enters/leaves the element.
> +          - mousein/mouseout fires every time the mouse cursor enters/leaves the element and any of its children.

I don't think this explanation is necessary, especially since you aren't modifying the old sidebar.  Feel free to keep it if you think it adds something though :)
Comment 5 Nikita Vasilyev 2017-11-01 11:37:38 PDT
Created attachment 325602 [details]
Comment 6 WebKit Commit Bot 2017-11-01 12:10:23 PDT
Comment on attachment 325602 [details]

Clearing flags on attachment: 325602

Committed r224286: <https://trac.webkit.org/changeset/224286>
Comment 7 WebKit Commit Bot 2017-11-01 12:10:25 PDT
All reviewed patches have been landed.  Closing bug.