Cannot inspect args for certain components

[afzal273]

Issue and Steps to Reproduce

• Using Ember v3.15 on OS X, Chrome version 79.0.3945.88, Ember inspector v 3.13.1.
• Following ember guides super rental tutorial.
• Cannot inspect args for Rental component, parens are showing as empty in inspector and on clicking $E it shows ember proxy, so not sure where to find args in there. (screen capture attached)
• Also for certain components (Rental::Image) the details tab opens right away on clicking it but for others (like Rental), have to click on the button on top right of pane to see it, why is there that difference? Why not open the detail tab for every component when it is clicked? That will make inspecting easy. (can be seen in screen capture)

Screenshots

[chancancode]

The component probably isn’t showing up because it is a template-only component and therefore doesn’t have an instance

[afzal273]

I see, so if it is a template-only component then you have to click on the top right of the pane to see details? But that shouldn't be the case IMO, the user should be able to see details on clicking a component name regardless of what kind it is.

I can't inspect arguments for any component by clicking $E (if it's a template-only or not - in this example rental is a template only component and can't see args in the inspector, image and map are not template only and can only see args for map and only lat and lng but not the remaining ones). I believe the user should be able to see passed in arguments for any type of component -template-only or otherwise.

Also, can ember inspector allow clicking the caret to see details rather than having to click $E and checking console? The react inspector allows it and I think it will greatly improve productivity to be able to see details right in the ember inspector rather than having to go back and forth between console and inspector panes after clicking $E.

[nummi]

The component probably isn’t showing up because it is a template-only component and therefore doesn’t have an instance

Not showing the inspector always feels like unexpected behavior. Perhaps we should keep the inspector open but have a message explaining that template-only components don't have an instance?

[RobbieTheWagner]

I would be on board with @nummi's suggestion unless you have any other ideas @chancancode?

[nummi]

Maybe we should have a separate section in the inspector to display args?

[chancancode]

Yeah I am fine with that. For the template-only component case, maybe something like "This component does not have a JavaScript instance"? For args, probably should wait for @SYU15's PR and revaluate, but I think having a section for them in the object inspector sounds find in addition to making them clickable.

[chancancode]

An alternative for the template-only component case is to make clicking on the row not automatically open the object inspector, and make that one of the buttons instead (which can be disabled with a tooltip), but I guess that crosses into what @SYU15 is looking into.

My main (not very strong) concern is that, while it seems fine to open the object inspector with the message in the case where you clearly asked to inspect the instance, there are other cases where that is not the case and seems annoying. For example, when using the "live inspection" feature on the page, IMO when clicking on a template-only component in that case it doesn't seem super useful to open the blank object inspector, as opposed to just highlighting the row. I am not strongly against it, just thought it seems mildly annoying/inconvenient.

[SYU15]

I have my WIP PR for args here: https://github.com/emberjs/ember-inspector/pull/1175

Happy to discuss what the implications are for template-only components. I guess the args could be the only piece you can interact with (if I am understanding that @chancancode is saying).

[patricklx]

@rwwagner90 this can now be closed? #2147

[RobbieTheWagner]

Yeah, will close for now. Please feel free to reopen if anyone is still experiencing issues!