0

[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:
Hans Wennborg
2021-03-29 14:29:25 +00:00
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()">&uarr;</a></th>
<th colspan="2">Individual Size (B) <a href="javascript:sortOnISize()">&darr;</a></th>
<th colspan="2">Expanded Size (B) <a href="javascript:sortOnTSize()">&darr;</a></th>
<th colspan="2">Added Size (B) <a href="javascript:sortOnASize()">&darr;</a></th>
<th colspan="2">Occurrences <a href="javascript:sortOnPrevalence()">&darr;</a></th>
<th id="filename">Filename <a href="javascript:sortOnFilename()">&uarr;</a></th>
<th id="isize" colspan="2">Individual Size (B) <a href="javascript:sortOnISize()">&darr;</a></th>
<th id="tsize" colspan="2">Expanded Size (B) <a href="javascript:sortOnTSize()">&darr;</a></th>
<th id="asize" colspan="2">Added Size (B) <a href="javascript:sortOnASize()">&darr;</a></th>
<th id="prevalence" colspan="2">Occurrences <a href="javascript:sortOnPrevalence()">&darr;</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)}&nbsp;%</td>
<td>${fmt(data.tsizes[i])}</td> <td>${(100 * data.tsizes[i] / totBuildSize).toFixed(2)}&nbsp;%</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();