Display benchmark results in a dialog box instead of on the console
This commit is contained in:
parent
c37fd1f1e8
commit
1c138cc543
|
@ -98,6 +98,10 @@ button > svg path {
|
|||
.pf-display-none {
|
||||
display: none !important;
|
||||
}
|
||||
#pf-benchmark-results-modal .modal-body {
|
||||
overflow: scroll;
|
||||
max-height: 75vh;
|
||||
}
|
||||
|
||||
/*
|
||||
* Arrow
|
||||
|
|
|
@ -31,6 +31,34 @@
|
|||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal fade" id="pf-benchmark-results-modal" tabindex="-1" role="dialog"
|
||||
aria-labelledby="pf-benchmark-results-label" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="pf-benchmark-result-label">
|
||||
Benchmark Results
|
||||
</h5>
|
||||
<button type="button" class="close" data-dismiss="modal"
|
||||
aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<table class="table table-striped">
|
||||
<thead class="thead-default">
|
||||
<tr><th>Font size (px)</th><th>GPU time per glyph (µs)</th></tr>
|
||||
</thead>
|
||||
<tbody id="pf-benchmark-results-table-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-primary"
|
||||
id="pf-benchmark-results-close-button">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
|
@ -53,6 +53,18 @@ class BenchmarkAppController extends DemoAppController<BenchmarkTestView> {
|
|||
start() {
|
||||
super.start();
|
||||
|
||||
this.resultsModal = unwrapNull(document.getElementById('pf-benchmark-results-modal')) as
|
||||
HTMLDivElement;
|
||||
this.resultsTableBody =
|
||||
unwrapNull(document.getElementById('pf-benchmark-results-table-body')) as
|
||||
HTMLTableSectionElement;
|
||||
|
||||
const resultsCloseButton =
|
||||
unwrapNull(document.getElementById('pf-benchmark-results-close-button'));
|
||||
resultsCloseButton.addEventListener('click', () => {
|
||||
window.jQuery(this.resultsModal).modal('hide');
|
||||
}, false);
|
||||
|
||||
const runBenchmarkButton = unwrapNull(document.getElementById('pf-run-benchmark-button'));
|
||||
runBenchmarkButton.addEventListener('click', () => this.runBenchmark(), false);
|
||||
|
||||
|
@ -104,7 +116,7 @@ class BenchmarkAppController extends DemoAppController<BenchmarkTestView> {
|
|||
this.elapsedTimes.push({ size: this.pixelsPerEm, time: elapsedTime });
|
||||
|
||||
if (this.pixelsPerEm == MAX_FONT_SIZE) {
|
||||
console.info(this.elapsedTimes);
|
||||
this.showResults();
|
||||
return;
|
||||
}
|
||||
|
||||
|
@ -113,9 +125,31 @@ class BenchmarkAppController extends DemoAppController<BenchmarkTestView> {
|
|||
});
|
||||
}
|
||||
|
||||
private showResults(): void {
|
||||
while (this.resultsTableBody.lastChild != null)
|
||||
this.resultsTableBody.removeChild(this.resultsTableBody.lastChild);
|
||||
|
||||
for (const elapsedTime of this.elapsedTimes) {
|
||||
const tr = document.createElement('tr');
|
||||
const sizeTH = document.createElement('th');
|
||||
const timeTD = document.createElement('td');
|
||||
sizeTH.appendChild(document.createTextNode("" + elapsedTime.size));
|
||||
timeTD.appendChild(document.createTextNode("" + elapsedTime.time));
|
||||
sizeTH.scope = 'row';
|
||||
tr.appendChild(sizeTH);
|
||||
tr.appendChild(timeTD);
|
||||
this.resultsTableBody.appendChild(tr);
|
||||
}
|
||||
|
||||
window.jQuery(this.resultsModal).modal();
|
||||
}
|
||||
|
||||
protected readonly defaultFile: string = FONT;
|
||||
protected readonly builtinFileURI: string = BUILTIN_FONT_URI;
|
||||
|
||||
private resultsModal: HTMLDivElement;
|
||||
private resultsTableBody: HTMLTableSectionElement;
|
||||
|
||||
private glyphStorage: TextFrameGlyphStorage<BenchmarkGlyph>;
|
||||
private baseMeshes: PathfinderMeshData;
|
||||
private expandedMeshes: ExpandedMeshData;
|
||||
|
|
Loading…
Reference in New Issue