<!-- Copyright 2022 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. --> <head> <link href="./index.css" rel="stylesheet"> <style> :host { --flame-category-width: 40px; } .panelBody { display: flex; flex-direction: column; } #overview { flex: 0 0 25px; } .tableContainer { position: relative; overflow-y: scroll; flex-grow: 1; } #flameChart { --height: 400px; flex: 0 0 var(--height); height: var(--height); width: 100%; position: relative; overflow: scroll; } #table thead { position: sticky; top: 0px; background-color: var(--surface-color); } #flameChart div { position: absolute; font-size: 8px; line-height: 10px; vertical-align: middle; } #flameChartFlames div { height: 10px; border: 1px var(--border-color) solid; font-family: var(--code-font); color: var(--on-primary-color); overflow: hidden; text-align: left; } #flameChartFlames div:hover { border: 1px var(--background-color) solid; } #flameChart > div { box-sizing: border-box; overflow: visible; color: var(--on-surface-color); padding-right: 5px; text-align: right; } #flameChartSelected, #flameChartIn, #flameChartOut { width: var(--flame-category-width); } #flameChartIn { /* bottom-right align the text */ display: flex; justify-content: flex-end; align-items: flex-end; } #flameChartFlames { top: 0xp; left: var(--flame-category-width); } #table .r { text-align: right; } /* SVG */ .fsIn { background-color: bisque; } .fsOut { background-color: lightblue; } .fsMain { background-color: var(--primary-color); } </style> </head> <div class="panel"> <input type="checkbox" id="closer" class="panelCloserInput" checked> <label class="panelCloserLabel" for="closer">▼</label> <h2>Profiler</h2> <div class="selection"> <input type="radio" id="show-all" name="selectionType" value="all"> <label for="show-all">All</label> <input type="radio" id="show-timerange" name="selectionType" value="timerange"> <label for="show-timerange">Time Range</label> <input type="radio" id="show-selection" name="selectionType" value="selection"> <label for="show-selection">Last Selection</label> </div> <div id="body" class="panelBody"> <timeline-overview id="overview"></timeline-overview> <div class="tableContainer"> <table id="table"> <thead> <tr> <td colspan="2">Self</td> <td colspan="2">Total</td> <td></td> <td>Type</td> <td>Name</td> <td>SourcePostion</td> </tr> </thead> <tbody> </tbody> </table> </div> <div id="flameChart"> <div id="flameChartIn">IN↧</div> <div id="flameChartSelected">Pivot</div> <div id="flameChartOut">OUT↧</div> <div id="flameChartFlames"></div> </div> </div> </div>