[tools/profview] Add individual function timeline view

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 133 matching lines @@
   },
 
   setFile(file) {
     if (file != main.currentState.file) {
       main.currentState = Object.assign({}, main.currentState);
       main.currentState.file = file;
       main.delayRender();
     }
   },
 
+  setCurrentCode(codeId) {
+    if (codeId != main.currentState.currentCodeId) {
+      main.currentState = Object.assign({}, main.currentState);
+      main.currentState.currentCodeId = codeId;
+      main.delayRender();
+    }
+  },
+
   onResize() {
     main.setTimeLineDimensions(
       window.innerWidth - 20, window.innerHeight / 8);
   },
 
   onLoad() {
     function loadHandler(evt) {
       let f = evt.target.files[0];
       if (f) {
         let reader = new FileReader();
@@ skipping 70 matching lines @@
     let bucket = bucketDescriptors[i];
     for (let j = 0; j < bucket.kinds.length; j++) {
       if (bucket.kinds[j] === kind) {
         return bucket;
       }
     }
   }
   return null;
 }
 
+function codeTypeToText(type) {
+  switch (type) {
+    case "UNKNOWN":
+      return "Unknown";
+    case "CPPCOMP":
+      return "C++ (compiler)";
+    case "CPPGC":
+      return "C++";
+    case "CPPEXT":
+      return "C++ External";
+    case "CPP":
+      return "C++";
+    case "LIB":
+      return "Library";
+    case "IC":
+      return "IC";
+    case "BC":
+      return "Bytecode";
+    case "STUB":
+      return "Stub";
+    case "BUILTIN":
+      return "Builtin";
+    case "REGEXP":
+      return "RegExp";
+    case "JSOPT":
+      return "JS opt";
+    case "JSUNOPT":
+      return "JS unopt";
+  }
+  console.error("Unknown type: " + type);
+}
+
+function createTypeDiv(type) {
+  if (type === "CAT") {
+    return document.createTextNode("");
+  }
+  let div = document.createElement("div");
+  div.classList.add("code-type-chip");
+
+  let span = document.createElement("span");
+  span.classList.add("code-type-chip");
+  span.textContent = codeTypeToText(type);
+  div.appendChild(span);
+
+  span = document.createElement("span");
+  span.classList.add("code-type-chip-space");
+  div.appendChild(span);
+
+  return div;
+}
+
+function isBytecodeHandler(kind) {
+  return kind === "BytecodeHandler";
+}
+
+function filterFromFilterId(id) {
+  switch (id) {
+    case "full-tree":
+      return (type, kind) => true;
+    case "js-funs":
+      return (type, kind) => type !== 'CODE';
+    case "js-exclude-bc":
+      return (type, kind) =>
+          type !== 'CODE' || !isBytecodeHandler(kind);
+  }
+}
+
 class CallTreeView {
   constructor() {
     this.element = $("calltree");
     this.treeElement = $("calltree-table");
     this.selectAttribution = $("calltree-attribution");
     this.selectCategories = $("calltree-categories");
     this.selectSort = $("calltree-sort");
 
     this.selectAttribution.onchange = () => {
       main.setCallTreeAttribution(this.selectAttribution.value);
     };
 
     this.selectCategories.onchange = () => {
       main.setCallTreeCategories(this.selectCategories.value);
     };
 
     this.selectSort.onchange = () => {
       main.setCallTreeSort(this.selectSort.value);
     };
 
     this.currentState = null;
   }
 
-  filterFromFilterId(id) {
-    switch (id) {
-      case "full-tree":
-        return (type, kind) => true;
-      case "js-funs":
-        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) => {
           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) => {
           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;
           return -1;
         };
     }
   }
 
-  static IsBytecodeHandler(kind) {
-    return kind === "BytecodeHandler";
-  }
-
   createExpander(indent) {
     let div = document.createElement("div");
     div.style.width = (1 + indent) + "em";
     div.style.display = "inline-block";
     div.style.textAlign = "right";
     return div;
   }
 
-  codeTypeToText(type) {
-    switch (type) {
-      case "UNKNOWN":
-        return "Unknown";
-      case "CPPCOMP":
-        return "C++ (compiler)";
-      case "CPPGC":
-        return "C++";
-      case "CPPEXT":
-        return "C++ External";
-      case "CPP":
-        return "C++";
-      case "LIB":
-        return "Library";
-      case "IC":
-        return "IC";
-      case "BC":
-        return "Bytecode";
-      case "STUB":
-        return "Stub";
-      case "BUILTIN":
-        return "Builtin";
-      case "REGEXP":
-        return "RegExp";
-      case "JSOPT":
-        return "JS opt";
-      case "JSUNOPT":
-        return "JS unopt";
+  createFunctionNode(name, codeId) {
+    if (codeId == -1) {
+      return document.createTextNode(name);
     }
-    console.error("Unknown type: " + type);
-  }
-
-  createTypeDiv(type) {
-    if (type === "CAT") {
-      return document.createTextNode("");
-    }
-    let div = document.createElement("div");
-    div.classList.add("code-type-chip");
-
-    let span = document.createElement("span");
-    span.classList.add("code-type-chip");
-    span.textContent = this.codeTypeToText(type);
-    div.appendChild(span);
-
-    span = document.createElement("span");
-    span.classList.add("code-type-chip-space");
-    div.appendChild(span);
-
-    return div;
+    let nameElement = document.createElement("span");
+    nameElement.classList.add("codeid-link")
+    nameElement.onclick = function() {
+      main.setCurrentCode(codeId);
+    };
+    nameElement.appendChild(document.createTextNode(name));
+    return nameElement;
   }
 
   expandTree(tree, indent) {
     let that = this;
     let index = 0;
     let id = "R/";
     let row = tree.row;
     let expander = tree.expander;
 
     if (row) {
       console.assert("expander");
       index = row.rowIndex;
       id = row.id;
 
       // Make sure we collapse the children when the row is clicked
       // 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 = [];
     let filter =
-        this.filterFromFilterId(this.currentState.callTree.attribution);
+        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));
@@ skipping 19 matching lines @@
       if (this.currentState.callTree.mode !== "bottom-up") {
         c = row.insertCell(-1);
         c.textContent = (node.ownTicks * 100 / this.tickCount).toFixed(2) + "%";
         c.style.textAlign = "right";
       }
 
       // Create the name cell.
       let nameCell = row.insertCell();
       let expander = this.createExpander(indent);
       nameCell.appendChild(expander);
-      nameCell.appendChild(this.createTypeDiv(node.type));
-      nameCell.appendChild(document.createTextNode(node.name));
+      nameCell.appendChild(createTypeDiv(node.type));
+      nameCell.appendChild(this.createFunctionNode(node.name, node.codeId));
 
       // Inclusive ticks cell.
       c = row.insertCell();
       c.textContent = node.ticks;
       c.style.textAlign = "right";
       if (this.currentState.callTree.mode !== "bottom-up") {
         // Exclusive ticks cell.
         c = row.insertCell(-1);
         c.textContent = node.ownTicks;
         c.style.textAlign = "right";
@@ skipping 119 matching lines @@
     }
 
     let ownTimeClass = (mode === "bottom-up") ? "numeric-hidden" : "numeric";
     let ownTimeTh = $(this.treeElement.id + "-own-time-header");
     ownTimeTh.classList = ownTimeClass;
     let ownTicksTh = $(this.treeElement.id + "-own-ticks-header");
     ownTicksTh.classList = ownTimeClass;
 
     // Build the tree.
     let stackProcessor;
-    let filter = this.filterFromFilterId(this.currentState.callTree.attribution);
+    let filter = filterFromFilterId(this.currentState.callTree.attribution);
     if (mode === "top-down") {
       stackProcessor =
           new PlainCallTreeProcessor(filter, false);
     } else if (mode === "function-list") {
       stackProcessor = new FunctionListTree(
           filter, this.currentState.callTree.categories === "code-type");
 
     } else {
       console.assert(mode === "bottom-up");
       if (this.currentState.callTree.categories == "none") {
@@ skipping 25 matching lines @@
     // Swap in the new rows.
     this.treeElement.replaceChild(newRows, oldRows[0]);
   }
 }
 
 class TimelineView {
   constructor() {
     this.element = $("timeline");
     this.canvas = $("timeline-canvas");
     this.legend = $("timeline-legend");
+    this.currentCode = $("timeline-currentCode");
 
     this.canvas.onmousedown = this.onMouseDown.bind(this);
     this.canvas.onmouseup = this.onMouseUp.bind(this);
     this.canvas.onmousemove = this.onMouseMove.bind(this);
 
     this.selectionStart = null;
     this.selectionEnd = null;
     this.selecting = false;
 
     this.currentState = null;
+
+    this.functionTimelineHeight = 12;
   }
 
   onMouseDown(e) {
     this.selectionStart =
         e.clientX - this.canvas.getBoundingClientRect().left;
     this.selectionEnd = this.selectionStart + 1;
     this.selecting = true;
   }
 
   onMouseMove(e) {
@@ skipping 41 matching lines @@
   }
 
   drawSelection() {
     let ctx = this.canvas.getContext("2d");
     ctx.drawImage(this.buffer, 0, 0);
 
     if (this.selectionStart !== null && this.selectionEnd !== null) {
       ctx.fillStyle = "rgba(0, 0, 0, 0.3)";
       let left = Math.min(this.selectionStart, this.selectionEnd);
       let right = Math.max(this.selectionStart, this.selectionEnd);
-      ctx.fillRect(0, 0, left, this.buffer.height);
-      ctx.fillRect(right, 0, this.buffer.width - right, this.buffer.height);
+      let height = this.buffer.height - this.functionTimelineHeight;
+      ctx.fillRect(0, 0, left, height);
+      ctx.fillRect(right, 0, this.buffer.width - right, height);
     }
   }
 
 
   render(newState) {
     let oldState = this.currentState;
 
     if (!newState.file) {
       this.element.style.display = "none";
       return;
     }
 
     this.currentState = newState;
     if (oldState) {
       if (newState.timeLine.width === oldState.timeLine.width &&
           newState.timeLine.height === oldState.timeLine.height &&
           newState.file === oldState.file &&
+          newState.currentCodeId === oldState.currentCodeId &&
           newState.start === oldState.start &&
           newState.end === oldState.end) {
         // No change, nothing to do.
         return;
       }
     }
 
     this.element.style.display = "inherit";
 
     // Make sure the canvas has the right dimensions.
     let width = this.currentState.timeLine.width;
     this.canvas.width = width;
     this.canvas.height  = this.currentState.timeLine.height;
 
     let file = this.currentState.file;
     if (!file) return;
 
+    let currentCodeId = this.currentState.currentCodeId;
+
     let firstTime = file.ticks[0].tm;
     let lastTime = file.ticks[file.ticks.length - 1].tm;
     let start = Math.max(this.currentState.start, firstTime);
     let end = Math.min(this.currentState.end, lastTime);
 
     this.selectionStart = (start - firstTime) / (lastTime - firstTime) * width;
     this.selectionEnd = (end - firstTime) / (lastTime - firstTime) * width;
 
     let tickCount = file.ticks.length;
 
     let minBucketPixels = 10;
     let minBucketSamples = 30;
     let bucketCount = Math.min(width / minBucketPixels,
                                tickCount / minBucketSamples);
 
     let stackProcessor = new CategorySampler(file, bucketCount);
     generateTree(file, 0, Infinity, stackProcessor);
+    let codeIdProcessor = new FunctionTimelineProcessor(
+      currentCodeId,
+      filterFromFilterId(this.currentState.callTree.attribution));
+    generateTree(file, 0, Infinity, codeIdProcessor);
 
     let buffer = document.createElement("canvas");
 
     buffer.width = this.canvas.width;
     buffer.height = this.canvas.height;
 
     // Calculate the bar heights for each bucket.
-    let graphHeight = buffer.height;
+    let graphHeight = buffer.height - this.functionTimelineHeight;
     let buckets = stackProcessor.buckets;
     let bucketsGraph = [];
     for (let i = 0; i < buckets.length; i++) {
       let sum = 0;
       let bucketData = [];
       let total = buckets[i].total;
       for (let j = 0; j < bucketDescriptors.length; j++) {
         let desc = bucketDescriptors[j];
         for (let k = 0; k < desc.kinds.length; k++) {
           sum += buckets[i][desc.kinds[k]];
@@ skipping 13 matching lines @@
         ctx.beginPath();
         ctx.moveTo(i * bucketWidth, j && bucketData[j - 1]);
         ctx.lineTo((i + 1) * bucketWidth, j && nextBucketData[j - 1]);
         ctx.lineTo((i + 1) * bucketWidth, nextBucketData[j]);
         ctx.lineTo(i * bucketWidth, bucketData[j]);
         ctx.closePath();
         ctx.fillStyle = bucketDescriptors[j].color;
         ctx.fill();
       }
     }
+    let functionTimelineYOffset = graphHeight;
+    let functionTimelineHeight = this.functionTimelineHeight;
+    let timestampScaler = width / (lastTime - firstTime);
+    ctx.fillStyle = "white";
+    ctx.fillRect(
+      0,
+      functionTimelineYOffset,
+      buffer.width,
+      functionTimelineHeight);
+    for (let i = 0; i < codeIdProcessor.blocks.length; i++) {
+      let block = codeIdProcessor.blocks[i];
+      ctx.fillStyle = "#000000";
+      ctx.fillRect(
+        Math.round((block.start - firstTime) * timestampScaler),
+        functionTimelineYOffset,
+        Math.max(1, Math.round((block.end - block.start) * timestampScaler)),
+        block.topOfStack ? functionTimelineHeight : functionTimelineHeight / 2);
+    }
 
     // Remember stuff for later.
     this.buffer = buffer;
 
     // Draw the buffer.
     this.drawSelection();
 
     // (Re-)Populate the graph legend.
     while (this.legend.cells.length > 0) {
       this.legend.deleteCell(0);
     }
     let cell = this.legend.insertCell(-1);
     cell.textContent = "Legend: ";
     cell.style.padding = "1ex";
     for (let i = 0; i < bucketDescriptors.length; i++) {
       let cell = this.legend.insertCell(-1);
       cell.style.padding = "1ex";
       let desc = bucketDescriptors[i];
       let div = document.createElement("div");
       div.style.display = "inline-block";
       div.style.width = "0.6em";
       div.style.height = "1.2ex";
       div.style.backgroundColor = desc.color;
       div.style.borderStyle = "solid";
       div.style.borderWidth = "1px";
       div.style.borderColor = "Black";
       cell.appendChild(div);
       cell.appendChild(document.createTextNode(" " + desc.text));
     }
+
+    while (this.currentCode.firstChild) {
+      this.currentCode.removeChild(this.currentCode.firstChild);
+    }
+    if (currentCodeId) {
+      let currentCode = file.code[currentCodeId];
+      this.currentCode.appendChild(createTypeDiv(resolveCodeKind(currentCode)));
+      this.currentCode.appendChild(document.createTextNode(currentCode.name));
+
+    } else {
+      this.currentCode.appendChild(document.createTextNode("<none>"));
+    }
   }
 }
 
 class HelpView {
   constructor() {
     this.element = $("help");
   }
 
   render(newState) {
     this.element.style.display = newState.file ? "none" : "inherit";
   }
 }