Merge pull request #269 from juliandescottes/current-colors-webworker

Current colors webworker

Gruntfile.js

@@ -71,6 +71,23 @@ module.exports = function(grunt) {
     clean: {
       before: ['dest']
     },
+    leadingIndent : {
+      options: {
+        indentation : "spaces"
+      },
+      css : ['src/css/**/*.css']
+    },
+    jscs : {
+      options : {
+        "preset": "google",
+        "maximumLineLength": 120,
+        "requireCamelCaseOrUpperCaseIdentifiers": "ignoreProperties",
+        "validateQuoteMarks": { "mark": "'", "escape": true },
+        "disallowMultipleVarDecl": "exceptUndefined",
+        "disallowSpacesInAnonymousFunctionExpression": null
+      },
+      js : [ 'src/js/**/*.js' , '!src/js/**/lib/**/*.js' ]
+    },
     jshint: {
       options: {
         undef : true,
@@ -78,13 +95,13 @@ module.exports = function(grunt) {
         browser : true,
         trailing : true,
         curly : true,
-        globals : {'$':true, 'jQuery' : true, 'pskl':true, 'Events':true, 'Constants':true, 'console' : true, 'module':true, 'require':true}
+        globals : {'$':true, 'jQuery' : true, 'pskl':true, 'Events':true, 'Constants':true, 'console' : true, 'module':true, 'require':true, 'Q':true}
       },
       files: [
         'Gruntfile.js',
         'package.json',
         'src/js/**/*.js',
-        '!src/js/lib/**/*.js' // Exclude lib folder (note the leading !)
+        '!src/js/**/lib/**/*.js' // Exclude lib folder (note the leading !)
       ]
     },
     express: {
@@ -208,23 +225,6 @@ module.exports = function(grunt) {
         linux64: true
       },
       src: ['./dest/**/*', "./package.json", "!./dest/desktop/"]
-    },
-    leadingIndent : {
-      options: {
-        indentation : "spaces"
-      },
-      css : ['src/css/**/*.css']
-    },
-    jscs : {
-      options : {
-        "preset": "google",
-        "maximumLineLength": 120,
-        "requireCamelCaseOrUpperCaseIdentifiers": "ignoreProperties",
-        "validateQuoteMarks": { "mark": "'", "escape": true },
-        "disallowMultipleVarDecl": "exceptUndefined",
-        "disallowSpacesInAnonymousFunctionExpression": null
-      },
-      js : [ 'src/js/**/*.js' , '!src/js/lib/**/*.js' ]
     }
   });
 
@@ -238,6 +238,7 @@ module.exports = function(grunt) {
   grunt.registerTask('test-travis', ['lint', 'unit-test', 'express:test', 'ghost:travis']);
   // Validate & Test (faster version) will NOT work on travis !!
   grunt.registerTask('test-local', ['lint', 'unit-test', 'express:test', 'ghost:local']);
+  grunt.registerTask('test-local-nolint', ['unit-test', 'express:test', 'ghost:local']);
 
   grunt.registerTask('test', ['test-travis']);
   grunt.registerTask('precommit', ['test-local']);

src/js/Constants.js

@@ -11,7 +11,7 @@ var Constants = {
   MAX_HEIGHT : 1024,
   MAX_WIDTH : 1024,
 
-  MAX_CURRENT_COLORS_DISPLAYED : 100,
+  MAX_PALETTE_COLORS : 100,
 
   MINIMUM_ZOOM : 1,
 

src/js/controller/PalettesListController.js

@@ -89,8 +89,8 @@
       colors = palette.getColors();
     }
 
-    if (colors.length > Constants.MAX_CURRENT_COLORS_DISPLAYED) {
-      colors = colors.slice(0, Constants.MAX_CURRENT_COLORS_DISPLAYED);
+    if (colors.length > Constants.MAX_PALETTE_COLORS) {
+      colors = colors.slice(0, Constants.MAX_PALETTE_COLORS);
     }
 
     return colors;

src/js/controller/settings/exportimage/GifExportController.js

@@ -120,7 +120,7 @@
   };
 
   ns.GifExportController.prototype.renderAsImageDataAnimatedGIF = function(zoom, fps, cb) {
-    var currentColors = pskl.app.currentColorsService.computeCurrentColors();
+    var currentColors = pskl.app.currentColorsService.getCurrentColors();
 
     var preserveColors = currentColors.length < MAX_GIF_COLORS;
     var transparentColor = this.getTransparentColor(currentColors);

src/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));

