add highlight render option to Render Performance tab by michaelbdai · Pull Request #1685 · emberjs/ember-inspector

michaelbdai · 2021-09-03T22:43:37Z

Description

for issue #1684
Added a checkbox in the render performance tab/route
When enabled, the component gets highlighted when rends.
See more details in screen recording.

Screenshots

Here is the screen recording and unpacked build
https://drive.google.com/file/d/1jIUPaM69okID1tlroAFu8lead6zeKfi_/view?usp=sharing

nummi · 2021-09-16T16:39:30Z

It's beautiful!

lifeart · 2021-10-11T10:25:54Z

this is performance profile node constructor https://github.com/emberjs/ember-inspector/blob/master/ember_debug/models/profile-node.js#L17

looks like here payload for performance profile node is generated https://github.com/emberjs/ember.js/blob/master/packages/@ember/instrumentation/index.ts

this is how rerender stats is triggered for ember components https://github.com/emberjs/ember.js/blob/master/packages/@ember/-internals/glimmer/lib/component-managers/curly.ts#L432

and this is glimmer component manager https://github.com/glimmerjs/glimmer-vm/blob/master/packages/%40glimmer/manager/lib/public/component.ts and yes, looks like it don't have such instrumentation builtin

as part of this mr emberjs/ember.js#19293 glimmer component manager does not belongs to ember itself

and this is emberjs/ember.js#11099 intent to move instrumentation to component managers

@chancancode @rwjblue do you have ideas about way to add rerender instrumentation for glimmer components?

MelSumner · 2021-10-13T13:49:12Z

@rwwagner90 please review :)

RobbieTheWagner · 2021-10-15T00:25:13Z

@MelSumner we're not merging new things until the build is fixed and working with beta and canary, but we will definitely review all open PRs when that time comes.

RobbieTheWagner · 2021-10-17T13:34:50Z

@michaelbdai now that master has passing tests, can you please rebase?

clean up

michaelbdai · 2021-10-17T15:12:26Z

@rwwagner90 rebased. all tests passing now.

RobbieTheWagner

Thanks so much for this super in depth PR @michaelbdai! I especially appreciate that you added so many great tests! I just had a few minor questions, but otherwise, this looks good to me.

RobbieTheWagner · 2021-10-18T15:24:32Z

Thanks again so much for the PR! 🎉

* add highlight render option to Render Performance tab clean up * fix lint error and change per comment * Use bounds to find component instead of id * change per comment * change per comments * change per comments * change per comments * added test * replace timeout with later * use async * improve tests * add test for glimmer component, to show the highlight is not supported. * change per comments Co-authored-by: Bing Dai <bdai@linkedin.com>

michaelbdai force-pushed the bdai/poc branch 2 times, most recently from 5ce959a to 549c486 Compare September 4, 2021 06:02

michaelbdai force-pushed the bdai/poc branch 2 times, most recently from 192555d to 1cd3dc7 Compare September 11, 2021 07:02

MelSumner requested a review from RobbieTheWagner September 16, 2021 19:03

lifeart reviewed Sep 16, 2021

View reviewed changes

Comment thread ember_debug/render-debug.js Outdated

lifeart reviewed Sep 16, 2021

View reviewed changes

Comment thread ember_debug/render-debug.js Outdated

lifeart reviewed Sep 16, 2021

View reviewed changes

Comment thread ember_debug/render-debug.js Outdated

michaelbdai force-pushed the bdai/poc branch from 135793e to e351e46 Compare September 16, 2021 21:44

michaelbdai marked this pull request as draft September 23, 2021 16:31

michaelbdai force-pushed the bdai/poc branch from e351e46 to 5a360b3 Compare September 26, 2021 09:39

lifeart reviewed Sep 26, 2021

View reviewed changes