1845075 - Shorthand values "overwritten" by logical properties are not displayed as such in the rule view

Status: NEW

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

Description

[Ayoub Khater]

Attachment: an image presenting the issue

Steps to reproduce:

1. open an empty web page
2. open dev tools
3. select the inspector
4. select the body element
5. add a rule for the body element in the styles area
6. add the declaration 'direction: ltr'
7. set values for all margin sub properties using the margin shorthand property
   (for example 'margin: 10px 11px 20px 50px')
8. add the third declaration 'margin-inline-start: 100px' under the second one

Actual results:

the css code worked as expected, the third declaration 'margin-inline-start: 100px' changed the 'margin-left' value from '50px' to '100px' but dev tools did not show that as it does when we overwrite values specified by margin shorthand by margin-left

Expected results:

dev tools should display the declaration 'margin-left: 50px' with a line running through it, under the declaration 'margin: 10px 11px 20px 50px'

Comment 1

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

The Bugbug bot thinks this bug should belong to the 'DevTools::General' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

I can indeed reproduce.
The issue seems to lie in the fact that InspectorUtils.getSubpropertiesForCSSProperty("margin") only returns non logical properties (so it's missing margin-inline-start and similar)

InspectorUtils.getSubpropertiesForCSSProperty("margin-inline") will return it though, so we must be missing a small piece, I'll look into it

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

margin-inline* aren't longhands of margin, so this is why we can't make the connection between the 2 in the rule view.

Comment 4

[Ayoub Khater]

Thank you for response
So do you think we should keep it as it is?

Comment 5

[Julian Descottes [:jdescottes]]

It would be interesting to surface this kind of "override" scenarios, but moving as enhancement since this is not technically a regular override. Suggestions welcome on how to explain that to users.

Comment 6

[Sebastian Zartner [:sebo]]

(In reply to Julian Descottes [:jdescottes] from comment #5)

Suggestions welcome on how to explain that to users.

I summarized a few improvements in bug 1860544. Three related UI improvements are:

• Listing the physical longhand as overwritten by the logical one. (Taking the example above, margin-left: 50px; should be listed striked out below the margin shorthand.)
• The value overwritten by the logical longhand should be striked out in the shorthan. (In the example above, this is 50px in margin.)
• An info icon could indicate which property overwrites the value of shorthand. (In the example, the icon would refer to the margin-inline-start property.)

Sebastian