<!-- Copyright 2020 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. --> <style> #dataSelectionSection { display: none; } .box { border-left: dashed 1px #666666; border-right: dashed 1px #666666; border-bottom: dashed 1px #666666; padding: 10px; overflow: hidden; position: relative; } .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; } .zonesSelectBox { position: relative; overflow: hidden; float: left; padding: 0px 5px 2px 0px; margin: 3px; border-radius: 3px; } .zonesSelectBox > label { font-size: xx-small; } .zonesSelectBox > input { vertical-align: middle; } .percentBackground { position: absolute; width: 200%; height: 100%; left: 0%; top: 0px; margin-left: -100%; transition: all 1s ease-in-out; } .zonesSelectBox > .percentBackground { background: linear-gradient(90deg, #68b0f7 50%, #b3d9ff 50%); z-index: -1; } .box > .percentBackground { background: linear-gradient(90deg, #e0edfe 50%, #fff 50%); z-index: -2; } #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="data-view-select"> Data view </label> <select id="data-view-select"> <option>No data</option> </select> </li> <li> <label for="show-totals-select"> Show total allocated/used zone memory </label> <input type="checkbox" id="show-totals-select" checked> </li> <li> <label for="data-kind-select"> Data kind </label> <select id="data-kind-select"> <option>No data</option> </select> </li> <li> <label for="time-start-select"> Time start </label> <input type="number" id="time-start-select" value="0">ms</input> </li> <li> <label for="time-end-select"> Time end </label> <input type="number" id="time-end-select" value="0">ms</input> </li> <li> <label for="memory-usage-sample-select"> Memory usage sample (at a specific time in ms) </label> <select id="memory-usage-sample-select"> <option>No data</option> </select> </li> </ul> <div id="categories"></div> </section>