[include analysis] Some UI improvements
- Use 1-based rank numbers - Add comment about where the .js file comes from - Highlight the column used for sorting - Add filter field Bug: 1192087 Change-Id: Id6dceeace0a6716b16f0d0847b4fb0aebb9afaab Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2791481 Reviewed-by: Nico Weber <thakis@chromium.org> Commit-Queue: Hans Wennborg <hans@chromium.org> Cr-Commit-Position: refs/heads/master@{#867190}
This commit is contained in:

committed by
Chromium LUCI CQ

parent
d6e66d93a3
commit
7ec6250fdf
@ -3,7 +3,10 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Chrome #include Analysis</title>
|
||||
|
||||
<!--Generated by analyze_includes.py. Provides the 'data' object.-->
|
||||
<script src="include-analysis.js"></script>
|
||||
|
||||
<style>
|
||||
tr td { text-align: right; }
|
||||
tr td:nth-child(1) { text-align: left; }
|
||||
@ -11,6 +14,7 @@
|
||||
th a { text-decoration: none; }
|
||||
tbody tr:hover { background-color: #dddddd; }
|
||||
th { position: sticky; top: 0; background-color: #ffffff }
|
||||
th.highlighted { text-decoration: underline }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -34,15 +38,23 @@
|
||||
|
||||
<p>File size does not correlate perfectly with compile time, but generally serve as a rough guide to what files are slow to compile.</p>
|
||||
|
||||
|
||||
<p>
|
||||
<label for="filter">Filter:</label>
|
||||
<input type="text" id="filter" name="filter" size="20">
|
||||
<button onClick="buildTable()">Apply</button>
|
||||
(Filename regex)
|
||||
</p>
|
||||
|
||||
<table border="1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Filename <a href="javascript:sortOnFilename()">↑</a></th>
|
||||
<th colspan="2">Individual Size (B) <a href="javascript:sortOnISize()">↓</a></th>
|
||||
<th colspan="2">Expanded Size (B) <a href="javascript:sortOnTSize()">↓</a></th>
|
||||
<th colspan="2">Added Size (B) <a href="javascript:sortOnASize()">↓</a></th>
|
||||
<th colspan="2">Occurrences <a href="javascript:sortOnPrevalence()">↓</a></th>
|
||||
<th id="filename">Filename <a href="javascript:sortOnFilename()">↑</a></th>
|
||||
<th id="isize" colspan="2">Individual Size (B) <a href="javascript:sortOnISize()">↓</a></th>
|
||||
<th id="tsize" colspan="2">Expanded Size (B) <a href="javascript:sortOnTSize()">↓</a></th>
|
||||
<th id="asize" colspan="2">Added Size (B) <a href="javascript:sortOnASize()">↓</a></th>
|
||||
<th id="prevalence" colspan="2">Occurrences <a href="javascript:sortOnPrevalence()">↓</a></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -79,7 +91,7 @@ document.getElementById('totFileSize').textContent = fmt(totFileSize);
|
||||
function buildRow(i, rank) {
|
||||
return `
|
||||
<tr>
|
||||
<td>${rank}</td>
|
||||
<td>${rank + 1}</td>
|
||||
<td><a href="https://source.chromium.org/chromium/chromium/src/+/master:${data.files[i]}">${data.files[i]}</a></td>
|
||||
<td>${fmt(data.sizes[i])}</td> <td>${(100 * data.sizes[i] / totFileSize).toFixed(2)} %</td>
|
||||
<td>${fmt(data.tsizes[i])}</td> <td>${(100 * data.tsizes[i] / totBuildSize).toFixed(2)} %</td>
|
||||
@ -94,36 +106,62 @@ function clearTable() {
|
||||
tbody.parentNode.removeChild(tbody);
|
||||
}
|
||||
|
||||
function buildTable(sortFunc) {
|
||||
let sortFunc;
|
||||
|
||||
function buildTable() {
|
||||
clearTable();
|
||||
|
||||
let fileNums = [...Array(data.files.length).keys()];
|
||||
|
||||
const filter = document.getElementById('filter').value;
|
||||
if (filter !== '') {
|
||||
const re = new RegExp(filter);
|
||||
fileNums = fileNums.filter(i => data.files[i].match(re));
|
||||
}
|
||||
|
||||
fileNums.sort(sortFunc);
|
||||
|
||||
const limit = Math.min(1000, fileNums.length);
|
||||
fileNums = fileNums.slice(0, limit);
|
||||
|
||||
const tbody = document.createElement('tbody');
|
||||
tbody.innerHTML = fileNums.slice(0, limit).map(buildRow).join('');
|
||||
tbody.innerHTML = fileNums.map(buildRow).join('');
|
||||
document.querySelector('table').appendChild(tbody);
|
||||
}
|
||||
|
||||
function highlightTH(name) {
|
||||
document.querySelectorAll('th').forEach(th => th.classList.remove('highlighted'));
|
||||
document.getElementById(name).classList.add('highlighted');
|
||||
}
|
||||
|
||||
function sortOnFilename() {
|
||||
buildTable((i, j) => data.files[i].localeCompare(data.files[j]));
|
||||
highlightTH('filename');
|
||||
sortFunc = (i, j) => data.files[i].localeCompare(data.files[j]);
|
||||
buildTable();
|
||||
}
|
||||
|
||||
function sortOnISize() {
|
||||
buildTable((i, j) => data.sizes[j] - data.sizes[i]);
|
||||
highlightTH('isize');
|
||||
sortFunc = (i, j) => data.sizes[j] - data.sizes[i];
|
||||
buildTable();
|
||||
}
|
||||
|
||||
function sortOnTSize() {
|
||||
buildTable((i, j) => data.tsizes[j] - data.tsizes[i]);
|
||||
highlightTH('tsize');
|
||||
sortFunc = (i, j) => data.tsizes[j] - data.tsizes[i];
|
||||
buildTable();
|
||||
}
|
||||
|
||||
function sortOnASize() {
|
||||
buildTable((i, j) => data.asizes[j] - data.asizes[i]);
|
||||
highlightTH('asize');
|
||||
sortFunc = (i, j) => data.asizes[j] - data.asizes[i];
|
||||
buildTable();
|
||||
}
|
||||
|
||||
function sortOnPrevalence() {
|
||||
buildTable((i, j) => data.prevalence[j] - data.prevalence[i]);
|
||||
highlightTH('prevalence');
|
||||
sortFunc = (i, j) => data.prevalence[j] - data.prevalence[i];
|
||||
buildTable();
|
||||
}
|
||||
|
||||
sortOnASize();
|
||||
|
Reference in New Issue
Block a user