Unified Layout Panel

[violasong]

Checklist

• Get more feedback from UX, devs
• Integrate Wolasi's feedback from Invision

Inspector: 3rd pane problems

1. Currently, the default tab of the 3rd pane, Layout, usually looks like two empty sections (Flexbox and Grid), followed by a large box model diagram, and list of properties that I suspect is not very useful. This means at least half the space could be considered wasteful clutter.
2. As we've been adding more tools into the Inspector's 3rd Pane, they start to get lost in the many tabs which get truncated. There's currently no way to tell if there's any relevant information available in tabs like Changes, Fonts, and Animations.

---

Proposed Solution

I want to turn the Layout tab into a little homepage of sorts, containing an overview of useful info and links into other parts of the 3rd pane. We should only surface info that is relevant to the currently selected element. Here are some of my current ideas:

1. Only show Flexbox and Grid sections if there is something to show.
2. Unify the box model diagram with other diagrams, such as the Flex Item diagram. Always show the box model first, in a more compact design that is more skimmable (e.g. 0px widths should look collapsed).
3. Create a clear differentiation between This Element and This Page. Flexbox would show up in Element and Grid would show up in Page.
4. In This Element, show an overview of important info from other tabs that are related to the current element, such as WebCompat issues, and perhaps Fonts, Changes, Animations.
5. In This Page, show links to other tabs if those tabs have information for elements elsewhere in the page. Could include brief text snippets of what those tabs contain.
6. Rethink Box Model Properties section.

The next tool will be a WebCompat tab, so many examples will be focused on WebCompat.

Latest design

Other mockups

• Initial smart panel exploration with rules-specific info in 3rd pane (I think this is not a good idea - better to keep rules specific info in Rules)
• Initial WebCompat explorations
• Design 1-5
• Design 5, continued

[violasong]

Design 5

[violasong]

I realized that with the plans for a dedicated WebCompat tab in the third pane, it would actually be displayed like this in the "shortcuts to other tabs" section. It would still bubble up to the "This Element" section when the error is on the selected element. Latest mockup:

(edit: updated image)

• If there's a WebCompat error tied to currently selected element: Under the "Current Element" section, there would be a compat section that appears in the Layout Pane that explains the full errors
• If there are webcompat errors somewhere else in the page: Under the "Page" section, a WebCompat link with a tiny overview (maybe name of the CSS property with problems or just the number of errors) would appear as an easy way to navigate to the WebCompat tab.
• No WebCompat errors: Layout pane won't show anything about WebCompat, but you can still click on the tab in the tab bar to view the empty panel.

[violasong]

If the current element has a compat issue, and there is also a compat issue elsewhere in the page, it could look like this:

[violasong]

Unified Layout + basic first wireframes for WebCompat sidebar (invision link)

[violasong]

Regarding the "box model properties" info that currently appears under the box model, and is next to the box model in these designs:

From @fvsch on Slack:

I wonder if we should always expand that section (maybe without the top "Box Model Properties" label), and only show each line when they have non-default values?

• only show float if not none
• only show z-index if not auto
• only show position if not static
• etc.

It's also questionable why we have stuff like float here but not flexbox/grid alignment properties? Why line-height but not font-size? Why not min|max-height|width? So I guess one reason I go to Computed instead is that the selection of box-model properties feels a bit incomplete or random and in Computed I'm sure to find what I need (at the cost of some filtering).

From me:

Yes!!! Thanks for the great feedback. Totally agree we should only show non-default values, and in general we need to rethink this. Maybe it should only be positioning info. Font stuff can be handled by the fonts panel.

Some things like float seem really redundant with the declaration in Rules. Is it actually a useful shortcut? I guess float, z-index, position can all be gotchas. Maybe that's what we want to highlight. But maybe we should highlight that in Rules instead, somehow.