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> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Chrome #include Analysis</title> <title>Chrome #include Analysis</title>
<!--Generated by analyze_includes.py. Provides the 'data' object.-->
<script src="include-analysis.js"></script> <script src="include-analysis.js"></script>
<style> <style>
tr td { text-align: right; } tr td { text-align: right; }
tr td:nth-child(1) { text-align: left; } tr td:nth-child(1) { text-align: left; }
@@ -11,6 +14,7 @@
th a { text-decoration: none; } th a { text-decoration: none; }
tbody tr:hover { background-color: #dddddd; } tbody tr:hover { background-color: #dddddd; }
th { position: sticky; top: 0; background-color: #ffffff } th { position: sticky; top: 0; background-color: #ffffff }
th.highlighted { text-decoration: underline }
</style> </style>
</head> </head>
<body> <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>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"> <table border="1">
<thead> <thead>
<tr> <tr>
<th>#</th> <th>#</th>
<th>Filename <a href="javascript:sortOnFilename()">&uarr;</a></th> <th id="filename">Filename <a href="javascript:sortOnFilename()">&uarr;</a></th>
<th colspan="2">Individual Size (B) <a href="javascript:sortOnISize()">&darr;</a></th> <th id="isize" 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 id="tsize" 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 id="asize" 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="prevalence" colspan="2">Occurrences <a href="javascript:sortOnPrevalence()">&darr;</a></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -79,7 +91,7 @@ document.getElementById('totFileSize').textContent = fmt(totFileSize);
function buildRow(i, rank) { function buildRow(i, rank) {
return ` return `
<tr> <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><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.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> <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); tbody.parentNode.removeChild(tbody);
} }
function buildTable(sortFunc) { let sortFunc;
function buildTable() {
clearTable(); clearTable();
let fileNums = [...Array(data.files.length).keys()]; 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); fileNums.sort(sortFunc);
const limit = Math.min(1000, fileNums.length); const limit = Math.min(1000, fileNums.length);
fileNums = fileNums.slice(0, limit);
const tbody = document.createElement('tbody'); 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); 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() { 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() { 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() { 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() { 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() { function sortOnPrevalence() {
buildTable((i, j) => data.prevalence[j] - data.prevalence[i]); highlightTH('prevalence');
sortFunc = (i, j) => data.prevalence[j] - data.prevalence[i];
buildTable();
} }
sortOnASize(); sortOnASize();