[tools] Even more HeapStats improvements

- Add B/KiB/MiB units to histograms
- Auto select fileReader to open dialog when pressing enter

Bug: v8:7266
Change-Id: I6fa56d2fa112f6ddbd541304cd26a1f6bd9322ce
No-Try: true
Reviewed-on: https://chromium-review.googlesource.com/946128Reviewed-by: Michael Lippautz <mlippautz@chromium.org>
Commit-Queue: Camillo Bruni <cbruni@chromium.org>
Cr-Commit-Position: refs/heads/master@{#51693}

tools/heap-stats/histogram-viewer.js

@@ -93,6 +93,17 @@ class HistogramViewer extends HTMLElement {
         0);
   }
 
+  formatBytes(bytes) {
+    const units = ['B', 'KiB', 'MiB'];
+    const divisor = 1024;
+    let index = 0;
+    while (index < units.length && bytes >= divisor) {
+      index++;
+      bytes /= divisor;
+    }
+    return bytes + units[index];
+  }
+
   getCategoryData() {
     const labels = [
       'Bucket',
@@ -101,7 +112,7 @@ class HistogramViewer extends HTMLElement {
     ];
     const data = this.selectedData.bucket_sizes.map(
         (bucket_size, index) =>
-            [`<${bucket_size}`,
+            [`<${this.formatBytes(bucket_size)}`,
              ...Object.values(this.selection.categories)
                  .map(
                      instance_types =>
@@ -141,6 +152,10 @@ class HistogramViewer extends HTMLElement {
       legend: {position: 'top', maxLines: '1'},
       chartArea: {width: '85%', height: '85%'},
       bar: {groupWidth: '80%'},
+      hAxis: {
+        title: 'Count',
+        minValue: 0
+      },
       explorer: {},
     };
     const chart = new google.visualization.BarChart(this.$('#chart'));

tools/heap-stats/trace-file-reader.html

@@ -62,15 +62,15 @@ found in the LICENSE file. -->
 @keyframes spin {
   0% {
     transform: rotate(0deg);
-  }
+ };
   100% {
     transform: rotate(360deg);
-  }
+  };
 }
 </style>
 
 <section id="fileReaderSection">
-  <div id="fileReader">
+  <div id="fileReader" tabindex=1 >
     <span id="label">
       Drag and drop a trace file into this area, or click to choose from disk.
      </span>

tools/heap-stats/trace-file-reader.js

@@ -17,6 +17,7 @@ class TraceFileReader extends HTMLElement {
     this.addEventListener('dragover', e => this.handleDragOver(e));
     this.addEventListener('drop', e => this.handleChange(e));
     this.$('#file').addEventListener('change', e => this.handleChange(e));
+    this.$('#fileReader').addEventListener('keydown', e => this.handleKeyEvent(e));
   }
 
   $(id) {
@@ -31,6 +32,10 @@ class TraceFileReader extends HTMLElement {
     this.$('#label').innerText = text;
   }
 
+  handleKeyEvent(event) {
+    if (event.key == "Enter") this.handleClick(event);
+  }
+
   handleClick(event) {
     this.$('#file').click();
   }
@@ -46,13 +51,16 @@ class TraceFileReader extends HTMLElement {
     event.preventDefault();
   }
 
-  connectedCallback() {}
+  connectedCallback() {
+    this.$('#fileReader').focus();
+  }
 
   readFile(file) {
     if (!file) {
       this.updateLabel('Failed to load file.');
       return;
     }
+    this.$('#fileReader').blur();
 
     this.section.className = 'loading';
     const reader = new FileReader();