New issue
Advanced search Search tips

Issue 874116 link

Starred by 1 user

Issue metadata

Status: Fixed
Owner:
Closed: Dec 11
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 3
Type: Bug



Sign in to add a comment

Flamechart pan/zoom is janky for recordings with lots of events.

Project Member Reported by alph@chromium.org, Aug 14

Issue description

Flamechart pan/zoom is janky for recordings with lots of events.
 
Project Member

Comment 1 by bugdroid1@chromium.org, Aug 14

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/25756bb57ac19835e0d0607f8f47283be1e63688

commit 25756bb57ac19835e0d0607f8f47283be1e63688
Author: Alexei Filippov <alph@chromium.org>
Date: Tue Aug 14 20:59:05 2018

DevTools: Utilize WebGL to draw flamechart bars.

This speeds up bars drawing by an order of magnitude as all the work is
delegated to the GPU.

Vertex layout is performed once when model is loaded or when groups are
expanded/collapsed. The actual drawing caused by zooming and panning the
flamechart just modifies the transformation matrices.

Titles and custom decorations are still drawn on the overlay 2D canvas.

The WebGL mode is currently put behind an experiment.

BUG= 874116 

Change-Id: I5984db2769d8ed5317b630bd705ab8447baa9358
Reviewed-on: https://chromium-review.googlesource.com/1174861
Commit-Queue: Alexei Filippov <alph@chromium.org>
Reviewed-by: Aleksey Kozyatinskiy <kozyatinskiy@chromium.org>
Cr-Commit-Position: refs/heads/master@{#583025}
[modify] https://crrev.com/25756bb57ac19835e0d0607f8f47283be1e63688/third_party/blink/renderer/devtools/front_end/main/Main.js
[modify] https://crrev.com/25756bb57ac19835e0d0607f8f47283be1e63688/third_party/blink/renderer/devtools/front_end/perf_ui/FlameChart.js

Project Member

Comment 2 by bugdroid1@chromium.org, Aug 15

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/f4adaf8f9b7a3ab2de2923fc3d9509ddc8af0a9c

commit f4adaf8f9b7a3ab2de2923fc3d9509ddc8af0a9c
Author: Alexei Filippov <alph@chromium.org>
Date: Wed Aug 15 03:17:53 2018

DevTools: Use UNSIGNED_BYTE for color components in flamechart WebGL.

BUG= 874116 

Change-Id: Ie98f2d526921dc7d1b49a6a6a89e4778c48308ab
Reviewed-on: https://chromium-review.googlesource.com/1175409
Reviewed-by: Aleksey Kozyatinskiy <kozyatinskiy@chromium.org>
Commit-Queue: Aleksey Kozyatinskiy <kozyatinskiy@chromium.org>
Cr-Commit-Position: refs/heads/master@{#583144}
[modify] https://crrev.com/f4adaf8f9b7a3ab2de2923fc3d9509ddc8af0a9c/third_party/blink/renderer/devtools/front_end/perf_ui/FlameChart.js

Project Member

Comment 3 by bugdroid1@chromium.org, Aug 15

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/592df38489a10c29b5223fea2b166316f0b0cf80

commit 592df38489a10c29b5223fea2b166316f0b0cf80
Author: Alexei Filippov <alph@chromium.org>
Date: Wed Aug 15 03:31:58 2018

DevTools: Speed up aggregated stats pie chart calculation for timeline.

Precalculate and cache running accumulated value for each category, then
use a binary search to find values for right and left bounds and subtract
them.

BUG= 874116 

Change-Id: I3195ce4c38d52d048d453c5f999fb7005f0982ff
Reviewed-on: https://chromium-review.googlesource.com/1175241
Commit-Queue: Alexei Filippov <alph@chromium.org>
Reviewed-by: Andrey Kosyakov <caseq@chromium.org>
Cr-Commit-Position: refs/heads/master@{#583150}
[modify] https://crrev.com/592df38489a10c29b5223fea2b166316f0b0cf80/third_party/blink/renderer/devtools/front_end/timeline/TimelineUIUtils.js

Project Member

Comment 4 by bugdroid1@chromium.org, Aug 16

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/b0a270252bfd030687c022e510d2f41ecda80963

commit b0a270252bfd030687c022e510d2f41ecda80963
Author: Alexei Filippov <alph@chromium.org>
Date: Thu Aug 16 20:37:39 2018

DevTools: Cache parsed colors to speedup flamechart GL geometry setup.

Color.parse is quite expensive, resulted in 7 seconds wait for a million entries.
We can just cache parsed colors provided there are just few dozens of them.

Also move gl.get* operations out of the main draw routine as they known to be expensive.

BUG= 874116 

Change-Id: I6b02210a1dd1d2b9e8ef9d9931ee3eebd0087872
Reviewed-on: https://chromium-review.googlesource.com/1178579
Reviewed-by: Aleksey Kozyatinskiy <kozyatinskiy@chromium.org>
Commit-Queue: Aleksey Kozyatinskiy <kozyatinskiy@chromium.org>
Cr-Commit-Position: refs/heads/master@{#583797}
[modify] https://crrev.com/b0a270252bfd030687c022e510d2f41ecda80963/third_party/blink/renderer/devtools/front_end/perf_ui/FlameChart.js

Project Member

Comment 5 by bugdroid1@chromium.org, Aug 18

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/2ab04a184391771084b55f496d8769dad145d871

commit 2ab04a184391771084b55f496d8769dad145d871
Author: Alexei Filippov <alph@chromium.org>
Date: Sat Aug 18 01:56:09 2018

DevTools: Reduce memory usage in WebGL flamechart.

Use indexed colors for bar vertices. It makes color arrays 4 times smaller.

BUG= 874116 

Change-Id: Icad75d28357af2a62bd3ff8025a12e6fec82d64a
Reviewed-on: https://chromium-review.googlesource.com/1180276
Commit-Queue: Alexei Filippov <alph@chromium.org>
Reviewed-by: Aleksey Kozyatinskiy <kozyatinskiy@chromium.org>
Cr-Commit-Position: refs/heads/master@{#584281}
[modify] https://crrev.com/2ab04a184391771084b55f496d8769dad145d871/third_party/blink/renderer/devtools/front_end/perf_ui/FlameChart.js

Project Member

Comment 6 by bugdroid1@chromium.org, Aug 18

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/7f0134a1a8bd234e534bfbd3e8939a9d2a068a00

commit 7f0134a1a8bd234e534bfbd3e8939a9d2a068a00
Author: Alexei Filippov <alph@chromium.org>
Date: Sat Aug 18 03:04:33 2018

DevTools: Speed up group expand/collapse by caching entry colors.

BUG= 874116 

Change-Id: I84a4f31223ee6d365e06c2f14a29dff40583ecd1
Reviewed-on: https://chromium-review.googlesource.com/1180536
Commit-Queue: Alexei Filippov <alph@chromium.org>
Reviewed-by: Aleksey Kozyatinskiy <kozyatinskiy@chromium.org>
Cr-Commit-Position: refs/heads/master@{#584294}
[modify] https://crrev.com/7f0134a1a8bd234e534bfbd3e8939a9d2a068a00/third_party/blink/renderer/devtools/front_end/perf_ui/FlameChart.js

Project Member

Comment 7 by bugdroid1@chromium.org, Aug 18

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/ed15175aebbe896c0cf82e387a8b7dc9756eaba7

commit ed15175aebbe896c0cf82e387a8b7dc9756eaba7
Author: Alexei Filippov <alph@chromium.org>
Date: Sat Aug 18 03:30:28 2018

DevTools: Draw collapsed groups overview with WebGL.

BUG= 874116 

Change-Id: I8384cebe03348556df733ee8098500eab6352188
Reviewed-on: https://chromium-review.googlesource.com/1180515
Commit-Queue: Alexei Filippov <alph@chromium.org>
Reviewed-by: Aleksey Kozyatinskiy <kozyatinskiy@chromium.org>
Cr-Commit-Position: refs/heads/master@{#584299}
[modify] https://crrev.com/ed15175aebbe896c0cf82e387a8b7dc9756eaba7/third_party/blink/renderer/devtools/front_end/perf_ui/FlameChart.js

Status: Fixed (was: Assigned)

Sign in to add a comment