Scroll component tree to selected item

When an item is inspected via the context menu we try to put it into
view in the component tree.  We make an educated guess as to how far
down we should scroll based on the item's index and a magic height
number

Author: Bestra

app/controllers/component-tree.js

@@ -72,6 +72,11 @@ const flattenSearchTree = (
 export default Controller.extend({
   application: controller(),
   queryParams: ['pinnedObjectId'],
+
+  /**
+   * The entry in the component tree corresponding to the pinnedObjectId
+   * will be selected
+   */
   pinnedObjectId: null,
   inspectingViews: false,
   components: true,
@@ -140,13 +145,34 @@ export default Controller.extend({
     this.set('expandedStateCache', {});
   },
 
+  /**
+   * Expands the component tree so that entry for the given view will
+   * be shown.  Recursively expands the entry's parents up to the root.
+   * @param {*} objectId The id of the ember view to show
+   */
   expandToNode(objectId) {
     let node = this.get('filteredArray').find(item => item.get('id') === objectId);
     if (node) {
       node.expandParents();
     }
   },
 
+  /**
+   * This method is basically a trick to get the `{{vertical-collection}}` in the vicinity
+   * of the item that's been selected.  We can't directly scroll to the element but we
+   * can guess at how far down the list the item is. Then we can manually set the scrollTop
+   * of the virtual scroll.
+   */
+  scrollTreeToItem(objectId) {
+    let selectedItemIndex = this.get('displayedList').findIndex(item => item.view.objectId === objectId);
+
+    if (selectedItemIndex) {
+      const averageItemHeight = 22;
+      document.querySelector('.js-component-tree').scrollTop = averageItemHeight * selectedItemIndex;
+    }
+  },
+
+
   actions: {
     previewLayer({
       view: {
@@ -201,12 +227,16 @@ export default Controller.extend({
       if (objectId) {
         this.set('pinnedObjectId', objectId);
         this.expandToNode(objectId);
+        this.scrollTreeToItem(objectId);
         this.get('port').send('objectInspector:inspectById', {
           objectId,
         });
       }
     },
 
+    /**
+     * Scrolls the main page to put the selected element into view
+     */
     scrollToElement(elementId) {
       this.get('port').send('view:scrollToElement', {
         elementId

app/routes/application.js

@@ -33,10 +33,6 @@ export default Route.extend({
   },
 
   inspectComponent({ viewId }) {
-    const isActive = this.get('controller.active');
-    if (!isActive) {
-      //TODO: Tell the user to open the Ember devtools panel
-    }
     this.transitionTo('component-tree', {
       queryParams: {
         pinnedObjectId: viewId

app/templates/component-tree.hbs

@@ -1,4 +1,4 @@
-<div class="list__content" style="height: 100%;">
+<div class="list__content js-component-tree" style="height: 100%;">
   {{#vertical-collection displayedList estimateHeight=20 as |item i|}}
     <div onmouseenter={{action "previewLayer" item}}
       onmouseleave={{action "hidePreview"}}>