Allow flat display of object attributes

[DougPuchalski]

Often it's very hard to find an object's property in the browser. I think it would be faster to find the property by name and then see where it was defined, rather than having to search through Own Properties, the various classes and mixins. Has there been any thought to reverse this or supporting another mode?

[teddyzeenny]

What about adding search functionality to the object inspector?

[DougPuchalski]

@teddyzeenny Search would be great also, but I think a flat list of all attributes is way more useful than what there is now.

[RobbieTheWagner]

@aceofspades @teddyzeenny I'm not quite sure what is being asked here. Can one of you please clarify?

[teddyzeenny]

I think this was about not grouping object properties by mixin and own properties sections. Instead just list all the properties (maybe sorted by name). This would be useful if you don't really know in which level of the hierarchy the property exists, which makes it hard to find as you need to expand and look into all the mixins.

[nummi]

Should we add a search?

[RobbieTheWagner]

@nummi I think search could fix this, but perhaps we could also add an "all properties" grouping or something, that could be collapsed by default and pull them all together? Not sure what would be best. @teddyzeenny what do you think?

[nummi]

I like collapsing — you don’t always know the exact name of the prop.

[RobbieTheWagner]

@nummi so you're saying you like the idea of adding an additional grouping somewhere of "all properties", and keeping it collapsed? I envision keeping it collapsed unless you really want to explore all properties in one giant flattened list.

[teddyzeenny]

I think something like two tabs, the first tab (the current state of the object inspector) shows the properties grouped by mixins (including duplicate properties with strikethrough to represent overwritten properties), and another tab to show the full list of properties, sorted by name, containing the final value of each property (the last override). The new second tab (all listed properties) can include a search field. Something similar to the "Styles" vs "Computed" tabs in Elements: CSS devtools.

Current object inspector looks like this:

The additional "all" properties tab would be similar to this:

[nummi]

@teddyzeenny I dig it.

[RobbieTheWagner]

@teddyzeenny @nummi this totally makes sense, and I agree seems like an elegant way to do it. Are either of you interested in taking a stab at it?

[teddyzeenny]

I can't work on it at the moment but happy to help anyone who's interested.

[nummi]

I'm at home with a newborn at the moment so I might have some time. Can you someone throw me some clues to get me on the right track?

[RobbieTheWagner]

@teddyzeenny can you help talk @nummi through some getting started steps on discord please? I'm happy to help as well, but you would likely know more about this stuff than me.

[nummi]

Progress

[RobbieTheWagner]

@nummi Nice! This is looking awesome 😄

[nummi]

Fixed in https://github.com/emberjs/ember-inspector/pull/877