Bug 179040 – Web Inspector: Styles Redesign: Hovering over a selector should highlight matching elements on the page

• Status: RESOLVED
• Resolution: FIXED
• Component: Web Inspector

[Nikita Vasilyev]

A feature of the old Styles sidebar that hasn't been implemented in the redesigned styles sidebar yet.

<rdar://problem/35067795>

[Nikita Vasilyev]

Created attachment 325511 [details]
Patch

[Nikita Vasilyev]

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

[Nikita Vasilyev]

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.

[Devin Rousso]

Comment on attachment 325511 [details]
Patch

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 :)

[Nikita Vasilyev]

Created attachment 325602 [details]
Patch

[WebKit Commit Bot]

Comment on attachment 325602 [details]
Patch

Clearing flags on attachment: 325602

Committed r224286: <https://trac.webkit.org/changeset/224286>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.