Improve CPU Profile View

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 430 matching lines @@
   }
 
   Future<CpuProfile> reload(Isolate isolate) async {
     profile.clear();
     if (isolate == null) {
       _update(profile);
       // Notify listener.
       onSampleBufferUpdate(profile);
       return profile;
     }
+    profileVM = isolate.vm.profileVM;
+    if (tagSelector == null) {
+      // Set default value.
+      tagSelector = profileVM ? 'UserVM' : 'None';
+    }
     await _changeState(kFetchingState);
     try {
       var response;
       if (allocationProfileClass != null) {
         response =
             await allocationProfileClass.getAllocationSamples(tagSelector);
       } else {
         var params = { 'tags': tagSelector };
         response = await isolate.invokeRpc('_getCpuProfile', params);
       }
@@ skipping 48 matching lines @@
       timeSpan = formatTime(profile.timeSpan);
     }
   }
 
   void tagSelectorChanged(oldValue) {
     reload(profile.isolate);
   }
 
   Function onSampleBufferUpdate;
   @observable bool showTagSelector = true;
-
+  @observable bool profileVM = false;
   @observable String sampleCount = '';
   @observable String refreshTime = '';
   @observable String sampleRate = '';
   @observable String stackDepth = '';
   @observable String timeSpan = '';
   @observable String fetchTime = '';
   @observable String loadTime = '';
-  @observable String tagSelector = 'UserVM';
+  @observable String tagSelector;
   @observable String state = kFetchingState;
   @observable var exception;
   @observable var stackTrace;
 
   static const kDisabledState = 'kDisabled';
   static const kExceptionState = 'Exception';
   static const kFetchingState = 'kFetching';
   static const kLoadedState = 'kLoaded';
   static const kLoadingState = 'kLoading';
   static const kNotLoadedState = 'kNotLoaded';
@@ skipping 63 matching lines @@
   @observable bool showDirectionSelector = true;
   @observable bool showFilter = true;
   @observable String modeSelector = 'Function';
   @observable String directionSelector = 'Up';
   @observable String filterString;
 }
 
 class FunctionCallTreeNodeRow extends VirtualTreeRow {
   final CpuProfile profile;
   final FunctionCallTreeNode node;
-  final String selfPercent;
-  final String totalPercent;
-  final String percent;
+  String selfPercent;
+  String totalPercent;
+  String percent;
+
+  static const kHotThreshold = 0.05;  // 5%.
+  static const kMediumThreshold = 0.02;  // 2%.
+
+  double _percent(bool self) {
+    if (self) {
+      return node.profileFunction.normalizedExclusiveTicks;
+    } else {
+      return node.profileFunction.normalizedInclusiveTicks;
+    }
+  }
+
+  bool isHot(bool self) => _percent(self) > kHotThreshold;
+  bool isMedium(bool self) => _percent(self) > kMediumThreshold;
+
+  String rowClass(bool self) {
+    if (isHot(self)) {
+      return 'hotProfile';
+    } else if (isMedium(self)) {
+      return 'mediumProfile';
+    } else {
+      return 'coldProfile';
+    }
+  }
 
   FunctionCallTreeNodeRow(VirtualTree tree,
                           int depth,
                           this.profile,
                           FunctionCallTreeNode node)
       : node = node,
-        selfPercent = Utils.formatPercentNormalized(node.profileFunction.normalizedExclusiveTicks),
-        totalPercent = Utils.formatPercentNormalized(node.profileFunction.normalizedInclusiveTicks),
-        percent = Utils.formatPercentNormalized(node.percentage),
         super(tree, depth) {
+    if ((node.profileFunction.function.kind == FunctionKind.kTag) &&
+        (node.profileFunction.normalizedExclusiveTicks == 0) &&
+        (node.profileFunction.normalizedInclusiveTicks == 0)) {
+    selfPercent = '';
+    totalPercent = '';
+    } else {
+      selfPercent = Utils.formatPercentNormalized(
+          node.profileFunction.normalizedExclusiveTicks);
+      totalPercent = Utils.formatPercentNormalized(
+          node.profileFunction.normalizedInclusiveTicks);
+    }
+    percent = Utils.formatPercentNormalized(node.percentage);
   }
 
   void onRender(DivElement rowDiv) {
     rowDiv.children.add(makeGap(ems:0.1));
     rowDiv.children.add(
-        makeText(totalPercent, toolTip: 'global % on stack'));
+        makeText(totalPercent,
+                 toolTip: 'global % on stack'));
     rowDiv.children.add(makeGap());
     rowDiv.children.add(
-        makeText(selfPercent, toolTip: 'global % executing'));
+        makeText(selfPercent,
+                 toolTip: 'global % executing'));
     rowDiv.children.add(makeGap());
