<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="profiler.js"></script>
<script src="chrome://resources/js/util.js"></script>
<style>
body {
font-family: sans-serif;
font-size: 80%;
}
/*
* The following styles are for a TABLE that uses a thin collapsed border, and
* has a blue heading. When you hover over rows, they turn yellow.
*/
table.results-table {
border-collapse:collapse;
}
table.results-table,
.results-table th,
.results-table td {
border: 1px solid #777;
padding-right: 4px;
padding-left: 4px;
}
.results-table th {
background: rgb(224,236,255);
}
.results-table tbody tr:hover {
background-color:#ffb;
}
/*
* Make the column headers change the mouse to a "hand" cursor, sine they are
* clickable.
*/
.results-table th {
cursor: pointer;
}
/*
* This is row which displays aggregate totals for each column.
*/
.results-table .aggregator-row {
background: #FFCC99;
}
/*
* This is the row at the end of tables which explains how many rows were shown,
* and how many were hidden.
*/
.results-table .truncation-row {
background: #eee;
}
/*---------------------------------------------------------------------------*/
/*
* When grouping data, the table for each bucket is wrapped in a DIV with this
* class. Used to add a bit of spacing between groups.
*/
.group-container {
margin-top: 2ex;
margin-bottom: 2ex;
}
/*
* The title for each group is enclosed in a DIV of the following class.
*/
.group-title-container {
font-size: 140%;
margin-bottom: 1ex;
}
/* Styling to make a span look like a clickable link */
.pseudo-link {
color: blue;
cursor: pointer;
text-decoration: underline;
}
.selected_snapshot {
font-weight: bold;
color: purple;
}
#snapshot-selection-summary {
margin-top: 1ex;
font-weight: bold;
font-style: italic;
color: green;
}
.errormsg {
color: red;
}
</style>
</head>
<body>
<b>Save:</b><button id=save-snapshots-button>Save</button>
<b>Restore:</b> <input type=file id=snapshot-file-loader>
<span id=file-load-error hidden class=errormsg></span>
<hr>
<table width=100%>
<tr>
<td>
<b>Group by: </b> <span id=group-by-container></span>
<b>Sort by: </b> <span id=sort-by-container></span>
</td>
<td align=right>
<span id=snapshots-link class=pseudo-link>[snapshots]</span>
<span id=edit-columns-link class=pseudo-link>[columns]</span>
<input type='search' incremental id='filter-search'>
</td>
</tr>
<tr id=edit-columns-row style='display:none'>
<td colspan=2>
<div>
<b>Merge: </b><span id=column-merge-toggles-container></span>
<label><input type=checkbox id='merge-similar-threads-checkbox' checked>
Merge similar threads.</label>
</div>
<div>
<b>Show: </b><span id=column-toggles-container></span>
</div>
</td>
</tr>
<tr id=snapshots-row style='display:none'>
<td colspan=2>
<button id=take-snapshot-button>Add snapshot</button>
<table><tbody id=snapshots-tbody></tbody></table>
<div id=snapshot-selection-summary></div>
</td>
</tr>
</table>
<hr>
<div id='results-div'></div>
<!-- TODO(eroman): This should only be a short-lived solution,
which will eventually be superceded by snapshotting -->
<span id=reset-data-link class=pseudo-link>[Reset tracking data]</span>
<a style="display: none" id="download-anchor" download="profile.json"></a>
</body>
</html>