Display source profiling information in Observatory

runtime/observatory/lib/src/elements/script_inset.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 script_inset_element;
 
 import 'dart:async';
 import 'dart:html';
 import 'dart:math';
 import 'observatory_element.dart';
@@ skipping 343 matching lines @@
     if (function.isOptimizable == false ||
         function.isInlinable == false ||
         function.deoptimizations >0) {
       element.style.backgroundColor = "#EEA7A7";  // Low-saturation red.
     }
 
     addLink(element, url);
   }
 }
 
+class ScriptLineProfile {
+  ScriptLineProfile(this.line, this.sampleCount);
+
+  static const kHotThreshold = 0.05;  // 5%.
+  static const kMediumThreshold = 0.02;  // 2%.
+
+  final int line;
+  final int sampleCount;
+
+  int selfTicks = 0;
+  int totalTicks = 0;
+
+  void process(int exclusive, int inclusive) {
+    selfTicks += exclusive;
+    totalTicks += inclusive;
+  }
+
+  String get formattedSelfTicks {
+    return Utils.formatPercent(selfTicks, sampleCount);
+  }
+
+  String get formattedTotalTicks {
+    return Utils.formatPercent(totalTicks, sampleCount);
+  }
+
+  double _percent() {
+    if (sampleCount == 0) {
+      return 0.0;
+    }
+    return totalTicks / sampleCount;
+  }
+
+  bool get isHot => _percent() > kHotThreshold;
+  bool get isMedium => _percent() > kMediumThreshold;
+}
+
 /// Box with script source code in it.
 @CustomTag('script-inset')
 class ScriptInsetElement extends ObservatoryElement {
   @published Script script;
   @published int startPos;
   @published int endPos;
 
   /// Set the height to make the script inset scroll.  Otherwise it
   /// will show from startPos to endPos.
   @published String height = null;
 
   @published int currentPos;
   @published bool inDebuggerContext = false;
   @published ObservableList variables;
 
   @published Element scroller;
   RefreshButtonElement _refreshButton;
+  ToggleButtonElement _toggleProfileButton;
 
   int _currentLine;
   int _currentCol;
   int _startLine;
   int _endLine;
 
   Map<int, List<ServiceMap>> _rangeMap = {};
   Set _callSites = new Set<CallSite>();
   Set _possibleBreakpointLines = new Set<int>();
+  Map<int, ScriptLineProfile> _profileMap = {};
 
   var annotations = [];
   var annotationsCursor;
 
   StreamSubscription _scriptChangeSubscription;
   Future<StreamSubscription> _debugSubscriptionFuture;
   StreamSubscription _scrollSubscription;
 
   bool hasLoadedLibraryDeclarations = false;
+  bool _includeProfile = false;
 
   String makeLineId(int line) {
     return 'line-$line';
   }
 
   void _scrollToCurrentPos() {
     var line = shadowRoot.getElementById(makeLineId(_currentLine));
     if (line != null) {
       line.scrollIntoView();
     }
@@ skipping 19 matching lines @@
     }
     if (_scriptChangeSubscription != null) {
       // Don't leak. If only Dart and Javascript exposed weak references...
       _scriptChangeSubscription.cancel();
       _scriptChangeSubscription = null;
     }
     super.detached();
   }
 
   void _onScroll(event) {
-    if (_refreshButton == null) {
-      return;
+    if (_refreshButton != null) {
+      var newTop = _buttonTop(_refreshButton);
+      if (_refreshButton.style.top != newTop) {
+        _refreshButton.style.top = '${newTop}px';
+      }
     }
-    var currentTop = _refreshButton.style.top;
-    var newTop = _refreshButtonTop();
-    if (currentTop != newTop) {
-      _refreshButton.style.top = '${newTop}px';
+    if (_toggleProfileButton != null) {
+      var newTop = _buttonTop(_toggleProfileButton);
+      if (_toggleProfileButton.style.top != newTop) {
+        _toggleProfileButton.style.top = '${newTop}px';
+      }
     }
   }
 
   void _onDebugEvent(event) {
     if (script == null) {
       return;
     }
     switch (event.kind) {
       case ServiceEvent.kBreakpointAdded:
       case ServiceEvent.kBreakpointResolved:
@@ skipping 73 matching lines @@
   }
 
   Element container;
 
   Future _refresh() async {
     await update();
   }
 
   // Build _rangeMap and _callSites from a source report.
   Future _refreshSourceReport() async {
+    var reports = [Isolate.kCallSitesReport,
+                   Isolate.kPossibleBreakpointsReport];
+    if (_includeProfile) {
+      reports.add(Isolate.kProfileReport);
+    }
     var sourceReport = await script.isolate.getSourceReport(
-        [Isolate.kCallSitesReport, Isolate.kPossibleBreakpointsReport],
+        reports,
         script, startPos, endPos);
     _possibleBreakpointLines = getPossibleBreakpointLines(sourceReport, script);
     _rangeMap.clear();
     _callSites.clear();
+    _profileMap.clear();
     for (var range in sourceReport['ranges']) {
       int startLine = script.tokenToLine(range['startPos']);
       int endLine = script.tokenToLine(range['endPos']);
       for (var line = startLine; line <= endLine; line++) {
         var rangeList = _rangeMap[line];
         if (rangeList == null) {
           _rangeMap[line] = [range];
         } else {
           rangeList.add(range);
         }
       }
+      if (_includeProfile && range['profile'] != null) {
+        List positions = range['profile']['positions'];
+        List exclusiveTicks = range['profile']['exclusiveTicks'];
+        List inclusiveTicks = range['profile']['inclusiveTicks'];
+        int sampleCount = range['profile']['metadata']['sampleCount'];
+        assert(positions.length == exclusiveTicks.length);
+        assert(positions.length == inclusiveTicks.length);
+        for (int i = 0; i < positions.length; i++) {
+          if (positions[i] is String) {
+            // String positions are classifying token positions.
+            // TODO(johnmccutchan): Add classifier data to UI.
+            continue;
+          }
+          int line = script.tokenToLine(positions[i]);
+          ScriptLineProfile lineProfile = _profileMap[line];
+          if (lineProfile == null) {
+            lineProfile = new ScriptLineProfile(line, sampleCount);
+            _profileMap[line] = lineProfile;
+          }
+          lineProfile.process(exclusiveTicks[i], inclusiveTicks[i]);
+        }
+      }
       if (range['compiled']) {
         var rangeCallSites = range['callSites'];
         if (rangeCallSites != null) {
           for (var callSiteMap in rangeCallSites) {
             _callSites.add(new CallSite.fromMap(callSiteMap, script));
           }
         }
       }
     }
   }
@@ skipping 329 matching lines @@
 
         // Annotate locations.
         for (var location in locations) {
           annotations.add(new LocalVariableAnnotation(location,
                                                       variable['value']));
         }
       }
     }
   }
 
