From d64a28c16620081e2454acea321b692a976817b3 Mon Sep 17 00:00:00 2001
From: Patrick Walton <pcwalton@mimiga.net>
Date: Wed, 13 Sep 2017 11:56:40 -0700
Subject: [PATCH] Beautify the timings display and make it work with the SVG
 and 3D demos

---
 demo/client/css/pathfinder.css      |  1 +
 demo/client/html/3d-demo.html.hbs   |  2 +-
 demo/client/html/svg-demo.html.hbs  |  2 +-
 demo/client/html/text-demo.html.hbs |  2 +-
 demo/client/src/3d-demo.ts          |  4 ++--
 demo/client/src/app-controller.ts   | 31 ++++++++++++++++++++++++++++-
 demo/client/src/benchmark.ts        |  2 +-
 demo/client/src/svg-demo.ts         |  5 ++---
 demo/client/src/text-demo.ts        | 18 +++++------------
 demo/client/src/view.ts             | 15 +++++++++++---
 10 files changed, 56 insertions(+), 26 deletions(-)

diff --git a/demo/client/css/pathfinder.css b/demo/client/css/pathfinder.css
index 3f037ef6..b6829d20 100644
--- a/demo/client/css/pathfinder.css
+++ b/demo/client/css/pathfinder.css
@@ -70,6 +70,7 @@ button > svg path {
 #pf-fps-label {
     color: white;
     background: rgba(0, 0, 0, 0.75);
+    width: 17em;
 }
 #pf-svg {
     visibility: hidden;
diff --git a/demo/client/html/3d-demo.html.hbs b/demo/client/html/3d-demo.html.hbs
index f0cda5fd..84a43792 100644
--- a/demo/client/html/3d-demo.html.hbs
+++ b/demo/client/html/3d-demo.html.hbs
@@ -10,7 +10,7 @@
         {{>partials/navbar.html isDemo=true}}
         <canvas id="pf-canvas" width="400" height="300"></canvas>
         <div class="fixed-bottom mb-3 d-flex justify-content-between align-items-end pf-pointer-events-none">
-            <div class="rounded py-1 px-3 ml-3" id="pf-fps-label">0 ms</div>
+            <div class="rounded invisible container py-1 px-3 ml-3" id="pf-fps-label"></div>
             <div id="pf-toolbar">
                 <button id="pf-screenshot-button" type="button"
                  class="btn btn-outline-secondary pf-toolbar-button">
diff --git a/demo/client/html/svg-demo.html.hbs b/demo/client/html/svg-demo.html.hbs
index e1d2ac34..16cc6811 100644
--- a/demo/client/html/svg-demo.html.hbs
+++ b/demo/client/html/svg-demo.html.hbs
@@ -11,7 +11,7 @@
         <canvas id="pf-canvas" class="pf-draggable" width="400" height="300"></canvas>
         <svg id="pf-svg" xmlns="http://www.w3.org/2000/svg" width="400" height="300"></svg>
         <div class="fixed-bottom mb-3 d-flex justify-content-between align-items-end pf-pointer-events-none">
-            <div class="rounded py-1 px-3 ml-3" id="pf-fps-label">0 ms</div>
+            <div class="rounded invisible container py-1 px-3 ml-3" id="pf-fps-label"></div>
             <div id="pf-toolbar">
                 <div class="btn-group" role="group" aria-label="Zoom">
                     <button id="pf-zoom-out-button" type="button"
diff --git a/demo/client/html/text-demo.html.hbs b/demo/client/html/text-demo.html.hbs
index 11ace9d1..85059c37 100644
--- a/demo/client/html/text-demo.html.hbs
+++ b/demo/client/html/text-demo.html.hbs
@@ -10,7 +10,7 @@
         {{>partials/navbar.html isDemo=true}}
         <canvas id="pf-canvas" class="pf-draggable" width="400" height="300"></canvas>
         <div class="fixed-bottom mb-3 d-flex justify-content-between align-items-end pf-pointer-events-none">
-            <div class="rounded py-1 px-3 ml-3" id="pf-fps-label">0 ms</div>
+            <div class="rounded invisible container py-1 px-3 ml-3" id="pf-fps-label"></div>
             <div id="pf-toolbar">
                 <div class="btn-group" role="group" aria-label="Zoom">
                     <button id="pf-zoom-out-button" type="button"