src/js/model/frame/AsyncCachedFrameProcessor.js

@@ -0,0 +1,57 @@
+(function () {
+  var ns = $.namespace('pskl.model.frame');
+
+  ns.AsyncCachedFrameProcessor = function (cacheResetInterval) {
+    ns.CachedFrameProcessor.call(this, cacheResetInterval);
+  };
+
+  pskl.utils.inherit(ns.AsyncCachedFrameProcessor, ns.CachedFrameProcessor);
+
+  /**
+   * Retrieve the processed frame from the cache, in the (optional) namespace
+   * If the first level cache is empty, attempt to clone it from 2nd level cache.
+   * If second level cache is empty process the frame.
+   * @param  {pskl.model.Frame} frame
+   * @param  {String} namespace
+   * @return {Object} the processed frame
+   */
+  ns.AsyncCachedFrameProcessor.prototype.get = function (frame, namespace) {
+    var processedFrame = null;
+    namespace = namespace || this.defaultNamespace;
+
+    if (!this.cache_[namespace]) {
+      this.cache_[namespace] = {};
+    }
+
+    var deferred = Q.defer();
+
+    var cache = this.cache_[namespace];
+
+    var key1 = frame.getHash();
+    if (cache[key1]) {
+      processedFrame = cache[key1];
+    } else {
+      var framePixels = JSON.stringify(frame.getPixels());
+      var key2 = pskl.utils.hashCode(framePixels);
+      if (cache[key2]) {
+        processedFrame = this.outputCloner(cache[key2], frame);
+        cache[key1] = processedFrame;
+      } else {
+        var callback = this.onProcessorComplete_.bind(this, deferred, cache, key1, key2);
+        this.frameProcessor(frame, callback);
+      }
+    }
+
+    if (processedFrame) {
+      deferred.resolve(processedFrame);
+    }
+
+    return deferred.promise;
+  };
+
+  ns.AsyncCachedFrameProcessor.prototype.onProcessorComplete_ = function (deferred, cache, key1, key2, result) {
+    cache[key1] = result;
+    cache[key2] = result;
+    deferred.resolve(result);
+  };
+})();

src/js/model/frame/CachedFrameProcessor.js

@@ -17,6 +17,7 @@
     this.cacheResetInterval = cacheResetInterval || DEFAULT_CLEAR_INTERVAL;
     this.frameProcessor = DEFAULT_FRAME_PROCESSOR;
     this.outputCloner = DEFAULT_OUTPUT_CLONER;
+    this.defaultNamespace = DEFAULT_NAMESPACE;
 
     window.setInterval(this.clear.bind(this), this.cacheResetInterval);
   };

src/js/service/CurrentColorsService.js

@@ -7,10 +7,9 @@
     this.cache = {};
     this.currentColors = [];
 
-    this.cachedFrameProcessor = new pskl.model.frame.CachedFrameProcessor();
+    this.cachedFrameProcessor = new pskl.model.frame.AsyncCachedFrameProcessor();
     this.cachedFrameProcessor.setFrameProcessor(this.getFrameColors_.bind(this));
 
-    this.colorSorter = new pskl.service.color.ColorSorter();
     this.paletteService = pskl.app.paletteService;
   };
 
@@ -32,28 +31,42 @@
     }
   };
 
