[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 / 5);
   },
 
   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.fontSize = 12;
     this.imageOffset = this.fontSize * 1.2;
+    this.functionTimelineHeight = 12;
 
     this.currentState = null;
   }
 
   onMouseDown(e) {
     this.selectionStart =
         e.clientX - this.canvas.getBoundingClientRect().left;
     this.selectionEnd = this.selectionStart + 1;
     this.selecting = true;
   }
@@ skipping 48 matching lines @@
     // Draw the timeline image.
     ctx.drawImage(this.buffer, 0, this.imageOffset);
 
     // Draw the current interval highlight.
     let left;
     let right;
     if (this.selectionStart !== null && this.selectionEnd !== null) {
       ctx.fillStyle = "rgba(0, 0, 0, 0.3)";
       left = Math.min(this.selectionStart, this.selectionEnd);
       right = Math.max(this.selectionStart, this.selectionEnd);
-      ctx.fillRect(0, this.imageOffset, left, this.buffer.height);
-      ctx.fillRect(right, this.imageOffset, this.buffer.width - right,
-          this.buffer.height);
+      let height = this.buffer.height - this.functionTimelineHeight;
+      ctx.fillRect(0, this.imageOffset, left, height);
+      ctx.fillRect(right, this.imageOffset, this.buffer.width - right, height);
     } else {
       left = 0;
       right = this.buffer.width;
     }
 
     // Draw the scale text.
     let file = this.currentState.file;
     ctx.fillStyle = "white";
     ctx.fillRect(0, 0, this.canvas.width, this.imageOffset);
     if (file && file.ticks.length > 0) {
@@ skipping 42 matching lines @@
     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;
     let height = this.currentState.timeLine.height;
     this.canvas.width = width;
     this.canvas.height  = height;
 
     // Make space for the selection text.
     height -= this.imageOffset;
 
     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);

[Jarin, 2017/03/08 16:35:56]

One thought: for delayed expansions we already have the list of frames where the
function occurred. If we kept the list around, we could use it to display the
function active regions. That should be much faster then walking all the ticks
(even though in my experience, the walk over the ticks is quite fast). In fact,
it should be fast enough to display  the function on mouse hover.

 
     let buffer = document.createElement("canvas");
 
     buffer.width = width;
     buffer.height = height;
 
     // Calculate the bar heights for each bucket.
-    let graphHeight = height;
+    let graphHeight = 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";
   }
 }