1723820 - Tooltip for place-self without effect says adding display property to the item itself will make it active, but it needs to be added to the parent element instead

Status: RESOLVED FIXED

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

Description

[Jeremy W. Sherman]

Attachment: Suggested Fix Does Not Fix - Screen Shot 2021-08-03 at 15.11.05.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:91.0) Gecko/20100101 Firefox/91.0

Steps to reproduce:

• Visit https://codepen.io/jeremy-w/pen/KKmBJYW
• Open the Developer Tools
• Select the Inspector
• Click the element picker button
• Click the rendered "child div" text
• Select the Rules inspector
• Mouse over the (i) button at the end of the place-self rule

Actual results:

• A tooltip appears with text:

place-self has no effect on this element since it's not a grid or flex item.

Try adding display:grid, display:flex, display:inline-grid, or dislpay:inline-flex. Learn more

Expected results:

The tooltip text should conclude with "Try adding (these things) to the parent of this element."

As you can see, I did in fact at display:grid as suggested, and it still didn't take effect - because I need to add it to the parent element to make this one into a grid item.

Comment 1

[Julian Descottes [:jdescottes]]

Thanks for filing!

The string is defined at https://searchfox.org/mozilla-central/rev/67637695876e27ddbfb6ff99202bb1c951de847a/devtools/client/locales/en-US/tooltips.ftl#58
This localized string is only used for grid/flex items, so simply adding to the element’s parent. at the end of the string should work, exactly the same as what we have for inactive-css-not-grid-item-fix-2 and inactive-css-not-flex-item-fix-2.
We use alternate strings for warnings which apply to grid/flex containers.

Now since this is a localized string, when we update the text we also need to update the string id. Meaning we should bump the counter from 2 to 3:

inactive-css-not-grid-or-flex-item-fix-3 = Try adding <strong>display:grid</strong>, <strong>display:flex</strong>, <strong>display:inline-grid</strong>, or <strong>display:inline-flex</strong> to the element’s parent. { learn-more }

And then we need to update the existing references to inactive-css-not-grid-or-flex-item-fix-2 in the codebase: https://searchfox.org/mozilla-central/rev/67637695876e27ddbfb6ff99202bb1c951de847a/devtools/server/actors/utils/inactive-property-helper.js#158

Should be a good first bug for someone setting up their env. There are all the necessary pointers above and contributor's documentation is at https://firefox-source-docs.mozilla.org/

Comment 2

[Tzvika Ofek]

Hi, i would like to take this bug please.

Comment 3

[Tzvika Ofek]

and as i understand you mean to fix the reference on inactive-property-helper.js to inactive-css-not-grid-or-flex-item-fix-3 , right?

Comment 4

[Julian Descottes [:jdescottes]]

(In reply to Tzvika Ofek from comment #2)

Hi, i would like to take this bug please.

Great, assigning the bug to you You can ask questions here or in https://chat.mozilla.org/#/room/#devtools:mozilla.org
In bugzilla, make sure to check the "Request information from" box below the comment area so that we get a ping for your question.

(In reply to Tzvika Ofek from comment #3)

and as i understand you mean to fix the reference on inactive-property-helper.js to inactive-css-not-grid-or-flex-item-fix-3 , right?

Yes, exactly.

Comment 5

[Tzvika Ofek]

thanks , I'm on it

Comment 6

[Tzvika Ofek]

Attachment: Bug 1723820 - Add display grid/flex to element's parent instead of element itself. r=flod,#fluent-reviewers

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/18a935b74725
Add display grid/flex to element's parent instead of element itself. r=flod,fluent-reviewers,jdescottes

Comment 8

[Andreea Pavel [:apavel]]

https://hg.mozilla.org/mozilla-central/rev/18a935b74725