Add performance figures to drawing tests

src/js/app.js

@@ -152,9 +152,9 @@
         document.querySelector('#drawing-canvas-container'));
       this.fileDropperService.init();
 
-      var drawingLoop = new pskl.rendering.DrawingLoop();
+      this.drawingLoop = new pskl.rendering.DrawingLoop();
-      drawingLoop.addCallback(this.render, this);
+      this.drawingLoop.addCallback(this.render, this);
-      drawingLoop.start();
+      this.drawingLoop.start();
 
       this.initTooltips_();
 

src/js/devtools/DrawingTestPlayer.js

@@ -8,6 +8,8 @@
     this.step = step || this.initialState.step || ns.DrawingTestPlayer.DEFAULT_STEP;
     this.callbacks = [];
     this.shim = null;
+    this.performance = 0;
+
   };
 
   ns.DrawingTestPlayer.DEFAULT_STEP = 50;
@@ -15,6 +17,15 @@
   ns.DrawingTestPlayer.prototype.start = function () {
     this.setupInitialState_();
     this.createMouseShim_();
+
+    // Override the main drawing loop to record the time spent rendering.
+    this.loopBackup = pskl.app.drawingLoop.loop;
+    pskl.app.drawingLoop.loop = function () {
+      var before = window.performance.now();
+      this.loopBackup.call(pskl.app.drawingLoop);
+      this.performance += window.performance.now() - before;
+    }.bind(this);
+
     this.regenerateReferencePng(function () {
       this.playEvent_(0);
     }.bind(this));
@@ -76,11 +87,13 @@
     this.timer = window.setTimeout(function () {
       var recordEvent = this.events[index];
 
+      // All events have already been replayed, finish the test.
       if (!recordEvent) {
         this.onTestEnd_();
         return;
       }
 
+      var before = window.performance.now();
       if (recordEvent.type === 'mouse-event') {
         this.playMouseEvent_(recordEvent);
       } else if (recordEvent.type === 'keyboard-event') {
@@ -97,6 +110,9 @@
         this.playInstrumentedEvent_(recordEvent);
       }
 
+      // Record the time spent replaying the event
+      this.performance += window.performance.now() - before;
+
       this.playEvent_(index + 1);
     }.bind(this), this.step);
   };
@@ -155,6 +171,8 @@
 
   ns.DrawingTestPlayer.prototype.onTestEnd_ = function () {
     this.removeMouseShim_();
+    // Restore the original drawing loop.
+    pskl.app.drawingLoop.loop = this.loopBackup;
 
     // Retrieve the imageData corresponding to the spritesheet created by the test.
     var renderer = new pskl.rendering.PiskelRenderer(pskl.app.piskelController);
@@ -175,8 +193,11 @@
 
     $.publish(Events.TEST_RECORD_END, [success]);
     this.callbacks.forEach(function (callback) {
-      callback(success);
+      callback({
+        success: success,
+        performance: this.performance
       });
+    }.bind(this));
   };
 
   ns.DrawingTestPlayer.prototype.addEndTestCallback = function (callback) {

src/js/devtools/DrawingTestSuiteController.js

@@ -47,25 +47,33 @@
     this.testSuiteRunner.start();
   };
 
-  ns.DrawingTestSuiteController.prototype.onTestCaseEnd_ = function (evt, testPath, status) {
+  ns.DrawingTestSuiteController.prototype.onTestCaseEnd_ = function (evt, testPath, success, performance) {
     var testCaseStatus = document.createElement('li');
 
     testCaseStatus.innerHTML = pskl.utils.Template.replace(
-      '[{{path}}] finished : <b style="color:{{color}}">{{status}}</b>',
+      '[{{path}}] finished : <b style="color:{{color}}">{{status}} ({{performance}})</b>',
-      {path : this.shortenPath_(testPath), status : status ? 'OK' : 'KO', color : status ? 'green' : 'red'}
+      {
+        path : this.shortenPath_(testPath),
+        status : success ? 'OK' : 'KO',
+        color : success ? 'green' : 'red',
+        performance: performance.toFixed(2)
+      }
     );
     this.testListElt.appendChild(testCaseStatus);
   };
 
-  ns.DrawingTestSuiteController.prototype.onTestSuiteEnd_ = function (evt, status) {
+  ns.DrawingTestSuiteController.prototype.onTestSuiteEnd_ = function (evt, status, performance) {
-    console.log('on test suite end');
     var elapsed = Date.now() - this.startTime_;
     elapsed = (elapsed / 1000).toFixed(4);
 
     var testSuiteStatus = document.createElement('li');
     testSuiteStatus.innerHTML = pskl.utils.Template.replace(
-      '<b>Test finished : {{status}}</b> ({{elapsed}} seconds)',
+      '<b>Test finished : {{status}}</b> ({{elapsed}}s, performance: {{performance}})',
-      {status : status, elapsed : elapsed}
+      {
+        status : status,
+        elapsed : elapsed,
+        performance: performance.toFixed(2)
+      }
     );
     this.testListElt.appendChild(testSuiteStatus);
   };

src/js/devtools/DrawingTestSuiteRunner.js

@@ -44,20 +44,25 @@
     testPlayer.start();
   };
 
-  ns.DrawingTestSuiteRunner.prototype.onTestEnd_ = function (success) {
+  ns.DrawingTestSuiteRunner.prototype.onTestEnd_ = function (data /* {success, performance} */) {
     var path = this.testPaths[this.currentIndex];
-    this.testStatus[path] = success;
+    this.testStatus[path] = data;
-    $.publish(Events.TEST_CASE_END, [path, success]);
+
+    $.publish(Events.TEST_CASE_END, [path, data.success, data.performance]);
 
     this.runTest(this.currentIndex + 1);
   };
 
   ns.DrawingTestSuiteRunner.prototype.onTestSuiteEnd_ = function () {
     var success = this.testPaths.every(function (path) {
-      return this.testStatus[path];
+      return this.testStatus[path].success;
     }.bind(this));
 
+    var performance = this.testPaths.reduce(function (p, path) {
+      return this.testStatus[path].performance + p;
+    }.bind(this), 0);
+
     this.status = success ? ns.DrawingTestSuiteRunner.STATUS.SUCCESS : ns.DrawingTestSuiteRunner.STATUS.ERROR;
-    $.publish(Events.TEST_SUITE_END, [this.status]);
+    $.publish(Events.TEST_SUITE_END, [this.status, performance]);
   };
 })();

src/js/rendering/DrawingLoop.js

@@ -15,6 +15,7 @@
       scope : scope,
       args : args
     };
+
     this.callbacks.push(callbackObj);
     return callbackObj;
   };