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
Show Obsolete (1) 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 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.