1492056 - Add alignment popup for flex and grid items

Status: NEW

(DevTools :: Inspector, enhancement, P3)

Description

[Patrick Brosset <:pbro>]

This is the bug that will be used to enable the new alignment inspector tool in nightly by default, whenever we feel good with the scope and stability.

Comment 1

[Sebastian Zartner [:sebo]]

Once it's enabled, it should be documented at https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Experimental_features.

Sebastian

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Since Chrome, Edge and Safari now have some kind of version of this, it would be nice to start working on it.

Victoria, I think I remember you had some designs for flex/grid alignment in the inspector, but I couldn't find anything (except https://github.com/firefox-devtools/ux/issues/72)
Do you remember this, and would you have a link to design files?

If not we could probably try to take some inspiration from the other browsers

Comment 3

[Victoria Wang [:victoria]]

Hi Nicolas! Sorry for the delayed response. I only did that autocomplete menu design, but we did discuss the idea of a visual alignment tool a lot. Sounds good to take inspiration from the other browsers :).

See also https://bugzilla.mozilla.org/show_bug.cgi?id=1114973

Comment 4

[Nicolas Chevobbe [:nchevobbe]]

Raphael, is this something you would be interested in?
We don't have a clear plan yet, but it would be nice to add an alignment popup like the one in Chrome.
No pressure though, you might not want to do this/don't have the time to :)

Comment 5

[BugBot [:suhaib / :marco/ :calixte]]

Clear a needinfo that is pending on an inactive user.

Inactive users most likely will not respond; if the missing information is essential and cannot be collected another way, the bug maybe should be closed as INCOMPLETE.

For more information, please visit BugBot documentation.

Comment 6

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Also requested here: https://connect.mozilla.org/t5/ideas/something-like-this-is-needed-for-beginners/idi-p/40483

Comment 7

[patrikcoch16]

Description:
Please provide an explanation of the feature or change. Include a description of the user scenario in which it would be used and how the user would complete the task(s).
Screenshots and visual UI specs are welcome, but please include sufficient accompanying explanation so that blind members of the accessibility team are able to understand the feature/change.

How do we test this?
If there is an implementation to test, please provide instructions for testing it; e.g. setting preferences, other preparation, how to trigger the UI, etc.

When will this ship?
Tracking bug/issue:
Design documents (e.g. Product Requirements Document, UI spec):
Engineering lead:
Product manager:

The accessibility team has developed the Mozilla Accessibility Release Guidelines which outline what is needed to make user interfaces accessible:
https://wiki.mozilla.org/Accessibility/Guidelines
Please describe the accessibility guidelines you considered and what steps you've taken to address them:

Describe any areas of concern to which you want the accessibility team to give special attention:

Comment 8

[Nicolas Chevobbe [:nchevobbe]]

Oliver, since you told me you'd like to contribute more to DevTools, would you be interested working on this?

Comment 9

[Oliver Schramm [:olifantoliver]]

I think it's a very cool idea! I would add the settings in the layout pane, where there already are some flexbox related information, instead of the rule editor.
In my opinion, this would be the better place.

I like the way, the chromium devtools have some icons that explain pretty good what a specific setting would do to the content. There's some room for improvement, but most of them are pretty good.

However, I don't have the skill to design the icons myself, so this would have to be done by someone else.

So yes, if the question about the icons is answered, I would be interested. :)

Comment 10

[Sebastian Zartner [:sebo]]

Attachment: Alignment popup in Chrome

(In reply to Oliver Schramm [:olifantoliver] from comment #9)

I would add the settings in the layout pane, where there already are some flexbox related information, instead of the rule editor.

I'd argue that the Rules View is more visible than the Layout panel. Though I get that it fits better to the Layout panel.

Does a UI mockup already exist for this? Victoria's design was for a different feature, namely icons within the autocompletion list (for which there is no bug filed yet, I think).

Sebastian

Comment 11

[Nicolas Chevobbe [:nchevobbe]]

Yeah, I was thinking more of a button directly in the rule view, next to display flex/grid (and who knows, maybe block too now, since align-content will be supported in 125)

Comment 12

[Nicolas Chevobbe [:nchevobbe]]

(In reply to Oliver Schramm [:olifantoliver] from comment #9)

I like the way, the chromium devtools have some icons that explain pretty good what a specific setting would do to the content. There's some room for improvement, but most of them are pretty good.
However, I don't have the skill to design the icons myself, so this would have to be done by someone else.
So yes, if the question about the icons is answered, I would be interested. :)

Sorry for the late reply Oliver, I was out for a bit.
I can try to provide the icons at some point, I think you can start with just having the empty buttons without any background image so you're not blocked on me :)