Revamp components inspection (Octane support and improved UX) #1088

chancancode · 2019-11-20T00:56:37Z

Known Issues

Tests are failing
Should not show internal -top-level route template in "Components" tab
Right click on the page and selecting "Inspect Ember Component" shows the tooltip but does not select the corresponding row in the "Components" tab
- Scroll to the appropriate row

Instructions for testing

Click on the Checks tab for this pull request
Under "Build and Publish" > "Build extensions" > "Artifacts", download the "chrome" build
Extract the zip file you downloaded from the previous step, it should result in a folder called "chrome"
Go to chrome://extensions/, enable "Developer mode" on the top-right corner, disable the Ember Inspector extension using the toggle (if you have it installed), click "Load unpacked", select the folder you extracted from the previous step
Try out the new inspector
When you are done testing, go to chrome://extensions/, remove the custom build and switch back to the normal inspector

The custom extension installed using this method does not automatically update itself, so you will have to repeat these steps whenever there is a new commit available for testing.

patricklx · 2019-12-03T09:52:12Z

I just tried this out 👍
one issue i saw

when a component updates the view (e.g checkbox component), the selected component (any, does not need to be the same component) in the inspector will be unselected... even though the instance (ember id) is the same

chancancode · 2019-12-06T00:27:25Z

@patricklx I just pushed a refactor with various improvements, can you test it again and see if it is still a problem?

joukevandermaas · 2019-12-09T07:59:12Z

For other people who wanted to try it in Firefox instead of Chrome, follow these steps:

Click on the Checks tab for this pull request
Under "Build and Publish" > "Build extensions" > "Artifacts", download the "firefox" build.
Extract the zip file you downloaded from the previous step, it should result in a folder called "firefox"
Open the addons manager in Firefox (Ctrl+Shift+A on Windows, not sure about other OS)
Click the little cog icon and select "Debug addons"
In the new page that opens, click "Load temporary addon"
Navigate to the directory you extracted in step 3, and select the "manifest.json" file
When you are done testing, you can click the "remove" button on the temporary addon.

nummi · 2019-12-13T18:53:22Z

Personal project running Ember Source 3.15.0 — I'm seeing a lot of this:

Three errors and [object object] for the component name.

Object Inspector error for bounds Error: You attempted to access the 'bounds' property on a Glimmer Component, but that property does not exist in Ember.js applications, it only exists in Glimmer.js apps

chancancode · 2019-12-16T08:23:30Z

The last commit should fix the Glimmer Components debug assertion issue!

rwjblue · 2019-12-19T15:11:43Z

skeletons/web-extension/boot.js

+let id = `ember-inspector-boot-${(Math.random() * 100000000).toFixed(0)}`;
+
+let script = document.createElement('script');


I'm curious if these let's pollute "global space" for the consumer, have you tested?

It does not, it's in its own special scope (which is why I can't just set window.EmberENV = { _DEBUG_RENDER_TREE: true }; here in the first place)

rwjblue · 2019-12-19T15:13:18Z

tests/ember_debug/view-debug-test.js

  if (typeof factory.meta === 'object') {
-    factory.meta.moduleName = `my-app/${name}.hbs`;
+    factory.meta.moduleName = `my-app/templates/${name}.hbs`;
  } else if (typeof factory.__meta === 'object') {
    // Ember 3.13+
-    factory.__meta.moduleName = `my-app/${name}.hbs`;
+    factory.__meta.moduleName = `my-app/templates/${name}.hbs`;
  }


It isn't immediately obvious to me why we actually care about setting meta.moduleName, what is it used for in the UI?

We use it to show the template name/path in the tooltips

rwjblue · 2019-12-19T15:14:32Z

tests/ember_debug/view-debug-test.js

+    matchTree(tree, [TopLevel(
+      Route({ name: 'application' },
+        Route({ name: 'simple' },
+          Component({ name: 'test-foo', bounds: 'single' }),
+          Component({ name: 'test-bar', bounds: 'range' })
+        )
+      )
+    )]);
+  });


This abstraction is really nice 👏

@rwjblue