-  ns.CurrentColorsService.prototype.computeCurrentColors = function (max) {
+  ns.CurrentColorsService.prototype.isCurrentColorsPaletteSelected_ = function () {
+    var paletteId = pskl.UserSettings.get(pskl.UserSettings.SELECTED_PALETTE);
+    var palette = this.paletteService.getPaletteById(paletteId);
+
+    return palette.id === Constants.CURRENT_COLORS_PALETTE_ID;
+  };
+
+  ns.CurrentColorsService.prototype.loadColorsFromCache_ = function () {
+    var historyIndex = pskl.app.historyService.currentIndex;
+    var colors = this.cache[historyIndex];
+    if (colors) {
+      this.setCurrentColors(colors);
+    } else {
+      this.updateCurrentColors_();
+    }
+  };
+
+  ns.CurrentColorsService.prototype.updateCurrentColors_ = function () {
     var layers = this.piskelController.getLayers();
     var frames = layers.map(function (l) {return l.getFrames();}).reduce(function (p, n) {return p.concat(n);});
-    var colors = {};
 
-    frames.forEach(function (f) {
-      var frameColors = this.cachedFrameProcessor.get(f);
-      Object.keys(frameColors).slice(0, Constants.MAX_CURRENT_COLORS_DISPLAYED).forEach(function (color) {
-        colors[color] = true;
+    Q.all(
+      frames.map(function (frame) {
+        return this.cachedFrameProcessor.get(frame);
+      }.bind(this))
+    ).done(function (results) {
+      var colors = {};
+      results.forEach(function (result) {
+        Object.keys(result).forEach(function (color) {
+          colors[color] = true;
+        });
       });
+      // Remove transparent color from used colors
+      delete colors[Constants.TRANSPARENT_COLOR];
+      this.setCurrentColors(Object.keys(colors));
     }.bind(this));
-
-    // Remove transparent color from used colors
-    delete colors[Constants.TRANSPARENT_COLOR];
-
-    var colorsArray = Object.keys(colors);
-    // limit the array to the max colors to display
-    if (max) {
-      colorsArray = colorsArray.slice(0, Constants.MAX_CURRENT_COLORS_DISPLAYED);
-    }
-
-    return this.colorSorter.sort(colorsArray);
   };
 
   ns.CurrentColorsService.prototype.isCurrentColorsPaletteSelected_ = function () {
@@ -71,35 +84,13 @@
     }
   };
 
-  ns.CurrentColorsService.prototype.updateCurrentColors_ = function () {
-    var currentColors = this.computeCurrentColors(Constants.MAX_CURRENT_COLORS_DISPLAYED);
-    this.setCurrentColors(currentColors);
-  };
+  ns.CurrentColorsService.prototype.getFrameColors_ = function (frame, processorCallback) {
+    var frameColorsWorker = new pskl.worker.framecolors.FrameColors(frame,
+      function (event) {processorCallback(event.data.colors);},
+      function () {},
+      function (event) {processorCallback({});}
+    );
 
-  ns.CurrentColorsService.prototype.getFrameColors_ = function (frame) {
-    var frameColors = {};
-    frame.forEachPixel(function (color, x, y) {
-      var hexColor = this.toHexString_(color);
-      frameColors[hexColor] = true;
-    }.bind(this));
-    return frameColors;
-  };
-
-  ns.CurrentColorsService.prototype.toHexString_ = function (color) {
-    if (color === Constants.TRANSPARENT_COLOR) {
-      return color;
-    } else {
-      color = color.replace(/\s/g, '');
-      var hexRe = (/^#([a-f0-9]{3}){1,2}$/i);
-      var rgbRe = (/^rgb\((\d{1,3}),(\d{1,3}),(\d{1,3})\)$/i);
-      if (hexRe.test(color)) {
-        return color.toUpperCase();
-      } else if (rgbRe.test(color)) {
-        var exec = rgbRe.exec(color);
-        return pskl.utils.rgbToHex(exec[1] * 1, exec[2] * 1, exec[3] * 1);
-      } else {
-        console.error('Could not convert color to hex : ', color);
-      }
-    }
+    frameColorsWorker.process();
   };
 })();

src/js/service/palette/CurrentColorsPalette.js

@@ -4,9 +4,12 @@
   ns.CurrentColorsPalette = function () {
     this.name = 'Current colors';
     this.id = Constants.CURRENT_COLORS_PALETTE_ID;
+    this.colorSorter = new pskl.service.color.ColorSorter();
   };
 
   ns.CurrentColorsPalette.prototype.getColors = function () {
-    return pskl.app.currentColorsService.getCurrentColors();
+    var currentColors = pskl.app.currentColorsService.getCurrentColors();
+    currentColors = currentColors.slice(0, Constants.MAX_PALETTE_COLORS);
+    return this.colorSorter.sort(currentColors);
   };
 })();

src/js/service/palette/reader/PaletteImageReader.js

@@ -14,7 +14,7 @@
   };
 
   ns.PaletteImageReader.prototype.onImageLoaded_ = function (image) {
-    var imageProcessor = new pskl.worker.ImageProcessor(image,
+    var imageProcessor = new pskl.worker.imageprocessor.ImageProcessor(image,
       this.onWorkerSuccess_.bind(this),
       this.onWorkerStep_.bind(this),
       this.onWorkerError_.bind(this));
@@ -30,7 +30,7 @@
 
     var colors = Object.keys(colorsMap);
 
-    if (colors.length > 200) {
+    if (colors.length > Constants.MAX_PALETTE_COLORS) {
       this.onError('Too many colors : ' + colors.length);
     } else {
       var uuid = pskl.utils.Uuid.generate();

src/js/worker/framecolors/FrameColors.js

@@ -0,0 +1,32 @@
+(function () {
+  var ns = $.namespace('pskl.worker.framecolors');
+
+  ns.FrameColors = function (frame, onSuccess, onStep, onError) {
+    this.serializedFrame = JSON.stringify(frame.pixels);
+
+    this.onStep = onStep;
+    this.onSuccess = onSuccess;
+    this.onError = onError;
+
+    this.worker = pskl.utils.WorkerUtils.createWorker(ns.FrameColorsWorker, 'frame-colors');
+    this.worker.onmessage = this.onWorkerMessage.bind(this);
+  };
+
+  ns.FrameColors.prototype.process = function () {
+    this.worker.postMessage({
+      serializedFrame : this.serializedFrame
+    });
+  };
+
+  ns.FrameColors.prototype.onWorkerMessage = function (event) {
+    if (event.data.type === 'STEP') {
+      this.onStep(event);
+    } else if (event.data.type === 'SUCCESS') {
+      this.onSuccess(event);
+      this.worker.terminate();
+    } else if (event.data.type === 'ERROR') {
+      this.onError(event);
+      this.worker.terminate();
+    }
+  };
+})();

src/js/worker/framecolors/FrameColorsWorker.js

@@ -0,0 +1,66 @@
+(function () {
+  var ns = $.namespace('pskl.worker.framecolors');
+
+  if (Constants.TRANSPARENT_COLOR !== 'rgba(0, 0, 0, 0)') {
+    throw 'Constants.TRANSPARENT_COLOR, please update FrameColorsWorker';
+  }
+
+  ns.FrameColorsWorker = function () {
+
+    var TRANSPARENT_COLOR = 'rgba(0, 0, 0, 0)';
+
+    var toHexString_ = function(color) {
+      if (color === TRANSPARENT_COLOR) {
+        return color;
+      } else {
+        color = color.replace(/\s/g, '');
+        var hexRe = (/^#([a-f0-9]{3}){1,2}$/i);
+        var rgbRe = (/^rgb\((\d{1,3}),(\d{1,3}),(\d{1,3})\)$/i);
+        if (hexRe.test(color)) {
+          return color.toUpperCase();
+        } else if (rgbRe.test(color)) {
+          var exec = rgbRe.exec(color);
+          return rgbToHex(exec[1] * 1, exec[2] * 1, exec[3] * 1);
+        }
+      }
+    };
+
+    var rgbToHex = function (r, g, b) {
+      return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b);
+    };
+
+    var componentToHex = function (c) {
+      var hex = c.toString(16);
+      return hex.length == 1 ? '0' + hex : hex;
+    };
+
+    var getFrameColors = function (frame) {
+      var frameColors = {};
+      for (var x = 0 ; x < frame.length ; x++) {
+        for (var y = 0 ; y < frame[x].length ; y++) {
+          var color = frame[x][y];
+          var hexColor = toHexString_(color);
+          frameColors[hexColor] = true;
+        }
+      }
+      return frameColors;
+    };
+
+    this.onmessage = function(event) {
+      try {
+        var data = event.data;
+        var frame = JSON.parse(data.serializedFrame);
+        var colors = getFrameColors(frame);
+        this.postMessage({
+          type : 'SUCCESS',
+          colors : colors
+        });
+      } catch (e) {
+        this.postMessage({
+          type : 'ERROR',
+          message : e.message
+        });
+      }
+    };
+  };
+})();

src/js/worker/hash/Hash.js

@@ -8,7 +8,7 @@
     this.onSuccess = onSuccess;
     this.onError = onError;
 
-    this.worker = pskl.utils.WorkerUtils.createWorker(ns.HashWorker, 'hash-builder');
+    this.worker = pskl.utils.WorkerUtils.createWorker(ns.HashWorker, 'hash');
     this.worker.onmessage = this.onWorkerMessage.bind(this);
   };
 

src/js/worker/hash/HashWorker.js

@@ -1,7 +1,7 @@
 (function () {
-  var ns = $.namespace('pskl.worker');
+  var ns = $.namespace('pskl.worker.hash');
 
-  ns.HashBuilder = function () {
+  ns.HashWorker = function () {
     var hashCode = function(str) {
       var hash = 0;
       if (str.length !== 0) {

src/piskel-script-list.js

@@ -4,6 +4,8 @@
   // Core libraries
   "js/lib/jquery-1.8.0.js","js/lib/jquery-ui-1.10.3.custom.js","js/lib/pubsub.js","js/lib/bootstrap/bootstrap.js",
 
+
+
   // Application wide configuration
   "js/Constants.js",
   "js/Events.js",
@@ -51,6 +53,9 @@
   // Spectrum color-picker library
   "js/lib/spectrum/spectrum.js",
 
+  // Promises
+  "js/lib/q.js",
+
   // Application libraries-->
   "js/rendering/DrawingLoop.js",
 
@@ -59,6 +64,7 @@
   "js/model/Layer.js",
   "js/model/piskel/Descriptor.js",
   "js/model/frame/CachedFrameProcessor.js",
+  "js/model/frame/AsyncCachedFrameProcessor.js",
   "js/model/Palette.js",
   "js/model/Piskel.js",
 
@@ -187,8 +193,11 @@
   "js/devtools/MouseEvent.js",
   "js/devtools/TestRecordController.js",
   "js/devtools/init.js",
+  "js/devtools/lib/Blob.js",
 
   // Workers
+  "js/worker/framecolors/FrameColorsWorker.js",
+  "js/worker/framecolors/FrameColors.js",
   "js/worker/hash/HashWorker.js",
   "js/worker/hash/Hash.js",
   "js/worker/imageprocessor/ImageProcessorWorker.js",
@@ -196,6 +205,7 @@
 
   // Application controller and initialization
   "js/app.js",
+
   // Bonus features !!
   "js/snippets.js"
 ];