add highlight render option to Render Performance tab

clean up
emberjs · Sep 4, 2021 · 5ce959a · 5ce959a
1 parent 6fec6d5
commit 5ce959a
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 0 deletions.
diff --git a/app/controllers/render-tree.js b/app/controllers/render-tree.js
@@ -10,6 +10,9 @@ export default Controller.extend({
   initialEmpty: false,
   modelEmpty: equal('model.length', 0),
   showEmpty: and('initialEmpty', 'modelEmpty'),
+  shouldHighlightRender: false,
+
+  port: service(),
 
   /**
    * Storage is needed for remembering if the user closed the warning
@@ -75,6 +78,14 @@ export default Controller.extend({
   closeWarning: action(function () {
     this.set('isWarningClosed', true);
   }),
+
+  updateShouldHighlightRender: action(function () {
+    const value = !this.shouldHighlightRender
+    this.set('shouldHighlightRender', value);
+    this.port.send('render:updateShouldHighlightRender', {
+      shouldHighlightRender: value,
+    });
+  }),
 });
 
 function recursiveMatch(item, regExp) {

diff --git a/app/templates/render-tree-toolbar.hbs b/app/templates/render-tree-toolbar.hbs
@@ -17,4 +17,16 @@
     @value={{this.searchValue}}
     class="js-render-profiles-search"
   />
+
+  <div class="toolbar__checkbox js-hightlight-render">
+    <label>
+      <Input
+        data-test-options-highlight-render
+        @type="checkbox"
+        @checked={{this.shouldHighlightRender}}
+        {{on "input" this.updateShouldHighlightRender}}
+      />
+      Highlight render
+    </label>
+  </div>
 </div>
diff --git a/ember_debug/render-debug.js b/ember_debug/render-debug.js
@@ -12,6 +12,7 @@ _subscribeToRenderEvents();
 export default EmberObject.extend(PortMixin, {
   namespace: null,
   portNamespace: 'render',
+  shouldHighlightRender: false,
 
   profileManager,
 
@@ -35,9 +36,33 @@ export default EmberObject.extend(PortMixin, {
   },
 
   sendAdded(profiles) {
+    if (this.shouldHighlightRender) {
+      profiles.forEach(profile => {
+        this._hightLightNode(profile);
+      })
+    }
     this.sendMessage('profilesAdded', { profiles });
   },
 
+  _hightLightNode({ viewGuid, children }) {
+    const hasChildren = children?.length > 0;
+    if (viewGuid) {
+      const element = document.getElementById(viewGuid);
+      if (element) {
+        const outline = element.style.outline;
+        element.style.outline  = `${hasChildren ? '0.5' : '1'}px solid ${hasChildren ? 'blue' : 'red'}`;
+        setTimeout(()=> {
+          element.style.outline  = outline && 'none';
+        }, 1000)
+      }
+    }
+    if (hasChildren) {
+      children.forEach(childNode => {
+        this._hightLightNode(childNode);
+      })
+    }
+  },
+
   /**
    * Update the components tree. Called on each `render.component` event.
    * @private
@@ -62,6 +87,10 @@ export default EmberObject.extend(PortMixin, {
       });
       this.profileManager.onProfilesAdded(this, this.sendAdded);
     },
+
+    updateShouldHighlightRender({ shouldHighlightRender }) {
+      this.shouldHighlightRender = shouldHighlightRender
+    },
   },
 });
 

diff --git a/tests/acceptance/render-tree-test.js b/tests/acceptance/render-tree-test.js
@@ -132,6 +132,13 @@ 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');