deploy dev version

dev/js/devtools/DrawingTestPlayer.js

@@ -0,0 +1,207 @@
+(function () {
+  var ns = $.namespace('pskl.devtools');
+
+  ns.DrawingTestPlayer = function (testRecord, step) {
+    this.initialState = testRecord.initialState;
+    this.events = testRecord.events;
+    this.referencePng = testRecord.png;
+    this.step = step || this.initialState.step || ns.DrawingTestPlayer.DEFAULT_STEP;
+    this.callbacks = [];
+    this.shim = null;
+    this.performance = 0;
+
+  };
+
+  ns.DrawingTestPlayer.DEFAULT_STEP = 50;
+
+  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));
+  };
+
+  ns.DrawingTestPlayer.prototype.setupInitialState_ = function () {
+    var size = this.initialState.size;
+    var piskel = this.createPiskel_(size.width, size.height);
+    pskl.app.piskelController.setPiskel(piskel);
+
+    $.publish(Events.SELECT_PRIMARY_COLOR, [this.initialState.primaryColor]);
+    $.publish(Events.SELECT_SECONDARY_COLOR, [this.initialState.secondaryColor]);
+    $.publish(Events.SELECT_TOOL, [this.initialState.selectedTool]);
+    if (this.initialState.penSize) {
+      pskl.app.penSizeService.setPenSize(this.initialState.penSize);
+    }
+  };
+
+  ns.DrawingTestPlayer.prototype.createPiskel_ = function (width, height) {
+    var descriptor = new pskl.model.piskel.Descriptor('TestPiskel', '');
+    var piskel = new pskl.model.Piskel(width, height, 12, descriptor);
+    var layer = new pskl.model.Layer('Layer 1');
+    var frame = new pskl.model.Frame(width, height);
+
+    layer.addFrame(frame);
+    piskel.addLayer(layer);
+
+    return piskel;
+  };
+
+  ns.DrawingTestPlayer.prototype.regenerateReferencePng = function (callback) {
+    var image = new Image();
+    image.onload = function () {
+      this.referenceCanvas = pskl.utils.CanvasUtils.createFromImage(image);
+      callback();
+    }.bind(this);
+    image.src = this.referencePng;
+  };
+
+  /**
+   * Catch all mouse events to avoid perturbations during the test
+   */
+  ns.DrawingTestPlayer.prototype.createMouseShim_ = function () {
+    this.shim = document.createElement('DIV');
+    this.shim.style.cssText = 'position:fixed;top:0;left:0;right:0;left:0;bottom:0;z-index:15000';
+    this.shim.addEventListener('mousemove', function (e) {
+      e.stopPropagation();
+      e.preventDefault();
+    }, true);
+    document.body.appendChild(this.shim);
+  };
+
+  ns.DrawingTestPlayer.prototype.removeMouseShim_ = function () {
+    this.shim.parentNode.removeChild(this.shim);
+    this.shim = null;
+  };
+
+  ns.DrawingTestPlayer.prototype.playEvent_ = function (index) {
+    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') {
+        this.playKeyboardEvent_(recordEvent);
+      } else if (recordEvent.type === 'color-event') {
+        this.playColorEvent_(recordEvent);
+      } else if (recordEvent.type === 'tool-event') {
+        this.playToolEvent_(recordEvent);
+      } else if (recordEvent.type === 'pensize-event') {
+        this.playPenSizeEvent_(recordEvent);
+      } else if (recordEvent.type === 'transformtool-event') {
+        this.playTransformToolEvent_(recordEvent);
+      } else if (recordEvent.type === 'instrumented-event') {
+        this.playInstrumentedEvent_(recordEvent);
+      }
+
+      // Record the time spent replaying the event
+      this.performance += window.performance.now() - before;
+
+      this.playEvent_(index + 1);
+    }.bind(this), this.step);
+  };
+
+  ns.DrawingTestPlayer.prototype.playMouseEvent_ = function (recordEvent) {
+    var event = recordEvent.event;
+    var screenCoordinates = pskl.app.drawingController.getScreenCoordinates(recordEvent.coords.x, recordEvent.coords.y);
+    event.clientX = screenCoordinates.x;
+    event.clientY = screenCoordinates.y;
+    if (pskl.utils.UserAgent.isMac && event.ctrlKey) {
+      event.metaKey = true;
+    }
+
+    if (event.type == 'mousedown') {
+      pskl.app.drawingController.onMousedown_(event);
+    } else if (event.type == 'mouseup') {
+      pskl.app.drawingController.onMouseup_(event);
+    } else if (event.type == 'mousemove') {
+      pskl.app.drawingController.onMousemove_(event);
+    }
+  };
+
+  ns.DrawingTestPlayer.prototype.playKeyboardEvent_ = function (recordEvent) {
+    var event = recordEvent.event;
+    if (pskl.utils.UserAgent.isMac) {
+      event.metaKey = event.ctrlKey;
+    }
+
+    event.preventDefault = function () {};
+    pskl.app.shortcutService.onKeyDown_(event);
+  };
+
+  ns.DrawingTestPlayer.prototype.playColorEvent_ = function (recordEvent) {
+    if (recordEvent.isPrimary) {
+      $.publish(Events.SELECT_PRIMARY_COLOR, [recordEvent.color]);
+    } else {
+      $.publish(Events.SELECT_SECONDARY_COLOR, [recordEvent.color]);
+    }
+  };
+
+  ns.DrawingTestPlayer.prototype.playToolEvent_ = function (recordEvent) {
+    $.publish(Events.SELECT_TOOL, [recordEvent.toolId]);
+  };
+
+  ns.DrawingTestPlayer.prototype.playPenSizeEvent_ = function (recordEvent) {
+    pskl.app.penSizeService.setPenSize(recordEvent.penSize);
+  };
+
+  ns.DrawingTestPlayer.prototype.playTransformToolEvent_ = function (recordEvent) {
+    pskl.app.transformationsController.applyTool(recordEvent.toolId, recordEvent.event);
+  };
+
+  ns.DrawingTestPlayer.prototype.playInstrumentedEvent_ = function (recordEvent) {
+    pskl.app.piskelController[recordEvent.methodName].apply(pskl.app.piskelController, recordEvent.args);
+  };
+
+  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);
+    var canvas = renderer.renderAsCanvas();
+    var testData = canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height);
+
+    // Retrieve the reference imageData corresponding to the reference data-url png stored for this test.
+    var refCanvas = this.referenceCanvas;
+    this.referenceData = refCanvas.getContext('2d').getImageData(0, 0, refCanvas.width, refCanvas.height);
+
+    // Compare the two imageData arrays.
+    var success = true;
+    for (var i = 0 ; i < this.referenceData.data.length ; i++) {
+      if (this.referenceData.data[i] != testData.data[i]) {
+        success = false;
+      }
+    }
+
+    $.publish(Events.TEST_RECORD_END, [success]);
+    this.callbacks.forEach(function (callback) {
+      callback({
+        success: success,
+        performance: this.performance
+      });
+    }.bind(this));
+  };
+
+  ns.DrawingTestPlayer.prototype.addEndTestCallback = function (callback) {
+    this.callbacks.push(callback);
+  };
+
+})();

