[tools] Improve heap-stats

- Add button to select top-10 instance types per category
- Right align category selection buttons
- Lazily draw the graph for snappier UI
- Pre-init instance variables in details-selection

Change-Id: I61ea80d523c49215b9d418e66698a12cbc050316
No-Presubmit: true
No-Tree-Checks: true
No-Try: true
Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2210681
Commit-Queue: Camillo Bruni <cbruni@chromium.org>
Reviewed-by: Sathya Gunasekaran  <gsathya@chromium.org>
Cr-Commit-Position: refs/heads/master@{#67950}

tools/heap-stats/details-selection-template.html

@@ -86,6 +86,17 @@ found in the LICENSE file. -->
   width: 50px;
 }
 
+.categorySelectionButtons {
+  float: right;
+}
+.categoryLabels {
+  float: left;
+  min-wdith: 200px;
+}
+.categoryContent {
+  clear: both;
+}
+
 </style>
 <section id="dataSelectionSection">
   <h2>Data selection</h2>

tools/heap-stats/details-selection.js

@@ -30,6 +30,8 @@ defineCustomElement('details-selection', (templateText) =>
         .addEventListener('click', e => this.filterCurrentSelection(e));
     this.$('#category-auto-filter-btn')
         .addEventListener('click', e => this.filterTop20Categories(e));
+    this._data = undefined;
+    this.selection = undefined;
   }
 
   connectedCallback() {
@@ -38,6 +40,14 @@ defineCustomElement('details-selection', (templateText) =>
     }
   }
 
+  dataChanged() {
+    this.selection = {categories: {}};
+    this.resetUI(true);
+    this.populateIsolateSelect();
+    this.handleIsolateChange();
+    this.$('#dataSelectionSection').style.display = 'block';
+  }
+
   set data(value) {
     this._data = value;
     this.dataChanged();
@@ -85,45 +95,60 @@ defineCustomElement('details-selection', (templateText) =>
     const div = document.createElement('div');
     div.id = name;
     div.classList.add('box');
-    const ul = document.createElement('ul');
+
+    let ul = document.createElement('ul');
+    ul.className = 'categoryLabels'
+    {
+      const name_li = document.createElement('li');
+      name_li.textContent = CATEGORY_NAMES.get(name);
+      ul.appendChild(name_li);
+
+      const percent_li = document.createElement('li');
+      percent_li.textContent = '0%';
+      percent_li.id = name + 'PercentContent';
+      ul.appendChild(percent_li);
+    }
     div.appendChild(ul);
-    const name_li = document.createElement('li');
+
-    ul.appendChild(name_li);
+    ul = document.createElement('ul');
-    name_li.innerHTML = CATEGORY_NAMES.get(name);
+    ul.className = 'categorySelectionButtons'
-    const percent_li = document.createElement('li');
+    {
-    ul.appendChild(percent_li);
+      const all_li = document.createElement('li');
-    percent_li.innerHTML = '0%';
+      const all_button = document.createElement('button');
-    percent_li.id = name + 'PercentContent';
+      all_button.textContent = 'All';
-    const all_li = document.createElement('li');
+      all_button.addEventListener('click', e => this.selectCategory(name));
-    ul.appendChild(all_li);
+      all_li.appendChild(all_button);
-    const all_button = document.createElement('button');
+      ul.appendChild(all_li);
-    all_li.appendChild(all_button);
+
-    all_button.innerHTML = 'All';
+      const top_li = document.createElement('li');
-    all_button.addEventListener('click', e => this.selectCategory(name));
+      const top_button = document.createElement('button');
-    const none_li = document.createElement('li');
+      top_button.textContent = 'Top 10';
-    ul.appendChild(none_li);
+      top_button.addEventListener(
-    const none_button = document.createElement('button');
+          'click', e => this.selectCategoryTopEntries(name));
-    none_li.appendChild(none_button);
+      top_li.appendChild(top_button);
-    none_button.innerHTML = 'None';
+      ul.appendChild(top_li);
-    none_button.addEventListener('click', e => this.unselectCategory(name));
+
+      const none_li = document.createElement('li');
+      const none_button = document.createElement('button');
+      none_button.textContent = 'None';
+      none_button.addEventListener('click', e => this.unselectCategory(name));
+      none_li.appendChild(none_button);
+      ul.appendChild(none_li);
+    }
+    div.appendChild(ul);
+
     const innerDiv = document.createElement('div');
-    div.appendChild(innerDiv);
     innerDiv.id = name + 'Content';
+    innerDiv.className = 'categoryContent';
+    div.appendChild(innerDiv);
+
     const percentDiv = document.createElement('div');
-    div.appendChild(percentDiv);
     percentDiv.className = 'percentBackground';
     percentDiv.id = name + 'PercentBackground';
+    div.appendChild(percentDiv);
     return div;
   }
 
-  dataChanged() {
-    this.selection = {categories: {}};
-    this.resetUI(true);
-    this.populateIsolateSelect();
-    this.handleIsolateChange();
-    this.$('#dataSelectionSection').style.display = 'block';
-  }
-
   populateIsolateSelect() {
     let isolates = Object.entries(this.data);
     // Sorty by peak heap memory consumption.
@@ -259,7 +284,7 @@ defineCustomElement('details-selection', (templateText) =>
     });
     Object.entries(overalls).forEach(([category, category_overall]) => {
       let percents = category_overall / overall * 100;
-      this.$(`#${category}PercentContent`).innerHTML =
+      this.$(`#${category}PercentContent`).textContent =
           `${percents.toFixed(1)}%`;
       this.$('#' + category + 'PercentBackground').style.left = percents + '%';
     });
@@ -324,7 +349,7 @@ defineCustomElement('details-selection', (templateText) =>
 
   populateCategories() {
     this.clearCategories();
-    const categories = {};
+    const categories = {__proto__:null};
     for (let cat of CATEGORIES.keys()) {
       categories[cat] = [];
     }
@@ -354,6 +379,23 @@ defineCustomElement('details-selection', (templateText) =>
     this.notifySelectionChanged();
   }
 
+  selectCategoryTopEntries(category) {
+    // unselect all checkboxes in this category.
+    this.querySelectorAll('input[name=' + category + 'Checkbox]')
+        .forEach(checkbox => checkbox.checked = false);
+    const data = this.selectedData.instance_type_data;
+
+    // Get the max values for instance_types in this category
+    const categoryInstanceTypes = Array.from(CATEGORIES.get(category));
+    categoryInstanceTypes.filter(each => each in data)
+      .sort((a,b) => {
+        return data[b].overall - data[a].overall;
+      }).slice(0, 10).forEach((category) => {
+        this.$('#' + category + 'Checkbox').checked = true;
+      });
+    this.notifySelectionChanged();
+  }
+
   createCheckBox(instance_type, category) {
     const div = document.createElement('div');
     div.classList.add('instanceTypeSelectBox');

tools/heap-stats/global-timeline.js

@@ -209,6 +209,10 @@ defineCustomElement('global-timeline', (templateText) =>
   }
 
   drawChart() {
+    setTimeout(() => this._drawChart(), 10);
+  }
+
+  _drawChart() {
     console.assert(this.data, 'invalid data');
     console.assert(this.selection, 'invalid selection');