Add annotation for function declarations. Mark functions with performance problems in red.

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 'observatory_element.dart';
 import 'service_ref.dart';
 import 'package:observatory/service.dart';
 import 'package:polymer/polymer.dart';
 
 const nbsp = "\u00A0";
 
-void addInfoBox(content, infoBox) {
-  infoBox.style.position = 'absolute';
-  infoBox.style.padding = '1em';
-  infoBox.style.border = 'solid black 2px';
-  infoBox.style.zIndex = '10';
-  infoBox.style.backgroundColor = 'white';
-  infoBox.style.cursor = 'auto';
-  infoBox.style.display = 'none';  // Initially hidden.
-
+void addInfoBox(Element content, Function infoBoxGenerator) {
+  var infoBox;
   var show = false;
+  var originalBackground = content.style.backgroundColor;
   content.onClick.listen((event) {
     show = !show;
+    if (infoBox == null) {

[Cutch, 2015/04/16 14:55:27]

add comment that you are lazily generating infobox contents on first click.
consider factoring out construction code into separate local function.

+      infoBox = infoBoxGenerator();
+      infoBox.style.position = 'absolute';
+      infoBox.style.padding = '1em';
+      infoBox.style.border = 'solid black 2px';
+      infoBox.style.zIndex = '10';
+      infoBox.style.backgroundColor = 'white';
+      infoBox.style.cursor = 'auto';
+      content.append(infoBox);
+    }
+
     infoBox.style.display = show ? 'block' : 'none';
-    content.style.backgroundColor = show ? 'white' : '';
+    content.style.backgroundColor = show ? 'white' : originalBackground;
   });
 
   // Causes infoBox to be positioned relative to the bottom-left of content.
   content.style.display = 'inline-block';
   content.style.cursor = 'pointer';
-  content.append(infoBox);
 }
 
-abstract class Annotation {
+abstract class Annotation implements Comparable<Annotation>{

[Cutch, 2015/04/16 14:55:27]

whitespace between > and {

[rmacnak, 2015/04/16 18:43:08]

Done.

   int line;
   int columnStart;
   int columnStop;
 
   void applyStyleTo(element);
-}
 
-class CurrentExecutionAnnotation extends Annotation {
-  void applyStyleTo(element) {
-    if (element == null) {
-      return;  // TODO(rmacnak): Handling overlapping annotations.
+  int compareTo(Annotation other) {
+    if (line == other.line) {
+      return columnStart.compareTo(other.columnStart);
     }
-    element.classes.add("currentCol");
-    element.title = "Current execution";
+    return line.compareTo(other.line);
   }
-}
 
-class CallSiteAnnotation extends Annotation {
-  CallSite callSite;
+  Element table() {
+    var e = new DivElement();
+    e.style.display = "table";
+    e.style.color = "#333";
+    e.style.font = "400 14px 'Montserrat', sans-serif";
+    return e;
+  }
 
   Element row([content]) {
     var e = new DivElement();
     e.style.display = "table-row";
     if (content is String) e.text = content;
+    if (content is Element) e.children.add(content);
     return e;
   }
 
   Element cell(content) {
     var e = new DivElement();
     e.style.display = "table-cell";
     e.style.padding = "3px";
     if (content is String) e.text = content;
     if (content is Element) e.children.add(content);
     return e;
   }
 
   Element serviceRef(object) {
     AnyServiceRefElement e = new Element.tag("any-service-ref");
     e.ref = object;
     return e;
   }
+}
 
-  Element entriesTable() {
-    var e = new DivElement();
-    e.style.display = "table";
-    e.style.color = "#333";
-    e.style.font = "400 14px 'Montserrat', sans-serif";
+class CurrentExecutionAnnotation extends Annotation {
+  void applyStyleTo(element) {
+    if (element == null) {
+      return;  // TODO(rmacnak): Handling overlapping annotations.
+    }
+    element.classes.add("currentCol");
+    element.title = "Current execution";
+  }
+}
 
-    if (callSite.entries.isEmpty) {
-      e.append(row('Did not execute'));
-    } else {
-      var r = row();
-      r.append(cell("Container"));
-      r.append(cell("Count"));
-      r.append(cell("Target"));
-      e.append(r);
+class CallSiteAnnotation extends Annotation {
+  CallSite callSite;
 
-      for (var entry in callSite.entries) {
-        var r = row();
-        r.append(cell(serviceRef(entry.receiverContainer)));
-        r.append(cell(entry.count.toString()));
-        r.append(cell(serviceRef(entry.target)));
-        e.append(r);
-      }
-    }
-
-    return e;
+  CallSiteAnnotation(this.callSite) {
+    line = callSite.line;
+    columnStart = callSite.column - 1;  // Call site is 1-origin.
+    var tokenLength = callSite.name.length;  // Approximate.
+    if (callSite.name.startsWith("get:") ||
+        callSite.name.startsWith("set:")) tokenLength -= 4;
+    columnStop = columnStart + tokenLength;
   }
 
   void applyStyleTo(element) {
+    if (element == null) {
+      return;  // TODO(rmacnak): Handling overlapping annotations.
+    }
+    element.style.fontWeight = "bold";
+    element.title = "Call site: ${callSite.name}";
+
+    addInfoBox(element, () {
+      var details = table();
+      if (callSite.entries.isEmpty) {
+        details.append(row('Did not execute'));
+      } else {
+        var r = row();
+        r.append(cell("Container"));
+        r.append(cell("Count"));
+        r.append(cell("Target"));
+        details.append(r);
+
+        for (var entry in callSite.entries) {
+          var r = row();
+          r.append(cell(serviceRef(entry.receiverContainer)));
+          r.append(cell(entry.count.toString()));
+          r.append(cell(serviceRef(entry.target)));
+          details.append(r);
+        }
+      }
+      return details;
+    });
+  }
+}
+
+
+class FunctionDeclarationAnnotation extends Annotation {
+  ServiceFunction function;
+
+  FunctionDeclarationAnnotation(this.function) {
+    assert(function.loaded);
+    var script = function.script;
+    line = script.tokenToLine(function.tokenPos);
+    columnStart = script.tokenToCol(function.tokenPos);
+    if (line == null || columnStart == null) {

[Cutch, 2015/04/16 14:55:27]

if ((line == null) || (columnStart == null)) {

(here and possibly elsewhere).

[rmacnak, 2015/04/16 18:43:08]

Done.

+      line = 0;
+      columnStart = 0;
+      columnStop = 0;
+    } else {
+      columnStart--; // 1-origin -> 0-origin.
+
+      // The method's token position is at the beginning of the method
+      // declaration, which may be a return type annotation, metadata, static
+      // modifier, etc. Try to scan forward to position this annotation on the
+      // function's name instead.
+      var lineSource = script.getLine(line).text;
+      var betterStart = lineSource.indexOf(function.name, columnStart);
+      if (betterStart != -1) columnStart = betterStart;

[Cutch, 2015/04/16 14:55:27]

if (...) {\n...\n}\n

[rmacnak, 2015/04/16 18:43:08]

Done.

+
+      columnStop = columnStart + function.name.length;
+    }
+  }
+
+  void applyStyleTo(element) {
     if (element == null) {
       return;  // TODO(rmacnak): Handling overlapping annotations.
     }
     element.style.fontWeight = "bold";
-    element.title = "Call site: ${callSite.name}";
+    element.title = "Function declaration: ${function.name}";
 
-    addInfoBox(element, entriesTable());
+    if (function.isOptimizable == false ||
+        function.isInlinable == false ||
+        function.deoptimizations > 0) {
+      element.style.backgroundColor = "red";
+    }
+
+    addInfoBox(element, () {
+      var details = table();
+      var r = row();
+      r.append(cell("Function"));
+      r.append(cell(serviceRef(function)));
+      details.append(r);
+
+      r = row();
+      r.append(cell("Usage Count"));
+      r.append(cell("${function.usageCounter}"));
+      details.append(r);
+
+      if (function.isOptimizable == false) {
+        details.append(row(cell("Unoptimizable!")));
+      }
+      if (function.isInlinable == false) {
+        details.append(row(cell("Not inlinable!")));
+      }
+      if (function.deoptimizations > 0) {
+        details.append(row("Deoptimized ${function.deoptimizations} times!"));
+      }
+      return details;
+    });
   }
 }
 
 /// Box with script source code in it.
 @CustomTag('script-inset')
 class ScriptInsetElement extends ObservatoryElement {
   @published Script script;
 
   /// Set the height to make the script inset scroll.  Otherwise it
   /// will show from startPos to endPos.
@@ skipping 93 matching lines @@
     var table = linesTable();
     if (container == null) {
       // Indirect to avoid deleting the style element.
       container = new DivElement();
       shadowRoot.append(container);
     }
     container.children.clear();
     container.children.add(table);
   }
 
+  void loadFunctionsOf(Library lib) {
+    lib.load().then((lib) {
+      for (var func in lib.functions) func.load();

[Cutch, 2015/04/16 14:55:27]

braces and new lines

[rmacnak, 2015/04/16 18:43:07]

Done.

+      for (var cls in lib.classes) {
+        cls.load().then((cls) {
+          for (var func in cls.functions) func.load();
+        });
+      }
+    });
+  }
+
   void computeAnnotations() {
     startLine = (startPos != null
                  ? script.tokenToLine(startPos)
                  : 1);
     currentLine = (currentPos != null
                    ? script.tokenToLine(currentPos)
                    : null);
     currentCol = (currentPos != null
                   ? (script.tokenToCol(currentPos) - 1)  // make this 0-based.
                   : null);
     endLine = (endPos != null
                ? script.tokenToLine(endPos)
                : script.lines.length);
 
     annotations.clear();
     if (currentLine != null) {
       var a = new CurrentExecutionAnnotation();
       a.line = currentLine;
       a.columnStart = currentCol;
       a.columnStop = currentCol + 1;
       annotations.add(a);
     }
 
-    for (var callSite in script.callSites) {
-      var a = new CallSiteAnnotation();
-      a.line = callSite.line;
-      a.columnStart = callSite.column - 1;  // Call site is 1-origin.
-      var tokenLength = callSite.name.length;  // Approximate.
-      a.columnStop = a.columnStart + tokenLength;
-      a.callSite = callSite;
-      annotations.add(a);
+    loadFunctionsOf(script.library);
+
+    for (var func in script.library.functions) {
+      if (func.script == script) {
+        annotations.add(new FunctionDeclarationAnnotation(func));
+      }
+    }
+    for (var cls in script.library.classes) {
+      for (var func in cls.functions) {
+        if (func.script == script) {
+          annotations.add(new FunctionDeclarationAnnotation(func));
+        }
+      }
     }
 
-    annotations.sort((a, b) {
-      if (a.line == b.line) {
-        return a.columnStart.compareTo(b.columnStart);
-      }
-      return a.line.compareTo(b.line);
-    });
+    for (var callSite in script.callSites) {
+      annotations.add(new CallSiteAnnotation(callSite));
+    }
+
+    annotations.sort();
   }
 
   Element linesTable() {
     var table = new DivElement();
     table.classes.add("sourceTable");
 
     annotationsCursor = 0;
 
     int blankLineCount = 0;
     for (int i = (startLine - 1); i <= (endLine - 1); i++) {
@@ skipping 37 matching lines @@
   Element lineElement(ScriptLine line) {
     var e = new DivElement();
     e.classes.add("sourceRow");
     e.append(lineBreakpointElement(line));
     e.append(lineNumberElement(line));
     e.append(lineSourceElement(line));
     return e;
   }
 
   Element lineBreakpointElement(ScriptLine line) {
-    BreakpointToggleElement e = new Element.tag("breakpoint-toggle");
-    e.line = line;
+    var e = new DivElement();
+    var busy = false;
+    if (line == null || !line.possibleBpt) {
+      e.classes.add("emptyBreakpoint");
+      e.text = nbsp;
+      return e;
+    }
+    e.text = 'B';
+    update() {
+      if (busy) {
+        e.classes.clear();
+        e.classes.add("busyBreakpoint");
+      } else {
+        if (line.breakpoints != null) {
+          if (line.breakpointResolved) {
+            e.classes.clear();
+            e.classes.add("resolvedBreakpoint");
+          } else {
+            e.classes.clear();
+            e.classes.add("unresolvedBreakpoint");
+          }
+        } else {
+          e.classes.clear();
+          e.classes.add("possibleBreakpoint");
+        }
+      }
+    }
+    line.changes.listen((_) => update());
+    e.onClick.listen((event) {
+      if (busy) {
+        return;
+      }
+      busy = true;
+      if (line.breakpoints == null) {
+        // No breakpoint.  Add it.
+        line.script.isolate.addBreakpoint(line.script, line.line).then((_) {
+          busy = false;
+          update();
+        });
+      } else {
+        // Existing breakpoint.  Remove it.
+        List pending = [];
+        for (var bpt in line.breakpoints) {
+          pending.add(line.script.isolate.removeBreakpoint(bpt));
+        }
+        Future.wait(pending).then((_) {
+          busy = false;
+          update();
+        });
+      }
+      update();
+    });
+    update();
     return e;
   }
 
   Element lineNumberElement(ScriptLine line) {
     var lineNumber = line == null ? "..." : line.line;
     var e = span("$nbsp$lineNumber$nbsp");
 
     if ((line == null) || (line.hits == null)) {
       hitsUnknown(e);
     } else if (line.hits == 0) {
@@ skipping 40 matching lines @@
         annotation.applyStyleTo(consumeUntil(annotation.columnStop));
       }
       consumeUntil(line.text.length);
     }
 
     return e;
   }
 
   ScriptInsetElement.created() : super.created();
 }
-
-@CustomTag('breakpoint-toggle')
-class BreakpointToggleElement extends ObservatoryElement {
-  @published ScriptLine line;
-  @observable bool busy = false;
-
-  void toggleBreakpoint(var a, var b, var c) {
-    if (busy) {
-      return;
-    }
-    busy = true;
-    if (line.breakpoints == null) {
-      // No breakpoint.  Add it.
-      line.script.isolate.addBreakpoint(line.script, line.line).then((_) {
-          busy = false;
-      });
-    } else {
-      // Existing breakpoint.  Remove it.
-      List pending = [];
-      for (var bpt in line.breakpoints) {
-        pending.add(line.script.isolate.removeBreakpoint(bpt));
-      }
-      Future.wait(pending).then((_) {
-        busy = false;
-      });
-    }
-  }
-
-  BreakpointToggleElement.created() : super.created();
-}