Web Inspector: Timelines: convert WI.RangeChart to use a <canvas>

• Component: Web Inspector
• Status: NEW ---

[Devin Rousso]

Creating/drawing all those <rect>s is very expensive :(

[Devin Rousso]

Created attachment 363559 [details]
Patch

[Joseph Pecoraro]

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]

Created attachment 363576 [details]
Patch

[Joseph Pecoraro]

So this produced some drawing issues on macOS for very small strokes. We are considering not doing it, or tweaking it.

[EWS Watchlist]

Comment on attachment 363576 [details]
Patch

Attachment 363576 [details] did not pass ios-sim-ews (ios-simulator-wk2):
Output: https://webkit-queues.webkit.org/results/11373474

New failing tests:
fast/events/beforeunload-alert-user-interaction2.html
imported/w3c/web-platform-tests/webrtc/simplecall.https.html
fast/events/click-handler-on-body-simple.html
editing/selection/thai-word-at-document-end.html
fast/forms/datalist/datalist-textinput-suggestions-order.html

[EWS Watchlist]

Created attachment 363609 [details]
Archive of layout-test-results from ews123 for ios-simulator-wk2

The attached test failures were seen while running run-webkit-tests on the ios-sim-ews.
Bot: ews123  Port: ios-simulator-wk2  Platform: Mac OS X 10.13.6