search

firefox-devtools / ux

Firefox DevTools UX Community
Mozilla Public License 2.0
103 stars 21 forks source link

Unified Layout Panel #64

Open violasong opened 5 years ago

violasong commented 5 years ago

Checklist

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.
image

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

image

Other mockups

violasong commented 5 years ago

Design 5

image
violasong commented 5 years ago

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:

image (edit: updated image)

violasong commented 5 years ago

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

image
violasong commented 5 years ago

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

image
violasong commented 5 years ago

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.