Bug 195296

Summary: Web Inspector: Timelines: convert WI.RangeChart to use a <canvas>
Product: WebKit Reporter: Devin Rousso <hi>
Component: Web InspectorAssignee: Devin Rousso <hi>
Status: NEW    
Severity: Normal CC: ews-watchlist, hi, inspector-bugzilla-changes, joepeck
Priority: P2    
Version: WebKit Nightly Build   
Hardware: All   
OS: All   
Attachments:
Description Flags
Patch
none
Patch
none
Archive of layout-test-results from ews123 for ios-simulator-wk2 none

Devin Rousso
Reported 2019-03-04 15:15:43 PST
Creating/drawing all those <rect>s is very expensive :(
Attachments
Patch (10.00 KB, patch)
2019-03-04 15:40 PST, Devin Rousso
no flags
Patch (10.56 KB, patch)
2019-03-04 17:54 PST, Devin Rousso
no flags
Archive of layout-test-results from ews123 for ios-simulator-wk2 (3.68 MB, application/zip)
2019-03-04 23:51 PST, EWS Watchlist
no flags
Devin Rousso
Comment 1 2019-03-04 15:40:02 PST
Joseph Pecoraro
Comment 2 2019-03-04 15:49:20 PST
Comment on attachment 363559 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=363559&action=review r=me > Source/WebInspectorUI/ChangeLog:3 > + Web Inspector: Timelines: convert WI.RangeChart to use a <canvas> Awesome! Can you put in the ChangeLog that you were seeing ~4-5x speedup on large ranges. > Source/WebInspectorUI/UserInterface/Views/CPUUsageIndicatorView.js:102 > + let computedStyle = window.getComputedStyle(this.element); We should only do this in the `!WI.CPUUsageIndicatorView._cachedFillColor` block to avoid doing it every time. > Source/WebInspectorUI/UserInterface/Views/RangeChart.js:31 > // in the chart by providing an (x, w, class) via `addRange`. This API changed to not be a className but instead be a set of fill/stroke colors. > Source/WebInspectorUI/UserInterface/Views/RangeChart.js:-43 > -// > -// SVG: > -// > -// - There is a single rect for each range. > -// > -// <div class="range-chart"> > -// <svg viewBox="0 0 800 75"> > -// <rect width="<w>" height="100%" transform="translateX(<x>)" class="<class>" /> > -// <rect width="<w>" height="100%" transform="translateX(<x>)" class="<class>" /> > -// ... > -// </svg> > -// </div> Might be worth saying this uses a canvas and draws rears. > Source/WebInspectorUI/UserInterface/Views/RangeChart.js:95 > + x *= window.devicePixelRatio; > + width *= devicePixelRatio; Nit: `window.devicePixelRatio`. > Source/WebInspectorUI/UserInterface/Views/RangeChart.js:97 > + if (fillStyle) { I think we should expect there to be fillStyles / strokeStyles and avoid the if checks. Or perhaps just if check the stroke. It seems crazy to not have a fill style at least.
Devin Rousso
Comment 3 2019-03-04 17:54:49 PST
Joseph Pecoraro
Comment 4 2019-03-04 19:04:43 PST
So this produced some drawing issues on macOS for very small strokes. We are considering not doing it, or tweaking it.
EWS Watchlist
Comment 5 2019-03-04 23:51:09 PST Comment hidden (obsolete)
EWS Watchlist
Comment 6 2019-03-04 23:51:11 PST Comment hidden (obsolete)
Note You need to log in before you can comment on or make changes to this bug.