| Summary: | Web Inspector: Styles: User Agent shorthand properties displayed incorrectly | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Nikita Vasilyev <nvasilyev> | ||||||||
| Component: | Web Inspector | Assignee: | Nikita Vasilyev <nvasilyev> | ||||||||
| Status: | ASSIGNED --- | ||||||||||
| Severity: | Normal | CC: | hi, inspector-bugzilla-changes, webkit-bug-importer | ||||||||
| Priority: | P2 | Keywords: | InRadar | ||||||||
| Version: | WebKit Nightly Build | ||||||||||
| Hardware: | All | ||||||||||
| OS: | All | ||||||||||
| Bug Depends on: | |||||||||||
| Bug Blocks: | 212919 | ||||||||||
| Attachments: |
|
||||||||||
Not a recent regression. I vaguely remember this working correctly; it must've been over 12 months ago. Back-end response:
```
{
cssProperties: [
{name: "display", value: "block"},
{name: "margin-top", value: "8px"},
{name: "margin-right", value: "8px", implicit: true},
{name: "margin-bottom", value: "8px", implicit: true},
{name: "margin-left", value: "8px", implicit: true}
],
shorthandEntries: [
{name: "margin", value: "8px"}
]
}
```
"margin-top" does NOT include "implicit: true". -right, -bottom, and -left do for some reason.
Regardless, the shorthand is available and we should show it.
Created attachment 400234 [details] Patch I still need to write tests. Here's a page for manual testing: http://nv.github.io/webkit-inspector-bugs/all-element-types.html Created attachment 400235 [details]
[Image] With patch applied
Created attachment 400453 [details]
Patch
Comment on attachment 400453 [details]
Patch
r-, this seems like the wrong approach. We should figure out why `implicit` is being set in the backend for the other longhand properties and fix that.
(In reply to Devin Rousso from comment #7) > Comment on attachment 400453 [details] > Patch > > r-, this seems like the wrong approach. We should figure out why `implicit` > is being set in the backend for the other longhand properties and fix that. I'd like to display longhands as children of shorthands. I should've explicitly mention it here. Bug 212919: Web Inspector: Styles: display longhand properties under shorthands If we agree that it's a good idea, this patch would be a stepping a stepping stone as it takes (currently unused) shorthandEntries data from the backend payload. `implicit` property would be irrelevant. (In reply to Nikita Vasilyev from comment #8) > (In reply to Devin Rousso from comment #7) > > Comment on attachment 400453 [details] > > Patch > > > > r-, this seems like the wrong approach. We should figure out why `implicit` is being set in the backend for the other longhand properties and fix that. > > I'd like to display longhands as children of shorthands. I should've explicitly mention it here. > > Bug 212919: Web Inspector: Styles: display longhand properties under shorthands That sounds like a good feature, although I'm not sure what form it'll take given how dense the Styles panel already is, so we'd probably want to brainstorm/iterate that. > If we agree that it's a good idea, this patch would be a stepping a stepping stone as it takes (currently unused) shorthandEntries data from the backend payload. `implicit` property would be irrelevant. You're more than welcome to use anything from this patch as a stepping stone. The logic as written in this patch, however, essentially covers up a bigger issue, which is that UserAgent styles are being incorrectly marked as implicit (i.e. this bug). We should figure out why this is happening and fix it. Furthermore, the style as written in `html.css` is actually `margin: 8px;`, so in reality _all_ of the longhand properties should be implicit and the shorthand property should _not_ be implicit. Either there's something different about how UserAgent styles are parsed/applied or there is a bug in the inspector backend that causes this incorrect behavior. I would expect to see a payload similar to: ``` { cssProperties: [ {name: "display", value: "block"}, {name: "margin", value: "8px"}, {name: "margin-top", value: "8px", implicit: true}, {name: "margin-right", value: "8px", implicit: true}, {name: "margin-bottom", value: "8px", implicit: true}, {name: "margin-left", value: "8px", implicit: true} ], shorthandEntries: [ {name: "margin", value: "8px"} ] } ``` |
Steps: 1. Inspect <body> 2. In the style editor, you should see... Expected: body { display: block; margin: 8px; } or this body { display: block; margin-top: 8px; margin-right: 8px; margin-bottom: 8px; margin-left: 8px; } Actual: body { display: block; margin-top: 8px; } Notes: I'm guessing this isn't just margin but all User Agent shortcut properties. We seem to display only the 1st longhand property of the shorthand.