-  int _refreshButtonTop() {
-    if (_refreshButton == null) {
+  int _buttonTop(Element element) {
+    if (element == null) {
       return 5;
     }
     const padding = 5;
     const navbarHeight = NavBarElement.height;
     var rect = getBoundingClientRect();
-    var buttonHeight = _refreshButton.clientHeight;
+    var buttonHeight = element.clientHeight;
     return min(max(0, navbarHeight - rect.top) + padding,
                rect.height - (buttonHeight + padding));
   }
 
   RefreshButtonElement _newRefreshButton() {
     var button = new Element.tag('refresh-button');
     button.style.position = 'absolute';
     button.style.display = 'inline-block';
-    button.style.top = '${_refreshButtonTop()}px';
+    button.style.top = '${_buttonTop(null)}px';
     button.style.right = '5px';
     button.callback = _refresh;
+    button.title = 'Refresh coverage';
     return button;
   }
 
+  ToggleButtonElement _newToggleProfileButton() {
+    ToggleButtonElement button = new Element.tag('toggle-button');
+    button.style.position = 'absolute';
+    button.style.display = 'inline-block';
+    button.style.top = '${_buttonTop(null)}px';
+    button.style.right = '30px';
+    button.title = 'Toggle CPU profile information';
+    final String enabledColor = 'black';
+    final String disabledColor = 'rgba(0, 0, 0 ,.3)';
+    button.callback = (enabled) async {
+      _includeProfile = enabled;
+      if (button.children.length > 0) {
+        var content = button.children[0];
+        if (enabled) {
+          content.style.color = enabledColor;
+        } else {
+          content.style.color = disabledColor;
+        }
+      }
+      await update();
+    };
+    button.children.add(new Element.tag('icon-whatshot'));
+    button.children[0].style.color = disabledColor;
+    button.enabled = _includeProfile;
+    return button;
+  }
+
   Element linesTable() {
     var table = new DivElement();
     table.classes.add("sourceTable");
 
     _refreshButton = _newRefreshButton();
+    _toggleProfileButton = _newToggleProfileButton();
     table.append(_refreshButton);
+    table.append(_toggleProfileButton);
 
     if (_startLine == null || _endLine == null) {
       return table;
     }
 
     var endLine = (endPos != null
                    ? script.tokenToLine(endPos)
                    : script.lines.length + script.lineOffset);
     var lineNumPad = endLine.toString().length;
 
@@ skipping 47 matching lines @@
     if (annotation.line != line) return null;
     annotationsCursor++;
     return annotation;
   }
 
   Element lineElement(ScriptLine line, int lineNumPad) {
     var e = new DivElement();
     e.classes.add("sourceRow");
     e.append(lineBreakpointElement(line));
     e.append(lineNumberElement(line, lineNumPad));
+    if (_includeProfile) {
+      e.append(lineProfileElement(line, false));
+      e.append(lineProfileElement(line, true));
+    }
     e.append(lineSourceElement(line));
     return e;
   }
 
+  Element lineProfileElement(ScriptLine line, bool self) {
+    var e = span('');
+    e.classes.add('noCopy');
+    if (self) {
+      e.title = 'Self %';
+    } else {
+      e.title = 'Total %';
+    }
+
+    if (line == null) {
+      e.classes.add('notSourceProfile');
+      e.text = nbsp;
+      return e;
+    }
+
+    var ranges = _rangeMap[line.line];
+    if ((ranges == null) || ranges.isEmpty) {
+      e.classes.add('notSourceProfile');
+      e.text = nbsp;
+      return e;
+    }
+
+    ScriptLineProfile lineProfile = _profileMap[line.line];
+    if (lineProfile == null) {
+      e.classes.add('noProfile');
+      e.text = nbsp;
+      return e;
+    }
+
+    if (self) {
+      e.text = lineProfile.formattedSelfTicks;
+    } else {
+      e.text = lineProfile.formattedTotalTicks;
+    }
+
+    if (lineProfile.isHot) {
+      e.classes.add('hotProfile');
+    } else if (lineProfile.isMedium) {
+      e.classes.add('mediumProfile');
+    } else {
+      e.classes.add('coldProfile');
+    }
+
+    return e;
+  }
+
   Element lineBreakpointElement(ScriptLine line) {
     var e = new DivElement();
     if (line == null || !_possibleBreakpointLines.contains(line.line)) {
       e.classes.add('noCopy');
       e.classes.add("emptyBreakpoint");
       e.text = nbsp;
       return e;
     }
 
     e.text = 'B';
@@ skipping 171 matching lines @@
     }
     busy = true;
     if (callback != null) {
       await callback();
     }
     busy = false;
   }
 }
 
 
+@CustomTag('toggle-button')
+class ToggleButtonElement extends PolymerElement {
+  ToggleButtonElement.created() : super.created();
+
+  @published var callback = null;
+  @observable bool enabled = false;
+
+  Future buttonClick(var event, var b, var c) async {
+    enabled = !enabled;
+    if (callback != null) {
+      await callback(enabled);
+    }
+  }
+}
+
+
 @CustomTag('source-inset')
 class SourceInsetElement extends PolymerElement {
   SourceInsetElement.created() : super.created();
 
   @published SourceLocation location;
   @published String height = null;
   @published int currentPos;
   @published bool inDebuggerContext = false;
   @published ObservableList variables;
   @published Element scroller;
 }