Add "expand all" (Cmd-Click or Ctrl-Click) and "collapse all" (Alt-Cl…

…ick) functionality (rangle#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)

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">

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',

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>

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;
 

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>

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);
  }
 

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>

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>();
 }

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">

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 = [