[tools] improving callstats.html istructions and making callstats.py executable

BUG=

Review-Url: https://codereview.chromium.org/1964453002
Cr-Commit-Position: refs/heads/master@{#36173}

tools/callstats.html

@@ -152,6 +152,10 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
       cursor: pointer
     }
     
+    .pageDetailTable tfoot td {
+      border-top: 1px grey solid;
+    }
+    
     #popover {
       position: absolute;
       transform: translateY(-50%) translateX(40px);
@@ -198,9 +202,16 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
     #popover table.compare .compare {
       display: table-cell;
     }
+
+    #popover .compare .time,
+    #popover .compare .version {
+      padding-left: 10px;
+    }
   </style>
-  <script>
+  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+  <script type="text/javascript">
     "use strict"
+    google.charts.load('current', {packages: ['corechart']});
 
     // Did anybody say monkeypatching?
     if (!NodeList.prototype.forEach) {
@@ -218,7 +229,11 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
 
     function initialize() {
       var original = $("column");
-      for (var i = 0; i < versions.length || i < 2; i++) {
+      var view = document.createElement('div');
+      view.id = 'view';
+      var i = 0;
+      versions.forEach((version) =>  {
+        if (!version.enabled) return;
         // add column
         var column = original.cloneNode(true);
         column.id = "column_" + i;
@@ -227,6 +242,7 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
         select.id = "selectVersion_" + i;
         // add all select options
         versions.forEach((version) => {
+          if (!version.enabled) return;
           var option = document.createElement("option");
           option.textContent = version.name;
           option.version = version;
@@ -235,8 +251,9 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
         // Fill in all page versions
         select = column.querySelector(".pageVersion");
         select.id = "select_" + i;
-        // add all select options
+        // add all pages
         versions.forEach((version) => {
+          if (!version.enabled) return;
           var optgroup = document.createElement("optgroup");
           optgroup.label = version.name;
           optgroup.version = version;
@@ -248,8 +265,12 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
           });
           select.appendChild(optgroup);
         });
-        $("view").appendChild(column);
-      }
+        view.appendChild(column);
+        i++;
+      });
+      var oldView = $('view');
+      oldView.parentNode.replaceChild(view, oldView);
+      
       var select = $('baseline');
       removeAllChildren(select);
       select.appendChild(document.createElement('option'));
@@ -259,12 +280,28 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
         option.version = version;
         select.appendChild(option);
       });
+
+      var versionSelectorList = $('results').querySelector('.versionSelector ul');
+      removeAllChildren(versionSelectorList);
+      versions.forEach((version) => {
+        var li = document.createElement('li');
+        var checkbox = document.createElement('input');
+        checkbox.type = 'checkbox';
+        checkbox.checked = version.enabled;
+        checkbox.version = version;
+        checkbox.addEventListener('click', handleToggleVersionEnable);
+        li.appendChild(checkbox);
+        li.appendChild(document.createTextNode(version.name));
+        versionSelectorList.appendChild(li);
+      });
       $('results').querySelectorAll('#results > .hidden').forEach((node) => {
         toggleCssClass(node, 'hidden', false);
       });
     }
 
     function showPage(firstPage) {
+      var changeSelectedEntry = selectedEntry !== undefined 
+          && selectedEntry.page === selectedPage;
       selectedPage = firstPage;
       selectedPage.sort();
       showPageInColumn(firstPage, 0);
@@ -277,7 +314,11 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
           index++;
         }
       });