-    rowDiv.children.add(makeIndenter(colored: false));
-    rowDiv.children.add(makeColorBar());
+    rowDiv.children.add(makeIndenter(depth, colored: false));
+    rowDiv.children.add(makeColorBar(depth));
     rowDiv.children.add(makeGap(ems: 1.0));
     rowDiv.children.add(makeExpander());
     rowDiv.children.add(
         makeText(percent, toolTip: 'tree node %', flexBasis: null));
     rowDiv.children.add(makeGap(ems: 0.5));
     functionRef.ref = node.profileFunction.function;
     rowDiv.children.add(functionRef);
   }
 
   var functionRef = new Element.tag('function-ref');
 
   int get childCount => node.children.length;
 
   void onShow() {
     if (children.length > 0) {
       return;
     }
     for (var childNode in node.children) {
       var row = new FunctionCallTreeNodeRow(tree, depth + 1, profile, childNode);
       children.add(row);
     }
   }
 }
 
 
 class CodeCallTreeNodeRow extends VirtualTreeRow {
   final CpuProfile profile;
   final CodeCallTreeNode node;
-  final String selfPercent;
-  final String totalPercent;
-  final String percent;
+  String selfPercent;
+  String totalPercent;
+  String percent;
+
+  static const kHotThreshold = 0.05;  // 5%.
+  static const kMediumThreshold = 0.02;  // 2%.
+
+  double _percent(bool self) {
+    if (self) {
+      return node.profileCode.normalizedExclusiveTicks;
+    } else {
+      return node.profileCode.normalizedInclusiveTicks;
+    }
+  }
+
+  bool isHot(bool self) => _percent(self) > kHotThreshold;
+  bool isMedium(bool self) => _percent(self) > kMediumThreshold;
+
+  String rowClass(bool self) {
+    if (isHot(self)) {
+      return 'hotProfile';
+    } else if (isMedium(self)) {
+      return 'mediumProfile';
+    } else {
+      return 'coldProfile';
+    }
+  }
 
   CodeCallTreeNodeRow(VirtualTree tree,
                       int depth,
                       this.profile,
                       CodeCallTreeNode node)
       : node = node,
-        selfPercent = Utils.formatPercentNormalized(node.profileCode.normalizedExclusiveTicks),
-        totalPercent = Utils.formatPercentNormalized(node.profileCode.normalizedInclusiveTicks),
-        percent = Utils.formatPercentNormalized(node.percentage),
         super(tree, depth) {
+    if ((node.profileCode.code.kind == CodeKind.Tag) &&
+        (node.profileCode.normalizedExclusiveTicks == 0) &&
+        (node.profileCode.normalizedInclusiveTicks == 0)) {
+      selfPercent = '';
+      totalPercent = '';
+    } else {
+      selfPercent = Utils.formatPercentNormalized(
+          node.profileCode.normalizedExclusiveTicks);
+      totalPercent = Utils.formatPercentNormalized(
+          node.profileCode.normalizedInclusiveTicks);
+    }
+    percent = Utils.formatPercentNormalized(node.percentage);
   }
 
   void onRender(DivElement rowDiv) {
     rowDiv.children.add(makeGap(ems:0.1));
     rowDiv.children.add(
-        makeText(totalPercent, toolTip: 'global % on stack'));
+        makeText(totalPercent,
+                 toolTip: 'global % on stack'));
     rowDiv.children.add(makeGap());
     rowDiv.children.add(
-        makeText(selfPercent, toolTip: 'global % executing'));
+        makeText(selfPercent,
+                 toolTip: 'global % executing'));
     rowDiv.children.add(makeGap());
