1369944 - CSS Grid Inspector: Make it clearer where the Explicit Grid ends and the Implicit Grid starts

Status: NEW

(DevTools :: Inspector, enhancement, P3)

Description

[Jen Simmons [:jensimmons]]

There seems to be an inconsistent use of solid, dashed, and dotted lines in the CSS Grid Inspector (as of June 2, 2017).

Look at these screenshots:

a) https://monosnap.com/file/TL16efxPu2c2yR9WCOX5gvgVkGvIAS.png

b) https://monosnap.com/file/pzZzy4jZG0aHuXEv3TuVhOPN9tgpyi.png

c) https://monosnap.com/file/0g0XU5UkLoavd3f3LTe9xhQiumgbgG.png

This makes no sense. It is not clear what is going on.


In example A, the Grid Container's top and left lines are solid. The bottom line is solid. And the right-hand edge is dotted. The Row lines are dashed. (There are no internal column lines). The rows are explicitly defined, while the column is implicit.

In example B, the Grid Container's top and left lines are solid. The bottom line is dotted. And the right-hand edge is solid. The Row lines are dotted. And the column lines are dashed. The columns are explicitly defined, while the rows are implicit.

In example C, the Grid Container's top and left lines are solid. The bottom line is dotted. And the right-hand edge is dotted. The Row lines are dotted. And the column lines are dotted. This entire grid is implicit.


In my understanding, the Grid container should be a solid line on all four sides, no matter how the Grid is defined.

Any explicitly-defined lines should be dashed, and any implicit-lines should be dotted. Now that I write all of this out, I can see that the dashed and dotted lines are being applied correctly. So — how can we make this tool make more sense? 

1) If we can make the dotted and dashed lines be more visually distinct, I think that would help. Perhaps we can thicken the lines to do so.

2) The four edges of the Grid Container should all be solid.

3) Perhaps we should reconsider the way we've mapped solid, dashed and dotted to have these meanings. I've seen other diagrams where other visual distinctions where made between explicit and implicit lines. Hm. More thinking about this could be helpful.

Comment 1

[Jen Simmons [:jensimmons]]

Here are a few more examples:

https://monosnap.com/file/FZGdC6OFlafQnTXMweZCqUKbxjGgpI.png

https://monosnap.com/file/bQN4Ez4T3ea20ftbSt7bgPAgdTXW9C.png

This is the first one that works the way I expect, also — I think it's the first one with an entirely explicit Grid.
https://monosnap.com/file/c2SiBnBAca33tDtOD3GMdwBs4eIZzb.png

https://monosnap.com/file/e0lCsbN2qdseOZVxRb6jtqo4aFGOjA.png

The more I dig into this, the more I see how it does make sense from the browser-engineering perspective. It's not that anything is "wrong" with the way this was built. But from the authoring/user perspective, there's something not quite working yet. It's not intuitive. Understanding what the lines represent does not come natural.