Better ui

js/parser.js

@@ -162,14 +162,32 @@ var Parser = {
     return functionName;
   },
 
-  filterByName: function Parse_filterByName(profile, filterName) {
+  filterByJank: function Parser_filterByJank(profile, filterThreshold) {
+    var samples = profile.samples.clone();
+    calltrace_it: for (var i = 0; i < samples.length; ++i) {
+      var sample = samples[i];
+      if (sample.extraInfo["responsiveness"] < filterThreshold) {
+        samples[i] = samples[i].clone();
+        samples[i].frames = ["Filtered out"];
+      }
+    }
+    return {
+      symbols: profile.symbols,
+      functions: profile.functions,
+      samples: samples
+    };
+  },
+
+  filterByName: function Parser_filterByName(profile, filterName) {
     var samples = profile.samples.clone();
     filterName = filterName.toLowerCase();
     calltrace_it: for (var i = 0; i < samples.length; ++i) {
       var sample = samples[i];
       var callstack = sample.frames;
       for (var j = 0; j < callstack.length; ++j) { 
-        if (profile.symbols[callstack[j]].toLowerCase().indexOf(filterName) != -1) {
+        var symbol = profile.symbols[callstack[j]];
+        if (symbol != null &&
+            profile.symbols[callstack[j]].symbolName.toLowerCase().indexOf(filterName) != -1) {
           continue calltrace_it;
         }
       }

js/tree.js

@@ -145,6 +145,8 @@ TreeView.prototype = {
     var treeLine = document.createElement("div");
     treeLine.className = "treeLine";
     treeLine.innerHTML = this._HTMLForFunction(data);
+    // When this item is toggled we will expand its children
+    li.pendingExpand = [];
     li.treeLine = treeLine;
     li.data = data;
     li.appendChild(treeLine);
@@ -154,7 +156,7 @@ TreeView.prototype = {
       var ol = document.createElement("ol");
       ol.className = "treeViewNodeList";
       for (var i = 0; i < data.children.length; ++i) {
-        this._pendingActions.push({parentElement: ol, parentNode: li, data: data.children[i].getData() });
+        li.pendingExpand.push({parentElement: ol, parentNode: li, data: data.children[i].getData() });
       }
       li.appendChild(ol);
     }
@@ -171,7 +173,13 @@ TreeView.prototype = {
       '<span class="functionName">' + node.name + '</span>' +
       '<span class="libraryName">' + node.library + '</span>';
   },
+  _resolveChild: function TreeView__resolveChild(div) {
+    while (div.pendingExpand != null && div.pendingExpand.length > 0) {
+      this._processOneAction(div.pendingExpand.shift());
+    }
+  },
   _toggle: function TreeView__toggle(div, /* optional */ newCollapsedValue, /* optional */ suppressScrollHeightNotification) {
+    this._resolveChild(div);
     if (newCollapsedValue === undefined) {
       div.classList.toggle("collapsed");
     } else {

js/ui.js

@@ -250,13 +250,21 @@ HistogramView.prototype = {
         highlightedCallstack.length <= (gInvertCallstack ? 0 : 1))
         continue next_iteration;
 
-      // TODO remove this clone, reverse the stack at build time.
-      var compareFrames = frames.clone();
-      if (gInvertCallstack)
-        compareFrames.reverse();
-      for (var j = 0; j < highlightedCallstack.length; j++) {
-        if (highlightedCallstack[j] != compareFrames[j] && compareFrames[j] != "(root)")
-          continue next_iteration;
+      var compareFrames = frames;
+      if (gInvertCallstack) {
+        for (var j = 0; j < highlightedCallstack.length; j++) {
+          var compareFrameIndex = highlightedCallstack.length - 1 - j;
+          if (highlightedCallstack[j] != compareFrames[compareFrameIndex] &&
+            compareFrames[compareFrameIndex] != "(root)")
+            continue next_iteration;
+        }
+      } else {
+        for (var j = 0; j < highlightedCallstack.length; j++) {
+          var compareFrameIndex = j;
+          if (highlightedCallstack[j] != compareFrames[compareFrameIndex] &&
+            compareFrames[compareFrameIndex] != "(root)")
+            continue next_iteration;
+        }
       }
       return true;
     }
@@ -725,6 +733,7 @@ function updateDescription() {
   infoText += "<label><input type='checkbox' id='invertCallstack' " + (gInvertCallstack ?" checked='true' ":" ") + " onchange='toggleInvertCallStack()'/>Invert callstack</label><br />\n";
   infoText += "<label><input type='checkbox' id='mergeUnbranched' " + (gMergeUnbranched ?" checked='true' ":" ") + " onchange='toggleMergeUnbranched()'/>Merge unbranched call paths</label><br />\n";
   infoText += "<label><input type='checkbox' id='mergeFunctions' " + (gMergeFunctions ?" checked='true' ":" ") + " onchange='toggleMergeFunctions()'/>Functions, not lines</label><br />\n";
+  infoText += "<label><input type='checkbox' id='showJank' " + (gJankOnly ?" checked='true' ":" ") + " onchange='toggleJank()'/>Show Jank only</label><br />\n";
 
   var filterNameInputOld = document.getElementById("filterName");
   infoText += "<br>\n";
@@ -817,7 +826,9 @@ function loadProfile(rawProfile) {
 var gInvertCallstack = false;
 function toggleInvertCallStack() {
   gInvertCallstack = !gInvertCallstack;
+  var startTime = Date.now();
   refreshUI();
+  console.log("invert time: " + (Date.now() - startTime) + "ms");
 }
 
 var gMergeUnbranched = false;
@@ -832,6 +843,16 @@ function toggleMergeFunctions() {
   refreshUI(); 
 }
 
+var gJankOnly = false;
+var gJankThreshold = 50 /* ms */;
+function toggleJank(/* optional */ threshold) {
+  gJankOnly = !gJankOnly;
+  if (threshold != null ) {
+    gJankThreshold = threshold;
+  }
+  refreshUI();
+}
+
 function setHighlightedCallstack(samples) {
   gHighlightedCallstack = samples;
   gHistogramView.highlightedCallstackChanged(gHighlightedCallstack);
@@ -869,6 +890,9 @@ function refreshUI() {
   if (filterNameInput != null && filterNameInput.value != "") {
     data = Parser.filterByName(data, document.getElementById("filterName").value);
   }
+  if (gJankOnly) {
+    data = Parser.filterByJank(data, gJankThreshold);
+  }
   if (gMergeFunctions) {
     data = Parser.discardLineLevelInformation(data);
     console.log("line information discarding: " + (Date.now() - start) + "ms.");