Closed Bug 1545356 Opened 5 months ago Closed 2 months ago

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

Categories

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

defect

Tracking

(firefox70 fixed)

RESOLVED FIXED
Firefox 70
Tracking Status
firefox70 --- fixed

People

(Reporter: julienw, Assigned: shellyc23, Mentored)

Details

(Keywords: good-first-bug)

Attachments

(1 file)

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.

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.

Type: enhancement → defect

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.

Mentor: gl
Keywords: good-first-bug
Priority: -- → P3

I would like to take a stab at this

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

Assignee: nobody → shellyc23

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?

Flags: needinfo?(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

Flags: needinfo?(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.

Pushed by gluong@mozilla.com:
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
Attachment #9082813 - Attachment description: Bug 1545356 - Hovering over 'flex' and 'grid' buttons, in the inspector view, indicates that they are clickable r=gl → Bug 1545356 - Update the title for the 'flex' and 'grid' markup badges to indicate that they are clickable r=gl
Status: NEW → RESOLVED
Closed: 2 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 70
You need to log in before you can comment on or make changes to this bug.