Summary: | Web Inspector: add corner rounding to the network timing "blocks" | ||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Product: | WebKit | Reporter: | Devin Rousso <hi> | ||||||||||||
Component: | Web Inspector | Assignee: | 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
Devin Rousso
2018-10-08 16:29:20 PDT
Created attachment 351864 [details]
Patch
Created attachment 351865 [details]
[Image] After Patch is applied
Created attachment 351943 [details]
Patch
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.
Created attachment 351977 [details]
Patch
Also apply the rounding to the `WI.ResourceTimingBreakdownView`.
(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. (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 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 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. 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 on attachment 351977 [details] Patch Clearing flags on attachment: 351977 Committed r237432: <https://trac.webkit.org/changeset/237432> All reviewed patches have been landed. Closing bug. |