586977 - Investigate how the inspector style panel works with shorthand properties

Status: RESOLVED FIXED

(DevTools :: General, defect)

Description

[Joe Walker [:jwalker]]

We have not done any testing to see what happens if we specify rules using both sorts or that we even support both sorts properly.

In addition, there should be an option to show shorthand properties for margin-*, padding-*, and for other properties, when possible. It makes glancing over the styles much quicker.

Comment 1

[Kevin Dangoor]

We do need to make sure this is sane, but we don't necessarily need to go after the shorthand properties part of this description above.

Comment 2

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

I don't know about the Style Doctor or Style Editor but the Style Inspector works using calculated styles. Shorthand properties are not valid for calculated styles ... they are always longhand properties.

Something else to bear in mind is that not all longhand combinations can be displayed purely in shorthand.
e.g.
border-top: 10px solid #f00;
border-right: 20px solid #0f0;
border-bottom: 30px dashed #00f;
border-left: 40px groove #ff0;

At the same time it certainly would be a very cool feature.

Comment 3

[Joe Walker [:jwalker]]

I wanted to make sure if we had: "border: 1px", and then looked at the border-width-top property, that we would see the border setting.

Comment 4

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Tests fine