From 75c8662b02e2143130195da13b78433ccaf440fd Mon Sep 17 00:00:00 2001
From: Chris Bond <cb@clbond.org>
Date: Fri, 9 Sep 2016 15:15:43 -0400
Subject: [PATCH] Add "expand all" (Cmd-Click or Ctrl-Click) and "collapse all"
 (Alt-Click) functionality (#627)

* Add "expand all" functionality (use Cmd+Click/Ctrl+Click/Alt+Click)

* Add "collapse all" functionality (alt-click) to go alongside "expand all" (cmd-click or ctrl-click)
---
 .../components/app-trees/app-trees.html       |  4 +++-
 .../components/app-trees/app-trees.ts         |  2 ++
 .../component-tree/component-tree.html        |  4 +++-
 .../component-tree/component-tree.ts          |  2 ++
 .../components/node-item/node-item.html       |  4 +++-
 .../components/node-item/node-item.ts         | 17 +++++++++++++++--
 .../components/tree-view/tree-view.html       |  4 +++-
 .../components/tree-view/tree-view.ts         |  2 ++
 src/frontend/frontend.html                    |  4 +++-
 src/frontend/frontend.ts                      | 19 +++++++++++++++++++
 10 files changed, 55 insertions(+), 7 deletions(-)

diff --git a/src/frontend/components/app-trees/app-trees.html b/src/frontend/components/app-trees/app-trees.html
index ca5648178..3a08b2f35 100644
--- a/src/frontend/components/app-trees/app-trees.html
+++ b/src/frontend/components/app-trees/app-trees.html
@@ -10,7 +10,9 @@
        class="flex minheight-100pct"
        [tree]="tree"
        (selectionChange)="selectionChange.emit($event)"
-       (inspectElement)="inspectElement.emit($event)">
+       (inspectElement)="inspectElement.emit($event)"
+       (collapseChildren)="collapseChildren.emit($event)"
+       (expandChildren)="expandChildren.emit($event)">
     </bt-tree-view>
   </div>
   <div split-pane-secondary-content class="flex flex-column flex-auto">
diff --git a/src/frontend/components/app-trees/app-trees.ts b/src/frontend/components/app-trees/app-trees.ts
index ce585bc06..99891353a 100644
--- a/src/frontend/components/app-trees/app-trees.ts
+++ b/src/frontend/components/app-trees/app-trees.ts
@@ -37,6 +37,8 @@ export class AppTrees {
   @Output() private tabChange = new EventEmitter<Tab>();
   @Output() private selectionChange = new EventEmitter<Node>();
   @Output() private inspectElement = new EventEmitter<Node>();
+  @Output() private expandChildren = new EventEmitter<Node>();
+  @Output() private collapseChildren = new EventEmitter<Node>();
 
   private tabs = [{
     title: 'Component Tree',
diff --git a/src/frontend/components/component-tree/component-tree.html b/src/frontend/components/component-tree/component-tree.html
index fdf41a1b5..a28e2a719 100644
--- a/src/frontend/components/component-tree/component-tree.html
+++ b/src/frontend/components/component-tree/component-tree.html
@@ -3,6 +3,8 @@
     [node]="node"
     [level]="0"
     (selectionChange)="selectionChange.emit($event)"
-    (inspectElement)="inspectElement.emit($event)">
+    (inspectElement)="inspectElement.emit($event)"
+    (collapseChildren)="collapseChildren.emit($event)"
+    (expandChildren)="expandChildren.emit($event)">
   </bt-node-item>
 </main>
diff --git a/src/frontend/components/component-tree/component-tree.ts b/src/frontend/components/component-tree/component-tree.ts
index c795be66b..3adfb13b5 100644
--- a/src/frontend/components/component-tree/component-tree.ts
+++ b/src/frontend/components/component-tree/component-tree.ts
@@ -22,6 +22,8 @@ export class ComponentTree {
 
   @Output() private selectionChange = new EventEmitter<Node>();
   @Output() private inspectElement = new EventEmitter<Node>();
+  @Output() private expandChildren = new EventEmitter<Node>();
+  @Output() private collapseChildren = new EventEmitter<Node>();
 
   private prevSelectedNode: Element;
 
diff --git a/src/frontend/components/node-item/node-item.html b/src/frontend/components/node-item/node-item.html
index 88ad76d14..4a468c15c 100644
--- a/src/frontend/components/node-item/node-item.html
+++ b/src/frontend/components/node-item/node-item.html
@@ -23,7 +23,9 @@
       [node]="node"
       [level]="level + 1"
       (selectionChange)="selectionChange.emit($event)"
-      (inspectElement)="inspectElement.emit($event)">
+      (inspectElement)="inspectElement.emit($event)"
+      (collapseChildren)="collapseChildren.emit($event)"
+      (expandChildren)="expandChildren.emit($event)">
     </bt-node-item>
   </div>
 </div>
diff --git a/src/frontend/components/node-item/node-item.ts b/src/frontend/components/node-item/node-item.ts
index dfc44e2f2..364fae9f9 100644
--- a/src/frontend/components/node-item/node-item.ts
+++ b/src/frontend/components/node-item/node-item.ts
@@ -31,12 +31,18 @@ export class NodeItem {
   // The depth of this node in the tree
   @Input() level: number;
 
-  /// Emitted when this node is selected
+  // Emitted when this node is selected
   @Output() private selectionChange = new EventEmitter<Node>();
 
-  /// Emitted when this node is selected for element inspection
+  // Emitted when this node is selected for element inspection
   @Output() private inspectElement = new EventEmitter<Node>();
 
+  // Expand this node and all its children
+  @Output() private expandChildren = new EventEmitter<Node>();
+
+  // Collapse this node and all its children
+  @Output() private collapseChildren = new EventEmitter<Node>();
+
   constructor(
     private changeDetector: ChangeDetectorRef,
     private viewState: ComponentViewState,
@@ -69,6 +75,13 @@ export class NodeItem {
   }
 
   onClick(event: MouseEvent) {
+    if (event.ctrlKey || event.metaKey) {
+      this.expandChildren.emit(this.node);
+    }
+    else if (event.altKey) {
+      this.collapseChildren.emit(this.node);
+    }
+
     this.selectionChange.emit(this.node);
   }
 
diff --git a/src/frontend/components/tree-view/tree-view.html b/src/frontend/components/tree-view/tree-view.html
index 1553962ae..da749422c 100644
--- a/src/frontend/components/tree-view/tree-view.html
+++ b/src/frontend/components/tree-view/tree-view.html
@@ -2,6 +2,8 @@
   <component-tree
     [tree]="tree"
     (selectionChange)="selectionChange.emit($event)"
-    (inspectElement)="inspectElement.emit($event)">
+    (inspectElement)="inspectElement.emit($event)"
+    (collapseChildren)="collapseChildren.emit($event)"
+    (expandChildren)="expandChildren.emit($event)">
     </component-tree>
 </div>
diff --git a/src/frontend/components/tree-view/tree-view.ts b/src/frontend/components/tree-view/tree-view.ts
index f951b0843..280805699 100644
--- a/src/frontend/components/tree-view/tree-view.ts
+++ b/src/frontend/components/tree-view/tree-view.ts
@@ -19,4 +19,6 @@ export class TreeView {
 
   @Output() private selectionChange = new EventEmitter<Node>();
   @Output() private inspectElement = new EventEmitter<Node>();
+  @Output() private expandChildren = new EventEmitter<Node>();
+  @Output() private collapseChildren = new EventEmitter<Node>();
 }
diff --git a/src/frontend/frontend.html b/src/frontend/frontend.html
index 8b047a5d4..c402e0070 100644
--- a/src/frontend/frontend.html
+++ b/src/frontend/frontend.html
@@ -23,7 +23,9 @@
     [tree]="tree"
     (tabChange)="onSelectedTabChange($event)"
     (selectionChange)="onComponentSelectionChange($event)"
-    (inspectElement)="onInspectElement($event)">
+    (inspectElement)="onInspectElement($event)"
+    (collapseChildren)="onCollapseChildren($event)"
+    (expandChildren)="onExpandChildren($event)">
   </bt-app-trees>
 </div>
 <template [ngIf]="!hasContent">
diff --git a/src/frontend/frontend.ts b/src/frontend/frontend.ts
index a7dfe6575..c32175575 100644
--- a/src/frontend/frontend.ts
+++ b/src/frontend/frontend.ts
@@ -23,6 +23,7 @@ import {
 
 import {
   ComponentInstanceState,
+  ExpandState,
   Options,
   Tab,
   Theme,
@@ -273,6 +274,14 @@ class App {
     chrome.devtools.inspectedWindow.eval(`inspect(inspectedApplication.nodeFromPath('${node.id}'))`);
   }
 
+  private onCollapseChildren(node: Node) {
+    this.recursiveExpansionState(node, ExpandState.Collapsed);
+  }
+
+  private onExpandChildren(node: Node) {
+    this.recursiveExpansionState(node, ExpandState.Expanded);
+  }
+
   private onSelectedTabChange(tab: Tab) {
     this.selectedTab = tab;
 
@@ -329,6 +338,16 @@ class App {
 
     return result;
   }
+
+  private recursiveExpansionState(from: Node, state: ExpandState) {
+    const apply = (node: Node) => {
+      this.viewState.expandState(node, state);
+
+      node.children.forEach(n => apply(n));
+    };
+
+    apply(from);
+  }
 }
 
 const declarations = [