[profiler] Web UI - add time-as-text description to the interval highlight.

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 135 matching lines @@
   setFile(file) {
     if (file != main.currentState.file) {
       main.currentState = Object.assign({}, main.currentState);
       main.currentState.file = file;
       main.delayRender();
     }
   },
 
   onResize() {
     main.setTimeLineDimensions(
-      window.innerWidth - 20, window.innerHeight / 8);
+      window.innerWidth - 20, window.innerHeight / 5);
   },
 
   onLoad() {
     function loadHandler(evt) {
       let f = evt.target.files[0];
       if (f) {
         let reader = new FileReader();
         reader.onload = function(event) {
           let profData = JSON.parse(event.target.result);
           main.setViewInterval(0, Infinity);
@@ skipping 454 matching lines @@
     this.legend = $("timeline-legend");
 
     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.currentState = null;
   }
 
   onMouseDown(e) {
     this.selectionStart =
         e.clientX - this.canvas.getBoundingClientRect().left;
     this.selectionEnd = this.selectionStart + 1;
     this.selecting = true;
   }
 
@@ skipping 36 matching lines @@
         }
 
         main.setViewInterval(start, end);
       }
     }
     this.selecting = false;
   }
 
   drawSelection() {
     let ctx = this.canvas.getContext("2d");
-    ctx.drawImage(this.buffer, 0, 0);
 
+    // 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)";
-      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);
+      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);
+    } 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) {
+      let firstTime = file.ticks[0].tm;
+      let lastTime = file.ticks[file.ticks.length - 1].tm;
+
+      let leftTime =
+          firstTime + left / this.canvas.width * (lastTime - firstTime);
+      let rightTime =
+          firstTime + right / this.canvas.width * (lastTime - firstTime);
+
+      let leftText = (leftTime / 1000000).toFixed(3) + "s";
+      let rightText = (rightTime / 1000000).toFixed(3) + "s";
+
+      ctx.textBaseline = 'top';
+      ctx.font = this.fontSize + "px Arial";
+      ctx.fillStyle = "black";
+
+      let leftWidth = ctx.measureText(leftText).width;
+      let rightWidth = ctx.measureText(rightText).width;
+
+      let leftStart = left - leftWidth / 2;
+      let rightStart = right - rightWidth / 2;
+
+      if (leftStart < 0) leftStart = 0;
+      if (rightStart + rightWidth > this.canvas.width) {
+        rightStart = this.canvas.width - rightWidth;
+      }
+      if (leftStart + leftWidth > rightStart) {
+        if (leftStart > this.canvas.width - (rightStart - rightWidth)) {
+          rightStart = leftStart + leftWidth;
+
+        } else {
+          leftStart = rightStart - leftWidth;
+        }
+      }
+
+      ctx.fillText(leftText, leftStart, 0);
+      ctx.fillText(rightText, rightStart, 0);
     }
   }
 
-
   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.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  = this.currentState.timeLine.height;
+    this.canvas.height  = height;
+
+    // Make space for the selection text.
+    height -= this.imageOffset;
 
     let file = this.currentState.file;
     if (!file) return;
 
     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 buffer = document.createElement("canvas");
 
-    buffer.width = this.canvas.width;
-    buffer.height = this.canvas.height;
+    buffer.width = width;
+    buffer.height = height;
 
     // Calculate the bar heights for each bucket.
-    let graphHeight = buffer.height;
+    let graphHeight = height;
     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 54 matching lines @@
 
 class HelpView {
   constructor() {
     this.element = $("help");
   }
 
   render(newState) {
     this.element.style.display = newState.file ? "none" : "inherit";
   }
 }