Bug 160993

Summary:

Web Inspector: Show radius values in box model metrics view

Product:

WebKit

Reporter:

Joseph Pecoraro <joepeck>

Component:

Web Inspector

Assignee:

Devin Rousso <hi>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

bburg, commit-queue, hi, inspector-bugzilla-changes, nvasilyev, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

WebKit Nightly Build

Hardware:

All

OS:

All

Attachments:

Description	Flags
Mock-up	none
Patch	none
[Image] After Patch is applied	none
Patch	none

Joseph Pecoraro

Reported 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>

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 attachment proposed patch, testcase, etc.

Radar WebKit Bug Importer

Comment 1 2016-08-18 21:56:31 PDT

<rdar://problem/27919035>

Noah

Comment 2 2016-08-18 22:03:37 PDT

Created attachment 286438 [details] Mock-up

Nikita Vasilyev

Comment 3 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.

Devin Rousso

Comment 4 2019-08-05 23:38:31 PDT

Created attachment 375605 [details] Patch

Devin Rousso

Comment 5 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 :/

Blaze Burg

Comment 6 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.

Nikita Vasilyev

Comment 7 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.

Devin Rousso

Comment 8 2019-08-06 13:46:57 PDT

Created attachment 375649 [details] Patch

WebKit Commit Bot

Comment 9 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>

WebKit Commit Bot

Comment 10 2019-08-06 16:46:30 PDT

All reviewed patches have been landed. Closing bug.

Note You need to log in before you can comment on or make changes to this bug.