1529898 - [meta] Visual Picker

Status: NEW

(DevTools :: Inspector, enhancement, P3)

Description

[Patrick Brosset <:pbro>]

People find it hard to locate the elements that contribute to a given location on a page. Often this location is an empty area that people are trying to debug.
This is especially true when the DOM tree is very deeply nested and many of the elements contribute a bit of the margin, padding or gap pushing elements apart.
Users of DevTools end up having to select many elements, one by one, each time looking at the CSS rules to determine what effect the particular element has.
The current picker isn't always helpful. Users can't always select the thing they'd like to.
The current picker either selects an element that happens to be in front of the area they want to select, or this area is empty and they end up select a background wrapper.

The current high-level idea is this:

The Visual Picker would let users click anywhere in the page, just like the Element Picker does, but would give access to all the elements that contribute to this particular position and why they do.