Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unified Layout Panel #64

Open
violasong opened this issue Jul 1, 2019 · 5 comments

Comments

@violasong
Copy link
Member

commented Jul 1, 2019

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.

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 violasong created this issue from a note in Victoria's Tasks (This Week) Jul 1, 2019

@violasong

This comment has been minimized.

Copy link
Member Author

commented Jul 2, 2019

@violasong

This comment has been minimized.

Copy link
Member Author

commented Jul 5, 2019

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)

  • 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 violasong moved this from This Week to Today in Victoria's Tasks Jul 8, 2019

@violasong

This comment has been minimized.

Copy link
Member Author

commented Jul 8, 2019

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

This comment has been minimized.

Copy link
Member Author

commented Jul 18, 2019

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

image

@violasong

This comment has been minimized.

Copy link
Member Author

commented Jul 18, 2019

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.

@violasong violasong moved this from Today to This Week in Victoria's Tasks Jul 24, 2019

@violasong violasong moved this from This Week to Blocked in Victoria's Tasks Jul 25, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
1 participant
You can’t perform that action at this time.