Produce a benchmark share link storing the report in the url

This commit is contained in:
Michael "Z" Goddard 2018-01-16 18:20:26 -05:00
parent c6f4d89371
commit 479f1ba163
No known key found for this signature in database
GPG key ID: 762CD40DD5349872
3 changed files with 122 additions and 13 deletions

View file

@ -11,16 +11,42 @@ p {
left: 450px;
}
}
.share {
display: none;
}
.share label {
cursor: pointer;
}
.share[href] {
display: inline;
}
.render .profile-tables {
position: static;
left: 0;
}
.render .description {
display: none;
}
.render .run-push {
display: none;
}
#scratch-stage {
border: 5px solid black;
display: block;
width: 400px;
height: 300px;
}
.render #scratch-stage {
display: none;
}
.loading label, .profile-count label{
width: 15em;
display: inline-block;
}
.render .loading {
display: none;
}
.profile-tables table {
margin: 30px 0 30px 0px;
}

View file

@ -13,12 +13,20 @@ document.querySelector('.run')
location.reload();
}, false);
const setShareLink = function (json) {
document.querySelector('.share')
.href = `#view/${btoa(JSON.stringify(json))}`;
document.querySelectorAll('.share')[1]
.href = `suite.html`;
};
const loadProject = function () {
let id = location.hash.substring(1).split(',')[0];
if (id.length < 1 || !isFinite(id)) {
id = projectInput.value;
}
Scratch.vm.downloadProjectId(id);
return id;
};
/**
@ -221,6 +229,13 @@ const frameOrder = [
'Runtime._step'
];
const trackSlowFrames = [
'Sequencer.stepThreads',
'Sequencer.stepThreads#inner',
'Sequencer.stepThread',
'execute'
];
class FramesTable extends StatTable {
constructor (options) {
super(options);
@ -241,12 +256,7 @@ class FramesTable extends StatTable {
}
isSlow (key, frame) {
return ([
'Sequencer.stepThreads',
'Sequencer.stepThreads#inner',
'Sequencer.stepThread',
'execute'
].indexOf(key) > 0 &&
return (trackSlowFrames.indexOf(key) > 0 &&
frame.selfTime / frame.totalTime > SLOW);
}
}
@ -346,7 +356,7 @@ class ProfilerRun {
}
run () {
loadProject();
this.projectId = loadProject();
window.parent.postMessage({
type: 'BENCH_MESSAGE_LOADING'
@ -378,12 +388,49 @@ class ProfilerRun {
frames: this.frames.frames,
opcodes: this.opcodes.opcodes
}, '*');
setShareLink({
fixture: {
projectId: this.projectId,
warmUpTime: this.warmUpTime,
recordingTime: this.maxRecordedTime
},
frames: this.frames.frames,
opcodes: this.opcodes.opcodes
});
}, 100 + this.warmUpTime + this.maxRecordedTime);
});
}
render (json) {
const {fixture} = json;
document.querySelector('[type=text]').value = [
fixture.projectId,
fixture.warmUpTime,
fixture.recordingTime
].join(',');
this.frames.frames = json.frames.map(
frame => Object.assign(new StatView(), frame, {
name: this.profiler.nameById(this.profiler.idByName(frame.name))
})
);
this.opcodes.opcodes = {};
Object.entries(json.opcodes).forEach(([opcode, data]) => {
this.opcodes.opcodes[opcode] = Object.assign(new StatView(), data);
});
this.frameTable.render();
this.opcodeTable.render();
}
}
window.onload = function () {
/**
* Run the benchmark with given parameters in the location's hash field or
* using defaults.
*/
const runBenchmark = function () {
// Lots of global variables to make debugging easier
// Instantiate the VM.
const vm = new window.VirtualMachine();
@ -493,3 +540,29 @@ window.onload = function () {
// Run threads
vm.start();
};
/**
* Render previously run benchmark data.
* @param {object} json data from a previous benchmark run.
*/
const renderBenchmarkData = function (json) {
const vm = new window.VirtualMachine();
new ProfilerRun({vm}).render(json);
setShareLink(json);
};
window.onload = function () {
if (location.hash.substring(1).startsWith('view')) {
document.body.className = 'render';
const data = location.hash.substring(6);
const frozen = atob(data);
const json = JSON.parse(frozen);
renderBenchmarkData(json);
} else {
runBenchmark();
}
};
window.onhashchange = function () {
location.reload();
};

View file

@ -8,19 +8,21 @@
</head>
<body>
<h2>Scratch VM Benchmark</h2>
<p>
<p class="description">
Welcome to the scratch-vm benchmark. This tool helps you profile a scratch
project. When you load the page, it:
<ol>
<ol class="description">
<li>loads the default project and enables turbo mode
<li>runs the project for 4 seconds to warm up
<li>profiles for 6 seconds
<li>stops and reports
</ol>
</p>
<div class="run-form">
<input type="text" value="119615668">
<button class="run">run</button>
<p>
</div>
<p class="run-push">
<i>Try a different project, like `130041250`</i>
</p>
@ -43,6 +45,14 @@
<label>Blocks executed:</label>
<span class="profile-count-value profile-count-blocks-executed">...</span>
</div>
<a class="share"><div class="profile-count">
<label>Share this report</label>
</div></a>
<a class="share" target="_parent">
<div class="profile-count">
<label>Run the full suite</label>
</div>
</a>
</div>
<div class="profile-tables">