View tree search filter (emberjs#720)

app/controllers/view-tree.js

@@ -1,6 +1,7 @@
 import Ember from "ember";
-const { computed, Controller, on, observer, inject: { controller } } = Ember;
-const { alias } = computed;
+import searchMatch from "ember-inspector/utils/search-match";
+const { computed, Controller, get, on, observer, inject: { controller } } = Ember;
+const { alias, filter } = computed;
 
 export default Controller.extend({
   application: controller(),
@@ -12,6 +13,25 @@ export default Controller.extend({
     components: false
   },
 
+  /**
+   * Bound to the search field to filter the component list.
+   *
+   * @property searchText
+   * @type {String}
+   * @default ''
+   */
+  searchText: '',
+
+  /**
+   * The filtered view list.
+   *
+   * @property filteredList
+   * @type {Array<Object>}
+   */
+  filteredList: filter('model', function(item) {
+    return searchMatch(get(item, 'value.name'), this.get('searchText'));
+  }).property('model.[]', 'searchText'),
+
   optionsChanged: on('init', observer('options.components', function() {
     this.port.send('view:setOptions', { options: this.get('options') });
   })),

app/templates/view-tree-toolbar.hbs

@@ -13,4 +13,10 @@
   <div class="toolbar__checkbox js-filter-components">
     {{input type="checkbox" checked=options.components id="options-components"}} <label for="options-components">Components</label>
   </div>
+
+  <div class="divider"></div>
+
+  <div class="toolbar__search js-filter-views">
+    {{input type="text" id="options-views" placeholder="Search Views" value=searchText}}
+  </div>
 </div>

app/templates/view-tree.hbs

@@ -1,5 +1,5 @@
 {{#x-list name="view-tree" schema=(schema-for "view-tree") as |list|}}
-  {{#list.vertical-collection content=model as |content index|}}
+  {{#list.vertical-collection content=filteredList as |content index|}}
     {{view-item
         model=content
         inspect=(action "inspect")

tests/acceptance/view-tree-test.js

@@ -2,7 +2,7 @@ import Ember from "ember";
 import { test } from 'ember-qunit';
 import { module } from 'qunit';
 import startApp from '../helpers/start-app';
-import { visit, find, findAll, click, triggerEvent } from 'ember-native-dom-helpers';
+import { visit, fillIn, find, findAll, click, triggerEvent } from 'ember-native-dom-helpers';
 
 let App;
 const { run } = Ember;
@@ -21,6 +21,10 @@ module('View Tree Tab', {
   }
 });
 
+function textFor(selector, context) {
+  return find(selector, context).textContent.trim();
+}
+
 let treeId = 0;
 function viewNodeFactory(props) {
   if (!props.template) {
@@ -118,16 +122,13 @@ test("It should correctly display the view tree", async function(assert) {
 
   let treeNodes = findAll('.js-view-tree-item');
   assert.equal(treeNodes.length, 3, 'expected some tree nodes');
+
   let controllerNames = [];
   let templateNames = [];
   let modelNames = [];
   let viewClassNames = [];
   let durations = [];
 
-  function textFor(selector, context) {
-    return find(selector, context).textContent.trim();
-  }
-
   [...treeNodes].forEach(function(node) {
     templateNames.push(textFor('.js-view-template', node));
     controllerNames.push(textFor('.js-view-controller', node));
@@ -186,6 +187,67 @@ test("It should correctly display the view tree", async function(assert) {
   ], 'expected title tips');
 });
 
+test("It should filter the view tree using the search text", async function(assert) {
+  let viewTree = defaultViewTree();
+
+  await visit('/');
+  run(() => {
+    port.trigger('view:viewTree', { tree: viewTree });
+  });
+  await wait();
+
+  let treeNodes = findAll('.js-view-tree-item');
+  assert.equal(treeNodes.length, 3, 'expected some tree nodes');
+
+  await fillIn('.js-filter-views input', 'post');
+  treeNodes = findAll('.js-view-tree-item');
+  assert.equal(treeNodes.length, 1, 'expected filtered tree nodes');
+
+  let controllerNames = [];
+  let templateNames = [];
+  let modelNames = [];
+  let viewClassNames = [];
+  let durations = [];
+
+  [...treeNodes].forEach(function(node) {
+    templateNames.push(textFor('.js-view-template', node));
+    controllerNames.push(textFor('.js-view-controller', node));
+    viewClassNames.push(textFor('.js-view-class', node));
+    modelNames.push(textFor('.js-view-model', node));
+    durations.push(textFor('.js-view-duration', node));
+  });
+
+  assert.deepEqual(controllerNames, [
+    'App.PostsController',
+  ], 'expected controller names');
+
+  assert.deepEqual(templateNames, [
+    'posts',
+  ], 'expected template names');
+
+  assert.deepEqual(modelNames, [
+    'PostsArray',
+  ], 'expected model names');
+
+  assert.deepEqual(viewClassNames, [
+    'App.PostsView',
+  ], 'expected view class names');
+
+  assert.deepEqual(durations, [
+    '1.00ms',
+  ], 'expected render durations');
+
+  let titleTips = [...findAll('span[title]')].map(node => node.getAttribute('title')).sort();
+
+  assert.deepEqual(titleTips, [
+    'App.PostsController',
+    'App.PostsView',
+    'PostsArray',
+    'posts',
+    'posts'
+  ], 'expected title tips');
+});
+
 test("It should update the view tree when the port triggers a change", async function(assert) {
   assert.expect(4);
   let treeNodes, viewTree = defaultViewTree();