-    rowDiv.children.add(makeIndenter(colored: false));
-    rowDiv.children.add(makeColorBar());
+    rowDiv.children.add(makeIndenter(depth, colored: false));
+    rowDiv.children.add(makeColorBar(depth));
     rowDiv.children.add(makeGap(ems: 1.0));
     rowDiv.children.add(makeExpander());
     rowDiv.children.add(
         makeText(percent, toolTip: 'tree node %', flexBasis: null));
     rowDiv.children.add(makeGap(ems: 0.5));
     codeRef.ref = node.profileCode.code;
     rowDiv.children.add(codeRef);
   }
 
   var codeRef = new Element.tag('code-ref');
@@ skipping 577 matching lines @@
     _changeSort(target, profileCalleesTable);
     _renderCallTable($['callees-table'], profileCalleesTable, _onCalleesClick);
   }
 
   //////
   ///
   /// Function tree.
   ///
   TableTree functionTree;
   _updateFunctionTreeView() {
-    cpuProfileTreeElement.functionFilter = (FunctionCallTreeNode node) {
+    cpuProfileTreeElement.filter = (FunctionCallTreeNode node) {
       return node.profileFunction.function == focusedFunction;
     };
     cpuProfileTreeElement.render();
   }
 
   @published Isolate isolate;
   @observable NameSortedTable profileTable;
   @observable NameSortedTable profileCallersTable;
   @observable NameSortedTable profileCalleesTable;
   @observable ServiceFunction focusedFunction;
   @observable int focusedRow;
 
 
   StreamSubscription _resizeSubscription;
   Task _updateTask;
   Task _renderTask;
 
   CpuProfile get profile => sampleBufferControlElement.profile;
   SampleBufferControlElement sampleBufferControlElement;
   StackTraceTreeConfigElement stackTraceTreeConfigElement;
-  CpuProfileTreeElement cpuProfileTreeElement;
+  CpuProfileVirtualTreeElement cpuProfileTreeElement;
 }
 
 enum ProfileTreeDirection {
   Exclusive,
   Inclusive
 }
 
 enum ProfileTreeMode {
   Code,
   Function,
@@ skipping 19 matching lines @@
   detached() {
     super.detached();
     _resizeSubscription?.cancel();
   }
 
   void render() {
     _updateView();
   }
 
   showChanged(oldValue) {
-    var treeTable = shadowRoot.querySelector('#treeTable');
-    assert(treeTable != null);
-    treeTable.style.display = show ? 'table' : 'none';
+    if (show) {
+      virtualTree?.root?.style?.display = 'block';
+    } else {
+      virtualTree?.root?.style?.display = 'none';
+    }
   }
 
   void _updateView() {
     _updateSize();
     virtualTree?.clear();
     virtualTree?.uninstall();
     virtualTree = null;
     bool exclusive = direction == ProfileTreeDirection.Exclusive;
     if (mode == ProfileTreeMode.Code) {
       _buildCodeTree(exclusive);
@@ skipping 129 matching lines @@
       return;
     }
     var tree = profile.loadCodeTree(exclusive ? 'exclusive' : 'inclusive');
     if (tree == null) {
       return;
     }
     var rootRow = new CodeProfileTreeRow(codeTree, null, profile, tree.root);
     codeTree.initialize(rootRow);
   }
 }