Bug 160993 - Web Inspector: Show radius values in box model metrics view
Summary: Web Inspector: Show radius values in box model metrics view
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Normal
Assignee: Devin Rousso
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2016-08-18 21:56 PDT by Joseph Pecoraro
Modified: 2019-08-06 16:46 PDT (History)
6 users (show)

See Also:


Attachments
Mock-up (14.54 KB, image/png)
2016-08-18 22:03 PDT, Noah
no flags Details
Patch (23.40 KB, patch)
2019-08-05 23:38 PDT, Devin Rousso
no flags Details | Formatted Diff | Diff
[Image] After Patch is applied (36.56 KB, image/png)
2019-08-05 23:40 PDT, Devin Rousso
no flags Details
Patch (23.69 KB, patch)
2019-08-06 13:46 PDT, Devin Rousso
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Joseph Pecoraro 2016-08-18 21:56:11 PDT
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>
Comment 1 Radar WebKit Bug Importer 2016-08-18 21:56:31 PDT
<rdar://problem/27919035>
Comment 2 Noah 2016-08-18 22:03:37 PDT
Created attachment 286438 [details]
Mock-up
Comment 3 Nikita Vasilyev 2016-08-19 14:13:43 PDT
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.
Comment 4 Devin Rousso 2019-08-05 23:38:31 PDT
Created attachment 375605 [details]
Patch
Comment 5 Devin Rousso 2019-08-05 23:40:02 PDT
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 :/
Comment 6 Brian Burg 2019-08-06 10:21:39 PDT
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.
Comment 7 Nikita Vasilyev 2019-08-06 12:35:50 PDT
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.
Comment 8 Devin Rousso 2019-08-06 13:46:57 PDT
Created attachment 375649 [details]
Patch
Comment 9 WebKit Commit Bot 2019-08-06 16:46:28 PDT
Comment on attachment 375649 [details]
Patch

Clearing flags on attachment: 375649

Committed r248328: <https://trac.webkit.org/changeset/248328>
Comment 10 WebKit Commit Bot 2019-08-06 16:46:30 PDT
All reviewed patches have been landed.  Closing bug.