dev/js/devtools/DrawingTestRecorder.js

@@ -0,0 +1,159 @@
+(function () {
+  var ns = $.namespace('pskl.devtools');
+
+  ns.DrawingTestRecorder = function (piskelController) {
+    this.piskelController = piskelController;
+    this.isRecording = false;
+    this.reset();
+  };
+
+  ns.DrawingTestRecorder.prototype.init = function () {
+    $.subscribe(Events.MOUSE_EVENT, this.onMouseEvent_.bind(this));
+    $.subscribe(Events.KEYBOARD_EVENT, this.onKeyboardEvent_.bind(this));
+    $.subscribe(Events.TOOL_SELECTED, this.onToolEvent_.bind(this));
+    $.subscribe(Events.PEN_SIZE_CHANGED, this.onPenSizeChanged_.bind(this));
+    $.subscribe(Events.TRANSFORMATION_EVENT, this.onTransformationEvent_.bind(this));
+    $.subscribe(Events.PRIMARY_COLOR_SELECTED, this.onColorEvent_.bind(this, true));
+    $.subscribe(Events.SECONDARY_COLOR_SELECTED, this.onColorEvent_.bind(this, false));
+
+    for (var key in this.piskelController) {
+      if (typeof this.piskelController[key] == 'function') {
+        var methodTriggersReset = this.piskelController[key].toString().indexOf('Events.PISKEL_RESET') != -1;
+        if (methodTriggersReset) {
+          this.piskelController[key] = this.instrumentMethod_(this.piskelController, key);
+        }
+      }
+    }
+  };
+
+  ns.DrawingTestRecorder.prototype.instrumentMethod_ = function (object, methodName) {
+    var method = object[methodName];
+    var testRecorder = this;
+    return function () {
+      testRecorder.onInstrumentedMethod_(object, methodName, arguments);
+      return method.apply(this, arguments);
+    };
+  };
+
+  ns.DrawingTestRecorder.prototype.reset = function () {
+    this.initialState = {};
+    this.events = [];
+  };
+
+  ns.DrawingTestRecorder.prototype.startRecord = function () {
+    this.isRecording = true;
+    this.initialState = {
+      size : {
+        width : this.piskelController.getWidth(),
+        height : this.piskelController.getHeight()
+      },
+      primaryColor : pskl.app.selectedColorsService.getPrimaryColor(),
+      secondaryColor : pskl.app.selectedColorsService.getSecondaryColor(),
+      selectedTool : pskl.app.toolController.currentSelectedTool.toolId,
+      penSize : pskl.app.penSizeService.getPenSize()
+    };
+  };
+
+  ns.DrawingTestRecorder.prototype.stopRecord = function () {
+    this.isRecording = false;
+
+    var renderer = new pskl.rendering.PiskelRenderer(this.piskelController);
+    var png = renderer.renderAsCanvas().toDataURL();
+
+    var testRecord = JSON.stringify({
+      events : this.events,
+      initialState : this.initialState,
+      png : png
+    }, null, ' ');
+
+    this.reset();
+
+    return testRecord;
+  };
+
+  ns.DrawingTestRecorder.prototype.onMouseEvent_ = function (evt, mouseEvent, originator) {
+    if (this.isRecording) {
+      this.recordMouseEvent_(mouseEvent);
+    }
+  };
+
+  ns.DrawingTestRecorder.prototype.onKeyboardEvent_ = function (evt, domEvent) {
+    if (this.isRecording) {
+      var recordEvent = {};
+      recordEvent.type = 'keyboard-event';
+      recordEvent.event = {
+        which : domEvent.which,
+        shiftKey : domEvent.shiftKey,
+        altKey : domEvent.altKey,
+        ctrlKey : domEvent.ctrlKey || domEvent.metaKey,
+        target : {
+          nodeName : domEvent.target.nodeName
+        }
+      };
+      this.events.push(recordEvent);
+    }
+  };
+
+  ns.DrawingTestRecorder.prototype.onColorEvent_ = function (isPrimary, evt, color) {
+    if (this.isRecording) {
+      var recordEvent = {};
+      recordEvent.type = 'color-event';
+      recordEvent.color = color;
+      recordEvent.isPrimary = isPrimary;
+      this.events.push(recordEvent);
+    }
+  };
+
+  ns.DrawingTestRecorder.prototype.onToolEvent_ = function (evt, tool) {
+    if (this.isRecording) {
+      var recordEvent = {};
+      recordEvent.type = 'tool-event';
+      recordEvent.toolId = tool.toolId;
+      this.events.push(recordEvent);
+    }
+  };
+
+  ns.DrawingTestRecorder.prototype.onPenSizeChanged_ = function (evt) {
+    if (this.isRecording) {
+      var recordEvent = {};
+      recordEvent.type = 'pensize-event';
+      recordEvent.penSize = pskl.app.penSizeService.getPenSize();
+      this.events.push(recordEvent);
+    }
+  };
+
+  ns.DrawingTestRecorder.prototype.onTransformationEvent_ = function (evt, toolId, domEvent) {
+    if (this.isRecording) {
+      var recordEvent = {};
+      recordEvent.type = 'transformtool-event';
+      recordEvent.toolId = toolId;
+      recordEvent.event = {
+        shiftKey : domEvent.shiftKey,
+        altKey : domEvent.altKey,
+        ctrlKey : domEvent.ctrlKey
+      };
+      this.events.push(recordEvent);
+    }
+  };
+
+  ns.DrawingTestRecorder.prototype.onInstrumentedMethod_ = function (callee, methodName, args) {
+    if (this.isRecording) {
+      var recordEvent = {};
+      recordEvent.type = 'instrumented-event';
+      recordEvent.methodName = methodName;
+      recordEvent.args = Array.prototype.slice.call(args, 0);
+      this.events.push(recordEvent);
+    }
+  };
+
+  ns.DrawingTestRecorder.prototype.recordMouseEvent_ = function (mouseEvent) {
+    var coords = pskl.app.drawingController.getSpriteCoordinates(mouseEvent.clientX, mouseEvent.clientY);
+    var recordEvent = new ns.MouseEvent(mouseEvent, coords);
+    var lastEvent = this.events[this.events.length - 1];
+
+    if (!recordEvent.equals(lastEvent)) {
+      this.events.push(recordEvent);
+    }
+  };
+
+})();

