1492056 - Add alignment popup for flex and grid items

Status: ASSIGNED

(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]]

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 :)

Comment 13

[Samuel Hauptmann van Dam]

As soon as this is implemented I can finally delete chrome. Please. I beg anyone to add this.

Comment 14

[Artem Manushenkov]

I'm claiming this bug for myself

Rest assured, Samuel, the day you can delete chrome will come 👻

Comment 15

[Artem Manushenkov]

Attachment: prototype without icons

Hi! I made a working prototype for the flexbox editor popup. I'll need to add icons for flex/grild buttons. Nicolas, can you start the process of requesting them from the design folks?

If you think it's going to take very long or we're short on resources, i can try creating the icons myself, mostly copying the style of chrome devtools,. I've never done that but the icons seem very simple

I'll be working on styling&grid popup&tests in the meantime

Comment 16

[Sebastian Zartner [:sebo]]

Victoria, are the icons you created for this still somewhere available, so Artem can use them for his patch?

Sebastian

Comment 17

[Nicolas Chevobbe [:nchevobbe]]

I found Victoria's figma document where she investigated this, I'll get them back in mozilla-central

Artem, can you push your work in progress patch to phabricator so I can fetch it and apply the icons? Thanks!

Comment 18

[Artem Manushenkov]

Attachment: [WIP] Bug 1492056 - add flex and grid rule editor popup. r=nchevobbe

Comment 19

[Victoria Wang [:victoria]]

Exciting to see this happening!

Just wanted to mention that my icons were a draft/incomplete and some of these could be improved - matching chrome's could make sense. I don't have time to work on this but my Figma is public so feel free to clone and modify.

Comment 20

[Eduardo]

I am very happy that this day is finally coming.
The day of not needing Edge/cromiun's to test/work with css flex.

Comment 21

[Eduardo]

as a suggestion/inspiration for icons, I recommend os LUCIDE (which uses MIT license)

Comment 22

[Victoria Wang [:victoria]]

Whoa, thank you, those icons look great!

Comment 23

[Artem Manushenkov]

google's material UI look basically like what they have in chrome devtools, https://fonts.google.com/icons?icon.query=align+&icon.size=24&icon.color=%23e3e3e3, it's definitively prettier than what i've been cooking up. I'll opt to use some of those opensource icons

Comment 24

[Nicolas Chevobbe [:nchevobbe]]

(In reply to Eduardo from comment #21)

as a suggestion/inspiration for icons, I recommend os LUCIDE (which uses MIT license)

Artem, did you see this comment ^ ?
Might be nice to take those for your patch

Comment 25

[Artem Manushenkov]

Attachment: firefoxVSchrome.png

hi, [e-mail], i decided to take material-ui and chrome devtools icons, so they're the same as chrome now since lucide is incomplete and doesn't have all that is needed, it doesn't have flex-direction, flex-wrap, justify-items for grid.

i'm attaching a screenshot comparison between my popup on the left and chrome on the right. i just need to fix a very annoying weird bug and it'll be done

Comment 26

[Artem Manushenkov]

Attachment: Bug 1492056 - add flex and grid rule editor popup. r=nchevobbe

Comment 27

[Artem Manushenkov]

Attachment: Bug 1492056 - move tooltip focus logic to HTMLTooltip.js. r=nchevobbe

Comment 28

[Nicolas Chevobbe [:nchevobbe]]

Hello Artem, I was just reminded about your WIP patch
Do you think you have time to update https://phabricator.services.mozilla.com/D260229 , or can someone else take over?
Thanks!

Comment 29

[Artem Manushenkov]

Hi, I can return to it in later February, but if anyone wants to take over in the meantime I don't mind