Bug 190379

Summary: Web Inspector: add corner rounding to the network timing "blocks"
Product: WebKit Reporter: Devin Rousso <hi>
Component: Web InspectorAssignee: Devin Rousso <hi>
Status: RESOLVED FIXED    
Severity: Normal CC: commit-queue, inspector-bugzilla-changes, mattbaker, timothy, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: WebKit Nightly Build   
Hardware: All   
OS: All   
Bug Depends on: 150005    
Bug Blocks:    
Attachments:
Description Flags
Patch
none
[Image] After Patch is applied
none
Patch
none
[Image] After Patch is applied
none
Patch none

Description Devin Rousso 2018-10-08 16:29:20 PDT
They could use some "style" :P
Comment 1 Devin Rousso 2018-10-08 23:35:38 PDT
Created attachment 351864 [details]
Patch
Comment 2 Devin Rousso 2018-10-08 23:35:57 PDT
Created attachment 351865 [details]
[Image] After Patch is applied
Comment 3 Devin Rousso 2018-10-09 22:14:38 PDT
Created attachment 351943 [details]
Patch
Comment 4 Devin Rousso 2018-10-09 22:15:28 PDT
Created attachment 351945 [details]
[Image] After Patch is applied

I took another look at this, and I think it looks better when the radius rounding is only at the beginning/end of the entire "range" of blocks.
Comment 5 Devin Rousso 2018-10-10 11:34:46 PDT
Created attachment 351977 [details]
Patch

Also apply the rounding to the `WI.ResourceTimingBreakdownView`.
Comment 6 Matt Baker 2018-10-10 12:18:03 PDT
(In reply to Devin Rousso from comment #4)
> Created attachment 351945 [details]
> [Image] After Patch is applied
> 
> I took another look at this, and I think it looks better when the radius
> rounding is only at the beginning/end of the entire "range" of blocks.

Zooming in closely on the attached screenshot, it looks like there are still gaps due to rounding being applied to segments other than the first/last segment.
Comment 7 Devin Rousso 2018-10-10 13:42:23 PDT
(In reply to Matt Baker from comment #6)
> (In reply to Devin Rousso from comment #4)
> > Created attachment 351945 [details]
> > [Image] After Patch is applied
> > 
> > I took another look at this, and I think it looks better when the radius
> > rounding is only at the beginning/end of the entire "range" of blocks.
> 
> Zooming in closely on the attached screenshot, it looks like there are still
> gaps due to rounding being applied to segments other than the first/last
> segment.
That is actually a legitimate difference in timing between resource timing phases.  The spec doesn't guarantee that each phase will exactly line up with the previous/next phase.  As such, there may be gaps (this was why a line was added behind all the blocks in <https://webkit.org/b/150005>).

This patch focuses on rounding out the corners of the beginning/end blocks, not snapping items together in the middle (<https://webkit.org/b/190439>).
Comment 8 Timothy Hatcher 2018-10-17 12:43:42 PDT
Comment on attachment 351977 [details]
Patch

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

> Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.css:198
> +.network-table .waterfall .block + .block {
> +    --start-radius: 0;
> +    --end-radius: 0;
> +}

Does this work if they are not visually together? Is there a spacer element in the middle in that case or something?
Comment 9 Devin Rousso 2018-10-17 13:36:08 PDT
Comment on attachment 351977 [details]
Patch

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

>> Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.css:198
>> +}
> 
> Does this work if they are not visually together? Is there a spacer element in the middle in that case or something?

Yes, there is a "track" behind all of the blocks.  You can see how this looks in attachment 351945 [details] by looking at the 4th and 7th rows.
Comment 10 Matt Baker 2018-10-17 14:12:01 PDT
What about using a slightly smaller border-radius for the smaller part of the track? The first part of the bar looks much "rounder" than the second part, since the ratio of border-radius to segment height is closer to 1.
Comment 11 WebKit Commit Bot 2018-10-25 16:10:06 PDT
Comment on attachment 351977 [details]
Patch

Clearing flags on attachment: 351977

Committed r237432: <https://trac.webkit.org/changeset/237432>
Comment 12 WebKit Commit Bot 2018-10-25 16:10:08 PDT
All reviewed patches have been landed.  Closing bug.
Comment 13 Radar WebKit Bug Importer 2018-10-25 16:11:29 PDT
<rdar://problem/45570622>