dev/js/devtools/DrawingTestRunner.js

@@ -0,0 +1,24 @@
+(function () {
+  var ns = $.namespace('pskl.devtools');
+
+  ns.DrawingTestRunner = function (testName) {
+    this.testName = testName;
+    $.subscribe(Events.TEST_RECORD_END, this.onTestRecordEnd_.bind(this));
+  };
+
+  ns.DrawingTestRunner.prototype.start = function () {
+    pskl.utils.Xhr.get(this.testName, function (response) {
+      var res = response.responseText;
+      var recordPlayer = new ns.DrawingTestPlayer(JSON.parse(res));
+      recordPlayer.start();
+    }.bind(this));
+  };
+
+  ns.DrawingTestRunner.prototype.onTestRecordEnd_ = function (evt, success) {
+    var testResult = document.createElement('div');
+    testResult.id = 'drawing-test-result';
+    testResult.setAttribute('data-test-name', this.testName);
+    testResult.innerHTML = success ? 'OK' : 'KO';
+    document.body.appendChild(testResult);
+  };
+})();

dev/js/devtools/DrawingTestSuiteController.js

@@ -0,0 +1,85 @@
+(function () {
+  var ns = $.namespace('pskl.devtools');
+
+  ns.DrawingTestSuiteController = function (suitePath) {
+    if (suitePath.indexOf('/') === -1) {
+      suitePath = [Constants.DRAWING_TEST_FOLDER, suitePath].join('/');
+    }
+    this.suitePath = suitePath;
+    this.testSuiteRunner = null;
+  };
+
+  ns.DrawingTestSuiteController.prototype.init = function () {
+    $.subscribe(Events.TEST_CASE_END, this.onTestCaseEnd_.bind(this));
+    $.subscribe(Events.TEST_SUITE_END, this.onTestSuiteEnd_.bind(this));
+  };
+
+  ns.DrawingTestSuiteController.prototype.start = function () {
+    this.reset();
+    this.startTime_ = Date.now();
+    pskl.utils.Xhr.get(this.suitePath, this.onTestSuiteLoaded_.bind(this));
+
+    var testSuiteStatus = document.createElement('li');
+    testSuiteStatus.innerHTML = pskl.utils.Template.replace(
+      '<b>Test Suite [{{path}}]</b>',
+      {path : this.shortenPath_(this.suitePath)}
+    );
+    this.testListElt.appendChild(testSuiteStatus);
+  };
+
+  ns.DrawingTestSuiteController.prototype.reset = function () {
+    this.domElt = document.createElement('div');
+    this.domElt.style.cssText = 'position:absolute;z-index:10000;margin:5px;padding:10px;background:lightgrey';
+
+    this.testListElt = document.createElement('ul');
+
+    this.domElt.appendChild(this.testListElt);
+
+    document.body.appendChild(this.domElt);
+  };
+
+  ns.DrawingTestSuiteController.prototype.onTestSuiteLoaded_ = function (response) {
+    var testPaths = JSON.parse(response.responseText).tests;
+    testPaths = testPaths.map(function (path) {
+      return [Constants.DRAWING_TEST_FOLDER, 'tests', path].join('/');
+    }.bind(this));
+    this.testSuiteRunner = new ns.DrawingTestSuiteRunner(testPaths);
+    this.testSuiteRunner.start();
+  };
+
+  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}} ({{performance}})</b>',
+      {
+        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, performance) {
+    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}}s, performance: {{performance}})',
+      {
+        status : status,
+        elapsed : elapsed,
+        performance: performance.toFixed(2)
+      }
+    );
+    this.testListElt.appendChild(testSuiteStatus);
+  };
+
+  ns.DrawingTestSuiteController.prototype.shortenPath_ = function (path) {
+    // keep only the part after the last '/'
+    return path.replace(/^.*\/([^\/]+.json$)/, '$1');
+  };
+})();