…s#1088) * Add a polyfill for the `captureRenderTree` API * GlimmerTree -> RenderTree * [WIP] view inspecting * Correctly insert outlet nodes * Wire-up more of the UI * Get pinning working * Fix vertical-collection * Fix object inspection * Fix polyfill * Tooltip positionining Closes emberjs#1089 * Use polyfill for 3.14.0/3.14.1 * Set `EmberENV._DEBUG_RENDER_TREE` * Some improvements to the tooltip * Refactor render tree to use Octane idioms * Fix debouncing, don't cause a ton of user-runloops * Don't shadow methods (requested by @rwjblue) * Implement remaining features * Automatically scroll to the appropiate row * Make sure the view inspection tooltips and the inspector tab stays in sync * Fix pinning * Some performance improvements * General cleanup, ensure correct teardown * Revert to updating component tree with instrumentation While the backburner-based approach is technically more correct, it turns out that ember in practice always fire the instrumentation events due to the route templates (including the internal -top-level) being instrumented by default. This gives more favorable results since we start way too many runloops when we shouldn't have to. * Don't show empty rects * Fix app-picker tests * remove unused code * Fix component tests * Fix view debug tests * Fix style lint * PR comments * Fix 3.4 outlet template location * Fix @model arg on 3.14 * Skip debounce when requesting the first render tree * unify view debug and component tree tests * Refactor render-tree * Refactor view-inspection

@rwjblue

…s#1088) * Add a polyfill for the `captureRenderTree` API * GlimmerTree -> RenderTree * [WIP] view inspecting * Correctly insert outlet nodes * Wire-up more of the UI * Get pinning working * Fix vertical-collection * Fix object inspection * Fix polyfill * Tooltip positionining Closes emberjs#1089 * Use polyfill for 3.14.0/3.14.1 * Set `EmberENV._DEBUG_RENDER_TREE` * Some improvements to the tooltip * Refactor render tree to use Octane idioms * Fix debouncing, don't cause a ton of user-runloops * Don't shadow methods (requested by @rwjblue) * Implement remaining features * Automatically scroll to the appropiate row * Make sure the view inspection tooltips and the inspector tab stays in sync * Fix pinning * Some performance improvements * General cleanup, ensure correct teardown * Revert to updating component tree with instrumentation While the backburner-based approach is technically more correct, it turns out that ember in practice always fire the instrumentation events due to the route templates (including the internal -top-level) being instrumented by default. This gives more favorable results since we start way too many runloops when we shouldn't have to. * Don't show empty rects * Fix app-picker tests * remove unused code * Fix component tests * Fix view debug tests * Fix style lint * PR comments * Fix 3.4 outlet template location * Fix @model arg on 3.14 * Skip debounce when requesting the first render tree * unify view debug and component tree tests * Refactor render-tree * Refactor view-inspection

@rwjblue

…s#1088) * Add a polyfill for the `captureRenderTree` API * GlimmerTree -> RenderTree * [WIP] view inspecting * Correctly insert outlet nodes * Wire-up more of the UI * Get pinning working * Fix vertical-collection * Fix object inspection * Fix polyfill * Tooltip positionining Closes emberjs#1089 * Use polyfill for 3.14.0/3.14.1 * Set `EmberENV._DEBUG_RENDER_TREE` * Some improvements to the tooltip * Refactor render tree to use Octane idioms * Fix debouncing, don't cause a ton of user-runloops * Don't shadow methods (requested by @rwjblue) * Implement remaining features * Automatically scroll to the appropiate row * Make sure the view inspection tooltips and the inspector tab stays in sync * Fix pinning * Some performance improvements * General cleanup, ensure correct teardown * Revert to updating component tree with instrumentation While the backburner-based approach is technically more correct, it turns out that ember in practice always fire the instrumentation events due to the route templates (including the internal -top-level) being instrumented by default. This gives more favorable results since we start way too many runloops when we shouldn't have to. * Don't show empty rects * Fix app-picker tests * remove unused code * Fix component tests * Fix view debug tests * Fix style lint * PR comments * Fix 3.4 outlet template location * Fix @model arg on 3.14 * Skip debounce when requesting the first render tree * unify view debug and component tree tests * Refactor render-tree * Refactor view-inspection

wycats force-pushed the capture-render-tree branch 10 times, most recently from 0e9162d to c3ac9c2 Compare November 22, 2019 23:29

amyrlam mentioned this pull request Nov 30, 2019

Ember Inspector Updates ember-learn/ember-blog#389

Merged

amyrlam mentioned this pull request Dec 4, 2019

The Ember Times No. 127 - December 6th 2019 ember-learn/ember-blog#393

Merged

14 tasks

wycats force-pushed the capture-render-tree branch from a92d010 to 5724d09 Compare December 6, 2019 00:16

