isle/tools/reccmp/template.html

265 lines
7.1 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html>
<head>
<title>Decompilation Status</title>
<style>
body {
background: #202020;
color: #f0f0f0;
font-family: sans-serif;
}
h1 {
text-align: center;
}
.main {
width: 800px;
max-width: 100%;
margin: auto;
}
#search {
width: 100%;
box-sizing: border-box;
background: #303030;
color: #f0f0f0;
border: 1px #f0f0f0 solid;
padding: 0.5em;
border-radius: 0.5em;
}
#search::placeholder {
color: #b0b0b0;
}
#listing {
width: 100%;
border-collapse: collapse;
font-family: monospace;
}
.funcrow:hover {
background: #404040 !important;
}
.funcrow:nth-child(odd), #listing th {
background: #282828;
}
.funcrow:nth-child(even) {
background: #383838;
}
#listing td, #listing th {
border: 1px #f0f0f0 solid;
padding: 0.5em;
}
.diffneg {
color: #FF8080;
}
.diffpos {
color: #80FF80;
}
#sortind {
margin: 0 0.5em;
}
.filters {
font-size: 10pt;
text-align: center;
margin: 0.5em 0 1em 0;
}
</style>
<script>
var data = [/* INSERT DATA HERE */];
function formatAsm(asm) {
var lines = asm.split('\n');
for (var i = 0; i < lines.length; i++) {
var l = lines[i];
if (l.length > 0) {
if (l[0] == '-') {
lines[i] = '<span class="diffneg">' + l + '</span>';
} else if (l[0] == '+') {
lines[i] = '<span class="diffpos">' + l + '</span>';
}
}
}
return lines.join('<br>');
}
function rowClick() {
if (this.dataset.expanded === 'true') {
this.nextSibling.remove();
this.dataset.expanded = false;
} else {
var row = this.parentNode.insertBefore(document.createElement('tr'), this.nextSibling);
row.classList.add('diff');
var decCel = row.appendChild(document.createElement('td'));
decCel.colSpan = 3;
var diff = data[this.dataset.index].diff;
if (diff == '') {
diff = '<center><i>Identical function - no diff</i></center>';
} else {
diff = formatAsm(diff);
}
decCel.innerHTML = diff;
this.dataset.expanded = true;
}
}
function closeAllDiffs() {
const collection = document.getElementsByClassName("diff");
for (var ele of collection) {
ele.remove();
}
}
const filterOptions = { text: '', hidePerfect: false };
function filter() {
closeAllDiffs();
var ltext = filterOptions.text.toLowerCase();
const collection = document.getElementsByClassName("funcrow");
var searchCount = 0;
for (var ele of collection) {
var eledata = data[ele.dataset.index];
const textOk = (ltext == ''
|| eledata.address.toLowerCase().includes(ltext)
|| eledata.name.toLowerCase().includes(ltext));
const perfOk = (!filterOptions.hidePerfect || (eledata.matching < 1));
if (textOk && perfOk) {
ele.style.display = '';
searchCount++;
} else {
ele.style.display = 'none';
}
}
}
var lastSortedCol = -1;
var ascending = true;
function sortByColumn(column) {
closeAllDiffs();
if (column == lastSortedCol) {
ascending = !ascending;
}
lastSortedCol = column;
const collection = document.getElementsByClassName("funcrow");
var newOrder = [];
for (var ele of collection) {
var inserted = false;
for (var i = 0; i < newOrder.length; i++) {
var cmpEle = newOrder[i];
var ourCol = ele.childNodes[column];
var cmpCol = cmpEle.childNodes[column];
if ((cmpCol.dataset.value > ourCol.dataset.value) == ascending) {
newOrder.splice(i, 0, ele);
inserted = true;
break;
}
}
if (!inserted) {
newOrder.push(ele);
}
}
for (var i = 1; i < newOrder.length; i++) {
newOrder[i - 1].after(newOrder[i]);
}
var sortIndicator = document.getElementById('sortind');
if (!sortIndicator) {
sortIndicator = document.createElement('span');
sortIndicator.id = 'sortind';
}
sortIndicator.innerHTML = ascending ? '&#9650;' : '&#9660;';
var th = document.getElementById('listingheader').childNodes[column];
th.appendChild(sortIndicator);
}
document.addEventListener("DOMContentLoaded", () => {
var listing = document.getElementById('listing');
const headers = listing.getElementsByTagName('th');
var headerCount = 0;
for (const header of headers) {
header.addEventListener('click', function(){
sortByColumn(this.dataset.column, true);
});
header.dataset.column = headerCount;
headerCount++;
}
data.forEach((element, index) => {
var row = listing.appendChild(document.createElement('tr'));
var addrCel = row.appendChild(document.createElement('td'));
var nameCel = row.appendChild(document.createElement('td'));
var matchCel = row.appendChild(document.createElement('td'));
addrCel.innerHTML = addrCel.dataset.value = element.address;
nameCel.innerHTML = nameCel.dataset.value = element.name;
var effectiveNote = (element.matching == 1 && element.diff != '') ? '*' : '';
matchCel.innerHTML = (element.matching * 100).toFixed(2) + '%' + effectiveNote;
matchCel.dataset.value = element.matching;
row.classList.add('funcrow');
row.addEventListener('click', rowClick);
row.dataset.index = index;
row.dataset.expanded = false;
});
var search = document.getElementById('search');
search.addEventListener('input', function (evt) {
filterOptions.text = search.value;
filter();
});
const cbHidePerfect = document.getElementById('cbHidePerfect');
cbHidePerfect.addEventListener('change', evt => {
filterOptions.hidePerfect = evt.target.checked;
filter();
})
sortByColumn(0);
});
</script>
</head>
<body>
<div class="main">
<h1>Decompilation Status</h1>
<input id="search" type="search" placeholder="Search for offset or function name...">
<div class="filters">
<label for="cbHidePerfect">Hide 100% match</label>
<input type="checkbox" id="cbHidePerfect" />
</div>
<table id="listing">
<tr id='listingheader'><th style='width: 20%'>Address</th><th style="width:60%">Name</th><th style='width: 20%'>Matching</th></tr>
</table>
</div>
</body>
</html>