implement show parents only (focus mode) (#2655)

Author: patricklx

app/components/component-tree-toolbar.hbs

@@ -34,4 +34,18 @@
     @value={{@query}}
     data-test-filter-views
   />
+
+  <Ui::ToolbarDivider />
+
+  {{#if @pinned}}
+    <button
+      class="{{if @showParentsOnly "active"}} toolbar-icon-button"
+      type="button"
+      title="toggle focus mode"
+      data-test-toggle-focus
+      {{on "click" @toggleParentsOnly}}
+    >
+      {{svg-jar "focus-point-round" width="16px" height="16px"}}
+    </button>
+  {{/if}}
 </div>

app/controllers/component-tree.js

@@ -19,6 +19,7 @@ export default class ComponentTreeController extends Controller {
 
   @tracked query = '';
   @tracked isInspecting = false;
+  @tracked showParentsOnly = false;
   @tracked renderItems = [];
 
   @tracked _pinned = undefined;
@@ -269,6 +270,10 @@ export default class ComponentTreeController extends Controller {
   @action arrowKeysTeardown() {
     document.removeEventListener('keydown', this.handleKeyDown);
   }
+
+  @action toggleParentsOnly() {
+    this.showParentsOnly = !this.showParentsOnly;
+  }
 }
 
 function isInternalRenderNode(renderNode) {
@@ -417,11 +422,24 @@ class RenderItem {
   get isVisible() {
     if (this.isRoot) {
       return true;
+    } else if (this.controller.showParentsOnly) {
+      return (
+        this.hasPinnedChild() ||
+        (this.hasPinnedParent() && this.parentItem.isExpanded)
+      );
     } else {
       return this.parentItem.isVisible && this.parentItem.isExpanded;
     }
   }
 
+  hasPinnedParent() {
+    return this.isPinned || this.parentItem?.hasPinnedParent();
+  }
+
+  hasPinnedChild() {
+    return this.isPinned || this.childItems.some((c) => c.hasPinnedChild());
+  }
+
   get isPinned() {
     return this.id === this.controller.pinned;
   }

app/templates/component-tree.hbs

@@ -5,6 +5,9 @@
       @expandAll={{this.expandAll}}
       @isInspecting={{this.isInspecting}}
       @query={{this.query}}
+      @pinned={{this.pinned}}
+      @toggleParentsOnly={{this.toggleParentsOnly}}
+      @showParentsOnly={{this.showParentsOnly}}
       @toggleInspect={{this.toggleInspect}}
     />
   {{/in-element}}

public/assets/svg/focus-point-round.svg

@@ -337,6 +337,59 @@ module('Component Tab', function (hooks) {
     );
   });
 
+  test('it should only show parents and children of selected item in focus mode', async function (assert) {
+    await visit('/component-tree');
+
+    function findTreeItem(children, id) {
+      for (const child of children) {
+        if (child.id.includes(`render-node:${id}`)) {
+          return child;
+        }
+        const found = findTreeItem(child.children, id);
+        if (found) {
+          return found;
+        }
+      }
+    }
+
+    function getCustomRenderTree() {
+      const tree = getRenderTree({ withChildren: true });
+      const subtask = findTreeItem(tree, 6);
+      const todo = findTreeItem(tree, 3);
+      subtask.children.push(Component({ id: 7, name: 'sub-task-child' }));
+      subtask.children.push(Component({ id: 8, name: 'sub-task-child' }));
+      todo.children.push(Component({ id: 9, name: 'todo-list-2' }));
+      return tree;
+    }
+
+    await sendMessage({
+      type: 'view:renderTree',
+      tree: getCustomRenderTree(),
+    });
+
+    await rerender();
+
+    let treeNodes = findAll('.component-tree-item');
+    assert.strictEqual(treeNodes.length, 5, 'expected all tree nodes');
+
+    let expanders = findAll('.component-tree-item-expand');
+    let expanderEl = expanders[expanders.length - 1];
+    await click(expanderEl);
+
+    treeNodes = findAll('.component-tree-item');
+    const subTask = treeNodes
+      .filter((t) => t.textContent.toLowerCase().includes('subtask'))
+      .at(-1);
+
+    respondWith('view:showInspection', false, { count: 1 });
+    await click(subTask);
+
+    await click('[data-test-toggle-focus]');
+
+    treeNodes = findAll('.component-tree-item');
+    assert.strictEqual(treeNodes.length, 6, 'expected all tree nodes');
+  });
+
   test('It should clear the search filter when the clear button is clicked', async function (assert) {
     await visit('/component-tree');