2019-11-19 01:48:31 +01:00
|
|
|
<html>
|
|
|
|
|
<script nonce="{script_nonce}">
|
|
|
|
|
window.benchmark_key = "{benchmark_key}";
|
|
|
|
|
|
|
|
|
|
function setState(elem, text) {
|
|
|
|
|
var formatted = text
|
|
|
|
|
var parts = text.match(/\* Running (.*?)(\n|$)/g)
|
|
|
|
|
if (parts) {
|
|
|
|
|
for (var i=0; i < parts.length; i++) {
|
|
|
|
|
part = parts[i];
|
|
|
|
|
var details = part.match(/\* Running (.*?) (\.+|$)(.*)/);
|
|
|
|
|
if (details) {
|
|
|
|
|
var title = details[1]
|
|
|
|
|
var progress = details[2]
|
|
|
|
|
var result = details[3]
|
|
|
|
|
|
|
|
|
|
result_parts = result.match(/(.*) Done in ([0-9\.]+)s = (.*?) \(([0-9\.]+)x\)/)
|
|
|
|
|
var percent = Math.min(100, progress.length * 10)
|
|
|
|
|
if (result_parts) percent = 100
|
|
|
|
|
var style = "background-image: linear-gradient(90deg, #FFF " + percent + "%, #FFF 0%, #d9d5de 0%);"
|
|
|
|
|
var part_formatted = "<div class='test' style='" + style + "'>"
|
|
|
|
|
part_formatted += "<span class='title'>" + title + "</span><span class='percent percent-" + percent + "'>" + percent + "%</span> "
|
|
|
|
|
if (result_parts) {
|
|
|
|
|
var result_extra = result_parts[1]
|
|
|
|
|
var taken = result_parts[2]
|
|
|
|
|
var multipler_title = result_parts[3]
|
|
|
|
|
var multipler = result_parts[4]
|
|
|
|
|
part_formatted += "<div class='result result-" + multipler_title.replace(/[^A-Za-z]/g, "") + "'>"
|
|
|
|
|
part_formatted += " <span class='taken'>" + taken + "s</span>"
|
|
|
|
|
part_formatted += " <span class='multipler'>" + multipler + "x</span>"
|
|
|
|
|
part_formatted += " <span class='multipler-title'>" + multipler_title + "</span>"
|
|
|
|
|
part_formatted += "</div>"
|
|
|
|
|
} else {
|
|
|
|
|
part_formatted += "<div class='result'>" + result + "</div>"
|
|
|
|
|
}
|
|
|
|
|
part_formatted += "</div>"
|
|
|
|
|
formatted = formatted.replace(part, part_formatted);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
formatted = formatted.replace(/(\! Error:.*)/, "<div class='test error'>$1</div>");
|
2020-11-03 02:49:01 +01:00
|
|
|
formatted = formatted.replace(/(\== Result ==[^]*)/, "<div class='test summary'>$1</div>");
|
2019-11-19 01:48:31 +01:00
|
|
|
var is_bottom = document.body.scrollTop + document.body.clientHeight >= document.body.scrollHeight - 5;
|
|
|
|
|
elem.innerHTML = formatted.trim();
|
|
|
|
|
if (is_bottom)
|
|
|
|
|
document.body.scrollTop = document.body.scrollHeight;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function stream(url, elem) {
|
|
|
|
|
document.getElementById("h1").innerText = "Benchmark: Starting..."
|
|
|
|
|
var xhr = new XMLHttpRequest();
|
|
|
|
|
xhr.open('GET', url, true);
|
|
|
|
|
xhr.setRequestHeader('Accept', 'text/html');
|
|
|
|
|
xhr.send(null);
|
|
|
|
|
xhr.onreadystatechange = function(state) {
|
|
|
|
|
document.getElementById("h1").innerText = "Benchmark: Running..."
|
|
|
|
|
setState(elem, xhr.responseText);
|
|
|
|
|
if (xhr.readyState == 4) {
|
|
|
|
|
document.getElementById("h1").innerText = "Benchmark: Done."
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<body>
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
background-color: #3c3546;
|
|
|
|
|
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23cfcfcf' fill-opacity='0.09'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");}
|
|
|
|
|
h1 {
|
|
|
|
|
font-family: monospace; color: white; font-weight: normal; text-transform: uppercase;
|
|
|
|
|
max-width: 690px; margin: 30px auto; margin-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
#out {
|
|
|
|
|
white-space: pre-line; background-color: #ffffff1a; padding: 20px; font-family: Consolas, monospace;
|
|
|
|
|
font-size: 11px; width: 90%; margin: auto; max-width: 650px; box-shadow: 0px 10px 30px -10px #5c5c5c6b;
|
|
|
|
|
}
|
|
|
|
|
.test { padding: 12px; box-shadow: 0px 5px 13px -5px #5c5c5c6b; margin-bottom: -2px; background-color: white; border: 1px solid #dbdbdb; }
|
|
|
|
|
.test .percent { float: right; }
|
|
|
|
|
.test .percent-100 { display: none; }
|
|
|
|
|
.test .result { float: right; }
|
|
|
|
|
.test .title { max-width: calc(100% - 150px); display: inline-block; }
|
|
|
|
|
.test .multipler-title { display: inline-block; width: 50px; text-align: right; }
|
|
|
|
|
.test:last-child { margin-bottom: 15px; border-color: #c1c1c1; }
|
|
|
|
|
|
|
|
|
|
.test .result-Sloooow { color: red; }
|
|
|
|
|
.test .result-Ehh { color: #ad1457; }
|
|
|
|
|
.test .result-Goodish { color: #ef6c00; }
|
|
|
|
|
.test .result-Ok { color: #00cf03; }
|
|
|
|
|
.test .result-Fine { color: #00bcd4; }
|
|
|
|
|
.test .result-Fast { color: #4b78ff; }
|
|
|
|
|
.test .result-WOW { color: #9c27b0; }
|
|
|
|
|
.test .result-Insane { color: #d603f4; }
|
|
|
|
|
|
|
|
|
|
.test.summary { margin-top: 20px; text-transform: uppercase; border-left: 10px solid #00ff63; border-color: #00ff63; }
|
|
|
|
|
.test.error { background-color: #ff2259; color: white; border-color: red; }
|
|
|
|
|
|
|
|
|
|
#start { text-align: center }
|
|
|
|
|
.button {
|
|
|
|
|
background-color: white; padding: 10px 20px; display: inline-block; border-radius: 5px;
|
|
|
|
|
text-decoration: none; color: #673AB7; text-transform: uppercase; margin-bottom: 11px; border-bottom: 2px solid #c1bff8;
|
|
|
|
|
}
|
|
|
|
|
.button:hover { border-bottom-color: #673AB7; }
|
|
|
|
|
.button:active { transform: translateY(1px) }
|
|
|
|
|
small { text-transform: uppercase; opacity: 0.7; color: white; letter-spacing: 1px; }
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<h1 id="h1">Benchmark</h1>
|
|
|
|
|
<div id="out">
|
|
|
|
|
<div id="start">
|
|
|
|
|
<a href="#Start" class="button" id="start_button">Start benchmark</a>
|
|
|
|
|
<small>(It will take around 20 sec)</small>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script nonce="{script_nonce}">
|
|
|
|
|
function start() {
|
|
|
|
|
stream("/BenchmarkResult?benchmark_key={benchmark_key}&filter={filter}", document.getElementById("out"));
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
document.getElementById("start_button").onclick = start
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
