From 15d8c98ff93f9036fbe3b2be6886a9b1480af12a Mon Sep 17 00:00:00 2001
From: Patrick Walton <pcwalton@mimiga.net>
Date: Mon, 4 Dec 2017 22:02:16 -0800
Subject: [PATCH] Fix a bug preventing the benchmark from running, and improve
 its UI

---
 demo/client/html/benchmark.html.hbs | 56 ++++++++++++++++++-----------
 demo/client/src/benchmark.ts        | 34 ++++++++++--------
 demo/client/src/renderer.ts         |  3 +-
 demo/client/src/view.ts             |  9 +----
 4 files changed, 58 insertions(+), 44 deletions(-)
diff --git a/demo/client/html/benchmark.html.hbs b/demo/client/html/benchmark.html.hbs
index b6d40900..4c035b76 100644
--- a/demo/client/html/benchmark.html.hbs
+++ b/demo/client/html/benchmark.html.hbs
@@ -9,29 +9,43 @@
     <body class="pf-unscrollable">
         {{>partials/navbar.html isTool=true}}
         <canvas id="pf-canvas" class="pf-draggable" width="400" height="300"></canvas>
-        <div id="pf-nonoverlapping-bottom-bar"
-         class="fixed-bottom mb-3 pt-3 d-flex justify-content-between align-items-end pf-pointer-events-none border border-right-0 border-bottom-0 border-left-0">
-            <div class="container ml-3 pf-pointer-events-auto">
-                <div class="row">
-                    <form class="form-inline">
-                        <label for="pf-aa-level-select"
-                         class="col-form-label mr-sm-2">Antialiasing</label>
-                        <select id="pf-aa-level-select" class="form-control custom-select mr-sm-3">
-                            <option value="none" selected>None</option>
-                            <option value="ssaa-2">2&times;SSAA</option>
-                            <option value="ssaa-4">4&times;SSAA</option>
-                            <option value="xcaa">XCAA</option>
-                        </select>
-                        {{>partials/switch.html id="pf-subpixel-aa" title="Subpixel AA"}}
-                    </form>
+        <div class="modal fade" id="pf-benchmark-modal" tabindex="-1" role="dialog"
+         aria-labelledby="pf-benchmark-label" aria-hidden="false">
+            <div class="modal-dialog" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="pf-benchmark-label">Benchmark</h5>
+                        <button type="button" class="close" data-dismiss="modal"
+                         aria-label="Close">
+                            <span aria-hidden="true">&times;</span>
+                        </button>
+                    </div>
+                    <div class="modal-body">
+                        <form class="form">
+                            <div class="form-group">
+                                <label for="pf-aa-level-select"
+                                class="col-form-label mr-sm-2">Antialiasing</label>
+                                <select id="pf-aa-level-select"
+                                class="form-control custom-select mr-sm-3">
+                                    <option value="none" selected>None</option>
+                                    <option value="ssaa-2">2&times;SSAA</option>
+                                    <option value="ssaa-4">4&times;SSAA</option>
+                                    <option value="xcaa">XCAA</option>
+                                </select>
+                            </div>
+                            <div class="form-group row justify-content-between">
+                                {{>partials/switch.html id="pf-subpixel-aa" title="Subpixel AA"}}
+                            </div>
+                        </form>
+                        <div class="d-flex justify-content-end">
+                            <button id="pf-run-benchmark-button" type="button"
+                            class="btn btn-primary">
+                                Run
+                            </button>
+                        </div>
+                    </div>
                 </div>
             </div>
