Bug 160993 – Web Inspector: Show radius values in box model metrics view

• Status: RESOLVED
• Resolution: FIXED
• Component: Web Inspector

[Joseph Pecoraro]

Summary:
Show radius values in box model metrics view.

Great idea from Noah, complete with a UI mock-up:
<https://twitter.com/toibelu/status/766379466570338304/photo/1>

[Radar WebKit Bug Importer]

<rdar://problem/27919035>

[Noah]

Created attachment 286438 [details]
Mock-up

[Nikita Vasilyev]

Good idea!

(In reply to comment #2)
> Created attachment 286438 [details]
> Mock-up

How would you visualize the following:

    border: 5px;
    border-top-left-radius: 999px;

Where would you put "999px"? There's already "margin" in the top left corner.

[Devin Rousso]

Created attachment 375605 [details]
Patch

[Devin Rousso]

Created attachment 375606 [details]
[Image] After Patch is applied

Not sure what to do when the `border-top-left-radius` value is large, as it overlaps with the "border" label.  Suggestions for that welcome.

One idea I had was to move the position/margin/border labels to be rotated 90deg counterclockwise, but that may be weird :/

[Blaze Burg]

Comment on attachment 375605 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=375605&action=review

r=me, nice polish work.

> Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.js:167
> +            if (!value || (prefix !== "position" && value === "0px") || (prefix === "position" && value === "auto"))

I'm fine with the ternary above, but please break this into separate branches for readability.

[Nikita Vasilyev]

Comment on attachment 375605 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=375605&action=review

Good job!

> Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.css:129
> +.details-section .row.box-model :matches(.top-left, .top-right, .bottom-right, .bottom-left)
> +{

Nit: `{` should be on the same line.

[Devin Rousso]

Created attachment 375649 [details]
Patch

[WebKit Commit Bot]

Comment on attachment 375649 [details]
Patch

Clearing flags on attachment: 375649

Committed r248328: <https://trac.webkit.org/changeset/248328>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.