1370004 - Rearrange the order of items on the Layout Tab

Status: RESOLVED FIXED

(DevTools :: Inspector, enhancement, P3)

Description

[Jen Simmons [:jensimmons]]

Patrick asked a question at the end of a ticket that's now complete, raising ideas about another bit of new work, so I'm opening a ticket to continue that conversation in a place where the results can be actionable. 

:pbro said here: https://bugzilla.mozilla.org/show_bug.cgi?id=1359763#c3

> Any thoughts about the following use case though: should the box model in the layout view be collapsed by default if there's a grid on the page?
> I can see 2 problems with it: if we already persisted a state, not restoring it in this case would break the expectations. And All other accordions in the app are opened by default (I think).
> Of course the idea behind doing something like is that if there's a grid and people are switching to the layout panel for the first time, and they have a rather tiny toolbox, they won't even see the grid section at all. 
> Another approach: make the grid section first, and box model section second. Simple, but effective. Knowing that the box model is already in the computed view, maybe we can afford to do this.


Here are my thoughts:

Are we keeping the Box Model in both the Layout Panel and the Computed Panel long term? Our original intention was to move the Box Model pane. Of course, this can't happen until things ship — but I don't see any need for the Box Model to be in two places. It's definitely not that important. 

Honestly, looking at it again, it seems like Box Model should go into Computed. And maybe only Computed. It is a display for authors to see what is currently being computed at that very moment, regarding the number of pixels of space between various boxes.

Perhaps the Box Model pane does not belong in the Layout Panel at all. Or maybe it's a good temporary thing, until the Layout Panel has more tools (like Flexbox and Alignment), and seems less empty when CSS Grid is not being used.

I do think in the meanwhile, since Box Model is in two places, it could go second in the Layout panel. 

It might make sense to also alter the empty message for pages that do not have any Grids. Right now it looks like this: https://monosnap.com/file/McP5UFBAgiGWv3DX51Auo5cdlGhgew.png
but for people who aren't very familiar with CSS Grid yet, that doesn't provide a lot of context. 

"No grids" with a lowercase 'g' makes it sound like there is no graphic design grid in place — which we have no idea whether that's true or not. Or it sounds like the site is not using any sort of grid framework (like Bootstrap), when it's likely that they are. 

How about instead the empty message says "CSS Grid is not being used on this page". That let's people know the pane is a tool for CSS Grid, not anything that involves the concept of a grid. And it explicitly let's people know — hey there is a tool here that works with CSS Grid. Once you start writing some CSS Grid code, you should come back here. 

So how about:
1) Put the Box Model pane last
2) Change the empty text to be more specific 
3) Make the minimum height of the Grid pane much taller

Put those three together and you get this: https://monosnap.com/file/OjQpLdH7A85pbxTF4x46sxDNO9xuZb.png
(Sorry that's the wrong font for the empty message... what is that font?)

Wait a minute! I just saw for the first time that this Box Model pane is different than the other one, because it has a list of Box Model Properties. Wait, that's handy.... ok, this makes me think we need a way for this pane to look different than the other one. It's too easy to breeze past it, thinking, I've already seen this and it's not helpful to me.

How about this?

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

1) Put the Box Model pane last
2) Put the Box Model Properties list first inside the Box Model pane, above the diagram of the box
2) Change the empty text in the Grid Pane to be more specific 
3) Make the minimum height of the Grid Pane much taller, and center the empty message vertically
4) Leave everything open by default, and remember state for each copy of Firefox (to remain across all sites/pages).

Comment 1

[Gabriel Luong [:gl] (ΦωΦ)]

Attachment: Bug 1370004 - Rearrange the order of the grid panel to be first on the Layout view and change the no grids display message.

Review commit: https://reviewboard.mozilla.org/r/146338/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/146338/

Comment 2

[Patrick Brosset <:pbro>]

Comment on attachment 8874978 [details]
Bug 1370004 - Rearrange the order of the grid panel to be first on the Layout view and change the no grids display message.

https://reviewboard.mozilla.org/r/146338/#review150588

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/1ccbaeaf822e
Rearrange the order of items on the Layout view. r=pbro

Comment 4

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/1ccbaeaf822e