[profiler] This adds function butterflies to the function list.

tools/profview/profview.js

 // Copyright 2017 the V8 project authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 "use strict"
 
 function $(id) {
   return document.getElementById(id);
 }
 
@@ skipping 65 matching lines @@
           callTreeState.categories = "code-type";
           callTreeState.sort = "time";
           break;
         case "top-down":
           callTreeState.attribution = "js-exclude-bc";
           callTreeState.categories = "none";
           callTreeState.sort = "time";
           break;
         case "function-list":
           callTreeState.attribution = "js-exclude-bc";
-          callTreeState.categories = "none";
+          callTreeState.categories = "code-type";
           callTreeState.sort = "own-time";
           break;
         default:
           console.error("Invalid mode");
       }
       main.currentState = setCallTreeState(main.currentState,  callTreeState);
       main.delayRender();
     }
   },
 
@@ skipping 175 matching lines @@
         return (type, kind) => type !== 'CODE';
       case "js-exclude-bc":
         return (type, kind) =>
             type !== 'CODE' || !CallTreeView.IsBytecodeHandler(kind);
     }
   }
 
   sortFromId(id) {
     switch (id) {
       case "time":
-        return (c1, c2) => c2.ticks - c1.ticks;
+        return (c1, c2) => {
+          if (c1.ticks < c2.ticks) return 1;
+          else if (c1.ticks > c2.ticks) return -1;
+          return c2.ownTicks - c1.ownTicks;
+        }
       case "own-time":
-        return (c1, c2) => c2.ownTicks - c1.ownTicks;
+        return (c1, c2) => {
+          if (c1.ownTicks < c2.ownTicks) return 1;
+          else if (c1.ownTicks > c2.ownTicks) return -1;
+          return c2.ticks - c1.ticks;
+        }
       case "category-time":
         return (c1, c2) => {
           if (c1.type === c2.type) return c2.ticks - c1.ticks;
           if (c1.type < c2.type) return 1;
           return -1;
         };
       case "category-own-time":
         return (c1, c2) => {
           if (c1.type === c2.type) return c2.ownTicks - c1.ownTicks;
           if (c1.type < c2.type) return 1;
@@ skipping 81 matching lines @@
       // again.
       expander.textContent = "\u25BE";
       let expandHandler = expander.onclick;
       expander.onclick = () => {
         that.collapseRow(tree, expander, expandHandler);
       }
     }
 
     // Collect the children, and sort them by ticks.
     let children = [];
-    for (let child in tree.children) {
-      if (tree.children[child].ticks > 0) {
-        children.push(tree.children[child]);
+    let filter =
+        this.filterFromFilterId(this.currentState.callTree.attribution);
+    for (let childId in tree.children) {
+      let child = tree.children[childId];
+      if (child.ticks > 0) {
+        children.push(child);
+        if (child.delayedExpansion) {
+          expandTreeNode(this.currentState.file, child, filter);
+        }
       }
     }
     children.sort(this.sortFromId(this.currentState.callTree.sort));
 
     for (let i = 0; i < children.length; i++) {
       let node = children[i];
       let row = this.rows.insertRow(index);
       row.id = id + i + "/";
 
       if (node.type != "CAT") {
@@ skipping 100 matching lines @@
         addOptions(this.selectSort, [
             { value : "time", text : "Time (including children)" },
             { value : "own-time", text : "Own time" },
             { value : "category-time", text : "Code category, time" },
             { value : "category-own-time", text : "Code category, own time"}
         ], calltree.sort);
         return;
       case "function-list":
         addOptions(this.selectAttribution, attributions, calltree.attribution);
         addOptions(this.selectCategories, [
+            { value : "code-type", text : "Code type" },
             { value : "none", text : "None" }
         ], calltree.categories);
         addOptions(this.selectSort, [
             { value : "own-time", text : "Own time" },
             { value : "time", text : "Time (including children)" },
             { value : "category-own-time", text : "Code category, own time"},
             { value : "category-time", text : "Code category, time" },
         ], calltree.sort);
         return;
     }
@@ skipping 24 matching lines @@
     this.element.style.display = "inherit";
 
     let mode = this.currentState.callTree.mode;
     if (!oldState || mode !== oldState.callTree.mode) {
       // Technically, we should also call this if attribution, categories or
       // sort change, but the selection is already highlighted by the combobox
       // itself, so we do need to do anything here.
       this.fillSelects(newState.callTree);
     }
 
-    let inclusiveDisplay = (mode === "bottom-up") ? "none" : "inherit";
+    let ownTimeClass = (mode === "bottom-up") ? "numeric-hidden" : "numeric";
     let ownTimeTh = $(this.treeElement.id + "-own-time-header");
-    ownTimeTh.style.display = inclusiveDisplay;
+    ownTimeTh.classList = ownTimeClass;
     let ownTicksTh = $(this.treeElement.id + "-own-ticks-header");
-    ownTicksTh.style.display = inclusiveDisplay;
+    ownTicksTh.classList = ownTimeClass;
 
     // Build the tree.
     let stackProcessor;
     let filter = this.filterFromFilterId(this.currentState.callTree.attribution);
     if (mode === "top-down") {
       stackProcessor =
           new PlainCallTreeProcessor(filter, false);
     } else if (mode === "function-list") {
-      stackProcessor =
-          new FunctionListTree(filter);
+      stackProcessor = new FunctionListTree(
+          filter, this.currentState.callTree.categories === "code-type");
 
     } else {
       console.assert(mode === "bottom-up");
       if (this.currentState.callTree.categories == "none") {
         stackProcessor =
             new PlainCallTreeProcessor(filter, true);
       } else {
         console.assert(this.currentState.callTree.categories === "code-type");
         stackProcessor =
             new CategorizedCallTreeProcessor(filter, true);
@@ skipping 225 matching lines @@
 
 class HelpView {
   constructor() {
     this.element = $("help");
   }
 
   render(newState) {
     this.element.style.display = newState.file ? "none" : "inherit";
   }
 }