improve tests

app/components/render-tree-toolbar.hbs

@@ -17,16 +17,17 @@
     @value={{@searchValue}}
     class="js-render-profiles-search"
   />
-
-  <div class="toolbar__checkbox js-hightlight-render">
-    <label>
-      <Input
-        data-test-options-highlight-render
-        @type="checkbox"
-        @checked={{@shouldHighlightRender}}
-        {{on "change" @updateShouldHighlightRender}}
-      />
-      Highlight render
-    </label>
-  </div>
+  {{#if @isHighlightEnabled}}
+    <div class="toolbar__checkbox js-hightlight-render">
+      <label>
+        <Input
+          data-test-options-highlight-render
+          @type="checkbox"
+          @checked={{@shouldHighlightRender}}
+          {{on "change" @updateShouldHighlightRender}}
+        />
+        Highlight render
+      </label>
+    </div>
+  {{/if}}
 </div>

app/controllers/render-tree.js

@@ -8,7 +8,7 @@ import { and, equal } from '@ember/object/computed';
 
 export default Controller.extend({
   initialEmpty: false,
-  modelEmpty: equal('model.length', 0),
+  modelEmpty: equal('model.profiles.length', 0),
   showEmpty: and('initialEmpty', 'modelEmpty'),
   shouldHighlightRender: false,
 
@@ -59,16 +59,20 @@ export default Controller.extend({
     return escapeRegExp(this.search.toLowerCase());
   }),
 
+  isHighlightEnabled: computed('model.isHighlighSupported', function () {
+    return get(this.model, 'isHighlighSupported');
+  }),
+
   filtered: computed(
     'escapedSearch',
-    '[email protected]',
+    'model.profiles.@each.name',
     'search',
     function () {
       if (isEmpty(this.escapedSearch)) {
-        return this.model;
+        return get(this.model, 'profiles');
       }
 
-      return this.model.filter((item) => {
+      return get(this.model, 'profiles').filter((item) => {
         const regExp = new RegExp(this.escapedSearch);
         return recursiveMatch(item, regExp);
       });

app/routes/render-tree.js

@@ -1,4 +1,4 @@
-import { action, get, set } from '@ember/object';
+import EmberObject, { action, get, set } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { Promise } from 'rsvp';
 import TabRoute from 'ember-inspector/routes/tab';
@@ -9,17 +9,20 @@ export default class RenderTreeRoute extends TabRoute {
   model() {
     const port = this.port;
     return new Promise(function (resolve) {
-      port.one('render:profilesAdded', function (message) {
-        resolve(message.profiles);
-      });
+      port.one(
+        'render:profilesAdded',
+        function ({ profiles, isHighlighSupported }) {
+          resolve(EmberObject.create({ profiles, isHighlighSupported }));
+        }
+      );
       port.send('render:watchProfiles');
     });
   }
 
   setupController(controller, model) {
     super.setupController(...arguments);
 
-    if (model.length === 0) {
+    if (get(model, 'profiles.length') === 0) {
       controller.set('initialEmpty', true);
     }
     const port = this.port;
@@ -37,16 +40,27 @@ export default class RenderTreeRoute extends TabRoute {
   }
 
   profilesUpdated(message) {
-    set(this, 'controller.model', message.profiles);
+    set(this, 'controller.model.profiles', message.profiles);
   }
 
   profilesAdded(message) {
-    const model = get(this, 'controller.model');
+    const currentProfiles = get(this, 'controller.model.profiles');
     const profiles = message.profiles;
+    if (
+      message.isHighlighSupported !== undefined &&
+      message.isHighlighSupported !==
+        get(this, 'controller.model.isHighlighSupported')
+    ) {
+      set(
+        this,
+        'controller.model.isHighlighSupported',
+        message.isHighlighSupported
+      );
+    }
 
-    model.pushObjects(profiles);
-    if (model.length > 100) {
-      set(this, 'controller.model', model.slice(0, 100));
+    currentProfiles.pushObjects(profiles);
+    if (currentProfiles.length > 100) {
+      set(this, 'controller.model.profiles', currentProfiles.slice(0, 100));
     }
   }
 

app/templates/render-tree.hbs

@@ -7,6 +7,7 @@
       @showEmpty={{this.showEmpty}}
       @shouldHighlightRender={{this.shouldHighlightRender}}
       @updateShouldHighlightRender={{this.updateShouldHighlightRender}}
+      @isHighlightEnabled={{this.isHighlightEnabled}}
     />
   {{/in-element}}
 {{/if}}

ember_debug/libs/promise-assembler.js

@@ -8,7 +8,7 @@
 import Promise from 'ember-debug/models/promise';
 
 import { A } from '../utils/ember/array';
-import EmberObject from '../utils/ember/object';
+import EmberObject, { computed } from '../utils/ember/object';
 import Evented from '../utils/ember/object/evented';
 import { isNone } from '../utils/ember/utils';
 import RSVP from '../utils/rsvp';

ember_debug/models/profile-manager.js

@@ -1,10 +1,9 @@
 import ProfileNode from './profile-node';
+import Ember from '../utils/ember';
+import { compareVersion } from 'ember-debug/utils/version';
 
-import { later, scheduleOnce } from '../utils/ember/runloop';
-const { guidFor } = Ember;
-const {
-  run: { later, scheduleOnce, cancel },
-} = Ember;
+import { later, scheduleOnce, cancel } from '../utils/ember/runloop';
+const { VERSION } = Ember;
 
 function getEdges(first, last, closest) {
   let start = null;
@@ -77,6 +76,7 @@ export default class ProfileManager {
     this.stylesheet = insertStylesheet();
     // keep track of all the active highlights
     this.highlights = [];
+    this.isHighlightEnabled = compareVersion(VERSION, '3.20.0') !== -1;
   }
 
   began(timestamp, payload, now) {
@@ -85,6 +85,7 @@ export default class ProfileManager {
       if (this.shouldHighlightRender && payload.view) {
         this._highLightView(payload.view);
       }
+      this.current.isHighlightEnabled = this.isHighlightEnabled;
       return this.current;
     });
   }

ember_debug/render-debug.js

@@ -36,7 +36,10 @@ export default EmberObject.extend(PortMixin, {
   },
 
   sendAdded(profiles) {
-    this.sendMessage('profilesAdded', { profiles });
+    this.sendMessage('profilesAdded', {
+      profiles,
+      isHighlighSupported: this.profileManager.isHighlightEnabled,
+    });
   },
 
   /**

tests/acceptance/render-tree-test.js

@@ -132,15 +132,6 @@ module('Render Tree Tab', function (outer) {
         .hasText('Second View Rendering');
     });
 
-    test('Renders checkbox for highlight render', async function (assert) {
-      await visit('/render-tree');
-
-      assert
-        .dom('[data-test-options-highlight-render]')
-        .exists('checkbox input is rendered');
-      assert.dom('.js-hightlight-render').hasText('Highlight render');
-    });
-
     test('It should clear the search filter when the clear button is clicked', async function (assert) {
       await visit('/render-tree');