dev/js/devtools/DrawingTestSuiteRunner.js

@@ -0,0 +1,68 @@
+(function () {
+  var ns = $.namespace('pskl.devtools');
+
+  ns.DrawingTestSuiteRunner = function (testPaths) {
+    if (Array.isArray(testPaths)) {
+      this.testStatus = {};
+      this.testPaths = testPaths;
+      this.status = ns.DrawingTestSuiteRunner.STATUS.NOT_STARTED;
+      this.currentIndex = -1;
+    } else {
+      throw new Error('testPaths should be an array of string (test paths)');
+    }
+  };
+
+  ns.DrawingTestSuiteRunner.STATUS = {
+    ERROR : 'ERROR',
+    FAILED : 'FAILED',
+    SUCCESS : 'SUCCESS',
+    ONGOING : 'ONGOING',
+    NOT_STARTED : 'NOT_STARTED'
+  };
+
+  ns.DrawingTestSuiteRunner.prototype.start = function () {
+    this.status = ns.DrawingTestSuiteRunner.STATUS.ONGOING;
+    this.runTest(0);
+  };
+
+  ns.DrawingTestSuiteRunner.prototype.runTest = function (testIndex) {
+    this.currentIndex = testIndex;
+    var path = this.testPaths[testIndex];
+    if (path) {
+      pskl.utils.Xhr.get(path, this.onTestLoaded_.bind(this));
+    } else {
+      this.onTestSuiteEnd_();
+    }
+  };
+
+  ns.DrawingTestSuiteRunner.prototype.onTestLoaded_ = function (response) {
+    var testRecord = JSON.parse(response.responseText);
+
+    var testPlayer = new ns.DrawingTestPlayer(testRecord);
+
+    testPlayer.addEndTestCallback(this.onTestEnd_.bind(this));
+    testPlayer.start();
+  };
+
+  ns.DrawingTestSuiteRunner.prototype.onTestEnd_ = function (data /* {success, performance} */) {
+    var path = this.testPaths[this.currentIndex];
+    this.testStatus[path] = data;
+
+    $.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].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, performance]);
+  };
+})();

