1545356 - In the inspector view, the title on the little "flex" and "grid" indications should indicate that they're clickable

Status: RESOLVED FIXED

(DevTools :: Inspector: Layout, defect, P3)

Description

[Julien Wajsberg [:julienw]]

In a page that has elements with Flex layout, the inspector view shows that properly with a "flex" indication.
Moreover nowadays it's clickable to trigger the flexible layout inspector, and this is very cool.
But the title doesn't say that and so it's not very discoverable.

Note that there's a proper title on the button in the rules view, I think the same text should also be added to the title of the "flex" button.

Note: this also happens for the elements using grid layout.

Comment 1

[Patrick Brosset <:pbro>]

Thanks for filing. Very valid concern. I'll actually move it as a bug so it ends up on our triage dashboard, and I'd argue that this is actually a bug.

Comment 2

[Gabriel Luong [:gl] (ΦωΦ)]

In order to fix this bug you will need to add update the localizations in https://searchfox.org/mozilla-central/source/devtools/client/locales/en-US/inspector.properties#40. You will need to change the strings and bump the id so that the localization team will pick up the changes (eg, "markupView.display.flex.tooltiptext" to "markupView.display.flex.tooltiptext2") and update their respective getStr id in https://searchfox.org/mozilla-central/source/devtools/client/inspector/markup/views/element-editor.js#36-39.

I think adding something like: "Click to toggle the X overlay for this element." where X is grid or flex.

Comment 3

[Krishnal Ciccolella]

I would like to take a stab at this

Comment 4

[Gabriel Luong [:gl] (ΦωΦ)]

(In reply to Krishnal Ciccolella from comment #3)

I would like to take a stab at this

Hey Krishnal, I assigned the bug to you. Feel free to request more information and review from me.

Comment 5

[Krishnal Ciccolella]

Thanks for assigning me to this bug.

I have a question in reference to the inline-flex and inline-grid buttons. Am I right in the assumption that you would like the changes to be made to them also?

Comment 6

[Gabriel Luong [:gl] (ΦωΦ)]

(In reply to Krishnal Ciccolella from comment #5)

Thanks for assigning me to this bug.

I have a question in reference to the inline-flex and inline-grid buttons. Am I right in the assumption that you would like the changes to be made to them also?

Yes

Comment 7

[Krishnal Ciccolella]

Attachment: Bug 1545356 - Update the title for the 'flex' and 'grid' markup badges to indicate that they are clickable r=gl

I made changes to the LOCALIZATION NOTE in the inspector.properties file and updated DISPLAY_TYPES in the element-editor.js file for flex, grid, inline-flex and inline-grid.

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/06b3b957184a
Hovering over 'flex' and 'grid' buttons, in the inspector view, indicates that they are clickable r=gl

Comment 9

[Daniel Varga [:dvarga]]

https://hg.mozilla.org/mozilla-central/rev/06b3b957184a