Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Capture render tree #1088

Draft
wants to merge 27 commits into
base: master
from
Draft

Capture render tree #1088

wants to merge 27 commits into from

Conversation

@chancancode
Copy link
Member

chancancode commented Nov 20, 2019

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

  1. Click on the Checks tab for this pull request

  2. Under "Build and Publish" > "Build extensions" > "Artifacts", download the "chrome" build
    Screen Shot 2019-11-22 at 2 39 26 PM

  3. Extract the zip file you downloaded from the previous step, it should result in a folder called "chrome"

  4. 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
    Screen Shot 2019-11-22 at 2 41 08 PM

  5. Try out the new inspector
    inspect-5

  6. 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.

@wycats wycats force-pushed the capture-render-tree branch 10 times, most recently from 0e9162d to c3ac9c2 Nov 20, 2019
@amyrlam amyrlam mentioned this pull request Nov 30, 2019
@patricklx

This comment has been minimized.

Copy link
Contributor

patricklx commented Dec 3, 2019

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
@amyrlam amyrlam mentioned this pull request Dec 4, 2019
8 of 14 tasks complete
@wycats wycats force-pushed the capture-render-tree branch from a92d010 to 5724d09 Dec 6, 2019
@chancancode

This comment has been minimized.

Copy link
Member Author

chancancode commented Dec 6, 2019

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

@joukevandermaas

This comment has been minimized.

Copy link

joukevandermaas commented Dec 9, 2019

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

  1. Click on the Checks tab for this pull request
  2. Under "Build and Publish" > "Build extensions" > "Artifacts", download the "firefox" build.
  3. Extract the zip file you downloaded from the previous step, it should result in a folder called "firefox"
  4. Open the addons manager in Firefox (Ctrl+Shift+A on Windows, not sure about other OS)
  5. Click the little cog icon and select "Debug addons"
  6. In the new page that opens, click "Load temporary addon"
  7. Navigate to the directory you extracted in step 3, and select the "manifest.json" file
  8. When you are done testing, you can click the "remove" button on the temporary addon.
@wycats wycats force-pushed the capture-render-tree branch from 357fa1d to ccbd110 Dec 11, 2019
@nummi

This comment has been minimized.

Copy link
Contributor

nummi commented Dec 13, 2019

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

image

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 added 15 commits Nov 21, 2019
* Automatically scroll to the appropiate row
* Make sure the view inspection tooltips and the inspector tab stays in
  sync
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.
@chancancode chancancode force-pushed the capture-render-tree branch from f6b4bd0 to bb580cb Dec 15, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.