diff --git a/app/controllers/component-tree.js b/app/controllers/component-tree.js
index ffb8fb979b..1d24c801a9 100644
--- a/app/controllers/component-tree.js
+++ b/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,6 +145,11 @@ 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) {
@@ -147,6 +157,24 @@ export default Controller.extend({
     }
   },
 
+  /**
+   * 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 => {
+      return item.view.objectId === objectId;
+    });
+
+    if (selectedItemIndex) {
+      const averageItemHeight = 22;
+      document.querySelector('.js-component-tree').scrollTop = averageItemHeight * selectedItemIndex;
+    }
+  },
+
+
   actions: {
     previewLayer({
       view: {
@@ -201,12 +229,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
diff --git a/app/routes/application.js b/app/routes/application.js
index f8482c2a04..e801cc1818 100644
--- a/app/routes/application.js
+++ b/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
diff --git a/app/templates/component-tree.hbs b/app/templates/component-tree.hbs
index 50852bca6c..e8e32e5cfa 100644
--- a/app/templates/component-tree.hbs
+++ b/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"}}>