Factor cpu profile tree into separate element and expose allocation tracing UI

runtime/observatory/lib/src/elements/cpu_profile.dart

 // Copyright (c) 2013, the Dart project authors.  Please see the AUTHORS file
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.
 
 library cpu_profile_element;
 
 import 'dart:async';
 import 'dart:html';
 import 'observatory_element.dart';
 import 'package:observatory/service.dart';
@@ skipping 503 matching lines @@
   }
 
   _onLoadFinished() {
     _sw.stop();
     loadTime = formatTimeMilliseconds(_sw.elapsedMilliseconds);
     state = 'Loaded';
   }
 
   Future _getCpuProfile() async {
     profile.clear();
-    if (functionTree != null) {
-      functionTree.clear();
-      functionTree = null;
-    }
-    if (codeTree != null) {
-      codeTree.clear();
-      codeTree = null;
-    }
     if (isolate == null) {
       return new Future.value(null);
     }
     _onFetchStarted();
     try {
       var params = { 'tags': tagSelector };
       var response = await isolate.invokeRpc('_getCpuProfile', params);
       _onFetchFinished();
       await _onLoadStarted();
       profile.load(isolate, response);
@@ skipping 16 matching lines @@
       }
     }
   }
 
   void _updateView() {
     sampleCount = profile.sampleCount.toString();
     refreshTime = new DateTime.now().toString();
     stackDepth = profile.stackDepth.toString();
     sampleRate = profile.sampleRate.toStringAsFixed(0);
     timeSpan = formatTime(profile.timeSpan);
-    bool exclusive = directionSelector == 'Up';
-    if (functionTree != null) {
-      functionTree.clear();
-      functionTree = null;
+    CpuProfileTreeElement cpuProfileTreeElement =
+        shadowRoot.querySelector('#cpuProfileTree');
+    ProfileTreeDirection direction = ProfileTreeDirection.Exclusive;
+    if (directionSelector != 'Up') {
+      direction = ProfileTreeDirection.Inclusive;
     }

[rmacnak, 2015/07/14 17:20:29]

else {
  direction = ProfileTreeDirection.Exclusive;
}

If I toggle back and forth.

[Cutch, 2015/07/14 20:02:57]

Acknowledged.

-    if (codeTree != null) {
-      codeTree.clear();
-      codeTree = null;
+    ProfileTreeMode mode = ProfileTreeMode.Function;
+    if (modeSelector == 'Code') {
+      mode = ProfileTreeMode.Code;
     }

[rmacnak, 2015/07/14 17:20:29]

ditto

[Cutch, 2015/07/14 20:02:57]

Acknowledged.

-    if (modeSelector == 'Code') {
-      _buildCodeTree(exclusive);
-    } else {
-      _buildFunctionTree(exclusive);
-    }
-  }
-
-  TableTree codeTree;
-  TableTree functionTree;
-
-  void _buildFunctionTree(bool exclusive) {
-    if (functionTree == null) {
-      var tableBody = shadowRoot.querySelector('#treeBody');
-      assert(tableBody != null);
-      functionTree = new TableTree(tableBody, 2);
-    }
-    var tree = profile.loadFunctionTree(exclusive ? 'exclusive' : 'inclusive');
-    if (tree == null) {
-      return;
-    }
-    var rootRow =
-        new FunctionProfileTreeRow(functionTree, null, profile, tree.root);
-    functionTree.initialize(rootRow);
-  }
-
-  void _buildCodeTree(bool exclusive) {
-    if (codeTree == null) {
-      var tableBody = shadowRoot.querySelector('#treeBody');
-      assert(tableBody != null);
-      codeTree = new TableTree(tableBody, 2);
-    }
-    var tree = profile.loadCodeTree(exclusive ? 'exclusive' : 'inclusive');
-    if (tree == null) {
-      return;
-    }
-    var rootRow = new CodeProfileTreeRow(codeTree, null, profile, tree.root);
-    codeTree.initialize(rootRow);
+    cpuProfileTreeElement.profile = profile;
+    cpuProfileTreeElement.direction = direction;
+    cpuProfileTreeElement.mode = mode;
+    cpuProfileTreeElement.render();
   }
 }
 
 class NameSortedTable extends SortedTable {
   NameSortedTable(columns) : super(columns);
   @override
   dynamic getSortKeyFor(int row, int col) {
     if (col == FUNCTION_COLUMN) {
       // Use name as sort key.
       return rows[row].values[col].name;
@@ skipping 469 matching lines @@
     _changeSort(target, profileCalleesTable);
     _renderCallTable($['callees-table'], profileCalleesTable, _onCalleesClick);
   }
 
   //////
   ///
   /// Function tree.
   ///
   TableTree functionTree;
   _updateFunctionTreeView() {
+    CpuProfileTreeElement cpuProfileTreeElement =
+        shadowRoot.querySelector('#cpuProfileTree');
+    ProfileTreeDirection direction = ProfileTreeDirection.Exclusive;
+    if (directionSelector != 'Up') {
+      direction = ProfileTreeDirection.Inclusive;
+    }
+    ProfileTreeMode mode = ProfileTreeMode.Function;
+    cpuProfileTreeElement.profile = profile;
+    cpuProfileTreeElement.direction = direction;
+    cpuProfileTreeElement.mode = mode;
+    cpuProfileTreeElement.functionFilter = (FunctionCallTreeNode node) {
+      return node.profileFunction.function == focusedFunction;
+    };
+    cpuProfileTreeElement.render();
+  }
+}
+
+enum ProfileTreeDirection {
+  Exclusive,
+  Inclusive
+}
+
+enum ProfileTreeMode {
+  Code,
+  Function,
+}
+
+@CustomTag('cpu-profile-tree')
+class CpuProfileTreeElement extends ObservatoryElement {
+  ProfileTreeDirection direction = ProfileTreeDirection.Exclusive;
+  ProfileTreeMode mode = ProfileTreeMode.Function;
+  CpuProfile profile;
+  TableTree codeTree;
+  TableTree functionTree;
+  FunctionCallTreeNodeFilter functionFilter;
+
+  CpuProfileTreeElement.created() : super.created();
+
+  void render() {
+    _updateView();
+  }
+
+  void _updateView() {
     if (functionTree != null) {
       functionTree.clear();
       functionTree = null;
     }
-    _buildFunctionTree();
+    if (codeTree != null) {
+      codeTree.clear();
+      codeTree = null;
+    }
+    bool exclusive = direction == ProfileTreeDirection.Exclusive;
+    if (mode == ProfileTreeMode.Code) {
+      _buildCodeTree(exclusive);
+    } else {
+      assert(mode == ProfileTreeMode.Function);
+      _buildFunctionTree(exclusive);
+    }
   }
 
-  void _buildFunctionTree() {
+  void _buildFunctionTree(bool exclusive) {
     if (functionTree == null) {
       var tableBody = shadowRoot.querySelector('#treeBody');
       assert(tableBody != null);
       functionTree = new TableTree(tableBody, 2);
     }
-    if (focusedFunction == null) {
+    if (profile == null) {
       return;
     }
-    bool exclusive = directionSelector == 'Up';
     var tree = profile.loadFunctionTree(exclusive ? 'exclusive' : 'inclusive');
     if (tree == null) {
       return;
     }
-    var filter = (FunctionCallTreeNode node) {
-      return node.profileFunction.function == focusedFunction;
-    };
-    tree = tree.filtered(filter);
+    if (functionFilter != null) {
+      tree = tree.filtered(functionFilter);
+    }
     var rootRow =
         new FunctionProfileTreeRow(functionTree, null, profile, tree.root);
     functionTree.initialize(rootRow);
   }
+
+  void _buildCodeTree(bool exclusive) {
+    if (codeTree == null) {
+      var tableBody = shadowRoot.querySelector('#treeBody');
+      assert(tableBody != null);
+      codeTree = new TableTree(tableBody, 2);
+    }
+    if (profile == null) {
+      return;
+    }
+    var tree = profile.loadCodeTree(exclusive ? 'exclusive' : 'inclusive');
+    if (tree == null) {
+      return;
+    }
+    var rootRow = new CodeProfileTreeRow(codeTree, null, profile, tree.root);
+    codeTree.initialize(rootRow);
+  }
 }