wycats force-pushed the capture-render-tree branch from 357fa1d to ccbd110 Compare December 11, 2019 22:38

chancancode force-pushed the capture-render-tree branch from f6b4bd0 to bb580cb Compare December 15, 2019 21:44

rwjblue mentioned this pull request Dec 16, 2019

Add initial octane tree support #1037

Closed

wycats force-pushed the capture-render-tree branch 2 times, most recently from b58c33d to 0fbca9f Compare December 17, 2019 21:16

chancancode mentioned this pull request Dec 17, 2019

Refactor acceptance tests #1103

Merged

wycats force-pushed the capture-render-tree branch from 0fbca9f to 64cceff Compare December 18, 2019 01:15

chancancode changed the base branch from master to refactor-acceptance-tests December 18, 2019 01:15

wycats force-pushed the capture-render-tree branch from 64cceff to 6bf2677 Compare December 18, 2019 01:16

wycats force-pushed the refactor-acceptance-tests branch from 5aad4a5 to 0b541c6 Compare December 18, 2019 01:24

wycats force-pushed the capture-render-tree branch from 8461e01 to d4c0c90 Compare December 18, 2019 01:33

chancancode changed the base branch from refactor-acceptance-tests to master December 18, 2019 02:02

chancancode added 2 commits December 19, 2019 01:01

Fix view debug tests

89342be

Fix style lint

041a0f2

chancancode force-pushed the capture-render-tree branch from c0d920b to 041a0f2 Compare December 19, 2019 09:04

chancancode added 2 commits December 19, 2019 01:07

PR comments

9d5dd6d

Fix 3.4 outlet template location

85cfe8e

chancancode force-pushed the capture-render-tree branch 4 times, most recently from 08e4af6 to 3ecd5f0 Compare December 19, 2019 09:56

Fix @model arg on 3.14

dadec7b

chancancode force-pushed the capture-render-tree branch from 3ecd5f0 to dadec7b Compare December 19, 2019 09:57

rwjblue approved these changes Dec 19, 2019

View reviewed changes

chancancode added 2 commits December 19, 2019 10:46

Skip debounce when requesting the first render tree

e2f4724

unify view debug and component tree tests

c49dfc2

chancancode marked this pull request as ready for review December 19, 2019 18:55

chancancode added 2 commits December 19, 2019 12:17

Refactor render-tree

d8c3ad6

Refactor view-inspection

f2cb491

chancancode changed the title ~~Capture render tree~~ Revamp components inspection (Octane support and improved UX) Dec 19, 2019

chancancode merged commit 4713877 into master Dec 19, 2019

delete-merged-branch bot deleted the capture-render-tree branch December 19, 2019 20:51

chancancode added the enhancement label Dec 19, 2019

chancancode mentioned this pull request Dec 28, 2019

Error message: Ember.meta(...).peekDescriptors is not a function - Object are not shown for any ember component #1120

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Revamp components inspection (Octane support and improved UX) #1088

Revamp components inspection (Octane support and improved UX) #1088

chancancode commented Nov 20, 2019 •

edited by rwjblue

Loading

patricklx commented Dec 3, 2019

chancancode commented Dec 6, 2019

joukevandermaas commented Dec 9, 2019

nummi commented Dec 13, 2019

chancancode commented Dec 16, 2019

rwjblue Dec 19, 2019

chancancode Dec 19, 2019

rwjblue Dec 19, 2019

chancancode Dec 19, 2019

rwjblue Dec 19, 2019

		let id = `ember-inspector-boot-${(Math.random() * 100000000).toFixed(0)}`;

		let script = document.createElement('script');

Revamp components inspection (Octane support and improved UX) #1088

Revamp components inspection (Octane support and improved UX) #1088

Conversation

chancancode commented Nov 20, 2019 • edited by rwjblue Loading

Known Issues

Instructions for testing

patricklx commented Dec 3, 2019

chancancode commented Dec 6, 2019

joukevandermaas commented Dec 9, 2019

nummi commented Dec 13, 2019

chancancode commented Dec 16, 2019

rwjblue Dec 19, 2019

Choose a reason for hiding this comment

chancancode Dec 19, 2019

Choose a reason for hiding this comment

rwjblue Dec 19, 2019

Choose a reason for hiding this comment

chancancode Dec 19, 2019

Choose a reason for hiding this comment

rwjblue Dec 19, 2019

Choose a reason for hiding this comment

chancancode commented Nov 20, 2019 •

edited by rwjblue

Loading