Bug 212919 - Web Inspector: Styles: display longhand properties under shorthands
Summary: Web Inspector: Styles: display longhand properties under shorthands
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on: 211467
Blocks:
  Show dependency tree / graph
 
Reported: 2020-06-08 13:57 PDT by Nikita Vasilyev
Modified: 2020-06-08 14:05 PDT (History)
1 user (show)

See Also:

Attachments
[Image] Firefox vs Chrome vs Safari (95.19 KB, image/png)
2020-06-08 13:57 PDT, Nikita Vasilyev 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Nikita Vasilyev 2020-06-08 13:57:08 PDT 
Created attachment 401367 [details]
[Image] Firefox vs Chrome vs Safari

Both Firefox DevTools and Chrome DevTools (a) fold longhand properties into shorthands (b) provide UI to expand shorthands to display the corresponding longhands.

We should do the same.

Displaying longhands as leafs of shorthands helps web developers understand CSS. Some shorthands are notoriously hard to comprehend.
"font: normal 24px/1.2 sans-serif" - what is "normal" here? font-weight? font-style? font-stretch? font-variant-ligatures? font-variant-caps?