Ability to inspect/debug modifiers

[kangax]

Is your feature request related to a problem? Please describe. Modifiers seem to be the recommended way of abstracting the logic away in the latest Ember. However, Ember inspector doesn't seem to allow for their discovery, interception, modification or any other kind of debugging.

Describe the solution you'd like I ran into this when trying to integrate ember-css-transitions library that provides css-transitions modifier:

<button class="docs-btn" {{on "click" (fn (mut this.show2) (not show2))}}>
  Toggle
</button>

{{#if this.show2}}
  <div {{css-transition
    enterClass="opacity-0 max-h-0"
    enterActiveClass="transition-all duration-500 ease-in-out"
    enterToClass="opacity-100 max-h-12"
    leaveClass="opacity-100 max-h-12"
    leaveActiveClass="transition-all duration-500 ease-in-out"
    leaveToClass="opacity-0 max-h-0"}}>
    <h1>Hello world</h1>
  </div>
{{/if}}

Ember inspector doesn't allow me to see what css-transition does nor set a breakpoint into it. I assume the only way would be to manually dig into node_modules dir.

Describe alternatives you've considered n/a

Additional context In order to show modifiers, we would probably first need to add support for showing regular elements in the component (or rather, no-longer-just-component) tree — I don't see a way to do this now. It could be done as a toggle between current view and "extended" view where both elements and components are shown. In the example above, both <div {{css-transition ... and <button class="docs-btn" {{on "click" ... would be there. The object inspector would then be able to show modifiers attached to these elements.

[RobbieTheWagner]

@kangax aside from being able to see the modifier, I am unsure what sort of debugging functionality you are looking for? In the case of the css-transition modifier, it is going to add and remove classes when the element enters/exits. How would Ember Inspector be able to help with this?

[kangax]

@rwwagner90 I think being able to jump to the source of a modifier would be helpful. In the case of the css-transitions, I wanted to debug which classes are added/removed at which time (it does it with delay) and putting a breakpoint in there would solve that.

In general, as more and more logic is moved into modifiers, it seems useful to be able to understand which elements have which modifiers and what they do.

[RobbieTheWagner]

@chancancode @pzuraq @rwjblue any thoughts on how supporting modifiers might look? I'm having a hard time wrapping my head around how this feature might function.

[RobbieTheWagner]

@patricklx what about this one? I know you added some modifier stuff, but not sure how deep that goes and if it allows inspecting them or just shows them?

[patricklx]

yes, you can inspect their params and implementation