Revamp components inspection (Octane support and improved UX) (#1088)

* Add a polyfill for the `captureRenderTree` API

* GlimmerTree -> RenderTree

* [WIP] view inspecting

* Correctly insert outlet nodes

* Wire-up more of the UI

* Get pinning working

* Fix vertical-collection

* Fix object inspection

* Fix polyfill

* Tooltip positionining

Closes #1089

* Use polyfill for 3.14.0/3.14.1

* Set `EmberENV._DEBUG_RENDER_TREE`

* Some improvements to the tooltip

* Refactor render tree to use Octane idioms

* Fix debouncing, don't cause a ton of user-runloops

* Don't shadow methods (requested by @rwjblue)

* Implement remaining features

* Automatically scroll to the appropiate row
* Make sure the view inspection tooltips and the inspector tab stays in
  sync

* Fix pinning

* Some performance improvements

* General cleanup, ensure correct teardown

* Revert to updating component tree with instrumentation

While the backburner-based approach is technically more correct, it
turns out that ember in practice always fire the instrumentation
events due to the route templates (including the internal -top-level)
being instrumented by default. This gives more favorable results since
we start way too many runloops when we shouldn't have to.

* Don't show empty rects

* Fix app-picker tests

* remove unused code

* Fix component tests

* Fix view debug tests

* Fix style lint

* PR comments

* Fix 3.4 outlet template location

* Fix @model arg on 3.14

* Skip debounce when requesting the first render tree

* unify view debug and component tree tests

* Refactor render-tree

* Refactor view-inspection

Author: chancancode

app/components/scroll-container.js

@@ -0,0 +1,79 @@
+import Component from '@ember/component';
+import { debounce } from '@ember/runloop';
+import { htmlSafe } from '@ember/string';
+import { tracked } from '@glimmer/tracking';
+
+export default class ScrollContainerComponent extends Component {
+  attributeBindings = ['style'];
+
+  @tracked collection;
+  @tracked currentItem;
+  @tracked itemHeight;
+
+  lastIndex = -1;
+  lastItem = undefined;
+
+  get style() {
+    return htmlSafe(`
+      position: relative;
+      height: 100%;
+    `);
+  }
+
+  get scrollTargetStyle() {
+    let { index, itemHeight } = this;
+
+    if (index === -1) {
+      return htmlSafe('display: none;');
+    } else {
+      return htmlSafe(`
+        position: absolute;
+        width: 100%;
+        height: ${itemHeight || 0}px;
+        margin: 0px;
+        padding: 0px;
+        top: ${index * itemHeight || 0}px;
+        left: 0px;
+        z-index: -9999;
+        pointer-events: none;
+      `);
+    }
+  }
+
+  get index() {
+    return this.collection.indexOf(this.currentItem);
+  }
+
+  get scrollTarget() {
+    return this.element.querySelector('.scroll-target');
+  }
+
+  didRender() {
+    let { index, lastIndex, currentItem, lastItem } = this;
+
+    if (index !== lastIndex || currentItem !== lastItem) {
+      this.lastIndex = index;
+      this.lastItem = currentItem;
+
+      debounce(this, this.scrollIntoViewIfNeeded, 50);
+    }
+  }
+
+  scrollIntoViewIfNeeded() {
+    let { element, scrollTarget } = this;
+
+    if (needsScroll(element, scrollTarget)) {
+      scrollTarget.scrollIntoView({
+        behavior: 'auto',
+        block: 'nearest',
+        inline: 'nearest'
+      });
+    }
+  }
+}
+
+function needsScroll(container, target) {
+  let { top: containerTop, bottom: containerBottom } = container.getBoundingClientRect();
+  let { top: targetTop, bottom: targetBottom } = target.getBoundingClientRect();
+  return targetTop < containerTop || targetBottom > containerBottom;
+}

app/controllers/application.js

@@ -66,12 +66,32 @@ export default Controller.extend({
     this.port.send('objectInspector:releaseObject', { objectId: item.objectId });
   }),
 
+  showInspector: action(function() {
+    if (this.inspectorExpanded === false) {
+      this.set('inspectorExpanded', true);
+      // Broadcast that tables have been resized (used by `x-list`).
+      schedule('afterRender', () => {
+        this.layoutService.trigger('resize', { source: 'object-inspector' });
+      });
+    }
+  }),
+
+  hideInspector: action(function() {
+    if (this.inspectorExpanded === true) {
+      this.set('inspectorExpanded', false);
+      // Broadcast that tables have been resized (used by `x-list`).
+      schedule('afterRender', () => {
+        this.layoutService.trigger('resize', { source: 'object-inspector' });
+      });
+    }
+  }),
+
   toggleInspector: action(function() {
-    this.toggleProperty('inspectorExpanded');
-    // Broadcast that tables have been resized (used by `x-list`).
-    schedule('afterRender', () => {
-      this.layoutService.trigger('resize', { source: 'object-inspector' });
-    });
+    if (this.inspectorExpanded) {
+      this.hideInspector();
+    } else {
+      this.showInspector();
+    }
   }),
 
   setActive: action(function(bool) {