dev/js/devtools/MouseEvent.js

@@ -0,0 +1,25 @@
+(function () {
+  var ns = $.namespace('pskl.devtools');
+
+  ns.MouseEvent = function (event, coords) {
+    this.event = {
+      type : event.type,
+      button : event.button,
+      shiftKey : event.shiftKey,
+      altKey : event.altKey,
+      ctrlKey : event.ctrlKey
+    };
+    this.coords = coords;
+    this.type = 'mouse-event';
+  };
+
+  ns.MouseEvent.prototype.equals = function (otherEvent) {
+    if (otherEvent && otherEvent instanceof ns.MouseEvent) {
+      var sameEvent = JSON.stringify(otherEvent.event) == JSON.stringify(this.event);
+      var sameCoords = JSON.stringify(otherEvent.coords) == JSON.stringify(this.coords);
+      return sameEvent && sameCoords;
+    } else {
+      return false;
+    }
+  };
+})();

dev/js/devtools/TestRecordController.js

@@ -0,0 +1,76 @@
+(function () {
+  var ns = $.namespace('pskl.devtools');
+
+  ns.TestRecordController = function (testRecorder) {
+    this.testRecorder = testRecorder;
+    $.subscribe(Events.TEST_RECORD_END, this.onTestRecordEnd_.bind(this));
+  };
+
+  ns.TestRecordController.prototype.init  = function () {
+    var fileInput = document.createElement('input');
+    fileInput.setAttribute('type', 'file');
+    fileInput.addEventListener('change', this.onFileInputChange_.bind(this));
+    fileInput.style.display = 'none';
+
+    var container = document.createElement('div');
+    container.style.cssText = 'position:absolute;z-index:10000;margin:5px;padding:10px;background:lightgrey';
+    document.body.appendChild(container);
+
+    var loadInput = document.createElement('button');
+    loadInput.innerHTML = 'Load Test ...';
+    loadInput.addEventListener('click', this.onLoadInputClick_.bind(this));
+
+    var startInput = document.createElement('button');
+    startInput.innerHTML = 'Start record';
+    startInput.addEventListener('click', this.onStartInputClick_.bind(this));
+
+    var stopInput = document.createElement('button');
+    stopInput.innerHTML = 'Stop record';
+    stopInput.addEventListener('click', this.onStopInputClick_.bind(this));
+    stopInput.setAttribute('disabled', 'disabled');
+
+    this.container = container;
+    this.fileInput = this.container.appendChild(fileInput);
+    this.loadInput = this.container.appendChild(loadInput);
+    this.startInput = this.container.appendChild(startInput);
+    this.stopInput = this.container.appendChild(stopInput);
+  };
+
+  ns.TestRecordController.prototype.onLoadInputClick_  = function () {
+    this.fileInput.click();
+  };
+
+  ns.TestRecordController.prototype.onFileInputChange_  = function () {
+    var files = this.fileInput.files;
+    if (files.length == 1) {
+      var file = files[0];
+      pskl.utils.FileUtils.readFile(file, function (content) {
+        var testRecord = JSON.parse(window.atob(content.replace(/data\:.*?\;base64\,/, '')));
+        var testPlayer = new ns.DrawingTestPlayer(testRecord);
+        testPlayer.start();
+      }.bind(this));
+    }
+  };
+
+  ns.TestRecordController.prototype.onStartInputClick_  = function () {
+    this.testRecorder.startRecord();
+    this.startInput.setAttribute('disabled', 'disabled');
+    this.stopInput.removeAttribute('disabled');
+  };
+
+  ns.TestRecordController.prototype.onStopInputClick_  = function () {
+    var testRecord = this.testRecorder.stopRecord();
+
+    pskl.utils.BlobUtils.stringToBlob(testRecord, function(blob) {
+      pskl.utils.FileUtils.downloadAsFile(blob, 'record_piskel.json');
+    }.bind(this), 'application/json');
+
+    this.startInput.removeAttribute('disabled');
+    this.stopInput.setAttribute('disabled', 'disabled');
+  };
+
+  ns.TestRecordController.prototype.onTestRecordEnd_  = function (evt, success) {
+    window.alert('Test finished : ' + (success ? 'success' : 'failed'));
+  };
+
+})();

