Display benchmark results in a dialog box instead of on the console

demo/client/css/pathfinder.css

@@ -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

demo/client/html/benchmark.html.hbs

@@ -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">&times;</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>
 

demo/client/src/benchmark.ts

@@ -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;