-      showImpactList(selectedPage);
+      if (changeSelectedEntry) {
+        showEntryDetail(selectedPage.getEntry(selectedEntry));
+      } else {
+        showImpactList(selectedPage);
+      }
     }
 
     function showPageInColumn(page, columnIndex) {
@@ -318,10 +359,9 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
       var oldTbody = table.querySelector('tbody');
       var tbody = document.createElement('tbody');
       var referencePage = selectedPage;
-      page.forEachSorted(selectedPage,
-          (parentEntry, entry, referenceEntry) => {
-        // Filter out entries that do not exist in the first column for the
-        // default view.
+      page.forEachSorted(selectedPage, (parentEntry, entry, referenceEntry) => {
+        // Filter out entries that do not exist in the first column for the default
+        // view.
         if (baselineVersion === undefined && referenceEntry &&
           referenceEntry.time == 0) {
           return;
@@ -330,11 +370,7 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
         tbody.appendChild(tr);
         tr.entry = entry;
         tr.parentEntry = parentEntry;
-        if (!parentEntry) {
-          tr.className = 'parent'
-        } else {
-          tr.className = 'child'
-        }
+        tr.className = parentEntry === undefined ? 'parent' : 'child';
         // Don't show entries that do not exist on the current page or if we
         // compare against the current page
         if (entry !== undefined && page.version !== baselineVersion) {
@@ -359,7 +395,7 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
           diffStatus(
             td(tr, count(entry.count), 'value count'),
             entry.count, referenceEntry.count);
-        } else if (baselineVersion !== undefined && referenceEntry
+        } else if (baselineVersion !== undefined && referenceEntry 
             && page.version !== baselineVersion) {
           // Show comparison of entry that does not exist on the current page.
           tr.entry = referenceEntry;
@@ -376,7 +412,8 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
             referenceEntry.count, 0);
         } else {
           // Display empty entry / baseline entry
-          if (entry !== undefined) {
+          var showBaselineEntry = entry !== undefined;
+          if (showBaselineEntry) {
             if (!parentEntry) {
               var node = td(tr, '<div class="toggle">►</div>', 'position');
               node.firstChild.addEventListener('click', handleToggleGroup);
@@ -384,13 +421,16 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
               td(tr, entry.position == 0 ? '' : entry.position, 'position');
             }
             td(tr, entry.name, 'name');
+            td(tr, ms(entry.time, false), 'value time');
+            td(tr, percent(entry.timePercent, false), 'value time');
+            td(tr, count(entry.count, false), 'value count');
           } else {
             td(tr, '-', 'position');
             td(tr, '-', 'name');
+            td(tr, '-', 'value time');
+            td(tr, '-', 'value time');
+            td(tr, '-', 'value count');
           }
-          td(tr, '-', 'value time');
-          td(tr, '-', 'value time');
-          td(tr, '-', 'value count');
         }
       });
       table.replaceChild(tbody, oldTbody);
@@ -427,8 +467,8 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
       $('view').querySelectorAll("tbody").forEach((body) => {
         var row = body.childNodes[rowIndex];
         if (!row) return;
-        toggleCssClass(row, 'selected',
-            row.entry && row.entry.name == firstEntry.name);
+        toggleCssClass(row, 'selected', row.entry && row.entry.name ==
+          firstEntry.name);
       });
       if (updateSelectedPage) {
         entry = selectedEntry.page.version.getEntry(entry);
@@ -442,8 +482,8 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
       table = $('detailView').querySelector('.versionDetailTable');
       tbody = document.createElement('tbody');
       if (entry !== undefined) {
-        $('detailView').querySelector('.versionDetail h3 span').innerHTML
-            = entry.name;
+        $('detailView').querySelector('.versionDetail h3 span').innerHTML =
+          entry.name;
         entries = versions.pageVersions(entry.page.name).map(
           (page) => {
             return page.get(entry.name)
@@ -470,14 +510,16 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
       tbody = document.createElement('tbody');
       if (entry !== undefined) {
         var version = entry.page.version;
-        $('detailView').querySelector('.pageDetail h3 span').innerHTML
-            = version.name;
+        $('detailView').querySelector('.pageDetail h3 span').innerHTML =
+          version.name;
         entries = version.pages.map(
           (page) => {
             return page.get(entry.name)
           });
         entries.sort((a, b) => {
-          return b.timePercent - a.timePercent
+          var cmp = b.timePercent - a.timePercent;
+          if (cmp.toFixed(1) == 0) return b.time - a.time;
+          return cmp
         });
         entries.forEach((pageEntry) => {
           if (pageEntry === undefined) return;
@@ -495,15 +537,12 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
         var tds = table.querySelectorAll('tfoot td');
         tds[2].innerHTML = ms(entry.getTimeImpact());
         // Only show the percentage total if we are in diff mode:
-        if (baselineVersion !== undefined) {
-          tds[3].innerHTML = percent(entry.getTimePercentImpact());
-        } else {
-          tds[3].innerHTML = ''
-        }
+        tds[3].innerHTML = percent(entry.getTimePercentImpact());
         tds[4].innerHTML = count(entry.getCountImpact());
       }
       table.replaceChild(tbody, table.querySelector('tbody'));
       showImpactList(entry.page);
+      showPageGraphs(entry.page);
     }
 
     function showImpactList(page) {
@@ -515,32 +554,102 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
       var version = page.version;
       var entries = version.allEntries();
       if (selectedEntry !== undefined && selectedEntry.isGroup) {
-        impactView.querySelector('h3 span').innerHTML
-            += " " + selectedEntry.name;
+        impactView.querySelector('h3 span').innerHTML += " " + selectedEntry.name;
         entries = entries.filter((entry) => {
           return entry.name == selectedEntry.name ||
             (entry.parent && entry.parent.name == selectedEntry.name)
         });
       }
+      var isCompareView = baselineVersion !== undefined;
+      entries = entries.filter((entry) => {
+        if (isCompareView) {
+          var impact = entry.getTimeImpact();
+          return impact < -1 || 1 < impact
+        }
+        return entry.getTimePercentImpact() > 0.1;
+      });
       entries.sort((a, b) => {
-        return b.getTimePercentImpact() - a.getTimePercentImpact();
+        var cmp = b.getTimePercentImpact() - a.getTimePercentImpact(); 
+        if (isCompareView || cmp.toFixed(1) == 0) {
+          return b.getTimeImpact() - a.getTimeImpact();
+        }
+        return cmp
       });
       entries.forEach((entry) => {
         var tr = document.createElement('tr');
         tr.entry = entry;
         td(tr, entry.name, 'name');
         td(tr, ms(entry.getTimeImpact()), 'value time');
-        td(tr, percent(entry.getTimePercentImpact()), 'value time');
-        var topPages = entry.getPagesByPercentImpact().slice(0, 2)
+        var percentImpact = entry.getTimePercentImpact();
+        td(tr, percentImpact > 1000 ? '-' : percent(percentImpact), 'value time');
+        var topPages = entry.getPagesByPercentImpact().slice(0, 3)
           .map((each) => {
-            return each.name + ' (' 
-                + percent(each.getEntry(entry).timePercent) + ')'
+            return each.name + ' (' + percent(each.getEntry(entry).timePercent) +
+              ')'
           });
         td(tr, topPages.join(', '), 'name');
         tbody.appendChild(tr);
       });
       table.replaceChild(tbody, table.querySelector('tbody'));
     }
+    
+    var selectedGroup;
+    function showPageGraphs(page) {
+      var groups = page.groups.filter(each => each.name != page.total.name);
+      if (selectedGroup == undefined) {
+        selectedGroup = groups[0];
+      } else {
+        groups = groups.filter(each => each.name != selectedGroup.name);
+        groups.unshift(selectedGroup);
+      }
+      var dataTable = new google.visualization.DataTable();
+      dataTable.addColumn('string', 'Name');
+      groups.forEach(group => {
+        var column = dataTable.addColumn('number', group.name);
+        dataTable.setColumnProperty(column, 'group', group);
+      });
+      // Calculate the average row
+      var row = ['Average'];
+      groups.forEach((group) => {
+        row.push(group.getTimeImpact());
+      });
+      dataTable.addRow(row);
+      // Sort the pages by the selected group.
+      var pages = page.version.pages.slice();
+      pages.sort((a, b) => {
+        return b.getEntry(selectedGroup).timePercent - a.getEntry(selectedGroup).timePercent; 
+      });
+      // Calculate the entries for the pages
+      pages.forEach((page) => { 
+        row = [page.name];
+        groups.forEach((group) => {
+          row.push(page.getEntry(group).time);
+        });
+        dataTable.addRow(row);
+      });
+
+      var height = 1000/27*page.version.pages.length;
+      var options = {
+        title: 'Page Comparison for Version ' + page.version.name,
+        isStacked: 'percent',
+        height: height ,
+        hAxis: {
+          title: '% Time',
+          minValue: 0,
+        },
+        vAxis: {
+        }
+      };
+      var chart = new google.visualization.BarChart($('pageGraphs'));
+      chart.draw(dataTable, options);
+      google.visualization.events.addListener(chart, 'select', selectHandler);
+      function selectHandler() {
+        var column = chart.getSelection()[0].column;
+        if (column === undefined) return;
+        selectedGroup = dataTable.getColumnProperty(column, 'group');
+        showPageGraphs(selectedEntry.page);
+      }
+    }
 
     function showGroup(entry) {
       toggleGroup(entry, true);
@@ -563,34 +672,42 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
       popover.querySelector('table').className = "";
       if (baselineVersion !== undefined) {
         entry = baselineVersion.getEntry(entry);
-        if (entry === undefined) return;
         setPopoverDetail(popover, entry, '.compare');
         popover.querySelector('table').className = "compare";
       }
     }
 
     function setPopoverDetail(popover, entry, prefix) {
-      popover.querySelector(prefix + '.version').innerHTML 
-          = entry.page.version.name;
-      popover.querySelector(prefix + '.time').innerHTML
-          = ms(entry._time, false);
-      popover.querySelector(prefix + '.timeVariance').innerHTML
-          = percent(entry.timeVariancePercent, false);
-      popover.querySelector(prefix + '.percent').innerHTML 
-         = percent(entry.timePercent, false);
-      popover.querySelector(prefix + '.percentVariance').innerHTML 
-          = percent(entry.timePercentVariancePercent, false);
-      popover.querySelector(prefix + '.count').innerHTML
-          = count(entry._count, false);
-      popover.querySelector(prefix + '.countVariance').innerHTML
-          = percent(entry.timeVariancePercent, false);
-      popover.querySelector(prefix + '.timeImpact').innerHTML
-          = ms(entry.getTimeImpact(false), false);
-      popover.querySelector(prefix + '.timePercentImpact').innerHTML
-          = percent(entry.getTimeImpactVariancePercent(false), false);
+      var node = (name) => popover.querySelector(prefix + name);
+      if (entry == undefined) {
+        node('.version').innerHTML = baselineVersion.name;
+        node('.time').innerHTML = '-';
+        node('.timeVariance').innerHTML = '-';
+        node('.percent').innerHTML = '-';
+        node('.percentVariance').innerHTML  = '-';
+        node('.count').innerHTML =  '-';
+        node('.countVariance').innerHTML = '-';
+        node('.timeImpact').innerHTML = '-';
+        node('.timePercentImpact').innerHTML = '-';
+      } else {
+        node('.version').innerHTML = entry.page.version.name;
+        node('.time').innerHTML = ms(entry._time, false);
+        node('.timeVariance').innerHTML
+            = percent(entry.timeVariancePercent, false);
+        node('.percent').innerHTML = percent(entry.timePercent, false);
+        node('.percentVariance').innerHTML 
+            = percent(entry.timePercentVariancePercent, false);
+        node('.count').innerHTML = count(entry._count, false);
+        node('.countVariance').innerHTML
+            = percent(entry.timeVariancePercent, false);
+        node('.timeImpact').innerHTML
+            = ms(entry.getTimeImpact(false), false);
+        node('.timePercentImpact').innerHTML
+            = percent(entry.getTimeImpactVariancePercent(false), false);
+      }
     }
 
-    // ========================================================================
+    // ===========================================================================
     // Helpers
     function $(id) {
       return document.getElementById(id)
@@ -648,25 +765,31 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
       node.className = classes.join(' ');
     }
 
-    function diffSign(value, showDiff) {
-      if (value <= 0 || showDiff === false) return '';
-      if (baselineVersion == undefined) return '';
-      return '+';
+    function diffSign(value, digits, unit, showDiff) {
+      if (showDiff === false || baselineVersion == undefined) {
+        return value.toFixed(digits) + unit;
+      }
+      return (value >= 0 ? '+' : '') + value.toFixed(digits) + unit + 'Δ';
     }
 
-    function ms(time, showDiff) {
-      return diffSign(time, showDiff) + time.toFixed(1) + 'ms';
+    function ms(value, showDiff) {
+      return diffSign(value, 1, 'ms', showDiff);
     }
 
-    function count(time, showDiff) {
-      return diffSign(time, showDiff) + time.toFixed(0) + '#';
+    function count(value, showDiff) {
+      return diffSign(value, 0, '#', showDiff);
     }
 
-    function percent(time, showDiff) {
-      return diffSign(time, showDiff) + time.toFixed(1) + '%';
+    function percent(value, showDiff) {
+      return diffSign(value, 1, '%', showDiff);
     }
-    // ========================================================================
+
+    // =========================================================================
     // EventHandlers
+    function handleBodyLoad() {
+      $('uploadInput').focus(); 
+    }
+
     function handleLoadFile() {
       var files = document.getElementById("uploadInput").files;
       var file = files[0];
@@ -747,7 +870,19 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
       showPopover(target.entry);
     }
 
-    // ========================================================================
+    function handleToggleVersionEnable(event) {
+      var version = this.version;
+      if (version === undefined) return;
+      version.enabled = this.checked;
+      initialize();
+      var page = selectedPage;
+      if (page === undefined || !page.version.enabled) {
+        page = versions.getEnabledPage(page.name);
+      }
+      showPage(page);
+    }
+
+    // ===========================================================================
 
     class Versions {
       constructor() {
@@ -759,6 +894,7 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
       pageVersions(name) {
         var result = [];
         this.versions.forEach((version) => {
+          if (!version.enabled) return;
           var page = version.get(name);
           if (page !== undefined) result.push(page);
         });
@@ -780,6 +916,14 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
           return 0
         })
       }
+      getEnabledPage(name) {
+        for (var i = 0; i < this.versions.length; i++) {
+          var version = this.versions[i];
+          if (!version.enabled) continue;
+          var page = version.get(name);
+          if (page !== undefined) return page;
+          }
+      }
     }
     Versions.fromJSON = function(json) {
       var versions = new Versions();
@@ -793,7 +937,8 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
     class Version {
       constructor(name) {
         this.name = name;
-        this.pages = []
+        this.enabled = true;
+        this.pages = [];
       }
       add(page) {
         this.pages.push(page);
@@ -844,10 +989,13 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
       }
       getTotalTimePercent(name, showDiff) {
         if (baselineVersion === undefined) {
-          return this.getTotalValue(name, 'timePercent');
+          // Return the overall average percent of the given entry name.
+          return this.getTotalValue(name, 'time') /
+            this.getTotalTime('Group-Total') * 100;
         }
-        var baselineValue = baselineVersion.getTotalTime(name);
-        return this.getTotalValue(name, 'time') / baselineValue  * 100;
+        // Otherwise return the difference to the sum of the baseline version.
+        var baselineValue = baselineVersion.getTotalTime(name, false);
+        return this.getTotalValue(name, '_time') / baselineValue  * 100;
       }
       getTotalTimeVariance(name, showDiff) {
         // Calculate the overall error for a given entry name
@@ -864,8 +1012,7 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
           this.getTotalTime(name, showDiff) * 100;
       }
       getTotalCount(name, showDiff) {
-        var property = showDiff === false ? '_count' : 'count';
-        return this.getTotalValue(name, property);
+        return this.getTotalValue(name, showDiff === false ? '_count' : 'count');
       }
       getPagesByPercentImpact(name) {
         var sortedPages =
@@ -877,12 +1024,20 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
         });
         return sortedPages;
       }
+      sort() {
+        this.pages.sort((a, b) => {
+          if (a.name > b.name) return 1;
+          if (a.name < b.name) return -1;
+          return 0
+        })
+      }
     }
     Version.fromJSON = function(name, data) {
       var version = new Version(name);
       for (var page in data) {
         version.add(Page.fromJSON(version, page, data[page]));
       }
+      version.sort();
       return version;
     }
 
@@ -932,8 +1087,7 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
         return this.versions.length
       }
       forEachSorted(referencePage, func) {
-        // Iterate over all the entries in the order they appear on the
-        // reference page.
+        // Iterate over all the entries in the order they appear on the reference page.
         referencePage.forEach((parent, referenceEntry) => {
           var entry;
           if (parent) parent = this.entryDict.get(parent.name);
@@ -962,6 +1116,9 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
       }
     }
     Page.fromJSON = function(version, name, data) {
+      if (name.indexOf('www.') == 0) {
+        name = name.substring(4);
+      }
       var page = new Page(version, name);
       for (var i = 0; i < data.length; i++) {
         page.add(Entry.fromJSON(i, data[data.length - i - 1]));
@@ -1007,8 +1164,9 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
         if (baselineVersion == undefined) return value;
         var baselineEntry = baselineVersion.getEntry(this);
         if (!baselineEntry) return value;
-        return (this._time - baselineEntry._time) /
-          this.page.total._time * 100;
+        if (baselineVersion === this.page.version) return value;
+        return (this._time - baselineEntry._time) / this.page.total._time *
+          100;
       }
       get timePercentVariancePercent() {
         // Get the absolute values for the percentages
@@ -1018,8 +1176,7 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
         return this.page.version.getTotalTime(this.name, showDiff);
       }
       getTimeImpactVariancePercent(showDiff) {
-        return this.page.version
-          .getTotalTimeVariancePercent(this.name, showDiff);
+        return this.page.version.getTotalTimeVariancePercent(this.name, showDiff);
       }
       getTimePercentImpact(showDiff) {
         return this.page.version.getTotalTimePercent(this.name, showDiff);
@@ -1065,8 +1222,8 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
           this.entries.forEach(fun);
           return;
         }
-        // If we have a baslineVersion to compare against show also all entries
-        // from the other group.
+        // If we have a baslineVersion to compare against show also all entries from the
+        // other group.
         var tmpEntries = baselineVersion.getEntry(this)
           .entries.filter((entry) => {
             return this.page.get(entry.name) == undefined
@@ -1115,7 +1272,7 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
 
     class UnclassifiedEntry extends GroupedEntry {
       constructor(page) {
-        super('Unclassified');
+        super('Runtime');
         this.page = page;
         this._time = undefined;
         this._count = undefined;
@@ -1154,7 +1311,7 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
   </script>
 </head>
 
-<body onmousemove="handleUpdatePopover(event)">
+<body onmousemove="handleUpdatePopover(event)" onload="handleBodyLoad()">
   <h1>Runtime Stats Komparator</h1>
 
   <div id="results">
@@ -1162,17 +1319,22 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
       <h2>Data</h2>
       <form name="fileForm">
         <p>
-          <input id="uploadInput" type="file" name="files" onchange="handleLoadFile();">
+          <input id="uploadInput" type="file" name="files" onchange="handleLoadFile();" accept=".json">
         </p>
       </form>
     </div>
+
     <div class="inline hidden">
       <h2>Result</h2>
-      <div class="compareSelector">
+      <div class="compareSelector inline">
         Compare against:&nbsp;<select id="baseline" onchange="handleSelectBaseline(this, event)"></select><br/>
         <span style="color: #060">Green</span> the selected version above performs
         better on this measurement.
       </div>
+      <div class="versionSelector inline">
+        Select Versions:
+        <ul></ul>
+      </div>
     </div>
     <div id="view">
     </div>
@@ -1180,7 +1342,7 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
     <div id="detailView" class="hidden">
       <h2></h2>
       <div class="versionDetail inline">
-        <h3><span></span></h3>
+        <h3>Version Comparison for <span></span></h3>
         <table class="versionDetailTable" onclick="handleSelectDetailRow(this, event);">
           <thead>
             <tr>
@@ -1195,7 +1357,7 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
         </table>
       </div>
       <div class="pageDetail inline">
-        <h3><span></span></h3>
+        <h3>Page Comparison for <span></span></h3>
         <table class="pageDetailTable" onclick="handleSelectDetailRow(this, event);">
           <thead>
             <tr>
@@ -1233,6 +1395,8 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
         </table>
       </div>
     </div>
+    <div id="pageGraphs" class="hidden">
+    </div>
 
     <div id="column" class="column">
       <div class="header">
@@ -1257,18 +1421,19 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
   <div class="inline">
     <h2>Usage</h2>
     <ol>
+      <li>Install scipy, e.g. <code>sudo aptitude install python-scipy</code>
       <li>Build chrome with the <a href="https://codereview.chromium.org/1923893002">extended runtime callstats</a>.</li>
-      <li>Run callstats.py with a web-page-replay archive:
-        <pre>./callstats.py run \
+      <li>Run <code>callstats.py</code> with a web-page-replay archive:
+        <pre>$V8_DIR/tools/callstats.py run \
         --replay-bin=$CHROME_SRC/third_party/webpagereplay/replay.py \
-        --replay-wpr=top25.wpr \
+        --replay-wpr=$INPUT_DIR/top25.wpr \
         --js-flags="" \
         --with-chrome=$CHROME_SRC/out/Release/chrome \
-        --sites-file=top25.json</pre>
+        --sites-file=$INPUT_DIR/top25.json</pre>
       </li>
-      <li>Move results file to a subdirectory: <code>mkdir $VERSION; mv *.txt $VERSION</code></li>
+      <li>Move results file to a subdirectory: <code>mkdir $VERSION_DIR; mv *.txt $VERSION_DIR</code></li>
       <li>Repeat from step 1 with a different configuration (e.g. <code>--js-flags="--nolazy"</code>).</li>
-      <li>Create the final results file: <code>./callstats.py json $VERSION1 $VERSION2 > result.json</code></li>
+      <li>Create the final results file: <code>./callstats.py json $VERSION_DIR1 $VERSION_DIR2 > result.json</code></li>
       <li>Use <code>results.json</code> on this site.</code>
     </ol>
   </div>