show parents in sidebar

app/components/object-inspector.hbs

@@ -110,11 +110,13 @@
     {{else if (eq this.propDisplayType "grouped")}}
       <ObjectInspector::PropertiesGrouped @model={{@mixinDetails}} />
     {{/if}}
+    <Ui::ToolbarDivider />
+    <ObjectInspector::ComponentParents @select={{@selectComponent}} @item={{@item}}/>
   </div>
 {{else}}
   <div class="split-panel-bd">
     <Ui::EmptyMessage>
       No object selected
     </Ui::EmptyMessage>
   </div>
-{{/if}}
+{{/if}}

app/components/object-inspector/component-parents.hbs

@@ -0,0 +1,33 @@
+<ObjectInspector::Accordion @mixin={{this.accordionMixin}} as |accordion|>
+  <div
+    class="mixin {{this.accordionMixin.type}} {{if accordion.isExpanded "mixin-state-expanded"}} {{if this.accordionMixin.properties.length "mixin-props-yes" "mixin-props-no"}}"
+    data-test-object-detail
+  >
+    {{#if this.accordionMixin.properties.length}}
+      <h2
+        data-test-object-detail-name
+        class="mixin-name sticky top-0 truncate select-none cursor-default text-base15 bg-base01"
+        role="button"
+        {{on "click" accordion.toggle}}
+      >
+        {{this.accordionMixin.name}}
+      </h2>
+    {{else}}
+      <h2
+        class="mixin-name mixin-name--no-props sticky top-0 truncate select-none text-base09 cursor-default bg-base01"
+        data-test-object-detail-name
+      >
+        {{this.accordionMixin.name}}
+      </h2>
+    {{/if}}
+    {{#if accordion.isExpanded}}
+      <ul class="mixin-properties m-0 text-base font-mono list-none">
+      {{#each this.parents as |parent|}}
+        <ComponentTreeItem @item={{parent}}  />
+      {{else}}
+          <li class="mixin-property flex relative flex-row items-center truncate">No Properties</li>
+      {{/each}}
+      </ul>
+    {{/if}}
+  </div>
+</ObjectInspector::Accordion>

app/components/object-inspector/component-parents.js

@@ -0,0 +1,43 @@
+import Component from '@glimmer/component';
+import { RenderItem } from 'ember-inspector/controllers/component-tree';
+
+class RenderItemNoParent extends RenderItem {
+  get level() {
+    return 0;
+  }
+
+  get hasChildren() {
+    return false;
+  }
+}
+
+export default class ComponentParents extends Component {
+  get accordionMixin() {
+    return {
+      name: 'rendered by',
+      expand: true,
+      properties: {
+        length: 1,
+      },
+    };
+  }
+  get parents() {
+    const parents = [];
+    let item = this.args.item?.parentItem;
+    while (item) {
+      parents.push(
+        new RenderItemNoParent(
+          item.controller,
+          item.parentItem,
+          item.renderNode,
+        ),
+      );
+      item = item.parentItem;
+    }
+    return parents;
+  }
+
+  selectComponent = (item) => {
+    this.args.select(item);
+  };
+}

app/controllers/application.js

@@ -1,4 +1,4 @@
-import Controller from '@ember/controller';
+import Controller, { inject as controller } from '@ember/controller';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { debounce, schedule } from '@ember/runloop';
@@ -7,6 +7,8 @@ import { inject as service } from '@ember/service';
 import { TrackedArray, TrackedObject } from 'tracked-built-ins';
 
 export default class ApplicationController extends Controller {
+  @controller('component-tree') componentTreeController;
+
   /**
    * Service used to broadcast changes to the application's layout
    * such as toggling of the object inspector.

app/controllers/component-tree.js

@@ -288,7 +288,7 @@ function arrowKeyPressed(keyCode) {
   return [KEYS.up, KEYS.right, KEYS.down, KEYS.left].includes(keyCode);
 }
 
-class RenderItem {
+export class RenderItem {
   @tracked isExpanded;
   @tracked renderNode;
 

app/routes/application.js

@@ -12,6 +12,7 @@ export default class ApplicationRoute extends Route {
 
   setupController(controller) {
     controller.set('mixinStack', []);
+
     let port = this.port;
     port.on('objectInspector:updateObject', this, this.updateObject);
     port.on('objectInspector:updateProperty', this, this.updateProperty);

app/templates/application.hbs

@@ -74,6 +74,8 @@
             @popMixinDetails={{this.popMixinDetails}}
             @model={{this.mixinStack}}
             @mixinDetails={{this.mixinDetails}}
+            @selectComponent={{mut this.componentTreeController.pinned}}
+            @item={{this.componentTreeController.currentItem}}
           />
         </Ui::DraggableColumn>
       {{/if}}