1 files changed, 22 insertions, 15 deletions
diff --git a/deps/v8/tools/heap-stats/index.html b/deps/v8/tools/heap-stats/index.html
index 3c2e62b6d0..3762502201 100644
--- a/deps/v8/tools/heap-stats/index.html
+++ b/deps/v8/tools/heap-stats/index.html
@@ -8,15 +8,20 @@ found in the LICENSE file. -->
 <head>
   <meta charset="UTF-8">
   <title>V8 Heap Statistics</title>
-  <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
-  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+  <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
+  <script
+          src="https://www.gstatic.com/charts/loader.js"></script>
+  <script
+          src="https://cdnjs.cloudflare.com/ajax/libs/pako/1.0.6/pako_inflate.min.js"
+          integrity="sha256-N1z6ddQzX83fjw8v7uSNe7/MgOmMKdwFUv1+AJMDqNM="
+          crossorigin="anonymous"></script>
 
   <link rel="import" href="details-selection.html">
   <link rel="import" href="global-timeline.html">
+  <link rel="import" href="histogram-viewer.html">
   <link rel="import" href="trace-file-reader.html">
 
-  <style type="text/css">
-
+  <style>
 body {
   font-family: 'Roboto', sans-serif;
   margin-left: 5%;
@@ -24,11 +29,11 @@ body {
 }
 
   </style>
-  <script type="text/javascript">
+  <script>
 
 'use strict';
 
-google.charts.load('current', {'packages':['line', 'corechart']});
+google.charts.load('current', {'packages':['line', 'corechart', 'bar']});
 
 function $(id) { return document.querySelector(id); }
 
@@ -47,15 +52,16 @@ function globalDataChanged(e) {
   state.selection = null;
   $('#global-timeline').selection = state.selection;
   $('#global-timeline').data = state.data;
-  $('#type-details').selection = state.selection;
-  $('#type-details').data = state.data;
+  $('#histogram-viewer').selection = state.selection;
+  $('#histogram-viewer').data = state.data;
   $('#details-selection').data = state.data;
 }
 
 function globalSelectionChangedA(e) {
   state.selection = e.detail;
+  console.log(state.selection);
   $('#global-timeline').selection = state.selection;
-  $('#type-details').selection = state.selection;
+  $('#histogram-viewer').selection = state.selection;
 }
 
   </script>
@@ -63,16 +69,20 @@ function globalSelectionChangedA(e) {
 
 <body>
   <trace-file-reader onchange="globalDataChanged(event)"></trace-file-reader>
+
+  <details-selection id="details-selection" onchange="globalSelectionChangedA(event)"></details-selection>
+  <global-timeline id="global-timeline"></global-timeline>
+  <histogram-viewer id="histogram-viewer"></histogram-viewer>
+
   <h1>V8 Heap Statistics</h1>
   <p>Visualize object statistics that have been gathered using</p>
   <ul>
-    <li><code>--trace-gc-object-stats on V8</code></li>
+    <li><code>--trace-gc-object-stats</code> on V8</li>
     <li>
       <a
         href="https://www.chromium.org/developers/how-tos/trace-event-profiling-tool">Chrome's
         tracing infrastructure</a> collecting data for the category
-      <code>v8.gc_stats</code>. The trace file needs to be unpacked (e.g. using
-      <code>gunzip</code>).
+      <code>v8.gc_stats</code>.
     </li>
   </ul>
   <p>
@@ -80,9 +90,6 @@ function globalSelectionChangedA(e) {
     requiring <a
          href="https://en.wikipedia.org/wiki/Cross-origin_resource_sharing">CORS</a>.
   </p>
-  <details-selection id="details-selection" onchange="globalSelectionChangedA(event)"></details-selection>
-  <global-timeline id="global-timeline"></global-timeline>
-  <type-details id="type-details"></type-details>
 </body>
 
 </html>