Bug 190379 – Web Inspector: add corner rounding to the network timing "blocks"

• Component: Web Inspector
• Status: RESOLVED FIXED

[Devin Rousso]

They could use some "style" :P

[Devin Rousso]

Created attachment 351864 [details]
Patch

[Devin Rousso]

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

[Devin Rousso]

Created attachment 351943 [details]
Patch

[Devin Rousso]

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.

[Devin Rousso]

Created attachment 351977 [details]
Patch

Also apply the rounding to the `WI.ResourceTimingBreakdownView`.

[Matt Baker]

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

[Devin Rousso]

(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>).

[Timothy Hatcher]

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?

[Devin Rousso]

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.

[Matt Baker]

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.

[WebKit Commit Bot]

Comment on attachment 351977 [details]
Patch

Clearing flags on attachment: 351977

Committed r237432: <https://trac.webkit.org/changeset/237432>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.

[Radar WebKit Bug Importer]

<rdar://problem/45570622>