v8/tools/system-analyzer/ic-panel-template.html
Zeynep Cankara c3c4830da6 [tools][system-analyzer] Change colors and layout
This CL changes colors of map panel
and layout of IC panel legend for organize
UI better.

Bug: v8:10673, v8:10644

Change-Id: Iead0a82fcdae09a9368d30b493565615e24dcc2e
Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2301932
Reviewed-by: Sathya Gunasekaran  <gsathya@chromium.org>
Commit-Queue: Zeynep Cankara <zcankara@google.com>
Cr-Commit-Position: refs/heads/master@{#68911}
2020-07-17 10:49:18 +00:00

91 lines
1.7 KiB
HTML

<!-- 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>
@import "./index.css";
.count {
text-align: right;
width: 5em;
}
.percentage {
text-align: right;
width: 5em;
}
.key {
padding-left: 1em;
}
.drilldown-group-title {
font-weight: bold;
padding: 0.5em 0 0.2em 0;
}
.entry-details {
}
.entry-details TD {
}
.details {
width: 0.1em;
}
.details span {
padding: 0 0.4em 0 0.4em;
background-color: var(--on-surface-color);
color: var(--surface-color);
border-radius: 25px;
text-align: center;
cursor: -webkit-zoom-in;
}
#legend {
padding-right: 20px;
}
</style>
<div class="panel">
<h2>IC Panel</h2>
<h3>IC Explorer</h3>
<div id="legend">
<dl style="float:right; border-style: solid; border-width: 1px; padding:20px">
<dt>0</dt>
<dd>uninitialized</dd>
<dt>X</dt>
<dd>no feedback</dd>
<dt>1</dt>
<dd>monomorphic</dd>
<dt>^</dt>
<dd>recompute handler</dd>
<dt>P</dt>
<dd>polymorphic</dd>
<dt>N</dt>
<dd>megamorphic</dd>
<dt>G</dt>
<dd>generic</dd>
</dl>
</div>
<h3>Data</h3>
<p>Trace Count: <span id="count">0</span></p>
<h3>Result</h3>
<p>
Group-Key:
<select id="group-key"></select>
</p>
<p>
Filter by Time
<br></br>
<input type="search" id="filter-time-start" placeholder="start"></input> : <input type="search" id="filter-time-end" placeholder="end"></input>
<button id="filterICTimeBtn">Filter</button>
<p>
<table id="table" width="100%">
<tbody id="table-body">
</tbody>
</table>
</p>
</div>