dev/js/devtools/init.js

@@ -0,0 +1,34 @@
+(function () {
+  var ns = $.namespace('pskl.devtools');
+
+  ns.init = function () {
+    var href = document.location.href.toLowerCase();
+    // test tools
+    var testModeOn = href.indexOf('test=true') !== -1;
+    if (testModeOn) {
+      this.testRecorder = new pskl.devtools.DrawingTestRecorder(pskl.app.piskelController);
+      this.testRecorder.init();
+
+      this.testRecordController = new pskl.devtools.TestRecordController(this.testRecorder);
+      this.testRecordController.init();
+    }
+
+    // test tools
+    var runTestModeOn = href.indexOf('test-run=') !== -1;
+    if (runTestModeOn) {
+      var testPath = href.split('test-run=')[1];
+      this.testRunner = new pskl.devtools.DrawingTestRunner(testPath);
+      this.testRunner.start();
+    }
+
+    // test tools
+    var runSuiteModeOn = href.indexOf('test-suite=') !== -1;
+    if (runSuiteModeOn) {
+      var suitePath = href.split('test-suite=')[1];
+      this.testSuiteController = new pskl.devtools.DrawingTestSuiteController(suitePath);
+      this.testSuiteController.init();
+      this.testSuiteController.start();
+    }
+  };
+
+})();

