1430473 - Highlight CSS Grid's named-lines and named-areas when hover above CSS value

Status: UNCONFIRMED

(DevTools :: Inspector: Rules, enhancement, P3)

Description

[mike]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36

Steps to reproduce:

GSS Grid allows for "named areas" using the grid-template-area property. See https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas .

Similarly for CSS Grid also allows for "named lines" using the grid-template-columns and grid-template-rows properties. See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines .



Expected results:

It would be extremely valuable if when hovering your mouse over an an area's name, the corresponding area would highlight within the webpage.

Similarly, it would also be extremely awesomely, super-duper helpful if the corresponding line would highlight when the text for the named line is hovered over in the CSS property.