Web Inspector: visualize search-by-selector results on the overlay and DOM content view

• Component: Web Inspector
• Status: RESOLVED FIXED

[Sam Aaron]

SelectorGadget (http://www.selectorgadget.com/) is a really useful Javascript tool that allows you to enter a mode in which you can directly interact with the webpage and through the selection and deselection of page elements you can narrow down on a css selector for the highlighted items on the screen. You can also directly enter a css selector and see the matching elements become highlighted.

I'm thinking that the interface might be similar to the search interface: the screen goes slightly grey, and the highlighted nodes pop up in an animated fashion to make the user.

It would also be wonderful to have this interact with the inspector, it would be a more interactive version of the 'right-click inspect element. By mousing over an element, the html subtree in the Inspector would highlight, and similar to the suggestion above, the css selector generated would also highlight the html subtree.

[Radar WebKit Bug Importer]

<rdar://problem/15919605>

[Blaze Burg]

Hi Sam, most of what you mentioned that's not related to synthesizing a selector already works:

- Selecting an element reveals it in the Elements tab and in console
- highlighting a selector in the CSS Rules sidebar highlights all matching rules on the page

I don't think we want to incorporate the selector synthesis stuff if it's already possible to do with a bookmarklet.