dev/js/devtools/lib/Blob.js

@@ -0,0 +1,195 @@
+(function (view) {
+  "use strict";
+
+  view.URL = view.URL || view.webkitURL;
+
+  if (view.Blob && view.URL) {
+    try {
+      new Blob;
+      return;
+    } catch (e) {}
+  }
+
+  // Internally we use a BlobBuilder implementation to base Blob off of
+  // in order to support older browsers that only have BlobBuilder
+  var BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || (function(view) {
+    var
+        get_class = function(object) {
+        return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
+      }
+      , FakeBlobBuilder = function BlobBuilder() {
+        this.data = [];
+      }
+      , FakeBlob = function Blob(data, type, encoding) {
+        this.data = data;
+        this.size = data.length;
+        this.type = type;
+        this.encoding = encoding;
+      }
+      , FBB_proto = FakeBlobBuilder.prototype
+      , FB_proto = FakeBlob.prototype
+      , FileReaderSync = view.FileReaderSync
+      , FileException = function(type) {
+        this.code = this[this.name = type];
+      }
+      , file_ex_codes = (
+          "NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR "
+        + "NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR"
+      ).split(" ")
+      , file_ex_code = file_ex_codes.length
+      , real_URL = view.URL || view.webkitURL || view
+      , real_create_object_URL = real_URL.createObjectURL
+      , real_revoke_object_URL = real_URL.revokeObjectURL
+      , URL = real_URL
+      , btoa = view.btoa
+      , atob = view.atob
+
+      , ArrayBuffer = view.ArrayBuffer
+      , Uint8Array = view.Uint8Array
+
+      , origin = /^[\w-]+:\/*\[?[\w\.:-]+\]?(?::[0-9]+)?/
+    ;
+    FakeBlob.fake = FB_proto.fake = true;
+    while (file_ex_code--) {
+      FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1;
+    }
+    // Polyfill URL
+    if (!real_URL.createObjectURL) {
+      URL = view.URL = function(uri) {
+        var
+            uri_info = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
+          , uri_origin
+        ;
+        uri_info.href = uri;
+        if (!("origin" in uri_info)) {
+          if (uri_info.protocol.toLowerCase() === "data:") {
+            uri_info.origin = null;
+          } else {
+            uri_origin = uri.match(origin);
+            uri_info.origin = uri_origin && uri_origin[1];
+          }
+        }
+        return uri_info;
+      };
+    }
+    URL.createObjectURL = function(blob) {
+      var
+          type = blob.type
+        , data_URI_header
+      ;
+      if (type === null) {
+        type = "application/octet-stream";
+      }
+      if (blob instanceof FakeBlob) {
+        data_URI_header = "data:" + type;
+        if (blob.encoding === "base64") {
+          return data_URI_header + ";base64," + blob.data;
+        } else if (blob.encoding === "URI") {
+          return data_URI_header + "," + decodeURIComponent(blob.data);
+        } if (btoa) {
+          return data_URI_header + ";base64," + btoa(blob.data);
+        } else {
+          return data_URI_header + "," + encodeURIComponent(blob.data);
+        }
+      } else if (real_create_object_URL) {
+        return real_create_object_URL.call(real_URL, blob);
+      }
+    };
+    URL.revokeObjectURL = function(object_URL) {
+      if (object_URL.substring(0, 5) !== "data:" && real_revoke_object_URL) {
+        real_revoke_object_URL.call(real_URL, object_URL);
+      }
+    };
+    FBB_proto.append = function(data/*, endings*/) {
+      var bb = this.data;
+      // decode data to a binary string
+      if (Uint8Array && (data instanceof ArrayBuffer || data instanceof Uint8Array)) {
+        var
+            str = ""
+          , buf = new Uint8Array(data)
+          , i = 0
+          , buf_len = buf.length
+        ;
+        for (; i < buf_len; i++) {
+          str += String.fromCharCode(buf[i]);
+        }
+        bb.push(str);
+      } else if (get_class(data) === "Blob" || get_class(data) === "File") {
+        if (FileReaderSync) {
+          var fr = new FileReaderSync;
+          bb.push(fr.readAsBinaryString(data));
+        } else {
+          // async FileReader won't work as BlobBuilder is sync
+          throw new FileException("NOT_READABLE_ERR");
+        }
+      } else if (data instanceof FakeBlob) {
+        if (data.encoding === "base64" && atob) {
+          bb.push(atob(data.data));
+        } else if (data.encoding === "URI") {
+          bb.push(decodeURIComponent(data.data));
+        } else if (data.encoding === "raw") {
+          bb.push(data.data);
+        }
+      } else {
+        if (typeof data !== "string") {
+          data += ""; // convert unsupported types to strings
+        }
+        // decode UTF-16 to binary string
+        bb.push(unescape(encodeURIComponent(data)));
+      }
+    };
+    FBB_proto.getBlob = function(type) {
+      if (!arguments.length) {
+        type = null;
+      }
+      return new FakeBlob(this.data.join(""), type, "raw");
+    };
+    FBB_proto.toString = function() {
+      return "[object BlobBuilder]";
+    };
+    FB_proto.slice = function(start, end, type) {
+      var args = arguments.length;
+      if (args < 3) {
+        type = null;
+      }
+      return new FakeBlob(
+          this.data.slice(start, args > 1 ? end : this.data.length)
+        , type
+        , this.encoding
+      );
+    };
+    FB_proto.toString = function() {
+      return "[object Blob]";
+    };
+    FB_proto.close = function() {
+      this.size = 0;
+      delete this.data;
+    };
+    return FakeBlobBuilder;
+  }(view));
+
+  view.Blob = function(blobParts, options) {
+    var type = options ? (options.type || "") : "";
+    var builder = new BlobBuilder();
+    if (blobParts) {
+      for (var i = 0, len = blobParts.length; i < len; i++) {
+        if (Uint8Array && blobParts[i] instanceof Uint8Array) {
+          builder.append(blobParts[i].buffer);
+        }
+        else {
+          builder.append(blobParts[i]);
+        }
+      }
+    }
+    var blob = builder.getBlob(type);
+    if (!blob.slice && blob.webkitSlice) {
+      blob.slice = blob.webkitSlice;
+    }
+    return blob;
+  };
+
+  var getPrototypeOf = Object.getPrototypeOf || function(object) {
+    return object.__proto__;
+  };
+  view.Blob.prototype = getPrototypeOf(new view.Blob());
+}(typeof self !== "undefined" && self || typeof window !== "undefined" && window || this.content || this));