-            <div id="pf-toolbar">
-                <button id="pf-run-benchmark-button" type="button"
-                 class="btn btn-primary pf-toolbar-button">
-                    Run Benchmark
-                </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">
diff --git a/demo/client/src/benchmark.ts b/demo/client/src/benchmark.ts
index 0efd0a46..27a42ed7 100644
--- a/demo/client/src/benchmark.ts
+++ b/demo/client/src/benchmark.ts
@@ -60,6 +60,8 @@ class BenchmarkAppController extends DemoAppController<BenchmarkTestView> {
     protected readonly defaultFile: string = FONT;
     protected readonly builtinFileURI: string = BUILTIN_FONT_URI;
 
+    private optionsModal: HTMLDivElement;
+
     private resultsModal: HTMLDivElement;
     private resultsTableBody: HTMLTableSectionElement;
     private resultsPartitioningTimeLabel: HTMLSpanElement;
@@ -77,6 +79,9 @@ class BenchmarkAppController extends DemoAppController<BenchmarkTestView> {
     start(): void {
         super.start();
 
+        this.optionsModal = unwrapNull(document.getElementById('pf-benchmark-modal')) as
+            HTMLDivElement;
+
         this.resultsModal = unwrapNull(document.getElementById('pf-benchmark-results-modal')) as
             HTMLDivElement;
         this.resultsTableBody =
@@ -99,6 +104,8 @@ class BenchmarkAppController extends DemoAppController<BenchmarkTestView> {
         const runBenchmarkButton = unwrapNull(document.getElementById('pf-run-benchmark-button'));
         runBenchmarkButton.addEventListener('click', () => this.runBenchmark(), false);
 
+        window.jQuery(this.optionsModal).modal();
+
         this.loadInitialFile(this.builtinFileURI);
     }
 
@@ -146,6 +153,8 @@ class BenchmarkAppController extends DemoAppController<BenchmarkTestView> {
     }
 
     private runBenchmark(): void {
+        window.jQuery(this.optionsModal).modal('hide');
+
         this.reset();
         this.elapsedTimes = [];
         this.pixelsPerEm = MIN_FONT_SIZE;
@@ -240,6 +249,8 @@ class BenchmarkTestView extends DemoView {
     readonly renderer: BenchmarkRenderer;
     readonly appController: BenchmarkAppController;
 
+    renderingPromiseCallback: ((time: number) => void) | null;
+
     get camera(): OrthographicCamera {
         return this.renderer.camera;
     }
@@ -248,10 +259,6 @@ class BenchmarkTestView extends DemoView {
         this.renderer.pixelsPerEm = newPPEM;
     }
 
-    set renderingPromiseCallback(newCallback: (time: number) => void) {
-        this.renderer.renderingPromiseCallback = newCallback;
-    }
-
     constructor(appController: BenchmarkAppController,
                 gammaLUT: HTMLImageElement,
                 commonShaderSource: string,
@@ -263,6 +270,15 @@ class BenchmarkTestView extends DemoView {
 
         this.resizeToFit(true);
     }
+
+    protected renderingFinished(): void {
+        if (this.renderingPromiseCallback == null)
+            return;
+
+        const glyphCount = unwrapNull(this.appController.textRun).glyphIDs.length;
+        const usPerGlyph = this.renderer.lastTimings.rendering * 1000.0 / glyphCount;
+        this.renderingPromiseCallback(usPerGlyph);
+    }
 }
 
 class BenchmarkRenderer extends Renderer {
@@ -270,8 +286,6 @@ class BenchmarkRenderer extends Renderer {
 
     camera: OrthographicCamera;
 
-    renderingPromiseCallback: ((time: number) => void) | null;
-
     get usesSTTransform(): boolean {
         return this.camera.usesSTTransform;
     }
@@ -404,14 +418,6 @@ class BenchmarkRenderer extends Renderer {
         // TODO(pcwalton)
     }
 
-    protected renderingFinished(): void {
-        if (this.renderingPromiseCallback == null)
-            return;
-        const glyphCount = unwrapNull(this.renderContext.appController.textRun).glyphIDs.length;
-        const usPerGlyph = this.lastTimings.rendering * 1000.0 / glyphCount;
-        this.renderingPromiseCallback(usPerGlyph);
-    }
-
     protected pathColorsForObject(objectIndex: number): Uint8Array {
         const pathColors = new Uint8Array(4 * (STRING.length + 1));
         for (let pathIndex = 0; pathIndex < STRING.length; pathIndex++)
diff --git a/demo/client/src/renderer.ts b/demo/client/src/renderer.ts
index 46c8c560..e983d0af 100644
--- a/demo/client/src/renderer.ts
+++ b/demo/client/src/renderer.ts
@@ -44,6 +44,8 @@ export abstract class Renderer {
     meshes: PathfinderMeshBuffers[] | null;
     meshData: PathfinderMeshData[] | null;
 
+    lastTimings: Timings;
+
     abstract get usesSTTransform(): boolean;
 
     get emboldenAmount(): glmatrix.vec2 {
@@ -75,7 +77,6 @@ export abstract class Renderer {
     abstract get destUsedSize(): glmatrix.vec2;
 
     protected antialiasingStrategy: AntialiasingStrategy | null;
-    protected lastTimings: Timings;
     protected pathColorsBufferTextures: PathfinderBufferTexture[];
 
     protected gammaCorrectionMode: GammaCorrectionMode;
diff --git a/demo/client/src/view.ts b/demo/client/src/view.ts
index c6561708..96e361e5 100644
--- a/demo/client/src/view.ts
+++ b/demo/client/src/view.ts
@@ -116,14 +116,7 @@ export abstract class PathfinderView {
         if (!this.canvas.classList.contains('pf-no-autoresize')) {
             const windowWidth = window.innerWidth;
             const canvasTop = this.canvas.getBoundingClientRect().top;
-            let height = window.scrollY + window.innerHeight - canvasTop;
-
-            const nonoverlappingBottomBar =
-                document.getElementById('pf-nonoverlapping-bottom-bar');
-            if (nonoverlappingBottomBar != null) {
-                const rect = nonoverlappingBottomBar.getBoundingClientRect();
-                height -= window.innerHeight - rect.top;
-            }
+            const height = window.scrollY + window.innerHeight - canvasTop;
 
             const devicePixelRatio = window.devicePixelRatio;
 
