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

<!-- Copyright 2018 the V8 project authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->
<template id="details-selection-template">
<style>
#dataSelectionSection {
  display: none;
}

.box {
  border-left: dashed 1px #666666;
  border-right: dashed 1px #666666;
  border-bottom: dashed 1px #666666;
  padding: 10px;
  overflow: hidden;
}

.box:nth-of-type(1) {
  border-top: dashed 1px #666666;
  border-radius: 5px 5px 0px 0px;
}

.box:last-of-type {
    border-radius: 0px 0px 5px 5px;
}

.box > ul {
  margin: 0px;
  padding: 0px;
}

.box > ul > li {
  display: inline-block;
}

.box > ul > li:not(:first-child) {
  margin-left: 10px;
}

.box > ul > li:first-child {
  font-weight: bold;
}

.boxDiv {
  padding: 0px 5px 2px 0px;
  float: left;
  margin: 3px;
}

.percent100 {
  background: linear-gradient(70deg, #9cf 100%, #e0edfe 100%)
}
.percent90 {
  background: linear-gradient(70deg, #9cf 90%, #e0edfe 90%)
}
.percent80 {
  background: linear-gradient(70deg, #9cf 80%, #e0edfe 80%)
}
.percent70 {
  background: linear-gradient(70deg, #9cf 70%, #e0edfe 70%)
}
.percent60 {
  background: linear-gradient(70deg, #9cf 60%, #e0edfe 60%)
}
.percent50 {
  background: linear-gradient(70deg, #9cf 50%, #e0edfe 50%)
}
.percent40 {
  background: linear-gradient(70deg, #9cf 40%, #e0edfe 40%)
}
.percent30 {
  background: linear-gradient(70deg, #9cf 30%, #e0edfe 30%)
}
.percent20 {
  background: linear-gradient(70deg, #9cf 20%, #e0edfe 20%)
}
.percent10 {
  background: linear-gradient(70deg, #9cf 10%, #e0edfe 10%)
}
.percent0 {
  background: linear-gradient(70deg, #9cf 0%, #e0edfe 0%)
}

.boxDiv > label {
  font-size: xx-small;
}

#categories {
  margin-top: 10px;
}

#category-filter {
  text-align: right;
  width: 50px;
}

</style>
<section id="dataSelectionSection">
  <h2>Data selection</h2>
  <ul>
    <li>
      <label for="isolate-select">
        Isolate
      </label>
      <select id="isolate-select">
        <option>No data</option>
      </select>
    </li>
    <li>
      <label for="dataset-select">
        Data set
      </label>
      <select id="dataset-select">
        <option>No data</option>
      </select>
    </li>
    <li>
      <input type="checkbox" id="merge-categories" checked=checked />
      <label for="merge-categories">
        Merge categories
      </label>
    </li>
    <li>
      <label for="gc-select">
        Garbage collection (at a specific time in ms)
      </label>
      <select id="gc-select">
        <option>No data</option>
      </select>
    </li>
    <li>
      <input id="category-filter" type="text" value="0" disabled="disabled" />KB
      <button id="category-filter-btn" disabled="disabled">
        Filter categories with less memory
      </button>
      <button id="category-auto-filter-btn" disabled="disabled">
        Show top 20 categories only
      </button>
    </li>
    <li>
      <button id="csv-export-btn" disabled="disabled">Export selection as CSV</button>
    </li>
  </ul>

  <div id="categories"></div>
</section>
</template>

<script type="text/javascript" src="categories.js"></script>
<script type="text/javascript" src="details-selection.js"></script>