diff --git a/demo/client/src/3d-demo.ts b/demo/client/src/3d-demo.ts
index c8077d80..9d85eb39 100644
--- a/demo/client/src/3d-demo.ts
+++ b/demo/client/src/3d-demo.ts
@@ -294,8 +294,8 @@ class ThreeDView extends PathfinderDemoView {
 
     protected compositeIfNecessary(): void {}
 
-    protected updateTimings(timings: Timings) {
-        // TODO(pcwalton)
+    protected newTimingsReceived() {
+        this.appController.newTimingsReceived(_.pick(this.lastTimings, ['rendering']));
     }
 
     get destAllocatedSize(): glmatrix.vec2 {
diff --git a/demo/client/src/app-controller.ts b/demo/client/src/app-controller.ts
index 6d86b3dc..b335f475 100644
--- a/demo/client/src/app-controller.ts
+++ b/demo/client/src/app-controller.ts
@@ -11,7 +11,7 @@
 import {AntialiasingStrategyName} from "./aa-strategy";
 import {ShaderLoader, ShaderMap, ShaderProgramSource} from './shader-loader';
 import {expectNotNull, unwrapUndef, unwrapNull} from './utils';
-import {PathfinderDemoView} from "./view";
+import { PathfinderDemoView, Timings, TIMINGS } from "./view";
 
 export abstract class AppController {
     start() {
@@ -122,6 +122,8 @@ export abstract class DemoAppController<View extends PathfinderDemoView> extends
                                                false);
         }
 
+        this.fpsLabel = document.getElementById('pf-fps-label');
+
         const shaderLoader = new ShaderLoader;
         shaderLoader.load();
 
@@ -144,6 +146,32 @@ export abstract class DemoAppController<View extends PathfinderDemoView> extends
         this.updateAALevel();
     }
 
+    newTimingsReceived(timings: Timings) {
+        if (this.fpsLabel == null)
+            return;
+
+        while (this.fpsLabel.lastChild != null)
+            this.fpsLabel.removeChild(this.fpsLabel.lastChild);
+
+        for (const timing of Object.keys(timings) as Array<keyof Timings>) {
+            const tr = document.createElement('div');
+            tr.classList.add('row');
+
+            const keyTD = document.createElement('div');
+            const valueTD = document.createElement('div');
+            keyTD.classList.add('col');
+            valueTD.classList.add('col');
+            keyTD.appendChild(document.createTextNode(TIMINGS[timing]));
+            valueTD.appendChild(document.createTextNode(timings[timing] + " ms"));
+
+            tr.appendChild(keyTD);
+            tr.appendChild(valueTD);
+            this.fpsLabel.appendChild(tr);
+        }
+
+        this.fpsLabel.classList.remove('invisible');
+    }
+
     private updateAALevel() {
         let aaType: AntialiasingStrategyName, aaLevel: number;
         if (this.aaLevelSelect != null) {
@@ -207,4 +235,5 @@ export abstract class DemoAppController<View extends PathfinderDemoView> extends
 
     private aaLevelSelect: HTMLSelectElement | null;
     private subpixelAASwitch: HTMLInputElement | null;
+    private fpsLabel: HTMLElement | null;
 }
diff --git a/demo/client/src/benchmark.ts b/demo/client/src/benchmark.ts
index ccb8ae31..17a4c262 100644
--- a/demo/client/src/benchmark.ts
+++ b/demo/client/src/benchmark.ts
@@ -181,7 +181,7 @@ class BenchmarkTestView extends PathfinderDemoView {
     protected renderingFinished(): void {
         if (this.renderingPromiseCallback != null) {
             const glyphCount = unwrapNull(this.appController.textRun).glyphs.length;
-            const usPerGlyph = this.lastTimings.atlasRendering * 1000.0 / glyphCount;
+            const usPerGlyph = this.lastTimings.rendering * 1000.0 / glyphCount;
             this.renderingPromiseCallback(usPerGlyph);
         }
     }
diff --git a/demo/client/src/svg-demo.ts b/demo/client/src/svg-demo.ts
index 85859d19..d5d7bc1c 100644
--- a/demo/client/src/svg-demo.ts
+++ b/demo/client/src/svg-demo.ts
@@ -271,8 +271,8 @@ class SVGDemoView extends PathfinderDemoView {
 
     protected compositeIfNecessary(): void {}
 
-    protected updateTimings(timings: Timings) {
-        // TODO(pcwalton)
+    protected newTimingsReceived() {
+        this.appController.newTimingsReceived(_.pick(this.lastTimings, ['rendering']));
     }
 
     protected usedSizeFactor: glmatrix.vec2 = glmatrix.vec2.fromValues(1.0, 1.0);
@@ -288,7 +288,6 @@ class SVGDemoView extends PathfinderDemoView {
         glmatrix.mat4.scale(transform, transform, [this.camera.scale, this.camera.scale, 1.0]);
         if (this.antialiasingStrategy != null)
             glmatrix.mat4.mul(transform, transform, this.antialiasingStrategy.transform);
-        console.log(transform);
         return transform;
     }
 
diff --git a/demo/client/src/text-demo.ts b/demo/client/src/text-demo.ts
index 7bc323f0..b9431b46 100644
--- a/demo/client/src/text-demo.ts
+++ b/demo/client/src/text-demo.ts
@@ -24,8 +24,9 @@ import {UniformMap} from './gl-utils';
 import {PathfinderMeshBuffers, PathfinderMeshData} from './meshes';
 import {PathfinderShaderProgram, ShaderMap, ShaderProgramSource} from './shader-loader';
 import {BUILTIN_FONT_URI, Hint, PathfinderGlyph, SimpleTextLayout} from "./text";
-import { PathfinderError, assert, expectNotNull, UINT32_SIZE, unwrapNull, panic, scaleRect } from './utils';
-import {MonochromePathfinderView, Timings} from './view';
+import {PathfinderError, UINT32_SIZE, assert, expectNotNull, scaleRect, panic} from './utils';
+import {unwrapNull} from './utils';
+import { MonochromePathfinderView, Timings, TIMINGS } from './view';
 import PathfinderBufferTexture from './buffer-texture';
 import SSAAStrategy from './ssaa-strategy';
 
@@ -131,8 +132,6 @@ class TextDemoController extends DemoAppController<TextDemoView> {
             HTMLSelectElement;
         this.hintingSelect.addEventListener('change', () => this.hintingChanged(), false);
 
-        this.fpsLabel = unwrapNull(document.getElementById('pf-fps-label'));
-
         this.editTextModal = unwrapNull(document.getElementById('pf-edit-text-modal'));
         this.editTextArea = unwrapNull(document.getElementById('pf-edit-text-area')) as
             HTMLTextAreaElement;
@@ -184,11 +183,6 @@ class TextDemoController extends DemoAppController<TextDemoView> {
         });
     }
 
-    updateTimings(newTimes: Timings) {
-        this.fpsLabel.innerHTML =
-            `${newTimes.atlasRendering} ms atlas, ${newTimes.compositing} ms compositing`;
-    }
-
     get atlas(): Atlas {
         return this._atlas;
     }
@@ -224,8 +218,6 @@ class TextDemoController extends DemoAppController<TextDemoView> {
         return DEFAULT_FONT;
     }
 
-    private fpsLabel: HTMLElement;
-
     private hintingSelect: HTMLSelectElement;
 
     private editTextModal: HTMLElement;
@@ -564,8 +556,8 @@ class TextDemoView extends MonochromePathfinderView {
         return new (ANTIALIASING_STRATEGIES[aaType])(aaLevel, subpixelAA);
     }
 
-    protected updateTimings(timings: Timings) {
-        this.appController.updateTimings(timings);
+    protected newTimingsReceived() {
+        this.appController.newTimingsReceived(this.lastTimings);
     }
 
     protected get worldTransform(): glmatrix.mat4 {
diff --git a/demo/client/src/view.ts b/demo/client/src/view.ts
index 09ce8f65..e3090aa4 100644
--- a/demo/client/src/view.ts
+++ b/demo/client/src/view.ts
@@ -39,8 +39,13 @@ const QUAD_TEX_COORDS: Float32Array = new Float32Array([
     1.0, 0.0,
 ]);
 
+export const TIMINGS: {[name: string]: string} = {
+    rendering: "Rendering",
+    compositing: "Compositing",
+}
+
 export interface Timings {
-    atlasRendering: number;
+    rendering: number;
     compositing: number;
 }
 
@@ -109,7 +114,7 @@ export abstract class PathfinderDemoView extends PathfinderView {
 
         this.initContext();
 
-        this.lastTimings = { atlasRendering: 0, compositing: 0 };
+        this.lastTimings = { rendering: 0, compositing: 0 };
 
         const shaderSource = this.compileShaders(commonShaderSource, shaderSources);
         this.shaderPrograms = this.linkShaders(shaderSource);
@@ -444,10 +449,12 @@ export abstract class PathfinderDemoView extends PathfinderView {
                 this.timerQueryExt.getQueryObjectEXT(this.compositingTimerQuery,
                                                      this.timerQueryExt.QUERY_RESULT_EXT);
             this.lastTimings = {
-                atlasRendering: atlasRenderingTime / 1000000.0,
+                rendering: atlasRenderingTime / 1000000.0,
                 compositing: compositingTime / 1000000.0,
             };
 
+            this.newTimingsReceived();
+
             window.clearInterval(this.timerQueryPollInterval!);
             this.timerQueryPollInterval = null;
         }, TIME_INTERVAL_DELAY);
@@ -530,6 +537,8 @@ export abstract class PathfinderDemoView extends PathfinderView {
 
     }
 
+    protected newTimingsReceived() {}
+
     protected abstract pathColorsForObject(objectIndex: number): Uint8Array;
     protected abstract pathTransformsForObject(objectIndex: number): Float32Array;