mirror of
https://github.com/isledecomp/isle-portable.git
synced 2024-11-26 17:36:12 -05:00
241 lines
6.3 KiB
HTML
241 lines
6.3 KiB
HTML
|
<!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;
|
||
|
|
}
|
||
|
|
</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();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function filter(text) {
|
||
|
|
closeAllDiffs();
|
||
|
|
|
||
|
|
var ltext = text.toLowerCase();
|
||
|
|
|
||
|
|
const collection = document.getElementsByClassName("funcrow");
|
||
|
|
var searchCount = 0;
|
||
|
|
for (var ele of collection) {
|
||
|
|
var eledata = data[ele.dataset.index];
|
||
|
|
if (text == ''
|
||
|
|
|| eledata.address.toLowerCase().includes(ltext)
|
||
|
|
|| eledata.name.toLowerCase().includes(ltext)) {
|
||
|
|
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 ? '▲' : '▼';
|
||
|
|
|
||
|
|
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;
|
||
|
|
matchCel.innerHTML = (element.matching * 100).toFixed(2) + '%';
|
||
|
|
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) {
|
||
|
|
filter(search.value);
|
||
|
|
});
|
||
|
|
|
||
|
|
sortByColumn(0);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="main">
|
||
|
|
<h1>Decompilation Status</h1>
|
||
|
|
<input id="search" type="search" placeholder="Search for offset or function name...">
|
||
|
|
<br>
|
||
|
|
<br>
|
||
|
|
<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>
|