Web Inspector: Rendering Frames timeline pie chart should use SVG instead of 2D canvas

• Component: Web Inspector
• Status: RESOLVED FIXED

[Matt Baker]

* SUMMARY
Rendering Frames timeline pie chart should use SVG instead of 2D canvas.

[Radar WebKit Bug Importer]

<rdar://problem/22431337>

[Matt Baker]

Created attachment 259909 [details]
[Image] Updated UI using SVG

[Matt Baker]

Created attachment 259922 [details]
[Patch] WIP

[Matt Baker]

Created attachment 259923 [details]
[Patch] WIP

[Timothy Hatcher]

Comment on attachment 259923 [details]
[Patch] WIP

I'd be curious if reusing the path elements and just updating "d" when nothing else needs to change would be even better.

[Timothy Hatcher]

Comment on attachment 259923 [details]
[Patch] WIP

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

> Source/WebInspectorUI/UserInterface/Views/ChartDetailsSectionRow.js:348
> +            let path = createSVGElement("path");

These could get class names and have the stroke, stroke-width and even color be set via a style sheet now.

[Matt Baker]

Comment on attachment 259923 [details]
[Patch] WIP

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

>> Source/WebInspectorUI/UserInterface/Views/ChartDetailsSectionRow.js:348
>> +            let path = createSVGElement("path");
> 
> These could get class names and have the stroke, stroke-width and even color be set via a style sheet now.

Nice idea! We can definitely set all the stroke properties in CSS, since stroke color isn't based on the item color.

[Matt Baker]

Created attachment 260001 [details]
[Patch] Proposed Fix

[Matt Baker]

Created attachment 260004 [details]
[Image] UI - Empty and populated charts

[WebKit Commit Bot]

Comment on attachment 260001 [details]
[Patch] Proposed Fix

Clearing flags on attachment: 260001

Committed r189006: <http://trac.webkit.org/changeset/189006>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.

[BJ Burg]

Comment on attachment 260001 [details]
[Patch] Proposed Fix

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

> Source/WebInspectorUI/UserInterface/Views/ChartDetailsSectionRow.css:50
> +    stroke: rgba(255, 255, 255, 0.7);

I think we are preferring hsla()

[Matt Baker]

Reopening to attach new patch.

[Matt Baker]

Created attachment 260179 [details]
[Patch] WIP

Just need to write a test

[Matt Baker]

(In reply to comment #14)
> Created attachment 260179 [details]
> [Patch] WIP
> 
> Just need to write a test

Attached to wrong bug. Ignore.