[object-stats] Visualizer: Allow filtering categories by used memory

Tbr: ulan@chromium.org
No-try: true
Bug: v8:7266
Change-Id: Ia0965fa085d8d92b65a9353174e123337dc1ef6b
Reviewed-on: https://chromium-review.googlesource.com/888585Reviewed-by: Michael Lippautz <mlippautz@chromium.org>
Commit-Queue: Michael Lippautz <mlippautz@chromium.org>
Cr-Commit-Position: refs/heads/master@{#50908}

tools/heap-stats/details-selection.html

@@ -49,6 +49,12 @@ found in the LICENSE file. -->
 #categories {
   margin-top: 10px;
 }
+
+#category-filter {
+  text-align: right;
+  width: 50px;
+}
+
 </style>
 <h2>Data selection</h2>
 <ul>
@@ -83,7 +89,11 @@ found in the LICENSE file. -->
     </select>
   </li>
   <li>
-    <button id="csv-export" disabled="disabled">Export selection as CSV</button>
+    <input id="category-filter" type="text" value="0" disabled="disabled" />KB
+    <button id="category-filter-btn" disabled="disabled">Filter categories with less memory</button>
+  </li>
+  <li>
+    <button id="csv-export-btn" disabled="disabled">Export selection as CSV</button>
   </li>
 </ul>
 

tools/heap-stats/details-selection.js

@@ -19,10 +19,12 @@ class DetailsSelection extends HTMLElement {
         'change', e => this.notifySelectionChanged(e));
     this.gcSelect.addEventListener(
         'change', e => this.notifySelectionChanged(e));
-    this.$('#csv-export')
+    this.$('#csv-export-btn')
         .addEventListener('click', e => this.exportCurrentSelection(e));
     this.$('#merge-categories')
         .addEventListener('change', e => this.notifySelectionChanged(e));
+    this.$('#category-filter-btn')
+        .addEventListener('click', e => this.filterCurrentSeclection(e));
   }
 
   connectedCallback() {
@@ -108,7 +110,9 @@ class DetailsSelection extends HTMLElement {
     removeAllChildren(this.datasetSelect);
     removeAllChildren(this.gcSelect);
     this.clearCategories();
-    this.$('#csv-export').disabled = 'disabled';
+    this.$('#csv-export-btn').disabled = 'disabled';
+    this.$('#category-filter-btn').disabled = 'disabled';
+    this.$('#category-filter').disabled = 'disabled';
   }
 
   handleIsolateChange(e) {
@@ -141,12 +145,29 @@ class DetailsSelection extends HTMLElement {
     this.selection.data_set = this.datasetSelect.value;
     this.selection.merge_categories = this.$('#merge-categories').checked;
     this.selection.gc = this.gcSelect.value;
-    this.$('#csv-export').disabled = false;
+    this.$('#csv-export-btn').disabled = false;
+    this.$('#category-filter-btn').disabled = false;
+    this.$('#category-filter').disabled = false;
     this.updatePercentagesInCategory();
     this.dispatchEvent(new CustomEvent(
         'change', {bubbles: true, composed: true, detail: this.selection}));
   }
 
+  filterCurrentSeclection(e) {
+    const filter_value = this.$('#category-filter').value * KB;
+    if (filter_value === 0) return;
+
+    this.selection.category_names.forEach((_, category) => {
+      for (let checkbox of this.shadowRoot.querySelectorAll(
+               'input[name=' + category + 'Checkbox]')) {
+        checkbox.checked =
+            this.selectedData.instance_type_data[checkbox.instance_type]
+                .overall > filter_value;
+      }
+    });
+    this.notifySelectionChanged();
+  }
+
   updatePercentagesInCategory() {
     const overalls = {};
     let overall = 0;
@@ -257,6 +278,7 @@ class DetailsSelection extends HTMLElement {
     input.name = category + 'Checkbox';
     input.checked = 'checked';
     input.id = instance_type + 'Checkbox';
+    input.instance_type = instance_type;
     input.value = instance_type;
     input.addEventListener('change', e => this.notifySelectionChanged(e));
     const label = document.createElement('label');