Include statistical profile into profviz.

tools/profviz/profviz.js

 // Copyright 2013 the V8 project authors. All rights reserved.
 // Redistribution and use in source and binary forms, with or without
 // modification, are permitted provided that the following conditions are
 // met:
 //
 //     * Redistributions of source code must retain the above copyright
 //       notice, this list of conditions and the following disclaimer.
 //     * Redistributions in binary form must reproduce the above
 //       copyright notice, this list of conditions and the following
 //       disclaimer in the documentation and/or other materials provided
@@ skipping 11 matching lines @@
 // LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
 // DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
 // THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 // (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 // OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
 var worker_scripts = [
   "../csvparser.js",
   "../splaytree.js",
   "../codemap.js",
+  "../consarray.js",
   "../profile.js",
   "../profile_view.js",
   "../logreader.js",
   "../tickprocessor.js",
   "composer.js",
   "gnuplot-4.6.3-emscripten.js"
 ];
 
 
 function plotWorker() {
   var worker = null;
 
   var delegateList = {
-    "log"     : log,
-    "error"   : logError,
-    "display" : display,
-    "range"   : setRange,
-    "script"  : scriptLoaded
+    "log"         : log,
+    "error"       : logError,
+    "displayplot" : displayplot,
+    "displayprof" : displayprof,
+    "range"       : setRange,
+    "script"      : scriptLoaded
   }
 
   function initialize() {
     ui.freeze();
     worker = new Worker("worker.js");
     running = false;
 
     worker.postMessage({ "call" : "load scripts",
                          "args" : worker_scripts });
 
@@ skipping 30 matching lines @@
 }
 
 
 function UIWrapper() {
   var input_elements = ["range_start",
                         "range_end",
                         "distortion",
                         "start",
                         "file"];
 
-  this.log = document.getElementById("log");
-  this.plot = document.getElementById('plot');
+  var other_elements = ["log",
+                        "plot",
+                        "prof",
+                        "instructions",
+                        "credits",
+                        "toggledisplay"];
+
   for (var i in input_elements) {
     var id = input_elements[i];
     this[id] = document.getElementById(id);
   }
 
+  for (var i in other_elements) {
+    var id = other_elements[i];
+    this[id] = document.getElementById(id);
+  }
+
   this.freeze = function() {
     this.plot.style.webkitFilter = "grayscale(1)";
+    this.prof.style.color = "#bbb";
     for (var i in input_elements) {
       this[input_elements[i]].disabled = true;
     }
   }
 
   this.thaw = function() {
     this.plot.style.webkitFilter = "";
+    this.prof.style.color = "#000";
     for (var i in input_elements) {
       this[input_elements[i]].disabled = false;
     }
   }
 
   this.reset = function() {
     this.thaw();
     this.log.value = "";
     this.range_start.value = "automatic";
     this.range_end.value = "automatic";
+    this.toggle("plot");
+    this.plot.src = "";
+    this.prof.value = "";
+  }
+
+  this.toggle = function(mode) {
+    if (mode) this.toggledisplay.next_mode = mode;
+    if (this.toggledisplay.next_mode == "plot") {
+      this.toggledisplay.next_mode = "prof";
+      this.plot.style.display = "block";
+      this.prof.style.display = "none";
+      this.toggledisplay.innerHTML = "Show profile";
+    } else {
+      this.toggledisplay.next_mode = "plot";
+      this.plot.style.display = "none";
+      this.prof.style.display = "block";
+      this.toggledisplay.innerHTML = "Show plot";
+    }
+  }
+
+  this.info = function(field) {
+    var down_arrow = "\u25bc";
+    var right_arrow = "\u25b6";
+    if (field && this[field].style.display != "none") field = null;  // Toggle.
+    this.credits.style.display = "none";
+    this.instructions.style.display = "none";
+    if (!field) return;
+    this[field].style.display = "block";
   }
 }
 
 
 function log(text) {
   ui.log.value += text;
   ui.log.scrollTop = ui.log.scrollHeight;
 }
 
 
 function logError(text) {
   if (ui.log.value.length > 0 &&
       ui.log.value[ui.log.value.length-1] != "\n") {
     ui.log.value += "\n";
   }
   ui.log.value += "ERROR: " + text + "\n";
   ui.log.scrollTop = ui.log.scrollHeight;
   error_logged = true;
 }
 
 
-function display(args) {
+function displayplot(args) {
   if (error_logged) {
     log("Plot failed.\n\n");
   } else {
     log("Displaying plot. Total time: " +
         (Date.now() - timer) / 1000 + "ms.\n\n");
     var blob = new Blob([new Uint8Array(args.contents).buffer],
                         { "type" : "image\/svg+xml" });
     window.URL = window.URL || window.webkitURL;
     ui.plot.src = window.URL.createObjectURL(blob);
   }
 
   ui.thaw();
+  ui.toggle("plot");
 }
 
 
+function displayprof(args) {
+  if (error_logged) return;
+  ui.prof.value = args;
+  this.prof.style.color = "";
+  ui.toggle("prof");
+}
+
+
 function start(event) {
   error_logged = false;
   ui.freeze();
 
   try {
     var file = getSelectedFile();
     var distortion = getDistortion();
     var range = getRange();
   } catch (e) {
     logError(e.message);
@@ skipping 37 matching lines @@
 }
 
 
 function setRange(args) {
   ui.range_start.value = args.start.toFixed(1);
   ui.range_end.value = args.end.toFixed(1);
 }
 
 
 function onload() {
-  kResX = 1600;
-  kResY = 900;
+  kResX = 1200;
+  kResY = 600;
   error_logged = false;
   ui = new UIWrapper();
   ui.reset();
+  ui.info(null);
   worker = new plotWorker();
   worker.reset();
 }
 
 
 var kResX;
 var kResY;
 var error_logged;
 var ui;
 var worker;
 var timer;