1297100 - Highlight CSS grids when highlighting elements in the page
captainbrosset opened this issue · 2 comments
With bug 1297100 we now have a way in nightly (Firefox 52) to tell people inspecting elements on the page that css grid layouts exist and where they are.
One of the most important things you can do in devtools when someone has a css grid in their layout is actually show them the grid. Show where the lines, columns, rows are, the areas and the gaps.
On the long term, we will have a sidebar panel that gives users ways to find grids and highlight them in the page, but before that happens, and in order to make it discoverable, we've done one very simple thing worth demoing:
any time you use the highlighter (be it when you pick elements from the page, or hover over elements in the inspector), if the currently highlighted element is a grid, or a child of the grid, then the grid is also highlighted.
See an example here:
@gabrielluong: maybe you're interested in working on a demo for this?
If you are, please review the README file to know how to create a new demo: https://github.com/mozdevs/devtools-demos/blob/master/README.md
The goal is if we have such a demo, then it becomes really easy to communicate about the feature. We can put have the demo running live on the server, have a video we can tweet about, blog about, etc.
Bug 1297100 was rolled back some time ago after we'd receive feedback that it wasn't as useful as other things. So let's hold off of this one for now.