Return promise results from PiskelDB and IndexedDBStorageService

Gruntfile.js

@@ -47,13 +47,16 @@ module.exports = function(grunt) {
   var integrationTestPaths = require('./test/casperjs/integration/IntegrationSuite.js').tests;
   var integrationTests = prefixPaths(integrationTestPaths, "test/casperjs/integration/");
 
-  var getConnectConfig = function (base, port, host, open) {
+  var getConnectConfig = function (base, port, host) {
+    if (typeof base === 'string') {
+      base = [base];
+    }
+
     return {
       options: {
         port: port,
         hostname : host,
-        base: base,
+        base: base
-        open: open
       }
     };
   };
@@ -95,9 +98,18 @@ module.exports = function(grunt) {
      */
 
     connect: {
-      prod: getConnectConfig('dest/prod', PORT.PROD, hostname, true),
+      prod: getConnectConfig('dest/prod', PORT.PROD, hostname),
-      test: getConnectConfig(['dest/dev', 'test'], PORT.TEST, hostname, false),
+      test: getConnectConfig(['dest/dev', 'test'], PORT.TEST, hostname),
-      dev: getConnectConfig(['dest/dev', 'test'], PORT.DEV, hostname, 'http://' + hostname + ':' + PORT.DEV + '/?debug')
+      dev: getConnectConfig(['dest/dev', 'test'], PORT.DEV, hostname)
+    },
+
+    open : {
+      prod : {
+        path : 'http://' + hostname + ':' + PORT.PROD + '/'
+      },
+      dev : {
+        path : 'http://' + hostname + ':' + PORT.DEV + '/?debug'
+      }
     },
 
     watch: {
@@ -331,9 +343,9 @@ module.exports = function(grunt) {
 
   // SERVER TASKS
   // Start webserver and watch for changes
-  grunt.registerTask('serve', ['build', 'connect:prod', 'watch:prod']);
+  grunt.registerTask('serve', ['build', 'connect:prod', 'open:prod', 'watch:prod']);
   // Start webserver on src folder, in debug mode
-  grunt.registerTask('play', ['build-dev', 'connect:dev', 'watch:dev']);
+  grunt.registerTask('play', ['build-dev', 'connect:dev', 'open:dev', 'watch:dev']);
 
   // ALIASES, kept for backward compatibility
   grunt.registerTask('serve-debug', ['play']);

README.md

@@ -1,10 +1,10 @@
 Piskel
 ======
 
-[![Travis Status](https://api.travis-ci.org/piskelapp/piskel.png?branch=master)](https://travis-ci.org/piskelapp/piskel) [![Built with Grunt](https://cdn.gruntjs.com/builtwith.png)](https://gruntjs.com/)
+[![Travis Status](https://api.travis-ci.org/piskelapp/piskel.png?branch=master)](https://travis-ci.org/piskelapp/piskel) [![Built with Grunt](https://cdn.gruntjs.com/builtwith.png)](http://gruntjs.com/)
 
 Piskel is an easy-to-use sprite editor. It can be used to create game sprites, animations, pixel-art...
-It is the editor used in **[piskelapp.com](https://www.piskelapp.com)**.
+It is the editor used in **[piskelapp.com](http://piskelapp.com)**.
 
 <img
   src="https://screenletstore.appspot.com/img/95aaa0f0-37a4-11e7-a652-7b8128ce3e3b.png"
@@ -19,14 +19,14 @@ The Piskel editor is purely built in **JavaScript, HTML and CSS**.
 
 We also use the following **libraries** :
 * [spectrum](https://github.com/bgrins/spectrum) : awesome standalone colorpicker
-* [gifjs](https://jnordberg.github.io/gif.js/) : generate animated GIFs in javascript, using webworkers
+* [gifjs](http://jnordberg.github.io/gif.js/) : generate animated GIFs in javascript, using webworkers
 * [supergif](https://github.com/buzzfeed/libgif-js) : modified version of SuperGif to parse and import GIFs
 * [jszip](https://github.com/Stuk/jszip) : create, read and edit .zip files with Javascript
 * [canvas-toBlob](https://github.com/eligrey/canvas-toBlob.js/) : shim for canvas toBlob
-* [jquery](https://jquery.com/) : used sporadically in the application
+* [jquery](http://jquery.com/) : used sporadically in the application
-* [bootstrap-tooltip](https://getbootstrap.com/javascript/#tooltips) : nice tooltips
+* [bootstrap-tooltip](http://getbootstrap.com/javascript/#tooltips) : nice tooltips
 
-As well as some **icons** from the [Noun Project](https://thenounproject.com/) :
+As well as some **icons** from the [Noun Project](http://thenounproject.com/) :
 * Folder by Simple Icons from The Noun Project
 * (and probably one or two others)
 

cli/README.md

@@ -1,64 +0,0 @@
-# Piskel CLI
-
-Wraps the Piskel pixel editing application to enable similar export options via the command line.
-
-## Installation
-
-Option 1: Globally install Piskel
-```
-npm install -g https://github.com/piskelapp/piskel/tarball/master
-```
-
-Option 2: Clone and install Piskel normally and then run npm link inside the installation root
-
-## Usage
-
-**Export provided .piskel file as a png sprite sheet using app defaults**
-```
-piskel-cli snow-monster.piskel
-```
-
-**Export scaled sprite sheet**
-```
-piskel-cli snow-monster.piskel --scale 5
-```
-
-**Export scaled to specific (single frame) width value**
-```
-piskel-cli snow-monster.piskel --scaledWidth 435
-```
-
-**Export scaled to specific (single frame) height value**
-```
-piskel-cli snow-monster.piskel --scaledHeight 435
-```
-
-**Export sprite sheet as a single column**
-```
-piskel-cli snow-monster.piskel --columns 1
-```
-
-**Export sprite sheet as a single row**
-```
-piskel-cli snow-monster.piskel --rows 1
-```
-
-**Export a single frame (0 is first frame)**
-```
-piskel-cli snow-monster.piskel --frame 3
-```
-
-**Export a second file containing the data-uri for the exported png**
-```
-piskel-cli snow-monster.piskel --dataUri
-```
-
-**Export cropped**
-```
-piskel-cli snow-monster.piskel --crop
-```
-
-**Custom output path and/or filename**
-```
-piskel-cli snow-monster.piskel --dest ./output-folder/snah-monstah.png
-```

cli/export-png.js

@@ -1,130 +0,0 @@
-const fs = require('fs');
-
-function onPageEvaluate(window, options, piskel) {
-    console.log("\nPiskel name: " + piskel.descriptor.name);
-
-    // Setup piskelController
-    var piskelController = new pskl.controller.piskel.PiskelController(piskel);
-
-    pskl.app.piskelController = piskelController;
-
-    piskelController.init();
-
-    // Apply crop if enabled
-    if (options.crop) {
-        // Mock selection manager to avoid errors during crop
-        pskl.app.selectionManager = {};
-
-        // Setup crop tool
-        var crop = new pskl.tools.transform.Crop();
-
-        // Perform crop
-        crop.applyTransformation();
-
-        // Get cropped piskel
-        piskel = piskelController.getPiskel();
-    }
-
-    // Mock exportController to provide zoom value based on cli args
-    // and to avoid errors and/or unnecessary bootstrapping
-    var exportController = {
-        getExportZoom: function () {
-            var zoom = options.zoom;
-
-            if (options.scaledWidth) {
-                zoom = options.scaledWidth / piskel.getWidth();
-            } else if (options.scaledHeight) {
-                zoom = options.scaledHeight / piskel.getHeight();
-            }
-
-            return zoom;
-        }
-    };
-
-    // Setup pngExportController
-    var pngExportController = new pskl.controller.settings.exportimage.PngExportController(piskelController, exportController);
-
-    // Mock getColumns and getRows to use values from cli arguments
-    pngExportController.getColumns_ = function () {
-        if (options.columns) return options.columns;
-
-        if (options.rows) {
-            return Math.ceil(piskelController.getFrameCount() / pngExportController.getRows_());
-        } else {
-            return pngExportController.getBestFit_();
-        }
-    };
-
-    pngExportController.getRows_ = function () {
-        if (options.columns && !options.rows) {
-            return Math.ceil(piskelController.getFrameCount() / pngExportController.getColumns_());
-        }
-
-        return options.rows;
-    };
-
-    // Render to output canvas
-    var canvas;
-
-    if (options.frame > -1) {
-        // Render a single frame
-        canvas = piskelController.renderFrameAt(options.frame, true);
-
-        var zoom = exportController.getExportZoom();
-
-        if (zoom != 1) {
-            // Scale rendered frame
-            canvas = pskl.utils.ImageResizer.resize(canvas, canvas.width * zoom, canvas.height * zoom, false);
-        }
-    } else {
-        // Render the sprite sheet
-        canvas = pngExportController.createPngSpritesheet_();
-    }
-
-    // Add output canvas to DOM
-    window.document.body.appendChild(canvas);
-
-    // Prepare return data
-    const returnData = {
-        width: canvas.width,
-        height: canvas.height
-    };
-
-    // Wait a tick for things to wrap up
-    setTimeout(function ()  {
-        // Exit and pass data to parent process
-        window.callPhantom(returnData);
-    }, 0);
-}
-
-function onPageExit(page, options, data) {
-    // Set clip for output image
-    if (data.width && data.height) {
-        page.clipRect = { top: 0, left: 0, width: data.width, height: data.height };
-    }
-
-    console.log("\n" + 'Generated file(s):');
-
-    const dest = options.dest.replace('.png', '') + '.png';
-
-    // Render page to the output image
-    page.render(dest);
-
-    console.log(" " + dest);
-
-    if (options.dataUri) {
-        const dataUriPath = options.dest + '.datauri';
-
-        const dataUri = 'data:image/png;base64,' + page.renderBase64('PNG');
-
-        // Write data-uri to file
-        fs.write(dataUriPath, dataUri, 'w');
-
-        console.log(" " + dataUriPath);
-    }
-}
-
-module.exports = {
-    onPageEvaluate: onPageEvaluate,
-    onPageExit: onPageExit
-};

cli/index.js

@@ -1,93 +0,0 @@
-#!/usr/bin/env node
-
-const fs = require('fs');
-const path = require('path');
-const minimist = require('minimist');
-const childProcess = require('child_process');
-const phantomjs = require('phantomjs');
-const binPath = phantomjs.path;
-
-// Parse command args
-let args = minimist(process.argv.slice(2), {
-  default: {
-    crop: false,
-    dataUri: false,
-    debug: false,
-    scale: 1
-  },
-});
-
-if (args.debug) console.log(args);
-
-// Ensure a path for the src file was passed
-if (!args._ || (args._ && !args._.length)) {
-  console.error('Path to a .piskel file is required');
-
-  return;
-}
-
-const src = args._[0];
-
-// Ensure the src file exists
-if (!fs.existsSync(src)) {
-  console.error('No such file: ' + src);
-
-  return;
-}
-
-// Read src piskel file
-const piskelFile = fs.readFileSync(src, 'utf-8');
-
-const dest = args.dest || path.basename(src, '.piskel');
-
-console.log('Piskel CLI is exporting...');
-
-// Get path to Piskel's app js bundle
-let piskelAppJsDir = path.resolve(__dirname +'/../dest/prod/js/');
-let minJsFiles = fs.readdirSync(piskelAppJsDir).filter(filename => filename.indexOf('min') > -1);
-let piskelAppJsFileName = minJsFiles[0];
-let piskelAppJsPath = (piskelAppJsFileName) ? path.join(piskelAppJsDir, piskelAppJsFileName) : '';
-
-if (!fs.existsSync(piskelAppJsPath)) {
-  console.error(`Piskel's application JS file not found in: ${piskelAppJsDir}. Run prod build and try again.`);
-
-  return;
-}
-
-// Prepare args to pass to phantom script
-const options = {
-  dest: dest,
-  zoom: args.scale,
-  crop: !!args.crop,
-  rows: args.rows,
-  columns: args.columns,
-  frame: args.frame,
-  dataUri: !!args.dataUri,
-  debug: args.debug,
-  piskelAppJsPath: piskelAppJsPath,
-  scaledWidth: args.scaledWidth,
-  scaledHeight: args.scaledHeight
-};
-
-const childArgs = [
-  path.join(__dirname, 'piskel-export.js'),
-  piskelFile,
-  JSON.stringify(options)
-];
-
-if (args.debug) {
-  childArgs.unshift(
-    '--remote-debugger-port=9035',
-    '--remote-debugger-autorun=yes'
-  );
-}
-
-// Run phantom script
-childProcess.execFile(binPath, childArgs, function (err, stdout, stderr) {
-  // Print any output the from child process
-  if (err) console.log(err);
-  if (stderr) console.log(stderr);
-  if (stdout) console.log(stdout);
-
-  console.log('Export complete');
-});

cli/piskel-export.js

@@ -1,45 +0,0 @@
-// PhantomJS system
-const system = require('system');
-
-// Exporter
-const exporter = require('./export-png');
-
-// Get passed args
-const args = system.args;
-
-// Parse input piskel file and options
-const piskelFile = JSON.parse(args[1]);
-const options = JSON.parse(args[2]);
-
-// Create page w/ canvas
-const page = require('webpage').create();
-
-page.content = '<html><body></body></html>';
-
-// Inject Piskel JS
-page.injectJs(options.piskelAppJsPath);
-
-// Listen for page console logs
-page.onConsoleMessage = function (msg) {
-    console.log(msg);
-};
-
-// Run page logic
-page.evaluate(function (piskelFile, options, onPageEvaluate) {
-    // Zero out default body margin
-    document.body.style.margin = 0;
-
-    // Deserialize piskel file and run exporter's page evaluate task
-    pskl.utils.serialization.Deserializer.deserialize(piskelFile, function (piskel) {
-       onPageEvaluate(window, options, piskel);
-    });
-}, piskelFile, options, exporter.onPageEvaluate);
-
-// Wait for page to trigger exit
-page.onCallback = function (data) {
-    // Run exporter page exit task
-    exporter.onPageExit(page, options, data);
-
-    // Exit
-    phantom.exit(0);
-};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "piskel",
-  "version": "0.15.0",
+  "version": "0.12.1",
   "description": "Pixel art editor",
   "author": "Julian Descottes <julian.descottes@gmail.com>",
   "contributors": [
@@ -17,8 +17,7 @@
     "misc/scripts/piskel-root"
   ],
   "bin": {
-    "piskel-root": "./misc/scripts/piskel-root",
+    "piskel-root": "./misc/scripts/piskel-root"
-    "piskel-cli": "./cli/index.js"
   },
   "main": "./dest/prod/index.html",
   "scripts": {
@@ -46,6 +45,7 @@
     "grunt-karma": "1.0.0",
     "grunt-leading-indent": "0.2.0",
     "grunt-nw-builder": "3.1.0",
+    "grunt-open": "0.2.3",
     "grunt-replace": "1.0.1",
     "grunt-spritesmith": "6.4.0",
     "jasmine-core": "2.6.1",
@@ -64,8 +64,5 @@
     "toolbar": false,
     "width": 1000,
     "height": 700
-  },
-  "dependencies": {
-    "minimist": "^1.2.0"
   }
 }

src/css/frames-list.css

@@ -135,11 +135,6 @@
   cursor: default;
 }
 
-.preview-tile .tile-overlay.tile-count.toggled {
-  background-color: gold;
-  color: black;
-}
-
 .preview-tile .tile-overlay.delete-frame-action {
    top: 0;
    right: 0;

src/css/layout.css

@@ -25,7 +25,7 @@
 .left-column {
   vertical-align: top;
   height: 100%;
-  padding-right: 7px;
+  margin-right: 7px;
   flex-shrink: 0;
 }
 
@@ -44,8 +44,7 @@
   flex-direction: column;
   position: relative;
 
-  /* Keep in sync with Constants.RIGHT_COLUMN_PADDING_LEFT */
+  margin-left: 10px;
-  padding-left: 10px;
   /* Add some padding for the absolutely positioned .cursor-coordinates */
   padding-bottom: 20px;
 }
@@ -81,21 +80,10 @@
 }
 
 .cursor-coordinates {
-  color: var(--highlight-color);
+  color:#888;
-  font-size: 12px;
+  font-size:12px;
-  font-weight: bold;
+  font-weight:bold;
-  font-family: monospace;
+  font-family:monospace;
-}
-
-.cursor-coordinates .drawing-zoom {
-  position: absolute;
-  top: -20px;
-  left: 1px;
-}
-
-.cursor-coordinates .frame-info {
-  line-height: 1.5;
-  text-align: left;
 }
 
 /**
@@ -169,4 +157,4 @@
 .canvas.drawing-canvas       {z-index:  8;}
 .canvas.canvas-overlay       {z-index:  9;}
 .canvas.onion-skin-canvas    {z-index:  10;}
-.canvas.layers-above-canvas  {z-index:  11;}
+.canvas.layers-above-canvas  {z-index:  11;}

src/css/settings-application.css

@@ -60,48 +60,22 @@
 }
 
 .settings-item-grid-size,
-.settings-item-grid-spacing,
 .settings-item-grid-color {
   display: flex;
   align-items: center;
 }
 
 .settings-item-grid-size > label,
-.settings-item-grid-spacing > label,
 .settings-item-grid-color > label {
   width: 65px;
   flex-shrink: 0;
 }
 
-.grid-spacing-container .size-picker-option[data-size='1'] {
+.settings-item-grid-size .size-picker-option {
-  padding: 7px;
-}
-.grid-spacing-container .size-picker-option[data-size='2'] {
-  padding: 6px;
-}
-.grid-spacing-container .size-picker-option[data-size='4'] {
-  padding: 5px;
-}
-.grid-spacing-container .size-picker-option[data-size='8'] {
-  padding: 4px;
-}
-.grid-spacing-container .size-picker-option[data-size='16'] {
-  padding: 3px;
-}
-.grid-spacing-container .size-picker-option[data-size='32'] {
-  padding: 2px;
-}
-.grid-spacing-container .size-picker-option[data-size='64'] {
-  padding: 1px;
-}
-
-.settings-item-grid-size .size-picker-option,
-.settings-item-grid-spacing .size-picker-option {
   border-color: #888;
 }
 
-.settings-item-grid-size .size-picker-option:not(.selected):hover,
+.settings-item-grid-size .size-picker-option:not(.selected):hover {
-.settings-item-grid-spacing .size-picker-option:not(.selected):hover {
   border-color: white;
 }
 
@@ -157,4 +131,4 @@
 .settings-version:hover {
   color: white !important;
   text-decoration: none !important;
-}
+}

src/css/settings-export.css

@@ -144,8 +144,7 @@
   overflow: hidden;
 }
 
-.export-panel-gif .button,
+.export-panel-gif .button {
-.export-panel-png .button {
   margin-right: 5px;
   width: 75px;
   flex-shrink: 0;
@@ -155,6 +154,11 @@
   width: 50px;
 }
 
+.png-export-dimension-info,
+.png-export-datauri-info {
+  margin-left: 5px;
+}
+
 #png-export-columns,
 #png-export-rows {
   /* Override default textfield padding-right to keep the number spinners

src/css/style.css

@@ -52,12 +52,7 @@ body {
 }
 
 .checkbox-fix {
-  margin: 3px 3px 3px 0;
+  margin-left: 0;
-}
-
-.checkbox-container {
-  display: flex;
-  align-items: center;
 }
 
 .hidden {

src/css/toolbox-animated-preview.css

@@ -124,14 +124,6 @@
   border-color: var(--highlight-color);
 }
 
-/**
- * If the icon represents an enabled state, the border should always be gold.
- */
-.preview-contextual-action-enabled {
-  color: var(--highlight-color);
-  border-color: var(--highlight-color);
-}
-
 /**
  * Drop-down in preview size selection
  */
@@ -203,7 +195,6 @@
 
 @media (-webkit-min-device-pixel-ratio: 2),
        (min-resolution: 192dpi) {
-  .icon-minimap-popup-preview-arrow-white:hover {
+  background-image: url(../img/icons/minimap/minimap-popup-preview-arrow-gold@2x.png);
-    background-image: url(../img/icons/minimap/minimap-popup-preview-arrow-gold@2x.png);
+
-  }
 }

src/css/toolbox-layers-list.css

@@ -66,17 +66,12 @@
   cursor: pointer;
 }
 
-.layer-item .layer-name,
+.layer-item .layer-name {
-.layer-item .layer-name-input {
   padding: 0 0 0 10px;
   flex: 1 auto;
   white-space: nowrap;
 }
 
-.layer-item .layer-name-input {
-  width: 80%;
-}
-
 .layer-item .layer-name.overflowing-name {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -87,8 +82,7 @@
 }
 
 .layer-item-opacity {
-  padding: 0 8px 0 8px;
+  padding-right: 8px;
-  flex: 0 auto;
 }
 
 .current-layer-item,

src/css/toolbox-palettes-list.css

@@ -94,7 +94,7 @@
   line-height: 35px;
   width: 100%;
   color: gray;
-  font-size: 0.8em;
+  font-size: 0.7em;
   font-style: italic;
   text-align: center
 }

src/js/Constants.js

@@ -19,8 +19,6 @@ var Constants = {
 
   PREVIEW_FILM_SIZE : 96,
   ANIMATED_PREVIEW_WIDTH : 200,
-  // Keep in sync with padding-left: 10px in layout.css
-  RIGHT_COLUMN_PADDING_LEFT : 10,
 
   DEFAULT_PEN_COLOR : '#000000',
   TRANSPARENT_COLOR : 'rgba(0, 0, 0, 0)',

src/js/app.js

@@ -10,6 +10,9 @@
   ns.app = {
 
     init : function () {
+      // Run preferences migration scripts for version v0.12.0
+      pskl.UserSettings.migrate_to_v0_12();
+
       /**
        * When started from APP Engine, appEngineToken_ (Boolean) should be set on window.pskl
        */
@@ -64,24 +67,24 @@
 
       this.drawingController = new pskl.controller.DrawingController(
         this.piskelController,
-        document.querySelector('#drawing-canvas-container'));
+        $('#drawing-canvas-container'));
       this.drawingController.init();
 
       this.previewController = new pskl.controller.preview.PreviewController(
         this.piskelController,
-        document.querySelector('#animated-preview-canvas-container'));
+        $('#animated-preview-canvas-container'));
       this.previewController.init();
 
       this.minimapController = new pskl.controller.MinimapController(
         this.piskelController,
         this.previewController,
         this.drawingController,
-        document.querySelector('.minimap-container'));
+        $('.minimap-container'));
       this.minimapController.init();
 
       this.framesListController = new pskl.controller.FramesListController(
         this.piskelController,
-        document.querySelector('#preview-list-wrapper'));
+        $('#preview-list-wrapper').get(0));
       this.framesListController.init();
 
       this.layersListController = new pskl.controller.LayersListController(this.piskelController);

src/js/controller/CursorCoordinatesController.js

@@ -17,8 +17,6 @@
     $.subscribe(Events.DRAG_START, this.onDragStart_.bind(this));
     $.subscribe(Events.DRAG_END, this.onDragEnd_.bind(this));
     $.subscribe(Events.FRAME_SIZE_CHANGED, this.redraw.bind(this));
-    $.subscribe(Events.ZOOM_CHANGED, this.redraw.bind(this));
-    $.subscribe(Events.PISKEL_RESET, this.redraw.bind(this));
 
     this.redraw();
   };
@@ -41,18 +39,7 @@
       }
     }
 
-    if (pskl.app.drawingController) {
+    this.coordinatesContainer.innerHTML = this.getFrameSizeHTML_() + html;
-      var zoom = pskl.app.drawingController.compositeRenderer.getZoom().toFixed(2);
-      html += '<div class="drawing-zoom">x' + zoom + '</div>';
-    }
-
-    this.coordinatesContainer.innerHTML = this.getFrameSizeHTML_() + html + this.getCurrentFrameIndexHTML_();
-  };
-
-  ns.CursorCoordinatesController.prototype.getCurrentFrameIndexHTML_ = function () {
-    var currentFrameIndex = this.piskelController.getCurrentFrameIndex() + 1;
-    var frameCount = this.piskelController.getFrameCount();
-    return '<div class="frame-info">' + currentFrameIndex + '/' + frameCount + '</div>';
   };
 
   ns.CursorCoordinatesController.prototype.getFrameSizeHTML_ = function () {

src/js/controller/DrawingController.js

@@ -22,7 +22,7 @@
 
     var cfg = {
       'zoom': this.calculateZoom_(),
-      'supportGridRendering' : false,
+      'supportGridRendering' : true,
       'height' : this.getContainerHeight_(),
       'width' : this.getContainerWidth_(),
       'xOffset' : 0,
@@ -30,10 +30,9 @@
     };
 
     this.overlayRenderer = new pskl.rendering.frame.CachedFrameRenderer(this.container, cfg, ['canvas-overlay']);
+    this.renderer = new pskl.rendering.frame.CachedFrameRenderer(this.container, cfg, ['drawing-canvas']);
     this.onionSkinRenderer = pskl.rendering.OnionSkinRenderer.createInContainer(this.container, cfg, piskelController);
     this.layersRenderer = new pskl.rendering.layer.LayersRenderer(this.container, cfg, piskelController);
-    cfg.supportGridRendering = true;
-    this.renderer = new pskl.rendering.frame.CachedFrameRenderer(this.container, cfg, ['drawing-canvas']);
 
     this.compositeRenderer = new pskl.rendering.CompositeRenderer();
     this.compositeRenderer
@@ -51,12 +50,12 @@
   ns.DrawingController.prototype.init = function () {
     this.initMouseBehavior();
 
-    $.subscribe(Events.TOOL_SELECTED, (function(evt, toolBehavior) {
+    $.subscribe(Events.TOOL_SELECTED, $.proxy(function(evt, toolBehavior) {
       this.currentToolBehavior = toolBehavior;
       this.overlayFrame.clear();
-    }).bind(this));
+    }, this));
 
-    window.addEventListener('resize', this.startResizeTimer_.bind(this));
+    $(window).resize($.proxy(this.startResizeTimer_, this));
 
     $.subscribe(Events.USER_SETTINGS_CHANGED, this.onUserSettingsChange_.bind(this));
     $.subscribe(Events.FRAME_SIZE_CHANGED, this.onFrameSizeChange_.bind(this));
@@ -77,12 +76,13 @@
   };
 
   ns.DrawingController.prototype.initMouseBehavior = function() {
-    this.container.addEventListener('mousedown', this.onMousedown_.bind(this));
+    var body = $('body');
+    this.container.mousedown($.proxy(this.onMousedown_, this));
 
     if (pskl.utils.UserAgent.isChrome || pskl.utils.UserAgent.isIE11) {
-      this.container.addEventListener('mousewheel', this.onMousewheel_.bind(this));
+      this.container.on('mousewheel', $.proxy(this.onMousewheel_, this));
     } else {
-      this.container.addEventListener('wheel', this.onMousewheel_.bind(this));
+      this.container.on('wheel', $.proxy(this.onMousewheel_, this));
     }
 
     window.addEventListener('mouseup', this.onMouseup_.bind(this));
@@ -93,20 +93,22 @@
     window.addEventListener('touchend', this.onTouchend_.bind(this));
 
     // Deactivate right click:
-    document.body.addEventListener('contextmenu', this.onCanvasContextMenu_.bind(this));
+    body.contextmenu(this.onCanvasContextMenu_);
+
   };
 
   ns.DrawingController.prototype.startResizeTimer_ = function () {
     if (this.resizeTimer) {
       window.clearInterval(this.resizeTimer);
     }
-    this.resizeTimer = window.setTimeout(this.afterWindowResize_.bind(this), 200);
+    this.resizeTimer = window.setTimeout($.proxy(this.afterWindowResize_, this), 200);
   };
 
   ns.DrawingController.prototype.afterWindowResize_ = function () {
     var initialWidth = this.compositeRenderer.getDisplaySize().width;
 
     this.compositeRenderer.setDisplaySize(this.getContainerWidth_(), this.getContainerHeight_());
+    this.centerColumnWrapperHorizontally_();
     var ratio = this.compositeRenderer.getDisplaySize().width / initialWidth;
     var newZoom = ratio * this.compositeRenderer.getZoom();
     this.compositeRenderer.setZoom(newZoom);
@@ -131,6 +133,7 @@
 
   ns.DrawingController.prototype.onFrameSizeChange_ = function () {
     this.compositeRenderer.setDisplaySize(this.getContainerWidth_(), this.getContainerHeight_());
+    this.centerColumnWrapperHorizontally_();
     this.compositeRenderer.setZoom(this.calculateZoom_());
     this.compositeRenderer.setOffset(0, 0);
     $.publish(Events.ZOOM_CHANGED);
@@ -238,7 +241,8 @@
     $.publish(Events.CURSOR_MOVED, [coords.x, coords.y]);
   };
 
-  ns.DrawingController.prototype.onMousewheel_ = function (evt) {
+  ns.DrawingController.prototype.onMousewheel_ = function (jQueryEvent) {
+    var evt = jQueryEvent.originalEvent;
     // Ratio between wheelDeltaY (mousewheel event) and deltaY (wheel event) is -40
     var delta;
     if (pskl.utils.UserAgent.isIE11) {
@@ -346,8 +350,6 @@
       // Picking color after ALT+click or middle mouse button click.
       this.pickColorAt_(coords);
       this.isPickingColor = false;
-      // Flash the cursor to briefly show the colorpicker cursor.
-      this.flashColorPicker_();
     } else if (isMiddleDrag) {
       // Stop the drag handler after a middle button drag action.
       this.dragHandler.stopDrag();
@@ -383,16 +385,6 @@
     $.publish(evt, [color]);
   };
 
-  ns.DrawingController.prototype.flashColorPicker_ = function () {
-    document.body.classList.add('tool-colorpicker');
-    document.body.classList.remove(this.currentToolBehavior.toolId);
-    window.clearTimeout(this.flashColorPickerTimer);
-    this.flashColorPickerTimer = window.setTimeout(function () {
-      document.body.classList.remove('tool-colorpicker');
-      document.body.classList.add(this.currentToolBehavior.toolId);
-    }.bind(this), 200);
-  };
-
   /**
    * Translate absolute x,y screen coordinates into sprite coordinates
    * @param  {Number} screenX
@@ -411,8 +403,7 @@
    * @private
    */
   ns.DrawingController.prototype.onCanvasContextMenu_ = function (event) {
-    // closest() not really available everywhere yet, just skip if missing.
+    if ($(event.target).closest('#drawing-canvas-container').length) {
-    if (event.target.closest && event.target.closest('#drawing-canvas-container')) {
       // Deactivate right click on drawing canvas only.
       event.preventDefault();
       event.stopPropagation();
@@ -450,21 +441,17 @@
   };
 
   ns.DrawingController.prototype.getAvailableHeight_ = function () {
-    return document.querySelector('#main-wrapper').getBoundingClientRect().height;
+    return $('#main-wrapper').height();
-  };
-
-  ns.DrawingController.prototype.getSelectorWidth_ = function (selector) {
-    return document.querySelector(selector).getBoundingClientRect().width;
   };
 
   ns.DrawingController.prototype.getAvailableWidth_ = function () {
-    var leftSectionWidth = this.getSelectorWidth_('.left-column');
+    var leftSectionWidth = $('.left-column').outerWidth(true);
-    var rightSectionWidth = this.getSelectorWidth_('.right-column');
+    var rightSectionWidth = $('.right-column').outerWidth(true);
-    var toolsContainerWidth = this.getSelectorWidth_('#tool-section');
+    var toolsContainerWidth = $('#tool-section').outerWidth(true);
-    var settingsContainerWidth = this.getSelectorWidth_('#application-action-section');
+    var settingsContainerWidth = $('#application-action-section').outerWidth(true);
 
     var usedWidth = leftSectionWidth + rightSectionWidth + toolsContainerWidth + settingsContainerWidth;
-    var availableWidth = this.getSelectorWidth_('#main-wrapper') - usedWidth;
+    var availableWidth = $('#main-wrapper').width() - usedWidth;
 
     var comfortMargin = 10;
     return availableWidth - comfortMargin;
@@ -478,6 +465,17 @@
     return this.getAvailableWidth_();
   };
 
+  /**
+   * @private
+   */
+  ns.DrawingController.prototype.centerColumnWrapperHorizontally_ = function() {
+    var containerHeight = this.getContainerHeight_();
+    var verticalGapInPixel = Math.floor(($('#main-wrapper').height() - containerHeight) / 2);
+    $('#column-wrapper').css({
+      'top': verticalGapInPixel + 'px'
+    });
+  };
+
   ns.DrawingController.prototype.getRenderer = function () {
     return this.compositeRenderer;
   };

src/js/controller/FramesListController.js

@@ -5,8 +5,7 @@
     SELECT : 'select',
     CLONE : 'clone',
     DELETE : 'delete',
-    NEW_FRAME : 'newframe',
+    NEW_FRAME : 'newframe'
-    TOGGLE: 'toggle'
   };
 
   ns.FramesListController = function (piskelController, container) {
@@ -115,8 +114,6 @@
       this.tiles.push(newtile);
       this.previewList.insertBefore(newtile, this.addFrameTile);
       this.updateScrollerOverflows();
-    } else if (action == ACTION.TOGGLE) {
-      this.piskelController.toggleFrameVisibilityAt(index);
     }
 
     this.flagForRedraw_();
@@ -130,18 +127,10 @@
       // Remove selected class
       this.tiles[i].classList.remove('selected');
 
-      // Remove toggle class
-      this.tiles[i].querySelector('.tile-count').classList.remove('toggled');
-
       // Update tile numbers
       this.tiles[i].setAttribute('data-tile-number', i);
       this.tiles[i].querySelector('.tile-count').innerHTML = (i + 1);
 
-      // Update visibility
-      if (this.piskelController.hasVisibleFrameAt(i)) {
-        this.tiles[i].querySelector('.tile-count').classList.add('toggled');
-      }
-
       // Check if any tile is updated
       var hash = this.piskelController.getCurrentLayer().getFrameAt(i).getHash();
       if (this.tiles[i].getAttribute('data-tile-hash') !== hash) {
@@ -173,10 +162,7 @@
     this.previewList.innerHTML = '';
 
     // Manually remove tooltips since mouseout events were shortcut by the DOM refresh:
-    var tooltips = document.querySelectorAll('.tooltip');
+    $('.tooltip').remove();
-    Array.prototype.forEach.call(tooltips, function (tooltip) {
-      tooltip.parentNode.removeChild(tooltip);
-    });
 
     var frameCount = this.piskelController.getFrameCount();
 
@@ -204,8 +190,8 @@
   ns.FramesListController.prototype.initDragndropBehavior_ = function () {
     $(this.previewList).sortable({
       placeholder: 'preview-tile preview-tile-drop-proxy',
-      update: this.onUpdate_.bind(this),
+      update: $.proxy(this.onUpdate_, this),
-      stop: this.onSortableStop_.bind(this),
+      stop: $.proxy(this.onSortableStop_, this),
       items: '.preview-tile',
       axis: 'y',
       tolerance: 'pointer'
@@ -217,10 +203,8 @@
    * @private
    */
   ns.FramesListController.prototype.onUpdate_ = function (event, ui) {
-    var movedItem = ui.item.get(0);
+    var originFrameId = parseInt(ui.item.data('tile-number'), 10);
-    var originFrameId = parseInt(movedItem.dataset.tileNumber, 10);
+    var targetInsertionId = $('.preview-tile').index(ui.item);
-    var tiles = document.querySelectorAll('.preview-tile');
-    var targetInsertionId = Array.prototype.indexOf.call(tiles, movedItem);
 
     this.piskelController.moveFrame(originFrameId, targetInsertionId);
     this.piskelController.setCurrentFrameIndex(targetInsertionId);
@@ -236,13 +220,14 @@
   ns.FramesListController.prototype.onSortableStop_ = function (event, ui) {
     this.justDropped = true;
 
-    this.resizeTimer = window.setTimeout((function() {
+    this.resizeTimer = window.setTimeout($.proxy(function() {
       this.justDropped = false;
-    }).bind(this), 200);
+    }, this), 200);
   };
 
   /**
    * @private
+   * TODO(vincz): clean this giant rendering function & remove listeners.
    */
   ns.FramesListController.prototype.createPreviewTile_ = function(tileNumber) {
     var currentFrame = this.piskelController.getCurrentLayer().getFrameAt(tileNumber);
@@ -301,12 +286,8 @@
     previewTileRoot.appendChild(dndHandle);
 
     // Add tile count
-    var tileCount = document.createElement('button');
+    var tileCount = document.createElement('div');
-    tileCount.setAttribute('rel', 'tooltip');
+    tileCount.className = 'tile-overlay tile-count';
-    tileCount.setAttribute('title', 'Toggle for preview');
-    tileCount.setAttribute('data-tile-number', tileNumber);
-    tileCount.setAttribute('data-tile-action', ACTION.TOGGLE);
-    tileCount.className = 'tile-overlay tile-count toggle-frame-action';
     tileCount.innerHTML = tileNumber + 1;
     previewTileRoot.appendChild(tileCount);
 

src/js/controller/LayersListController.js

@@ -1,18 +1,15 @@
 (function () {
   var ns = $.namespace('pskl.controller');
 
+  var TOGGLE_LAYER_SHORTCUT = 'alt+L';
+
   ns.LayersListController = function (piskelController) {
     this.piskelController = piskelController;
-    this.layerPreviewShortcut = pskl.service.keyboard.Shortcuts.MISC.LAYER_PREVIEW;
+    this.layerPreviewShortcut = pskl.service.keyboard.Shortcuts.MISC.LAYER_PREVIEW  ;
-    this.startRenamingCurrentLayer_ = this.startRenamingCurrentLayer_.bind(this);
-    this.onRenameInput_ = this.onRenameInput_.bind(this);
   };
 
   ns.LayersListController.prototype.init = function () {
-    this.isRenaming = false;
-
     this.layerItemTemplate_ = pskl.utils.Template.get('layer-item-template');
-    this.layerNameInputTemplate_ = pskl.utils.Template.get('layer-name-input-template');
     this.rootEl = document.querySelector('.layers-list-container');
     this.layersListEl = document.querySelector('.layers-list');
     this.toggleLayerPreviewEl = document.querySelector('.layers-toggle-preview');
@@ -27,7 +24,7 @@
     this.updateToggleLayerPreview_();
 
     $.subscribe(Events.PISKEL_RESET, this.renderLayerList_.bind(this));
-    $.subscribe(Events.USER_SETTINGS_CHANGED, this.onUserSettingsChange_.bind(this));
+    $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
   };
 
   ns.LayersListController.prototype.renderLayerList_ = function () {
@@ -80,6 +77,7 @@
 
   ns.LayersListController.prototype.updateButtonStatus_ = function () {
     var layers = this.piskelController.getLayers();
+    var currentLayer = this.piskelController.getCurrentLayer();
     var index = this.piskelController.getCurrentLayerIndex();
 
     var isLast = index === 0;
@@ -120,46 +118,19 @@
 
   ns.LayersListController.prototype.addLayerItem = function (layer, index) {
     var isSelected = this.piskelController.getCurrentLayer() === layer;
-    var isRenaming = isSelected && this.isRenaming;
     var layerItemHtml = pskl.utils.Template.replace(this.layerItemTemplate_, {
       'layername' : layer.getName(),
       'layerindex' : index,
       'isselected:current-layer-item' : isSelected,
-      'opacity' : layer.getOpacity()
+      'opacity': layer.getOpacity()
     });
     var layerItem = pskl.utils.Template.createFromHTML(layerItemHtml);
     this.layersListEl.insertBefore(layerItem, this.layersListEl.firstChild);
     if (layerItem.offsetWidth < layerItem.scrollWidth) {
-      var layerNameEl = layerItem.querySelector('.layer-name');
+      $(layerItem).find('.layer-name')
-      layerNameEl.classList.add('overflowing-name');
+        .addClass('overflowing-name')
-      layerNameEl.setAttribute('title', layer.getName());
+        .attr('title', layer.getName())
-      layerNameEl.setAttribute('rel', 'tooltip');
+        .tooltip();
-    }
-    if (isSelected) {
-      layerItem.removeEventListener('dblclick', this.startRenamingCurrentLayer_);
-      layerItem.addEventListener('dblclick', this.startRenamingCurrentLayer_);
-    }
-    if (isRenaming) {
-      var layerNameInputHtml = pskl.utils.Template.replace(this.layerNameInputTemplate_, {
-        'layername' : layer.getName()
-      });
-      var layerNameInput = pskl.utils.Template.createFromHTML(layerNameInputHtml);
-      var layerNameEl = layerItem.querySelector('.layer-name');
-      layerItem.replaceChild(layerNameInput, layerNameEl);
-      layerNameInput.removeEventListener('blur', this.onRenameInput_);
-      layerNameInput.removeEventListener('keydown', this.onRenameInput_);
-      layerNameInput.addEventListener('blur', this.onRenameInput_);
-      layerNameInput.addEventListener('keydown', this.onRenameInput_);
-      layerNameInput.focus();
-      layerNameInput.select();
-    }
-    var opacity = layer.getOpacity();
-    if (opacity == 1) {
-      layerItem.querySelector('.layer-item-opacity').style.color = '#ffd700';
-    } else if (opacity == 0) {
-      layerItem.querySelector('.layer-item-opacity').style.color = '#969696';
-    } else {
-      layerItem.querySelector('.layer-item-opacity').style.color = '#ffffff';
     }
   };
 
@@ -169,13 +140,8 @@
     if (el.classList.contains('button')) {
       this.onButtonClick_(el, evt);
     } else if (el.classList.contains('layer-name')) {
-      var currentIndex = this.piskelController.getCurrentLayerIndex();
       index = pskl.utils.Dom.getData(el, 'layerIndex');
-      if (index != currentIndex) {
+      this.piskelController.setCurrentLayerIndex(parseInt(index, 10));
-        var currentItem = el.parentElement.parentElement.querySelector('.current-layer-item');
-        currentItem.removeEventListener('dblclick', this.startRenamingCurrentLayer_);
-        this.piskelController.setCurrentLayerIndex(parseInt(index, 10));
-      }
     } else if (el.classList.contains('layer-item-opacity')) {
       index = pskl.utils.Dom.getData(el, 'layerIndex');
       var layer = this.piskelController.getLayerAt(parseInt(index, 10));
@@ -184,29 +150,14 @@
     }
   };
 
-  ns.LayersListController.prototype.startRenamingCurrentLayer_ = function () {
+  ns.LayersListController.prototype.renameCurrentLayer_ = function () {
-    this.isRenaming = true;
+    var layer = this.piskelController.getCurrentLayer();
-    this.renderLayerList_();
+    var name = window.prompt('Please enter the layer name', layer.getName());
-  };
+    if (name) {
-
-  ns.LayersListController.prototype.onRenameInput_ = function (evt) {
-    var el = evt.target || evt.srcElement;
-    if (evt.key === 'Enter') {
-      this.finishRenamingCurrentLayer_(el, el.value);
-    } else if (!evt.key || evt.key === 'Escape') {
-      this.finishRenamingCurrentLayer_(el);
-    }
-  };
-
-  ns.LayersListController.prototype.finishRenamingCurrentLayer_ = function (input, newName) {
-    if (newName) {
       var index = this.piskelController.getCurrentLayerIndex();
-      this.piskelController.renameLayerAt(index, newName);
+      this.piskelController.renameLayerAt(index, name);
+      this.renderLayerList_();
     }
-    input.removeEventListener('blur', this.onRenameInput_);
-    input.removeEventListener('keydown', this.onRenameInput_);
-    this.isRenaming = false;
-    this.renderLayerList_();
   };
 
   ns.LayersListController.prototype.mergeDownCurrentLayer_ = function () {
@@ -232,7 +183,7 @@
     } else if (action == 'merge') {
       this.mergeDownCurrentLayer_();
     } else if (action == 'edit') {
-      this.startRenamingCurrentLayer_();
+      this.renameCurrentLayer_();
     }
   };
 

src/js/controller/MinimapController.js

@@ -16,14 +16,14 @@
     this.minimapEl = document.createElement('DIV');
     this.minimapEl.className = 'minimap-crop-frame';
     this.minimapEl.style.display = 'none';
-    this.container.appendChild(this.minimapEl);
+    $(this.container).append(this.minimapEl);
 
     // Init mouse events
-    this.container.addEventListener('mousedown', this.onMinimapMousedown_.bind(this));
+    $(this.container).mousedown(this.onMinimapMousedown_.bind(this));
-    document.body.addEventListener('mousemove', this.onMinimapMousemove_.bind(this));
+    $('body').mousemove(this.onMinimapMousemove_.bind(this));
-    document.body.addEventListener('mouseup', this.onMinimapMouseup_.bind(this));
+    $('body').mouseup(this.onMinimapMouseup_.bind(this));
 
-    $.subscribe(Events.ZOOM_CHANGED, this.renderMinimap_.bind(this));
+    $.subscribe(Events.ZOOM_CHANGED, $.proxy(this.renderMinimap_, this));
   };
 
   ns.MinimapController.prototype.renderMinimap_ = function () {
@@ -40,9 +40,8 @@
     var minimapSize = this.getMinimapSize_();
     var previewSize = this.getPreviewSize_();
 
-    var containerRect = this.container.getBoundingClientRect();
+    var containerHeight = this.container.height();
-    var containerHeight = containerRect.height;
+    var containerWidth = this.container.width();
-    var containerWidth = containerRect.width;
 
     // offset(x, y) in frame pixels
     var offset = this.drawingController.getRenderer().getOffset();
@@ -61,7 +60,7 @@
     this.minimapEl.style.display = 'block';
     this.minimapEl.style.width = Math.min(minimapSize.width, containerWidth) + 'px';
     this.minimapEl.style.height = Math.min(minimapSize.height, containerHeight) + 'px';
-    this.minimapEl.style.left = (Math.max(0, left) + Constants.RIGHT_COLUMN_PADDING_LEFT) +  'px';
+    this.minimapEl.style.left = Math.max(0, left) +  'px';
     this.minimapEl.style.top = Math.max(0, top) +  'px';
 
     this.isVisible = true;

src/js/controller/NotificationController.js

@@ -7,8 +7,8 @@
    * @public
    */
   ns.NotificationController.prototype.init = function() {
-    $.subscribe(Events.SHOW_NOTIFICATION, this.displayMessage_.bind(this));
+    $.subscribe(Events.SHOW_NOTIFICATION, $.proxy(this.displayMessage_, this));
-    $.subscribe(Events.HIDE_NOTIFICATION, this.removeMessage_.bind(this));
+    $.subscribe(Events.HIDE_NOTIFICATION, $.proxy(this.removeMessage_, this));
   };
 
   /**
@@ -35,9 +35,9 @@
    * @private
    */
   ns.NotificationController.prototype.removeMessage_ = function (evt) {
-    var message = document.querySelector('#user-message');
+    var message = $('#user-message');
-    if (message) {
+    if (message.length) {
-      message.parentNode.removeChild(message);
+      message.remove();
     }
   };
 })();

src/js/controller/PaletteController.js

@@ -35,24 +35,24 @@
     // Initialize colorpickers:
     var colorPicker = $('#color-picker');
     colorPicker.spectrum($.extend({color: Constants.DEFAULT_PEN_COLOR}, spectrumCfg));
-    colorPicker.change({isPrimary : true}, this.onPickerChange_.bind(this));
+    colorPicker.change({isPrimary : true}, $.proxy(this.onPickerChange_, this));
-    this.setTitleOnPicker_(Constants.DEFAULT_PEN_COLOR, colorPicker.get(0));
+    this.setTitleOnPicker_(Constants.DEFAULT_PEN_COLOR, colorPicker);
 
     var secondaryColorPicker = $('#secondary-color-picker');
     secondaryColorPicker.spectrum($.extend({color: Constants.TRANSPARENT_COLOR}, spectrumCfg));
-    secondaryColorPicker.change({isPrimary : false}, this.onPickerChange_.bind(this));
+    secondaryColorPicker.change({isPrimary : false}, $.proxy(this.onPickerChange_, this));
-    this.setTitleOnPicker_(Constants.TRANSPARENT_COLOR, secondaryColorPicker.get(0));
+    this.setTitleOnPicker_(Constants.TRANSPARENT_COLOR, secondaryColorPicker);
 
-    var swapColorsIcon = document.querySelector('.swap-colors-button');
+    var swapColorsIcon = $('.swap-colors-button');
-    swapColorsIcon.addEventListener('click', this.swapColors.bind(this));
+    swapColorsIcon.click(this.swapColors.bind(this));
   };
 
   /**
    * @private
    */
-  ns.PaletteController.prototype.onPickerChange_ = function(evt) {
+  ns.PaletteController.prototype.onPickerChange_ = function(evt, isPrimary) {
-    var inputPicker = evt.target;
+    var inputPicker = $(evt.target);
-    var color = inputPicker.value;
+    var color = inputPicker.val();
 
     if (color != Constants.TRANSPARENT_COLOR) {
       // Unless the color is TRANSPARENT_COLOR, format it to hexstring, as
@@ -71,6 +71,7 @@
    * @private
    */
   ns.PaletteController.prototype.onColorSelected_ = function(args, evt, color) {
+    var inputPicker = $(evt.target);
     if (args.isPrimary) {
       this.setPrimaryColor_(color);
     } else {
@@ -79,12 +80,12 @@
   };
 
   ns.PaletteController.prototype.setPrimaryColor_ = function (color) {
-    this.updateColorPicker_(color, document.querySelector('#color-picker'));
+    this.updateColorPicker_(color, $('#color-picker'));
     $.publish(Events.PRIMARY_COLOR_SELECTED, [color]);
   };
 
   ns.PaletteController.prototype.setSecondaryColor_ = function (color) {
-    this.updateColorPicker_(color, document.querySelector('#secondary-color-picker'));
+    this.updateColorPicker_(color, $('#secondary-color-picker'));
     $.publish(Events.SECONDARY_COLOR_SELECTED, [color]);
   };
 
@@ -103,7 +104,6 @@
    * @private
    */
   ns.PaletteController.prototype.updateColorPicker_ = function (color, colorPicker) {
-    var jqueryColorPicker = $(colorPicker);
     if (color == Constants.TRANSPARENT_COLOR) {
       // We can set the current palette color to transparent.
       // You can then combine this transparent color with an advanced
@@ -114,17 +114,17 @@
       // The colorpicker can't be set to a transparent state.
       // We set its background to white and insert the
       // string "TRANSPARENT" to mimic this state:
-      jqueryColorPicker.spectrum('set', Constants.TRANSPARENT_COLOR);
+      colorPicker.spectrum('set', Constants.TRANSPARENT_COLOR);
-      colorPicker.value = Constants.TRANSPARENT_COLOR;
+      colorPicker.val(Constants.TRANSPARENT_COLOR);
     } else {
-      jqueryColorPicker.spectrum('set', color);
+      colorPicker.spectrum('set', color);
     }
     this.setTitleOnPicker_(color, colorPicker);
   };
 
   ns.PaletteController.prototype.setTitleOnPicker_ = function (title, colorPicker) {
-    var parent = colorPicker.parentNode;
+    var parent = colorPicker.parent();
-    title = parent.dataset.initialTitle + '<br/>' + title;
+    title = parent.data('initial-title') + '<br/>' + title;
-    parent.dataset.originalTitle = title;
+    parent.attr('data-original-title', title);
   };
 })();

src/js/controller/PalettesListController.js

@@ -29,7 +29,7 @@
     $.subscribe(Events.CURRENT_COLORS_UPDATED, this.fillColorListContainer.bind(this));
     $.subscribe(Events.PRIMARY_COLOR_SELECTED, this.highlightSelectedColors.bind(this));
     $.subscribe(Events.SECONDARY_COLOR_SELECTED, this.highlightSelectedColors.bind(this));
-    $.subscribe(Events.USER_SETTINGS_CHANGED, this.onUserSettingsChange_.bind(this));
+    $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
 
     var shortcuts = pskl.service.keyboard.Shortcuts;
     pskl.app.shortcutService.registerShortcut(shortcuts.COLOR.PREVIOUS_COLOR, this.selectPreviousColor_.bind(this));

src/js/controller/ProgressBarController.js

@@ -10,9 +10,9 @@
   };
 
   ns.ProgressBarController.prototype.init = function () {
-    $.subscribe(Events.SHOW_PROGRESS, this.showProgress_.bind(this));
+    $.subscribe(Events.SHOW_PROGRESS, $.proxy(this.showProgress_, this));
-    $.subscribe(Events.UPDATE_PROGRESS, this.updateProgress_.bind(this));
+    $.subscribe(Events.UPDATE_PROGRESS, $.proxy(this.updateProgress_, this));
-    $.subscribe(Events.HIDE_PROGRESS, this.hideProgress_.bind(this));
+    $.subscribe(Events.HIDE_PROGRESS, $.proxy(this.hideProgress_, this));
   };
 
   ns.ProgressBarController.prototype.showProgress_ = function (event, progressInfo) {

src/js/controller/ToolController.js

@@ -35,8 +35,7 @@
     // Set SimplePen as default selected tool:
     this.selectTool_(this.tools[0]);
     // Activate listener on tool panel:
-    var toolSection = document.querySelector('#tool-section');
+    $('#tool-section').mousedown($.proxy(this.onToolIconClicked_, this));
-    toolSection.addEventListener('mousedown', this.onToolIconClicked_.bind(this));
 
     $.subscribe(Events.SELECT_TOOL, this.onSelectToolEvent_.bind(this));
     $.subscribe(Events.SHORTCUTS_CHANGED, this.createToolsDom_.bind(this));
@@ -46,14 +45,14 @@
    * @private
    */
   ns.ToolController.prototype.activateToolOnStage_ = function(tool) {
-    var stage = document.body;
+    var stage = $('body');
-    var previousSelectedToolClass = stage.dataset.selectedToolClass;
+    var previousSelectedToolClass = stage.data('selected-tool-class');
     if (previousSelectedToolClass) {
-      stage.classList.remove(previousSelectedToolClass);
+      stage.removeClass(previousSelectedToolClass);
-      stage.classList.remove(pskl.tools.drawing.Move.TOOL_ID);
+      stage.removeClass(pskl.tools.drawing.Move.TOOL_ID);
     }
-    stage.classList.add(tool.toolId);
+    stage.addClass(tool.toolId);
-    stage.dataset.selectedToolClass = tool.toolId;
+    stage.data('selected-tool-class', tool.toolId);
   };
 
   ns.ToolController.prototype.onSelectToolEvent_ = function(event, toolId) {
@@ -70,13 +69,11 @@
     this.currentSelectedTool = tool;
     this.activateToolOnStage_(this.currentSelectedTool);
 
-    var selectedToolElement = document.querySelector('#tool-section .tool-icon.selected');
+    var selectedToolElement = $('#tool-section .tool-icon.selected');
-    if (selectedToolElement) {
+    var toolElement = $('[data-tool-id=' + tool.toolId + ']');
-      selectedToolElement.classList.remove('selected');
-    }
 
-    var toolElement = document.querySelector('[data-tool-id=' + tool.toolId + ']');
+    selectedToolElement.removeClass('selected');
-    toolElement.classList.add('selected');
+    toolElement.addClass('selected');
 
     $.publish(Events.TOOL_SELECTED, [tool]);
   };
@@ -85,11 +82,11 @@
    * @private
    */
   ns.ToolController.prototype.onToolIconClicked_ = function(evt) {
-    var target = evt.target;
+    var target = $(evt.target);
-    var clickedTool = pskl.utils.Dom.getParentWithData(target, 'toolId');
+    var clickedTool = target.closest('.tool-icon');
 
-    if (clickedTool) {
+    if (clickedTool.length) {
-      var toolId = clickedTool.dataset.toolId;
+      var toolId = clickedTool.data().toolId;
       var tool = this.getToolById_(toolId);
       if (tool) {
         this.selectTool_(tool);
@@ -119,7 +116,7 @@
       var tool = this.tools[i];
       html += this.toolIconBuilder.createIcon(tool);
     }
-    document.querySelector('#tools-container').innerHTML = html;
+    $('#tools-container').html(html);
   };
 
   ns.ToolController.prototype.addKeyboardShortcuts_ = function () {

src/js/controller/dialogs/BrowseLocalController.js

@@ -11,11 +11,12 @@
     this.localStorageItemTemplate_ = pskl.utils.Template.get('local-storage-item-template');
 
     this.service_ = pskl.app.indexedDbStorageService;
-    this.piskelList = document.querySelector('.local-piskel-list');
+    this.piskelList = $('.local-piskel-list');
+    this.prevSessionContainer = $('.previous-session');
 
     this.fillLocalPiskelsList_();
 
-    this.piskelList.addEventListener('click', this.onPiskelsListClick_.bind(this));
+    this.piskelList.click(this.onPiskelsListClick_.bind(this));
   };
 
   ns.BrowseLocalController.prototype.onPiskelsListClick_ = function (evt) {
@@ -51,7 +52,7 @@
         });
       }).bind(this));
 
-      var tableBody_ = this.piskelList.tBodies[0];
+      var tableBody_ = this.piskelList.get(0).tBodies[0];
       tableBody_.innerHTML = html;
     }.bind(this));
   };

src/js/controller/piskel/PiskelController.js

@@ -122,17 +122,6 @@
       l.addFrameAt(this.createEmptyFrame_(), index);
     }.bind(this));
 
-    this.onFrameAddedAt_(index);
-  };
-
-  ns.PiskelController.prototype.onFrameAddedAt_ = function (index) {
-    this.piskel.hiddenFrames = this.piskel.hiddenFrames.map(function (hiddenIndex) {
-      if (hiddenIndex >= index) {
-        return hiddenIndex + 1;
-      }
-      return hiddenIndex;
-    });
-
     this.setCurrentFrameIndex(index);
   };
 
@@ -146,15 +135,6 @@
     this.getLayers().forEach(function (l) {
       l.removeFrameAt(index);
     });
-
-    // Update the array of hidden frames since some hidden indexes might have shifted.
-    this.piskel.hiddenFrames = this.piskel.hiddenFrames.map(function (hiddenIndex) {
-      if (hiddenIndex > index) {
-        return hiddenIndex - 1;
-      }
-      return hiddenIndex;
-    });
-
     // Current frame index is impacted if the removed frame was before the current frame
     if (this.currentFrameIndex >= index && this.currentFrameIndex > 0) {
       this.setCurrentFrameIndex(this.currentFrameIndex - 1);
@@ -169,64 +149,13 @@
     this.getLayers().forEach(function (l) {
       l.duplicateFrameAt(index);
     });
-    this.onFrameAddedAt_(index + 1);
+    this.setCurrentFrameIndex(index + 1);
-  };
-
-  /**
-   * Toggle frame visibility for the frame at the provided index.
-   * A visible frame will be included in the animated preview.
-   */
-  ns.PiskelController.prototype.toggleFrameVisibilityAt = function (index) {
-    var hiddenFrames = this.piskel.hiddenFrames;
-    if (hiddenFrames.indexOf(index) === -1) {
-      hiddenFrames.push(index);
-    } else {
-      hiddenFrames = hiddenFrames.filter(function (i) {
-        return i !== index;
-      });
-    }
-
-    // Keep the hiddenFrames array sorted.
-    this.piskel.hiddenFrames = hiddenFrames.sort();
   };
 
   ns.PiskelController.prototype.moveFrame = function (fromIndex, toIndex) {
     this.getLayers().forEach(function (l) {
       l.moveFrame(fromIndex, toIndex);
     });
-
-    // Update the array of hidden frames since some hidden indexes might have shifted.
-    this.piskel.hiddenFrames = this.piskel.hiddenFrames.map(function (index) {
-      if (index === fromIndex) {
-        return toIndex;
-      }
-
-      // All the frames between fromIndex and toIndex changed their index.
-      var isImpacted = index >= Math.min(fromIndex, toIndex) &&
-                       index <= Math.max(fromIndex, toIndex);
-      if (isImpacted) {
-        if (fromIndex < toIndex) {
-          // If the frame moved to a higher index, all impacted frames had their index
-          // reduced by 1.
-          return index - 1;
-        } else {
-          // Otherwise, they had their index increased by 1.
-          return index + 1;
-        }
-      }
-    });
-  };
-
-  ns.PiskelController.prototype.hasVisibleFrameAt = function (index) {
-    return this.piskel.hiddenFrames.indexOf(index) === -1;
-  };
-
-  ns.PiskelController.prototype.getVisibleFrameIndexes = function () {
-    return this.getCurrentLayer().getFrames().map(function (frame, index) {
-      return index;
-    }).filter(function (index) {
-      return this.piskel.hiddenFrames.indexOf(index) === -1;
-    }.bind(this));
   };
 
   ns.PiskelController.prototype.getFrameCount = function () {

src/js/controller/piskel/PublicPiskelController.js

@@ -37,7 +37,6 @@
     this.saveWrap_('moveLayerDown', true);
     this.saveWrap_('removeCurrentLayer', true);
     this.saveWrap_('setLayerOpacityAt', true);
-    this.saveWrap_('toggleFrameVisibilityAt', true);
 
     var shortcuts = pskl.service.keyboard.Shortcuts;
     pskl.app.shortcutService.registerShortcut(shortcuts.MISC.PREVIOUS_FRAME, this.selectPreviousFrame.bind(this));

src/js/controller/preview/PopupPreviewController.js

@@ -33,7 +33,7 @@
     pskl.utils.Event.addEventListener(this.popup, 'resize', this.onWindowResize_, this);
     pskl.utils.Event.addEventListener(this.popup, 'unload', this.onPopupClosed_, this);
     var container = this.popup.document.querySelector('.preview-container');
-    this.renderer = new pskl.rendering.frame.BackgroundImageFrameRenderer(container);
+    this.renderer = new pskl.rendering.frame.BackgroundImageFrameRenderer($(container));
     this.updateZoom_();
     this.renderFlag = true;
   };

src/js/controller/preview/PreviewActionsController.js

@@ -1,232 +0,0 @@
-(function () {
-  var ns = $.namespace('pskl.controller.preview');
-
-  ns.PreviewActionsController = function (previewController, container) {
-    this.previewController = previewController;
-    this.piskelController = previewController.piskelController;
-    this.container = container;
-
-    this.onionSkinShortcut = pskl.service.keyboard.Shortcuts.MISC.ONION_SKIN;
-    this.toggleGridShortcut = pskl.service.keyboard.Shortcuts.MISC.TOGGLE_GRID;
-
-    this.fpsRangeInput = document.querySelector('#preview-fps');
-    this.fpsCounterDisplay = document.querySelector('#display-fps');
-    this.openPopupPreview = document.querySelector('.open-popup-preview-button');
-    this.toggleGridButton = document.querySelector('.toggle-grid-button');
-    this.previewSizeDropdown = document.querySelector('.preview-drop-down');
-    this.previewSizes = {
-      original: {
-        button: document.querySelector('.original-size-button'),
-        shortcut: pskl.service.keyboard.Shortcuts.MISC.X1_PREVIEW,
-        tooltip: 'Original size preview'
-      },
-      best: {
-        button: document.querySelector('.best-size-button'),
-        shortcut: pskl.service.keyboard.Shortcuts.MISC.BEST_PREVIEW,
-        tooltip: 'Best size preview'
-      },
-      full: {
-        button: document.querySelector('.full-size-button'),
-        shortcut: pskl.service.keyboard.Shortcuts.MISC.FULL_PREVIEW,
-        tooltip: 'Full size preview'
-      }
-    };
-    this.toggleOnionSkinButton = document.querySelector('.preview-toggle-onion-skin');
-  };
-
-  ns.PreviewActionsController.prototype.init = function () {
-    this.fpsRangeInput.addEventListener('change', this.onFpsRangeInputUpdate_.bind(this));
-    this.fpsRangeInput.addEventListener('input', this.onFpsRangeInputUpdate_.bind(this));
-
-    var addEvent = pskl.utils.Event.addEventListener;
-    addEvent(this.toggleOnionSkinButton, 'click', this.toggleOnionSkin_, this);
-    addEvent(this.openPopupPreview, 'click', this.onOpenPopupPreviewClick_, this);
-    addEvent(this.toggleGridButton, 'click', this.toggleGrid_, this);
-
-    var registerShortcut = pskl.app.shortcutService.registerShortcut.bind(pskl.app.shortcutService);
-    registerShortcut(this.onionSkinShortcut, this.toggleOnionSkin_.bind(this));
-    registerShortcut(this.toggleGridShortcut, this.toggleGrid_.bind(this));
-
-    var onionSkinTooltip = pskl.utils.TooltipFormatter.format('Toggle onion skin', this.onionSkinShortcut);
-    this.toggleOnionSkinButton.setAttribute('title', onionSkinTooltip);
-
-    for (var size in this.previewSizes) {
-      if (this.previewSizes.hasOwnProperty(size)) {
-        var previewSize = this.previewSizes[size];
-        addEvent(previewSize.button, 'click', this.onChangePreviewSize_, this, size);
-        registerShortcut(previewSize.shortcut, this.onChangePreviewSize_.bind(this, size));
-        var tooltip = pskl.utils.TooltipFormatter.format(previewSize.tooltip, previewSize.shortcut);
-        previewSize.button.setAttribute('title', tooltip);
-      }
-    }
-
-    $.subscribe(Events.FRAME_SIZE_CHANGED, this.updatePreviewSizeButtons_.bind(this));
-    $.subscribe(Events.USER_SETTINGS_CHANGED, this.onUserSettingsChange_.bind(this));
-    $.subscribe(Events.FPS_CHANGED, this.updateFPS_.bind(this));
-    $.subscribe(Events.PISKEL_RESET, this.updateFPS_.bind(this));
-
-    this.updatePreviewSizeButtons_();
-    this.updateOnionSkinPreview_();
-    this.selectPreviewSizeButton_();
-    this.updateFPS_();
-    this.updateMaxFPS_();
-    this.updateToggleGridButton_();
-  };
-
-  ns.PreviewActionsController.prototype.updateToggleGridButton_ = function () {
-    var gridEnabled = pskl.UserSettings.get(pskl.UserSettings.GRID_ENABLED);
-    this.toggleGridButton.classList.toggle('icon-minimap-grid-white', !gridEnabled);
-    this.toggleGridButton.classList.toggle('icon-minimap-grid-gold', gridEnabled);
-    this.toggleGridButton.classList.toggle('preview-contextual-action-enabled', gridEnabled);
-  };
-
-  ns.PreviewActionsController.prototype.toggleGrid_ = function () {
-    var gridEnabled = pskl.UserSettings.get(pskl.UserSettings.GRID_ENABLED);
-    pskl.UserSettings.set(pskl.UserSettings.GRID_ENABLED, !gridEnabled);
-  };
-
-  ns.PreviewActionsController.prototype.updatePreviewSizeButtons_ = function () {
-    var fullZoom = this.previewController.getZoom();
-    var bestZoom = Math.floor(fullZoom);
-    var seamlessModeEnabled = pskl.UserSettings.get(pskl.UserSettings.SEAMLESS_MODE);
-
-    var validSizes;
-    if (fullZoom < 1) {
-      this.disablePreviewSizeWidget_('No other option available');
-      validSizes = ['full'];
-    } else if (fullZoom === 1) {
-      this.disablePreviewSizeWidget_('No other option available');
-      validSizes = ['original'];
-    } else if (seamlessModeEnabled) {
-      this.disablePreviewSizeWidget_('Disabled in tile mode');
-      validSizes = ['original'];
-    } else {
-      this.enablePreviewSizeWidget_();
-      if (fullZoom === bestZoom) {
-        // If the full zoom is the same as the best zoom, display the best option only as
-        // it gives the exact factor information.
-        validSizes = ['original', 'best'];
-      } else if (bestZoom === 1) {
-        // If best zoom is 1x, remove it as it is redundant with the original option.
-        validSizes = ['full', 'original'];
-      } else {
-        validSizes = ['full', 'original', 'best'];
-      }
-    }
-
-    // Update buttons content and status.
-    this.previewSizes.best.button.textContent = Math.floor(fullZoom) + 'x';
-    for (var size in this.previewSizes) {
-      if (this.previewSizes.hasOwnProperty(size)) {
-        var previewSize = this.previewSizes[size];
-        var isSizeEnabled = validSizes.indexOf(size) != -1;
-
-        // classList.toggle is not available on IE11.
-        if (isSizeEnabled) {
-          previewSize.button.classList.remove('preview-contextual-action-hidden');
-        } else {
-          previewSize.button.classList.add('preview-contextual-action-hidden');
-        }
-      }
-    }
-
-    // Update the selected preview size if the currently selected size is not valid.
-    var selectedSize = pskl.UserSettings.get(pskl.UserSettings.PREVIEW_SIZE);
-    if (validSizes.indexOf(selectedSize) === -1) {
-      this.onChangePreviewSize_(validSizes[0]);
-    }
-  };
-
-  ns.PreviewActionsController.prototype.enablePreviewSizeWidget_ = function () {
-    this.previewSizeDropdown.classList.remove('preview-drop-down-disabled');
-  };
-
-  ns.PreviewActionsController.prototype.disablePreviewSizeWidget_ = function (reason) {
-    // The .preview-disable-overlay is displayed on top of the preview size widget
-    document.querySelector('.preview-disable-overlay').setAttribute('data-original-title', reason);
-    this.previewSizeDropdown.classList.add('preview-drop-down-disabled');
-  };
-
-  ns.PreviewActionsController.prototype.onOpenPopupPreviewClick_ = function () {
-    this.previewController.openPopupPreview();
-  };
-
-  ns.PreviewActionsController.prototype.onChangePreviewSize_ = function (size) {
-    var previewSize = this.previewSizes[size];
-    var isEnabled = !previewSize.button.classList.contains('preview-contextual-action-hidden');
-    if (isEnabled) {
-      pskl.UserSettings.set(pskl.UserSettings.PREVIEW_SIZE, size);
-    }
-  };
-
-  ns.PreviewActionsController.prototype.onUserSettingsChange_ = function (evt, name, value) {
-    if (name == pskl.UserSettings.ONION_SKIN) {
-      this.updateOnionSkinPreview_();
-    } else if (name == pskl.UserSettings.MAX_FPS) {
-      this.updateMaxFPS_();
-    } else if (name === pskl.UserSettings.SEAMLESS_MODE) {
-      this.updatePreviewSizeButtons_();
-    } else if (name === pskl.UserSettings.GRID_ENABLED) {
-      this.updateToggleGridButton_();
-    } else {
-      this.selectPreviewSizeButton_();
-    }
-  };
-
-  ns.PreviewActionsController.prototype.updateOnionSkinPreview_ = function () {
-    var enabledClassname = 'preview-toggle-onion-skin-enabled';
-    var isEnabled = pskl.UserSettings.get(pskl.UserSettings.ONION_SKIN);
-
-    // classList.toggle is not available on IE11.
-    if (isEnabled) {
-      this.toggleOnionSkinButton.classList.add(enabledClassname);
-    } else {
-      this.toggleOnionSkinButton.classList.remove(enabledClassname);
-    }
-  };
-
-  ns.PreviewActionsController.prototype.selectPreviewSizeButton_ = function () {
-    var currentlySelected = document.querySelector('.size-button-selected');
-    if (currentlySelected) {
-      currentlySelected.classList.remove('size-button-selected');
-    }
-
-    var selectedSize = pskl.UserSettings.get(pskl.UserSettings.PREVIEW_SIZE);
-    var previewSize = this.previewSizes[selectedSize];
-    previewSize.button.classList.add('size-button-selected');
-  };
-
-  ns.PreviewActionsController.prototype.updateMaxFPS_ = function () {
-    var maxFps = pskl.UserSettings.get(pskl.UserSettings.MAX_FPS);
-    this.fpsRangeInput.setAttribute('max', maxFps);
-    this.piskelController.setFPS(Math.min(maxFps, this.piskelController.getFPS()));
-  };
-
-  /**
-   * Event handler triggered on 'input' or 'change' events.
-   */
-  ns.PreviewActionsController.prototype.onFpsRangeInputUpdate_ = function (evt) {
-    var fps = parseInt(this.fpsRangeInput.value, 10);
-    this.piskelController.setFPS(fps);
-    // blur only on 'change' events, as blurring on 'input' breaks on Firefox
-    if (evt.type === 'change') {
-      this.fpsRangeInput.blur();
-    }
-  };
-
-  ns.PreviewActionsController.prototype.updateFPS_ = function () {
-    var fps = this.piskelController.getFPS();
-    if (fps !== this.fpsRangeInput.value) {
-      // reset
-      this.fpsRangeInput.value = 0;
-      // set proper value
-      this.fpsRangeInput.value = fps;
-      this.fpsCounterDisplay.innerHTML = fps + ' FPS';
-    }
-  };
-
-  ns.PreviewActionsController.prototype.toggleOnionSkin_ = function () {
-    var currentValue = pskl.UserSettings.get(pskl.UserSettings.ONION_SKIN);
-    pskl.UserSettings.set(pskl.UserSettings.ONION_SKIN, !currentValue);
-  };
-})();

src/js/controller/preview/PreviewController.js

@@ -11,43 +11,201 @@
 
     this.elapsedTime = 0;
     this.currentIndex = 0;
+
+    this.onionSkinShortcut = pskl.service.keyboard.Shortcuts.MISC.ONION_SKIN;
+
     this.lastRenderTime = 0;
     this.renderFlag = true;
 
+    this.fpsRangeInput = document.querySelector('#preview-fps');
+    this.fpsCounterDisplay = document.querySelector('#display-fps');
+    this.openPopupPreview = document.querySelector('.open-popup-preview-button');
+    this.previewSizeDropdown = document.querySelector('.preview-drop-down');
+    this.previewSizes = {
+      original: {
+        button: document.querySelector('.original-size-button'),
+        shortcut: pskl.service.keyboard.Shortcuts.MISC.X1_PREVIEW,
+        tooltip: 'Original size preview'
+      },
+      best: {
+        button: document.querySelector('.best-size-button'),
+        shortcut: pskl.service.keyboard.Shortcuts.MISC.BEST_PREVIEW,
+        tooltip: 'Best size preview'
+      },
+      full: {
+        button: document.querySelector('.full-size-button'),
+        shortcut: pskl.service.keyboard.Shortcuts.MISC.FULL_PREVIEW,
+        tooltip: 'Full size preview'
+      }
+    };
+    this.toggleOnionSkinButton = document.querySelector('.preview-toggle-onion-skin');
+
     this.renderer = new pskl.rendering.frame.BackgroundImageFrameRenderer(this.container);
     this.popupPreviewController = new ns.PopupPreviewController(piskelController);
-    this.previewActionsController = new ns.PreviewActionsController(this, container);
   };
 
   ns.PreviewController.prototype.init = function () {
-    var width = Constants.ANIMATED_PREVIEW_WIDTH + Constants.RIGHT_COLUMN_PADDING_LEFT;
+    this.fpsRangeInput.addEventListener('change', this.onFpsRangeInputUpdate_.bind(this));
-    document.querySelector('.right-column').style.width = width + 'px';
+    this.fpsRangeInput.addEventListener('input', this.onFpsRangeInputUpdate_.bind(this));
+
+    document.querySelector('.right-column').style.width = Constants.ANIMATED_PREVIEW_WIDTH + 'px';
+
+    var addEvent = pskl.utils.Event.addEventListener;
+    addEvent(this.toggleOnionSkinButton, 'click', this.toggleOnionSkin_, this);
+    addEvent(this.openPopupPreview, 'click', this.onOpenPopupPreviewClick_, this);
+
+    var registerShortcut = pskl.app.shortcutService.registerShortcut.bind(pskl.app.shortcutService);
+    registerShortcut(this.onionSkinShortcut, this.toggleOnionSkin_.bind(this));
+
+    var onionSkinTooltip = pskl.utils.TooltipFormatter.format('Toggle onion skin', this.onionSkinShortcut);
+    this.toggleOnionSkinButton.setAttribute('title', onionSkinTooltip);
+
+    for (var size in this.previewSizes) {
+      if (this.previewSizes.hasOwnProperty(size)) {
+        var previewSize = this.previewSizes[size];
+        addEvent(previewSize.button, 'click', this.onChangePreviewSize_, this, size);
+        registerShortcut(previewSize.shortcut, this.onChangePreviewSize_.bind(this, size));
+        var tooltip = pskl.utils.TooltipFormatter.format(previewSize.tooltip, previewSize.shortcut);
+        previewSize.button.setAttribute('title', tooltip);
+      }
+    }
 
     $.subscribe(Events.FRAME_SIZE_CHANGED, this.onFrameSizeChange_.bind(this));
-    $.subscribe(Events.USER_SETTINGS_CHANGED, this.onUserSettingsChange_.bind(this));
+    $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
     $.subscribe(Events.PISKEL_SAVE_STATE, this.setRenderFlag_.bind(this, true));
+    $.subscribe(Events.FPS_CHANGED, this.updateFPS_.bind(this));
+    // On PISKEL_RESET, set the render flag and update the FPS input
     $.subscribe(Events.PISKEL_RESET, this.setRenderFlag_.bind(this, true));
+    $.subscribe(Events.PISKEL_RESET, this.updateFPS_.bind(this));
 
+    this.updatePreviewSizeButtons_();
     this.popupPreviewController.init();
-    this.previewActionsController.init();
 
     this.updateZoom_();
+    this.updateOnionSkinPreview_();
+    this.selectPreviewSizeButton_();
+    this.updateFPS_();
+    this.updateMaxFPS_();
     this.updateContainerDimensions_();
   };
 
-  ns.PreviewController.prototype.openPopupPreview = function () {
+  ns.PreviewController.prototype.updatePreviewSizeButtons_ = function () {
+    var fullZoom = this.calculateZoom_();
+    var bestZoom = Math.floor(fullZoom);
+    var seamlessModeEnabled = pskl.UserSettings.get(pskl.UserSettings.SEAMLESS_MODE);
+
+    var validSizes;
+    if (fullZoom < 1) {
+      this.disablePreviewSizeWidget_('No other option available');
+      validSizes = ['full'];
+    } else if (fullZoom === 1) {
+      this.disablePreviewSizeWidget_('No other option available');
+      validSizes = ['original'];
+    } else if (seamlessModeEnabled) {
+      this.disablePreviewSizeWidget_('Disabled in tile mode');
+      validSizes = ['original'];
+    } else {
+      this.enablePreviewSizeWidget_();
+      if (fullZoom === bestZoom) {
+        // If the full zoom is the same as the best zoom, display the best option only as
+        // it gives the exact factor information.
+        validSizes = ['original', 'best'];
+      } else if (bestZoom === 1) {
+        // If best zoom is 1x, remove it as it is redundant with the original option.
+        validSizes = ['full', 'original'];
+      } else {
+        validSizes = ['full', 'original', 'best'];
+      }
+    }
+
+    // Update buttons content and status.
+    this.previewSizes.best.button.textContent = Math.floor(fullZoom) + 'x';
+    for (var size in this.previewSizes) {
+      if (this.previewSizes.hasOwnProperty(size)) {
+        var previewSize = this.previewSizes[size];
+        var isSizeEnabled = validSizes.indexOf(size) != -1;
+
+        // classList.toggle is not available on IE11.
+        if (isSizeEnabled) {
+          previewSize.button.classList.remove('preview-contextual-action-hidden');
+        } else {
+          previewSize.button.classList.add('preview-contextual-action-hidden');
+        }
+      }
+    }
+
+    // Update the selected preview size if the currently selected size is not valid.
+    var selectedSize = pskl.UserSettings.get(pskl.UserSettings.PREVIEW_SIZE);
+    if (validSizes.indexOf(selectedSize) === -1) {
+      this.onChangePreviewSize_(validSizes[0]);
+    }
+  };
+
+  ns.PreviewController.prototype.enablePreviewSizeWidget_ = function () {
+    this.previewSizeDropdown.classList.remove('preview-drop-down-disabled');
+  };
+
+  ns.PreviewController.prototype.disablePreviewSizeWidget_ = function (reason) {
+    // The .preview-disable-overlay is displayed on top of the preview size widget
+    document.querySelector('.preview-disable-overlay').setAttribute('data-original-title', reason);
+    this.previewSizeDropdown.classList.add('preview-drop-down-disabled');
+  };
+
+  ns.PreviewController.prototype.onOpenPopupPreviewClick_ = function () {
     this.popupPreviewController.open();
   };
 
+  ns.PreviewController.prototype.onChangePreviewSize_ = function (size) {
+    var previewSize = this.previewSizes[size];
+    var isEnabled = !previewSize.button.classList.contains('preview-contextual-action-hidden');
+    if (isEnabled) {
+      pskl.UserSettings.set(pskl.UserSettings.PREVIEW_SIZE, size);
+    }
+  };
+
   ns.PreviewController.prototype.onUserSettingsChange_ = function (evt, name, value) {
-    if (name === pskl.UserSettings.SEAMLESS_MODE) {
+    if (name == pskl.UserSettings.ONION_SKIN) {
+      this.updateOnionSkinPreview_();
+    } else if (name == pskl.UserSettings.MAX_FPS) {
+      this.updateMaxFPS_();
+    } else if (name === pskl.UserSettings.SEAMLESS_MODE) {
       this.onFrameSizeChange_();
     } else {
       this.updateZoom_();
+      this.selectPreviewSizeButton_();
       this.updateContainerDimensions_();
     }
   };
 
+  ns.PreviewController.prototype.updateOnionSkinPreview_ = function () {
+    var enabledClassname = 'preview-toggle-onion-skin-enabled';
+    var isEnabled = pskl.UserSettings.get(pskl.UserSettings.ONION_SKIN);
+
+    // classList.toggle is not available on IE11.
+    if (isEnabled) {
+      this.toggleOnionSkinButton.classList.add(enabledClassname);
+    } else {
+      this.toggleOnionSkinButton.classList.remove(enabledClassname);
+    }
+  };
+
+  ns.PreviewController.prototype.selectPreviewSizeButton_ = function () {
+    var currentlySelected = document.querySelector('.size-button-selected');
+    if (currentlySelected) {
+      currentlySelected.classList.remove('size-button-selected');
+    }
+
+    var selectedSize = pskl.UserSettings.get(pskl.UserSettings.PREVIEW_SIZE);
+    var previewSize = this.previewSizes[selectedSize];
+    previewSize.button.classList.add('size-button-selected');
+  };
+
+  ns.PreviewController.prototype.updateMaxFPS_ = function () {
+    var maxFps = pskl.UserSettings.get(pskl.UserSettings.MAX_FPS);
+    this.fpsRangeInput.setAttribute('max', maxFps);
+    this.piskelController.setFPS(Math.min(maxFps, this.piskelController.getFPS()));
+  };
+
   ns.PreviewController.prototype.updateZoom_ = function () {
     var previewSize = pskl.UserSettings.get(pskl.UserSettings.PREVIEW_SIZE);
 
@@ -69,9 +227,9 @@
   };
 
   ns.PreviewController.prototype.getCoordinates = function(x, y) {
-    var containerRect = this.container.getBoundingClientRect();
+    var containerOffset = this.container.offset();
-    x = x - containerRect.left;
+    x = x - containerOffset.left;
-    y = y - containerRect.top;
+    y = y - containerOffset.top;
     var zoom = this.getZoom();
     return {
       x : Math.floor(x / zoom),
@@ -79,6 +237,30 @@
     };
   };
 
+  /**
+   * Event handler triggered on 'input' or 'change' events.
+   */
+  ns.PreviewController.prototype.onFpsRangeInputUpdate_ = function (evt) {
+    var fps = parseInt(this.fpsRangeInput.value, 10);
+    this.piskelController.setFPS(fps);
+    // blur only on 'change' events, as blurring on 'input' breaks on Firefox
+    if (evt.type === 'change') {
+      this.fpsRangeInput.blur();
+    }
+  };
+
+  ns.PreviewController.prototype.updateFPS_ = function () {
+    var fps = this.piskelController.getFPS();
+    if (fps !== this.fps) {
+      this.fps = fps;
+      // reset
+      this.fpsRangeInput.value = 0;
+      // set proper value
+      this.fpsRangeInput.value = this.fps;
+      this.fpsCounterDisplay.innerHTML = this.fps + ' FPS';
+    }
+  };
+
   ns.PreviewController.prototype.render = function (delta) {
     this.elapsedTime += delta;
     var index = this.getNextIndex_(delta);
@@ -94,18 +276,15 @@
   };
 
   ns.PreviewController.prototype.getNextIndex_ = function (delta) {
-    var fps = this.piskelController.getFPS();
+    if (this.fps === 0) {
-    if (fps === 0) {
       return this.piskelController.getCurrentFrameIndex();
     } else {
-      var index = Math.floor(this.elapsedTime / (1000 / fps));
+      var index = Math.floor(this.elapsedTime / (1000 / this.fps));
-      var frameIndexes = this.piskelController.getVisibleFrameIndexes();
+      if (!this.piskelController.hasFrameAt(index)) {
-      if (frameIndexes.length <= index) {
         this.elapsedTime = 0;
-        index = (frameIndexes.length) ? frameIndexes[0] : this.piskelController.getCurrentFrameIndex();
+        index = 0;
-        return index;
       }
-      return frameIndexes[index];
+      return index;
     }
   };
 
@@ -123,6 +302,7 @@
   ns.PreviewController.prototype.onFrameSizeChange_ = function () {
     this.updateZoom_();
     this.updateContainerDimensions_();
+    this.updatePreviewSizeButtons_();
   };
 
   ns.PreviewController.prototype.updateContainerDimensions_ = function () {
@@ -142,7 +322,7 @@
       width = frame.getWidth() * zoom;
     }
 
-    var containerEl = this.container;
+    var containerEl = this.container.get(0);
     containerEl.style.height = height + 'px';
     containerEl.style.width = width + 'px';
 
@@ -163,4 +343,9 @@
     return (this.renderFlag || this.popupPreviewController.renderFlag) &&
             (Date.now() - this.lastRenderTime > RENDER_MINIMUM_DELAY);
   };
+
+  ns.PreviewController.prototype.toggleOnionSkin_ = function () {
+    var currentValue = pskl.UserSettings.get(pskl.UserSettings.ONION_SKIN);
+    pskl.UserSettings.set(pskl.UserSettings.ONION_SKIN, !currentValue);
+  };
 })();

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

@@ -113,7 +113,7 @@
       width: width * zoom,
       height: height * zoom,
       preserveColors : preserveColors,
-      repeat: this.getRepeatSetting_() ? 0 : -1,
+      repeat: this.getRepeatSetting_() ? 0 : 1,
       transparent : transparent
     });
 

src/js/controller/settings/exportimage/MiscExportController.js

@@ -12,6 +12,9 @@
   ns.MiscExportController.prototype.init = function () {
     var cDownloadButton = document.querySelector('.c-download-button');
     this.addEventListener(cDownloadButton, 'click', this.onDownloadCFileClick_);
+
+    var selectedFrameDownloadButton = document.querySelector('.selected-frame-download-button');
+    this.addEventListener(selectedFrameDownloadButton, 'click', this.onDownloadSelectedFrameClick_);
   };
 
   ns.MiscExportController.prototype.onDownloadCFileClick_ = function (evt) {
@@ -73,4 +76,14 @@
     hexStr += ('00' + r.toString(16)).substr(-2);
     return hexStr;
   };
+
+  ns.MiscExportController.prototype.onDownloadSelectedFrameClick_ = function (evt) {
+    var frameIndex = this.piskelController.getCurrentFrameIndex();
+    var fileName = this.getPiskelName_() + '-' + (frameIndex + 1) + '.png';
+    var canvas = this.piskelController.renderFrameAt(frameIndex, true);
+
+    pskl.utils.BlobUtils.canvasToBlob(canvas, function(blob) {
+      pskl.utils.FileUtils.downloadAsFile(blob, fileName);
+    });
+  };
 })();

src/js/controller/settings/exportimage/PngExportController.js

@@ -31,9 +31,6 @@
     var downloadButton = document.querySelector('.png-download-button');
     var downloadPixiButton = document.querySelector('.png-pixi-download-button');
     var dataUriButton = document.querySelector('.datauri-open-button');
-    var selectedFrameDownloadButton = document.querySelector('.selected-frame-download-button');
-
-    this.pixiInlineImageCheckbox = document.querySelector('.png-pixi-inline-image-checkbox');
 
     this.initLayoutSection_();
     this.updateDimensionLabel_();
@@ -42,7 +39,6 @@
     this.addEventListener(downloadButton, 'click', this.onDownloadClick_);
     this.addEventListener(downloadPixiButton, 'click', this.onPixiDownloadClick_);
     this.addEventListener(dataUriButton, 'click', this.onDataUriClick_);
-    this.addEventListener(selectedFrameDownloadButton, 'click', this.onDownloadSelectedFrameClick_);
     $.subscribe(Events.EXPORT_SCALE_CHANGED, this.onScaleChanged_);
   };
 
@@ -153,9 +149,9 @@
   };
 
   // Used and overridden in casper integration tests.
-  ns.PngExportController.prototype.downloadCanvas_ = function (canvas, name) {
+  ns.PngExportController.prototype.downloadCanvas_ = function (canvas) {
     // Generate file name
-    name = name || this.piskelController.getPiskel().getDescriptor().name;
+    var name = this.piskelController.getPiskel().getDescriptor().name;
     var fileName = name + '.png';
 
     // Transform to blob and start download.
@@ -171,15 +167,7 @@
     var canvas = this.createPngSpritesheet_();
     var name = this.piskelController.getPiskel().getDescriptor().name;
 
-    var image;
+    zip.file(name + '.png', pskl.utils.CanvasUtils.getBase64FromCanvas(canvas) + '\n', {base64: true});
-
-    if (this.pixiInlineImageCheckbox.checked) {
-      image = canvas.toDataURL('image/png');
-    } else {
-      image = name + '.png';
-
-      zip.file(image, pskl.utils.CanvasUtils.getBase64FromCanvas(canvas) + '\n', {base64: true});
-    }
 
     var width = canvas.width / this.getColumns_();
     var height = canvas.height / this.getRows_();
@@ -204,7 +192,7 @@
       'meta': {
         'app': 'https://github.com/piskelapp/piskel/',
         'version': '1.0',
-        'image': image,
+        'image': name + '.png',
         'format': 'RGBA8888',
         'size': {'w': canvas.width,'h': canvas.height}
       }
@@ -229,17 +217,4 @@
       popup.document.body.innerHTML = html;
     }.bind(this), 500);
   };
-
-  ns.PngExportController.prototype.onDownloadSelectedFrameClick_ = function (evt) {
-    var frameIndex = this.piskelController.getCurrentFrameIndex();
-    var name = this.piskelController.getPiskel().getDescriptor().name;
-    var canvas = this.piskelController.renderFrameAt(frameIndex, true);
-    var zoom = this.exportController.getExportZoom();
-    if (zoom != 1) {
-      canvas = pskl.utils.ImageResizer.resize(canvas, canvas.width * zoom, canvas.height * zoom, false);
-    }
-
-    var fileName = name + '-' + (frameIndex + 1) + '.png';
-    this.downloadCanvas_(canvas, fileName);
-  };
 })();

src/js/controller/settings/exportimage/ZipExportController.js

@@ -12,25 +12,12 @@
     this.pngFilePrefixInput = document.querySelector('.zip-prefix-name');
     this.pngFilePrefixInput.value = 'sprite_';
 
-    this.splitByLayersCheckbox = document.querySelector('.zip-split-layers-checkbox');
+    this.splitByLayersCheckbox =  document.querySelector('.zip-split-layers-checkbox');
-    this.addEventListener(this.splitByLayersCheckbox, 'change', this.onSplitLayersClick_);
-
-    this.useLayerNamesContainer = document.querySelector('.use-layer-names-container');
-    this.useLayerNamesCheckbox = document.querySelector('.zip-use-layer-names-checkbox');
-    this.toggleHideUseLayerNamesCheckbox();
 
     var zipButton = document.querySelector('.zip-generate-button');
     this.addEventListener(zipButton, 'click', this.onZipButtonClick_);
   };
 
-  ns.ZipExportController.prototype.toggleHideUseLayerNamesCheckbox = function () {
-    this.useLayerNamesContainer.style.display = (this.splitByLayersCheckbox.checked ? 'block' : 'none');
-  };
-
-  ns.ZipExportController.prototype.onSplitLayersClick_ = function () {
-    this.toggleHideUseLayerNamesCheckbox();
-  };
-
   ns.ZipExportController.prototype.onZipButtonClick_ = function () {
     var zip = new window.JSZip();
 
@@ -76,9 +63,6 @@
         var basename = this.pngFilePrefixInput.value;
         var frameid = pskl.utils.StringUtils.leftPad(i + 1, framePaddingLength, '0');
         var filename = 'l' + layerid + '_' + basename + frameid + '.png';
-        if (this.useLayerNamesCheckbox.checked) {
-          filename = layer.getName() + '_' + basename + frameid + '.png';
-        }
         zip.file(filename, pskl.utils.CanvasUtils.getBase64FromCanvas(canvas) + '\n', {base64: true});
       }
     }

src/js/controller/settings/preferences/GridPreferencesController.js

@@ -22,7 +22,6 @@
     this.piskelController = piskelController;
     this.preferencesController = preferencesController;
     this.sizePicker = new pskl.widgets.SizePicker(this.onSizePickerChanged_.bind(this));
-    this.spacingPicker = new pskl.widgets.SizePicker(this.onSpacingPickerChanged_.bind(this));
   };
 
   pskl.utils.inherit(ns.GridPreferencesController, pskl.controller.settings.AbstractSettingController);
@@ -41,11 +40,6 @@
     this.sizePicker.init(document.querySelector('.grid-size-container'));
     this.sizePicker.setSize(gridWidth);
 
-    //Grid Spacing
-    var gridSpacing = pskl.UserSettings.get(pskl.UserSettings.GRID_SPACING);
-    this.spacingPicker.init(document.querySelector('.grid-spacing-container'));
-    this.spacingPicker.setSize(gridSpacing);
-
     // Grid color
     var colorListItemTemplate = pskl.utils.Template.get('color-list-item-template');
 
@@ -74,7 +68,6 @@
 
   ns.GridPreferencesController.prototype.destroy = function () {
     this.sizePicker.destroy();
-    this.spacingPicker.destroy();
     this.superclass.destroy.call(this);
   };
 
@@ -82,10 +75,6 @@
     pskl.UserSettings.set(pskl.UserSettings.GRID_WIDTH, size);
   };
 
-  ns.GridPreferencesController.prototype.onSpacingPickerChanged_ = function (size) {
-    pskl.UserSettings.set(pskl.UserSettings.GRID_SPACING, size);
-  };
-
   ns.GridPreferencesController.prototype.onEnableGridChange_ = function (evt) {
     pskl.UserSettings.set(pskl.UserSettings.GRID_ENABLED, evt.currentTarget.checked);
   };

src/js/database/BackupDatabase.js

@@ -25,7 +25,7 @@
 
   /**
    * Open and initialize the database.
-   * Returns a promise that resolves when the database is opened.
+   * Returns a promise that resolves when the databse is opened.
    */
   ns.BackupDatabase.prototype.init = function () {
     var request = window.indexedDB.open(DB_NAME, DB_VERSION);

src/js/model/Piskel.js

@@ -16,7 +16,6 @@
       this.descriptor = descriptor;
       this.savePath = null;
       this.fps = fps;
-      this.hiddenFrames = [];
     } else {
       throw 'Missing arguments in Piskel constructor : ' + Array.prototype.join.call(arguments, ',');
     }

src/js/rendering/frame/BackgroundImageFrameRenderer.js

@@ -5,10 +5,11 @@
     this.container = container;
     this.setZoom(zoom);
 
-    var containerDocument = container.ownerDocument;
+    var containerEl = container.get(0);
+    var containerDocument = containerEl.ownerDocument;
     this.frameContainer = containerDocument.createElement('div');
     this.frameContainer.classList.add('background-image-frame-container');
-    container.appendChild(this.frameContainer);
+    container.get(0).appendChild(this.frameContainer);
 
     this.cachedFrameProcessor = new pskl.model.frame.CachedFrameProcessor();
     this.cachedFrameProcessor.setFrameProcessor(this.frameToDataUrl_.bind(this));

src/js/rendering/frame/CachedFrameRenderer.js

@@ -34,7 +34,6 @@
     var serializedFrame = [
       this.getZoom(),
       this.getGridWidth(),
-      this.getGridSpacing(),
       this.getGridColor(),
       pskl.UserSettings.get('SEAMLESS_MODE'),
       pskl.UserSettings.get('SEAMLESS_OPACITY'),

src/js/rendering/frame/FrameRenderer.js

@@ -56,7 +56,6 @@
     this.setDisplaySize(renderingOptions.width, renderingOptions.height);
 
     this.setGridWidth(this.getUserGridWidth_());
-    this.setGridSpacing(this.getUserGridSpacing_());
 
     $.subscribe(Events.USER_SETTINGS_CHANGED, this.onUserSettingsChange_.bind(this));
   };
@@ -107,7 +106,7 @@
     this.displayWidth = width;
     this.displayHeight = height;
     if (this.displayCanvas) {
-      this.displayCanvas.parentNode.removeChild(this.displayCanvas);
+      $(this.displayCanvas).remove();
       this.displayCanvas = null;
     }
     this.createDisplayCanvas_();
@@ -147,10 +146,6 @@
     this.gridWidth_ = value;
   };
 
-  ns.FrameRenderer.prototype.setGridSpacing = function (value) {
-    this.gridSpacing_ = value;
-  };
-
   ns.FrameRenderer.prototype.getGridWidth = function () {
     if (!this.supportGridRendering) {
       return 0;
@@ -159,29 +154,15 @@
     return this.gridWidth_;
   };
 
-  ns.FrameRenderer.prototype.getGridSpacing = function () {
-    if (!this.supportGridRendering) {
-      return 0;
-    }
-
-    return this.gridSpacing_;
-  };
-
   /**
    * Compute a grid width value best suited to the current display context,
    * particularly for the current zoom level
    */
   ns.FrameRenderer.prototype.computeGridWidthForDisplay_ = function () {
-    var gridSpacing = this.getGridSpacing();
-    if (this.zoom * gridSpacing < 6) {
-      return 0;
-    }
-
     var gridWidth = this.getGridWidth();
-    while (gridWidth > 1 && this.zoom < 6 * gridWidth) {
+    while (this.zoom < 6 * gridWidth) {
       gridWidth--;
     }
-
     return gridWidth;
   };
 
@@ -199,16 +180,13 @@
 
     this.displayCanvas = pskl.utils.CanvasUtils.createCanvas(width, height, this.classList);
     pskl.utils.CanvasUtils.disableImageSmoothing(this.displayCanvas);
-    this.container.appendChild(this.displayCanvas);
+    this.container.append(this.displayCanvas);
   };
 
   ns.FrameRenderer.prototype.onUserSettingsChange_ = function (evt, settingName, settingValue) {
     var settings = pskl.UserSettings;
-    if (settingName == settings.GRID_WIDTH ||
+    if (settingName == settings.GRID_WIDTH || settingName == settings.GRID_ENABLED) {
-        settingName == settings.GRID_SPACING ||
-        settingName == settings.GRID_ENABLED) {
       this.setGridWidth(this.getUserGridWidth_());
-      this.setGridSpacing(this.getUserGridSpacing_());
     }
   };
 
@@ -218,21 +196,15 @@
     return gridEnabled ? width : 0;
   };
 
-  ns.FrameRenderer.prototype.getUserGridSpacing_ = function () {
-    var gridEnabled = pskl.UserSettings.get(pskl.UserSettings.GRID_ENABLED);
-    var spacing = pskl.UserSettings.get(pskl.UserSettings.GRID_SPACING);
-    return gridEnabled ? spacing : 0;
-  };
-
   /**
    * Transform a screen pixel-based coordinate (relative to the top-left corner of the rendered
    * frame) into a sprite coordinate in column and row.
    * @public
    */
   ns.FrameRenderer.prototype.getCoordinates = function(x, y) {
-    var containerRect = this.container.getBoundingClientRect();
+    var containerOffset = this.container.offset();
-    x = x - containerRect.left;
+    x = x - containerOffset.left;
-    y = y - containerRect.top;
+    y = y - containerOffset.top;
 
     // apply margins
     x = x - this.margin.x;
@@ -261,9 +233,9 @@
     x = x + this.margin.x;
     y = y + this.margin.y;
 
-    var containerRect = this.container.getBoundingClientRect();
+    var containerOffset = this.container.offset();
-    x = x + containerRect.left;
+    x = x + containerOffset.left;
-    y = y + containerRect.top;
+    y = y + containerOffset.top;
 
     return {
       x : x + (cellSize / 2),
@@ -326,7 +298,6 @@
 
     // Draw grid.
     var gridWidth = this.computeGridWidthForDisplay_();
-    var gridSpacing = this.getGridSpacing();
     if (gridWidth > 0) {
       var gridColor = this.getGridColor();
       // Scale out before drawing the grid.
@@ -342,15 +313,11 @@
 
       // Draw or clear vertical lines.
       for (var i = 1 ; i < frame.getWidth() ; i++) {
-        if (i % gridSpacing == 0) {
+        drawOrClear((i * z) - (gridWidth / 2), 0, gridWidth, h * z);
-          drawOrClear((i * z) - (gridWidth / 2), 0, gridWidth, h * z);
-        }
       }
       // Draw or clear horizontal lines.
       for (var j = 1 ; j < frame.getHeight() ; j++) {
-        if (j % gridSpacing == 0) {
+        drawOrClear(0, (j * z) - (gridWidth / 2), w * z, gridWidth);
-          drawOrClear(0, (j * z) - (gridWidth / 2), w * z, gridWidth);
-        }
       }
     }
 

src/js/rendering/layer/LayersRenderer.js

@@ -23,7 +23,7 @@
     this.updateLayersCanvasOpacity_(pskl.UserSettings.get(pskl.UserSettings.LAYER_OPACITY));
 
     $.subscribe(Events.PISKEL_RESET, this.flush.bind(this));
-    $.subscribe(Events.USER_SETTINGS_CHANGED, this.onUserSettingsChange_.bind(this));
+    $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
   };
 
   pskl.utils.inherit(pskl.rendering.layer.LayersRenderer, pskl.rendering.CompositeRenderer);

src/js/selection/SelectionManager.js

@@ -14,9 +14,9 @@
   };
 
   ns.SelectionManager.prototype.init = function () {
-    $.subscribe(Events.SELECTION_CREATED, this.onSelectionCreated_.bind(this));
+    $.subscribe(Events.SELECTION_CREATED, $.proxy(this.onSelectionCreated_, this));
-    $.subscribe(Events.SELECTION_DISMISSED, this.onSelectionDismissed_.bind(this));
+    $.subscribe(Events.SELECTION_DISMISSED, $.proxy(this.onSelectionDismissed_, this));
-    $.subscribe(Events.SELECTION_MOVE_REQUEST, this.onSelectionMoved_.bind(this));
+    $.subscribe(Events.SELECTION_MOVE_REQUEST, $.proxy(this.onSelectionMoved_, this));
     $.subscribe(Events.CLIPBOARD_COPY, this.copy.bind(this));
     $.subscribe(Events.CLIPBOARD_CUT, this.copy.bind(this));
     $.subscribe(Events.CLIPBOARD_PASTE, this.paste.bind(this));
@@ -25,7 +25,7 @@
     pskl.app.shortcutService.registerShortcut(shortcuts.SELECTION.DELETE, this.onDeleteShortcut_.bind(this));
     pskl.app.shortcutService.registerShortcut(shortcuts.SELECTION.COMMIT, this.commit.bind(this));
 
-    $.subscribe(Events.TOOL_SELECTED, this.onToolSelected_.bind(this));
+    $.subscribe(Events.TOOL_SELECTED, $.proxy(this.onToolSelected_, this));
   };
 
   /**

src/js/service/keyboard/ShortcutService.js

@@ -9,7 +9,7 @@
    * @public
    */
   ns.ShortcutService.prototype.init = function() {
-    document.body.addEventListener('keydown', this.onKeyDown_.bind(this));
+    $(document.body).keydown($.proxy(this.onKeyDown_, this));
   };
 
   /**

src/js/service/keyboard/Shortcuts.js

@@ -59,7 +59,6 @@
       BEST_PREVIEW : createShortcut('best-preview', 'Select best size preview', 'alt+2'),
       FULL_PREVIEW : createShortcut('full-preview', 'Select full size preview', 'alt+3'),
       ONION_SKIN : createShortcut('onion-skin', 'Toggle onion skin', 'alt+O'),
-      TOGGLE_GRID : createShortcut('toggle-grid', 'Show/Hide grid', 'alt+G'),
       LAYER_PREVIEW : createShortcut('layer-preview', 'Toggle layer preview', 'alt+L'),
       MERGE_ANIMATION : createShortcut('import-animation', 'Open merge animation popup', 'ctrl+shift+M'),
       CLOSE_POPUP : createShortcut('close-popup', 'Close an opened popup', 'ESC'),

src/js/tools/drawing/selection/BaseSelect.js

@@ -8,6 +8,7 @@
 
   ns.BaseSelect = function() {
     this.secondaryToolId = pskl.tools.drawing.Move.TOOL_ID;
+    this.bodyRoot = $('body');
 
     // Select's first point coordinates (set in applyToolAt)
     this.startCol = null;
@@ -42,7 +43,7 @@
     this.lastMoveRow = row;
 
     // The select tool can be in two different state.
-    // If the initial click of the tool is not on a selection, we go in 'select'
+    // If the inital click of the tool is not on a selection, we go in 'select'
     // mode to create a selection.
     // If the initial click is on a previous selection, we go in 'moveSelection'
     // mode to allow to move the selection by drag'n dropping it.
@@ -91,12 +92,12 @@
     if (overlay.containsPixel(col, row)) {
       if (this.isInSelection(col, row)) {
         // We're hovering the selection, show the move tool:
-        document.body.classList.add(this.secondaryToolId);
+        this.bodyRoot.addClass(this.secondaryToolId);
-        document.body.classList.remove(this.toolId);
+        this.bodyRoot.removeClass(this.toolId);
       } else {
         // We're not hovering the selection, show create selection tool:
-        document.body.classList.add(this.toolId);
+        this.bodyRoot.addClass(this.toolId);
-        document.body.classList.remove(this.secondaryToolId);
+        this.bodyRoot.removeClass(this.secondaryToolId);
       }
     }
 

src/js/tools/drawing/selection/RectangleSelect.js

@@ -24,8 +24,8 @@
 
   /**
    * When creating the rectangle selection, we clear the current overlayFrame and
-   * redraw the current rectangle based on the origin coordinate and
+   * redraw the current rectangle based on the orgin coordinate and
-   * the current mouse coordinate in sprite.
+   * the current mouse coordiinate in sprite.
    * @override
    */
   ns.RectangleSelect.prototype.onDragSelect_ = function (col, row, frame, overlay) {

src/js/tools/drawing/selection/ShapeSelect.js

@@ -18,7 +18,7 @@
 
   /**
    * For the shape select tool, you just need to click one time to create a selection.
-   * So we just need to implement onSelectStart_ (no need for onSelect_ & onSelectEnd_)
+   * So we jsut need to implement onSelectStart_ (no need for onSelect_ & onSelectEnd_)
    * @override
    */
   ns.ShapeSelect.prototype.onSelectStart_ = function (col, row, frame, overlay) {

src/js/utils/UserSettings.js

@@ -5,7 +5,6 @@
     GRID_COLOR : 'GRID_COLOR',
     GRID_ENABLED : 'GRID_ENABLED',
     GRID_WIDTH : 'GRID_WIDTH',
-    GRID_SPACING : 'GRID_SPACING',
     MAX_FPS : 'MAX_FPS',
     DEFAULT_SIZE : 'DEFAULT_SIZE',
     CANVAS_BACKGROUND : 'CANVAS_BACKGROUND',
@@ -28,7 +27,6 @@
       'GRID_COLOR' : Constants.TRANSPARENT_COLOR,
       'GRID_ENABLED' : false,
       'GRID_WIDTH' : 1,
-      'GRID_SPACING' : 1,
       'MAX_FPS' : 24,
       'DEFAULT_SIZE' : {
         width : Constants.DEFAULT.WIDTH,
@@ -126,4 +124,20 @@
       }
     }
   };
+
+  // Migration script for version 11 to version 12. Initialize the GRID_ENABLED pref from
+  // the current GRID_WIDTH and update the stored grid width to 1 if it was set to 0.
+  // SHOULD BE REMOVED FOR RELEASE 13.
+  ns.UserSettings.migrate_to_v0_12 = function () {
+    var storedGridEnabled = ns.UserSettings.readFromLocalStorage_('GRID_ENABLED');
+    if (typeof storedGridEnabled === 'undefined' || storedGridEnabled === null) {
+      var gridWidth = ns.UserSettings.get('GRID_WIDTH');
+      ns.UserSettings.writeToLocalStorage_('GRID_ENABLED', gridWidth > 0);
+    }
+
+    var storedGridWidth = ns.UserSettings.readFromLocalStorage_('GRID_WIDTH');
+    if (storedGridWidth === 0) {
+      ns.UserSettings.writeToLocalStorage_('GRID_WIDTH', 1);
+    }
+  };
 })();

src/js/utils/serialization/Deserializer.js

@@ -36,7 +36,6 @@
 
     var descriptor = new pskl.model.piskel.Descriptor(name, description);
     this.piskel_ = new pskl.model.Piskel(piskelData.width, piskelData.height, piskelData.fps, descriptor);
-    this.hiddenFrames = piskelData.hiddenFrames || [];
 
     this.layersToLoad_ = piskelData.layers.length;
     piskelData.layers.forEach(this.deserializeLayer.bind(this));
@@ -74,9 +73,7 @@
       image.src = chunk.base64PNG;
       return deferred.promise;
     })).then(function () {
-      frames.forEach(function (frame) {
+      frames.forEach(layer.addFrame.bind(layer));
-        layer.addFrame(frame);
-      });
       this.layers_[index] = layer;
       this.onLayerLoaded_();
     }.bind(this)).catch(function (error) {
@@ -93,7 +90,6 @@
       this.layers_.forEach(function (layer) {
         this.piskel_.addLayer(layer);
       }.bind(this));
-      this.piskel_.hiddenFrames = this.hiddenFrames;
       this.callback_(this.piskel_);
     }
   };

src/js/utils/serialization/Serializer.js

@@ -21,7 +21,6 @@
       var serializedLayers = piskel.getLayers().map(function (l) {
         return pskl.utils.serialization.Serializer.serializeLayer(l);
       });
-
       return JSON.stringify({
         modelVersion : Constants.MODEL_VERSION,
         piskel : {
@@ -30,8 +29,7 @@
           fps : pskl.app.piskelController.getFPS(),
           height : piskel.getHeight(),
           width : piskel.getWidth(),
-          layers : serializedLayers,
+          layers : serializedLayers
-          hiddenFrames : piskel.hiddenFrames,
         }
       });
     },

src/js/utils/serialization/arraybuffer/ArrayBufferDeserializer.js

@@ -36,36 +36,23 @@
       // Layers meta
       var layerCount = arr16[6];
 
-      // Layers meta
-      var serializedHiddenFramesLength = arr16[7];
-
-      var currentIndex = 8;
       /********/
       /* DATA */
       /********/
       // Descriptor name
       var descriptorName = '';
       for (i = 0; i < descriptorNameLength; i++) {
-        descriptorName += String.fromCharCode(arr16[currentIndex + i]);
+        descriptorName += String.fromCharCode(arr16[7 + i]);
       }
-      currentIndex += descriptorNameLength;
 
       // Descriptor description
       var descriptorDescription = '';
       for (i = 0; i < descriptorDescriptionLength; i++) {
-        descriptorDescription = String.fromCharCode(arr16[8 + descriptorNameLength + i]);
+        descriptorDescription = String.fromCharCode(arr16[7 + descriptorNameLength + i]);
       }
-      currentIndex += descriptorDescriptionLength;
-
-      // Hidden frames
-      var serializedHiddenFrames = '';
-      for (i = 0; i < serializedHiddenFramesLength; i++) {
-        serializedHiddenFrames = String.fromCharCode(arr16[8 + descriptorNameLength + i]);
-      }
-      var hiddenFrames = serializedHiddenFrames.split('-');
-      currentIndex += serializedHiddenFramesLength;
 
       // Layers
+      var layerStartIndex = 7 + descriptorNameLength + descriptorDescriptionLength;
       var layers = [];
       var layer;
       for (i = 0; i < layerCount; i++) {
@@ -73,27 +60,27 @@
         var frames = [];
 
         // Meta
-        var layerNameLength = arr16[currentIndex];
+        var layerNameLength = arr16[layerStartIndex];
-        var opacity =  arr16[currentIndex + 1] / 65535;
+        var opacity =  arr16[layerStartIndex + 1] / 65535;
-        var frameCount = arr16[currentIndex + 2];
+        var frameCount = arr16[layerStartIndex + 2];
-        var dataUriLengthFirstHalf = arr16[currentIndex + 3];
+        var dataUriLengthFirstHalf = arr16[layerStartIndex + 3];
-        var dataUriLengthSecondHalf = arr16[currentIndex + 4];
+        var dataUriLengthSecondHalf = arr16[layerStartIndex + 4];
         var dataUriLength = (dataUriLengthSecondHalf >>> 0) | (dataUriLengthFirstHalf << 16 >>> 0);
 
         // Name
         var layerName = '';
         for (j = 0; j < layerNameLength; j++) {
-          layerName += String.fromCharCode(arr16[currentIndex + 5 + j]);
+          layerName += String.fromCharCode(arr16[layerStartIndex + 5 + j]);
         }
 
         // Data URI
         var dataUri = '';
         for (j = 0; j < dataUriLength; j++) {
-          dataUri += String.fromCharCode(arr8[(currentIndex + 5 + layerNameLength) * 2 + j]);
+          dataUri += String.fromCharCode(arr8[(layerStartIndex + 5 + layerNameLength) * 2 + j]);
         }
         dataUri = 'data:image/png;base64,' + dataUri;
 
-        currentIndex += Math.ceil(5 + layerNameLength + (dataUriLength / 2));
+        layerStartIndex += Math.ceil(5 + layerNameLength + (dataUriLength / 2));
 
         layer.name = layerName;
         layer.opacity = opacity;
@@ -104,7 +91,6 @@
 
       var descriptor = new pskl.model.piskel.Descriptor(descriptorName, descriptorDescription);
       var piskel = new pskl.model.Piskel(width, height, fps, descriptor);
-      piskel.hiddenFrames = hiddenFrames;
       var loadedLayers = 0;
 
       var loadLayerImage = function(layer, cb) {

src/js/utils/serialization/arraybuffer/ArrayBufferSerializer.js

@@ -101,15 +101,7 @@
         framesData.push({uri: dataUri, length: dataUriLength});
       }
 
-      var frames = pskl.app.piskelController.getLayerAt(0).getFrames();
+      var bytes = ns.ArrayBufferSerializer.calculateRequiredBytes(piskel, framesData);
-      var hiddenFrames = piskel.hiddenFrames;
-      var serializedHiddenFrames = hiddenFrames.join('-');
-
-      var bytes = ns.ArrayBufferSerializer.calculateRequiredBytes(
-        piskel,
-        framesData,
-        serializedHiddenFrames
-      );
 
       var buffer = new ArrayBuffer(bytes);
       var arr8 = new Uint8Array(buffer);
@@ -138,33 +130,21 @@
       // Layers meta
       arr16[6] = piskel.getLayers().length;
 
-      // Frames meta
-      arr16[7] = serializedHiddenFrames.length;
-
-      var currentIndex = 8;
-
       /********/
       /* DATA */
       /********/
       // Descriptor name
       for (i = 0; i < descriptorNameLength; i++) {
-        arr16[currentIndex + i] = descriptorName.charCodeAt(i);
+        arr16[7 + i] = descriptorName.charCodeAt(i);
       }
-      currentIndex = currentIndex + descriptorNameLength;
 
       // Descriptor description
       for (i = 0; i < descriptorDescriptionLength; i++) {
-        arr16[currentIndex + i] = descriptorDescription.charCodeAt(i);
+        arr16[7 + descriptorNameLength + i] = descriptorDescription.charCodeAt(i);
       }
-      currentIndex = currentIndex + descriptorDescriptionLength;
-
-      // Hidden frames
-      for (i = 0; i < serializedHiddenFrames.length; i++) {
-        arr16[currentIndex + i] = serializedHiddenFrames.charCodeAt(i);
-      }
-      currentIndex = currentIndex + serializedHiddenFrames.length;
 
       // Layers
+      var layerStartIndex = 7 + descriptorNameLength + descriptorDescriptionLength;
       for (i = 0, layers = piskel.getLayers(); i < layers.length; i++) {
         var layer = layers[i];
         var frames = layer.getFrames();
@@ -178,23 +158,23 @@
         dataUriLength = framesData[i].length;
 
         // Meta
-        arr16[currentIndex] = layerNameLength;
+        arr16[layerStartIndex] = layerNameLength;
-        arr16[currentIndex + 1] = Math.floor(opacity * 65535);
+        arr16[layerStartIndex + 1] = Math.floor(opacity * 65535);
-        arr16[currentIndex + 2] = frameCount;
+        arr16[layerStartIndex + 2] = frameCount;
-        arr16[currentIndex + 3] = ((dataUriLength & 0xffff0000) >> 16) >>> 0; // Upper 16
+        arr16[layerStartIndex + 3] = ((dataUriLength & 0xffff0000) >> 16) >>> 0; // Upper 16
-        arr16[currentIndex + 4] = ((dataUriLength & 0x0000ffff)) >>> 0;       // Lower 16
+        arr16[layerStartIndex + 4] = ((dataUriLength & 0x0000ffff)) >>> 0;       // Lower 16
 
         // Name
         for (j = 0; j < layerNameLength; j++) {
-          arr16[currentIndex + 5 + j] = layerName.charCodeAt(j);
+          arr16[layerStartIndex + 5 + j] = layerName.charCodeAt(j);
         }
 
         // Data URI
         for (j = 0; j < dataUriLength; j++) {
-          arr8[(currentIndex + 5 + layerNameLength) * 2 + j] = dataUri.charCodeAt(j);
+          arr8[(layerStartIndex + 5 + layerNameLength) * 2 + j] = dataUri.charCodeAt(j);
         }
 
-        currentIndex += Math.ceil(5 + layerNameLength + (dataUriLength / 2));
+        layerStartIndex += Math.ceil(5 + layerNameLength + (dataUriLength / 2));
       }
 
       return buffer;

src/js/widgets/ColorsList.js

@@ -139,8 +139,7 @@
     var colorElement = drop.item.get(0);
 
     var oldIndex = parseInt(colorElement.dataset.paletteIndex, 10);
-    var colors = document.querySelectorAll('.create-palette-color');
+    var newIndex = $('.create-palette-color').index(drop.item);
-    var newIndex = Array.prototype.indexOf.call(colors, colorElement);
     this.palette.move(oldIndex, newIndex);
 
     this.selectedIndex = newIndex;

src/js/widgets/SizePicker.js

@@ -27,9 +27,10 @@
     pskl.utils.Dom.removeClass('labeled', this.container);
     pskl.utils.Dom.removeClass('selected', this.container);
     var selectedOption;
-    selectedOption = this.container.querySelector('[data-size="' + size + '"]');
+    if (size <= 4) {
-    if (!selectedOption) {
+      selectedOption = this.container.querySelector('[data-size="' + size + '"]');
-      selectedOption = this.container.querySelector('[data-size]:last-child');
+    } else {
+      selectedOption = this.container.querySelector('[data-size="4"]');
       selectedOption.classList.add('labeled');
       selectedOption.setAttribute('real-size', size);
     }

src/piskel-script-list.js

@@ -113,7 +113,6 @@
   "js/controller/HeaderController.js",
   "js/controller/LayersListController.js",
   "js/controller/preview/PopupPreviewController.js",
-  "js/controller/preview/PreviewActionsController.js",
   "js/controller/preview/PreviewController.js",
   "js/controller/MinimapController.js",
   "js/controller/ToolController.js",

src/piskel-style-list.js

@@ -42,4 +42,4 @@
   "css/widgets-size-picker.css",
   "css/widgets-tabs.css",
   "css/widgets-wizard.css"
-];
+];

src/templates/dialogs/import.html

@@ -25,8 +25,8 @@
     </div>
     <div class="import-section import-subsection">
       <span class="dialog-section-title">Resize to</span>
-      <input type="text" class="textfield import-size-field" autocomplete="off" name="resize-width"/>x
+      <input type="text" class="textfield import-size-field" name="resize-width"/>x
-      <input type="text" class="textfield import-size-field" autocomplete="off" name="resize-height"/>
+      <input type="text" class="textfield import-size-field" name="resize-height"/>
     </div>
     <div class="import-section import-subsection">
       <span class="import-section-title">Smooth resize</span>
@@ -40,13 +40,13 @@
     </div>
     <div class="import-section import-subsection">
       <span class="dialog-section-title">Frame size</span>
-      <input type="text" class="textfield import-size-field" autocomplete="off" name="frame-size-x"/>x
+      <input type="text" class="textfield import-size-field" name="frame-size-x"/>x
-      <input type="text" class="textfield import-size-field" autocomplete="off" name="frame-size-y"/>
+      <input type="text" class="textfield import-size-field" name="frame-size-y"/>
     </div>
     <div class="import-section import-subsection">
       <span class="dialog-section-title">Offset</span>
-      <input type="text" class="textfield import-size-field" autocomplete="off" name="frame-offset-x"/>x
+      <input type="text" class="textfield import-size-field" name="frame-offset-x"/>x
-      <input type="text" class="textfield import-size-field" autocomplete="off" name="frame-offset-y"/>
+      <input type="text" class="textfield import-size-field" name="frame-offset-y"/>
     </div>
   </form>
   <div class="import-step-buttons">

src/templates/layers-list.html

@@ -38,13 +38,9 @@
         data-layer-index="{{layerindex}}">
         <span class="layer-name" data-placement="top">{{layername}}</span>
         <span class="layer-item-opacity"
-              title="Layer opacity ({{opacity}})" rel="tooltip" data-placement="top">
+              title="Layer opacity" rel="tooltip" data-placement="top">
-            &#945;
+          {{opacity}}&#945;
         </span>
     </li>
   </script>
-    
-  <script type="text/template" id="layer-name-input-template">
-    <input class="textfield layer-name-input" type="text" autocomplete="off" value="{{layername}}" />
-  </script>
 </div>

src/templates/palettes-list.html

@@ -21,7 +21,7 @@
 
   <script type="text/template" id="palettes-list-no-colors-partial">
     <div class="palettes-list-no-colors">
-      No color in this palette…
+      No color in the selected palette ...
     </div>
   </script>
 

src/templates/preview.html

@@ -7,8 +7,6 @@
         <div class="preview-contextual-action  best-size-button" rel="tooltip" data-placement="left"></div>
         <div class="preview-contextual-action  full-size-button" rel="tooltip" data-placement="left">Full</div>
       </div>
-      <div class="preview-contextual-action  toggle-grid-button  icon-minimap-grid-white"
-        title="Toggle grid" rel="tooltip" data-placement="bottom"></div>
       <div class="preview-contextual-action  open-popup-preview-button  icon-minimap-popup-preview-arrow-white"
            title="Open preview in popup" rel="tooltip" data-placement="bottom"></div>
     </div>

src/templates/settings/export/gif.html

@@ -11,10 +11,7 @@
     </div>
     <div class="export-panel-section export-panel-row">
       <input id="gif-repeat-checkbox" class="gif-repeat-checkbox checkbox-fix" type="checkbox" />
-      <label for="gif-repeat-checkbox"
+      <label for="gif-repeat-checkbox">Loop repeatedly</label>
-             title="Uncheck to play the animation only one time."
-             rel="tooltip"
-             data-placement="top">Loop repeatedly</label>
     </div>
     <div class="export-panel-section export-panel-row">
       <button type="button" class="button button-primary gif-download-button">Download</button>

src/templates/settings/export/misc.html

@@ -12,5 +12,14 @@
       </div>
       <button type="button" class="button button-primary c-download-button">Download C file</button>
     </div>
+    <div class="export-panel-section">
+      <div style="padding-bottom: 5px">
+        <span class="highlight">Export selected frame as PNG File: </span>
+        <span class="export-info">
+          PNG export of the currently selected frame.
+        </span>
+      </div>
+      <button type="button" class="button button-primary selected-frame-download-button">Download</button>
+    </div>
   </div>
 </script>

src/templates/settings/export/png.html

@@ -14,47 +14,24 @@
         </div>
       </div>
     </div>
-    <div class="export-panel-section">
+    <div class="export-panel-section export-panel-row">
-      <div style="padding-bottom: 5px">
+      <button type="button" class="button button-primary png-download-button">Download</button>
-        <span class="highlight export-panel-row">Spritesheet file export: </span>
+      <span class="png-export-dimension-info export-info"></span>
-      </div>
-      <div class="export-panel-row">
-        <button type="button" class="button button-primary png-download-button">Download</button>
-        <span class="png-export-dimension-info export-info"></span>
-      </div>
     </div>
-    <div class="export-panel-section">
+    <div class="export-panel-section export-panel-row png-export-datauri-section">
-      <div style="padding-bottom: 5px">
+      <button type="button" style="white-space: nowrap;" class="button button-primary datauri-open-button">To data-uri</button>
-        <span class="highlight export-panel-row">Spritesheet data-uri export: </span>
+      <span class="png-export-datauri-info export-info">Open the PNG export in your browser as a data-uri</span>
-      </div>
-      <div class="export-panel-row">
-        <button type="button" style="white-space: nowrap;" class="button button-primary datauri-open-button">Open</button>
-        <span class="export-info">Open the spritesheet as a data-uri</span>
-      </div>
     </div>
 
     <div class="export-panel-section">
       <div style="padding-bottom: 5px">
-        <span class="highlight export-panel-row">PixiJS Movie export: </span>
+        <span class="highlight export-panel-row">Export for PixiJS Movie: </span>
-      </div>
-      <div class="checkbox-container" style="margin: 5px 0;">
-        <input id="png-pixi-inline-image" class="png-pixi-inline-image-checkbox checkbox-fix" type="checkbox" />
-        <label for="png-pixi-inline-image">Inline spritesheet as data-uri</label>
       </div>
       <div class="export-panel-row">
         <button type="button" class="button button-primary png-pixi-download-button"/>Download</button>
-        <span class="export-info">Spritesheet with JSON metadata</span>
+        <span class="png-export-dimension-info export-info">Spritesheet with JSON metadata</span>
       </div>
-    </div>
 
-    <div class="export-panel-section">
-      <div style="padding-bottom: 5px">
-        <span class="highlight">Selected frame export:</span>
-      </div>
-      <div class="export-panel-row">
-        <button type="button" class="button button-primary selected-frame-download-button"/>Download</button>
-        <span class="export-info">Single frame as a PNG file</span>
-      </div>
     </div>
 
   </div>

src/templates/settings/export/zip.html

@@ -7,15 +7,11 @@
         <input type="text" style="flex: 1;" class="zip-prefix-name textfield"
                autocomplete="off" placeholder="PNG file prefix ...">
       </div>
-      <div class="checkbox-container" style="margin: 5px 0;">
+      <div style="margin: 5px 0;">
         <input id="zip-split-layers" class="zip-split-layers-checkbox checkbox-fix" type="checkbox" />
         <label for="zip-split-layers">Split by layers</label>
       </div>
-      <div class="checkbox-container use-layer-names-container" style="margin: 5px 0;">
-        <input id="zip-use-layer-names" class="zip-use-layer-names-checkbox checkbox-fix" type="checkbox" />
-        <label for="zip-use-layer-names">Index by layer names</label>
-      </div>
       <button type="button" class="button button-primary zip-generate-button"/>Download ZIP</button>
     </div>
   </div>
-</script>
+</script>

src/templates/settings/preferences/grid.html

@@ -19,25 +19,6 @@
           title="4px" rel="tooltip" data-placement="top" data-size="4"></div>
       </div>
     </div>
-    <div class="settings-item settings-item-grid-spacing">
-      <label>Grid spacing</label>
-      <div class="grid-spacing-container size-picker-container">
-        <div class="size-picker-option"
-          title="1px" rel="tooltip" data-placement="top" data-size="1"></div>
-        <div class="size-picker-option"
-          title="2px" rel="tooltip" data-placement="top" data-size="2"></div>
-        <div class="size-picker-option"
-          title="4px" rel="tooltip" data-placement="top" data-size="4"></div>
-        <div class="size-picker-option"
-          title="8px" rel="tooltip" data-placement="top" data-size="8"></div>
-        <div class="size-picker-option"
-          title="16px" rel="tooltip" data-placement="top" data-size="16"></div>
-        <div class="size-picker-option"
-          title="32px" rel="tooltip" data-placement="top" data-size="32"></div>
-        <div class="size-picker-option"
-          title="64px" rel="tooltip" data-placement="top" data-size="64"></div>
-      </div>
-    </div>
     <div class="settings-item settings-item-grid-color">
       <label>Grid color</label>
       <div class="grid-colors-list"></div>
@@ -50,4 +31,4 @@
       </script>
     </div>
   </div>
-</script>
+</script>

src/templates/settings/resize.html

@@ -17,13 +17,13 @@
           <span>px</span>
         </div>
         <div class="resize-section">
-          <label class="checkbox-container">
+          <label>
             <input type="checkbox" class="resize-ratio-checkbox checkbox-fix" value="true"/>
             <span>Maintain aspect ratio</span>
           </label>
         </div>
         <div class="resize-section">
-          <label class="checkbox-container">
+          <label>
             <input type="checkbox" class="resize-content-checkbox checkbox-fix" value="true"/>
             <span>Resize canvas content</span>
           </label>

test/casperjs/integration/IntegrationSuite.js

@@ -1,6 +1,5 @@
 (typeof exports != "undefined" ? exports : pskl_exports).tests = [
   'palettes/test-tiny-palettes.js',
-  'preview/test-toggle-grid.js',
   'settings/test-preferences-main.js',
   'settings/test-export-gif.js',
   'settings/test-export-gif-scale.js',

test/casperjs/integration/include.js

@@ -17,13 +17,6 @@ function getValue(selector) {
     }');
 }
 
-function getClassName(selector) {
-  return casper.evaluate(
-    'function () { \
-      return document.querySelector(\'' + selector + '\').className;\
-    }');
-}
-
 function isChecked(selector) {
   return casper.evaluate(
     'function () { \
@@ -137,25 +130,3 @@ function setPiskelFromImageSrc(src) {
       });\
     }');
 }
-
-/**
- * Load the piskel website in debug mode and call the provided callback when ready.
- */
-function startTest(test, callback) {
-  return casper
-    // Pass "integration-test" to avoid the "unsupported browser" dialog
-    .start(casper.cli.get('baseUrl')+"/?debug&integration-test")
-    .then(function () {
-      casper.echo("URL loaded");
-
-      casper.evaluate(function() {
-        localStorage.clear();
-      }, {});
-      casper.echo("Local storage cleaned");
-
-      casper.waitForSelector('#drawing-canvas-container canvas', callback, test.timeout, 20000);
-    })
-    .run(function () {
-      test.done();
-    });
-}

test/casperjs/integration/palettes/test-tiny-palettes.js

@@ -55,5 +55,13 @@ casper.test.begin('Test palette switches to tiny mode if it contains more than 1
       'Check that the palette colors container is not in tiny mode');
   }
 
-  startTest(test, onTestStart);
+  casper
+    .start(casper.cli.get('baseUrl')+"/?debug")
+    .then(function () {
+      casper.echo("URL loaded");
+      casper.waitForSelector('#drawing-canvas-container canvas', onTestStart, test.timeout, 20000);
+    })
+    .run(function () {
+      test.done();
+    });
 });

test/casperjs/integration/preview/test-toggle-grid.js

@@ -1,65 +0,0 @@
-/* globals casper, setPiskelFromGrid, isDrawerExpanded, getValue, isChecked,
-   evalLine, waitForEvent, replaceFunction, setPiskelFromImageSrc */
-
-casper.test.begin('Test toggling the grid using the animated preview toggle grid icon', 9, function(test) {
-  test.timeout = test.fail.bind(test, ['Test timed out']);
-
-  var GRID_BUTTON_CLASS = 'toggle-grid-button';
-  var ACTIVE_GRID_BUTTON_CLASS = 'icon-minimap-grid-gold';
-  var INACTIVE_GRID_BUTTON_CLASS = 'icon-minimap-grid-white';
-
-  function isGridEnabled_() {
-    return evalLine('pskl.UserSettings.get(pskl.UserSettings.GRID_ENABLED)');
-  }
-
-  function gridButtonHasClass_(className) {
-    var gridButtonClassname = getClassName('.' + GRID_BUTTON_CLASS);
-    return gridButtonClassname.indexOf(className) != -1
-  }
-
-  function isGridButtonActive_() {
-    return gridButtonHasClass_(ACTIVE_GRID_BUTTON_CLASS) && !gridButtonHasClass_(INACTIVE_GRID_BUTTON_CLASS);
-  }
-
-  function onTestStart() {
-    test.assertExists('#drawing-canvas-container canvas', 'Piskel ready, test starting');
-
-    casper.echo('Check that initially grid is disabled and grid button is inactive');
-    test.assertEquals(isGridEnabled_(), false, 'Grid is not enabled');
-    test.assert(!isGridButtonActive_(), 'Grid button is not active');
-
-    casper.echo('Click on grid button to enable grid');
-    casper.click('.' + GRID_BUTTON_CLASS);
-    casper.waitForSelector('.' + ACTIVE_GRID_BUTTON_CLASS, onGridEnabled, test.timeout, 10000);
-  }
-
-  function onGridEnabled() {
-    casper.echo('Check that grid is now enabled and grid button is active');
-    test.assertEquals(isGridEnabled_(), true, 'Grid is enabled');
-    test.assert(isGridButtonActive_(), 'Grid button is active');
-
-    casper.echo('Click again on grid button to disable grid');
-    casper.click('.' + GRID_BUTTON_CLASS);
-    casper.waitForSelector('.' + INACTIVE_GRID_BUTTON_CLASS, onGridDisabled, test.timeout, 10000);
-  }
-
-  function onGridDisabled() {
-    casper.echo('Check that grid is disabled again and grid button is inactive');
-    test.assertEquals(isGridEnabled_(), false, 'Grid is not enabled');
-    test.assert(!isGridButtonActive_(), 'Grid button is not active');
-    casper.click('.' + GRID_BUTTON_CLASS);
-
-    casper.echo('Enable grid via user settings');
-    evalLine('pskl.UserSettings.set(pskl.UserSettings.GRID_ENABLED, true)');
-    casper.waitForSelector('.' + ACTIVE_GRID_BUTTON_CLASS, onGridEnabledViaSettings, test.timeout, 10000);
-  }
-
-  function onGridEnabledViaSettings() {
-    casper.echo('Check that grid is finally enabled and grid button is active');
-    test.assertEquals(isGridEnabled_(), true, 'Grid is enabled');
-    test.assert(isGridButtonActive_(), 'Grid button is active');
-    // Test end
-  }
-
-  startTest(test, onTestStart);
-});

test/casperjs/integration/settings/test-export-gif-scale.js

@@ -104,5 +104,13 @@ casper.test.begin('Simple GIF (<256 colors) export test, with 2x scaling', 18, f
     test.assert(!isDrawerExpanded(), 'settings drawer is closed');
   }
 
-  startTest(test, onTestStart);
+  casper
+    .start(casper.cli.get('baseUrl')+"/?debug")
+    .then(function () {
+      casper.echo("URL loaded");
+      casper.waitForSelector('#drawing-canvas-container canvas', onTestStart, test.timeout, 20000);
+    })
+    .run(function () {
+      test.done();
+    });
 });

test/casperjs/integration/settings/test-export-gif-simple.js

@@ -93,5 +93,13 @@ casper.test.begin('Simple GIF (<256 colors) export test', 14, function(test) {
     test.assert(!isDrawerExpanded(), 'settings drawer is closed');
   }
 
-  startTest(test, onTestStart);
+  casper
+    .start(casper.cli.get('baseUrl')+"/?debug")
+    .then(function () {
+      casper.echo("URL loaded");
+      casper.waitForSelector('#drawing-canvas-container canvas', onTestStart, test.timeout, 20000);
+    })
+    .run(function () {
+      test.done();
+    });
 });

test/casperjs/integration/settings/test-export-gif.js

@@ -70,7 +70,15 @@ casper.test.begin('Complex GIF export test', 11, function(test) {
     test.assert(!isDrawerExpanded(), 'settings drawer is closed');
   }
 
-  startTest(test, onTestStart);
+  casper
+    .start(casper.cli.get('baseUrl')+"/?debug")
+    .then(function () {
+      casper.echo("URL loaded");
+      casper.waitForSelector('#drawing-canvas-container canvas', onTestStart, test.timeout, 20000);
+    })
+    .run(function () {
+      test.done();
+    });
 });
 
 // Source for a base64 encoded PNG, 20x20, with 400 different colors.

test/casperjs/integration/settings/test-export-png-scale.js

@@ -1,12 +1,9 @@
 /* globals casper, setPiskelFromGrid, isDrawerExpanded, getValue, isChecked,
    evalLine, waitForEvent, piskelFrameEqualsGrid, replaceFunction, setPiskelFromImageSrc */
 
-// PNG export will be tested with single frame export and spritesheet export.
+casper.test.begin('PNG export test, with 2x scaling', 16, function(test) {
-// This global variable will be set before starting each test.
-var testButtonClass;
-
-casper.test.begin('PNG export test, with 2x scaling', 32, function(test) {
   test.timeout = test.fail.bind(test, ['Test timed out']);
+
   function onTestStart() {
     test.assertExists('#drawing-canvas-container canvas', 'Piskel ready, test starting');
 
@@ -62,8 +59,8 @@ casper.test.begin('PNG export test, with 2x scaling', 32, function(test) {
     test.assertEquals(getValue('[name="resize-height"]'), "4", 'Resize height is 4px');
     test.assertEquals(getValue('[name="resize-height"]'), "4", 'Resize height is 4px');
 
-    casper.echo('Clicking on the export button');
+    casper.echo('Clicking on Download PNG button');
-    casper.click(testButtonClass);
+    casper.click('.png-download-button');
 
     casper.echo('Wait for #casper-imagedata-ready');
     casper.waitForSelector('#casper-imagedata-ready', onImageDataReady, test.timeout, 10000);
@@ -111,11 +108,13 @@ casper.test.begin('PNG export test, with 2x scaling', 32, function(test) {
     test.assert(!isDrawerExpanded(), 'settings drawer is closed');
   }
 
-  casper.echo("Test with spritesheet PNG export");
+  casper
-  testButtonClass = '.png-download-button';
+    .start(casper.cli.get('baseUrl')+"/?debug")
-  startTest(test, onTestStart).then(function () {
+    .then(function () {
-    casper.echo("Test with single frame PNG export");
+      casper.echo("URL loaded");
-    testButtonClass = '.selected-frame-download-button';
+      casper.waitForSelector('#drawing-canvas-container canvas', onTestStart, test.timeout, 20000);
-    startTest(test, onTestStart);
+    })
-  });
+    .run(function () {
+      test.done();
+    });
 });

test/casperjs/integration/settings/test-export-png.js

@@ -97,5 +97,13 @@ casper.test.begin('PNG export test', 13, function(test) {
     test.assert(!isDrawerExpanded(), 'settings drawer is closed');
   }
 
-  startTest(test, onTestStart);
+  casper
+    .start(casper.cli.get('baseUrl')+"/?debug")
+    .then(function () {
+      casper.echo("URL loaded");
+      casper.waitForSelector('#drawing-canvas-container canvas', onTestStart, test.timeout, 20000);
+    })
+    .run(function () {
+      test.done();
+    });
 });

test/casperjs/integration/settings/test-import-image-empty.js

@@ -93,5 +93,13 @@ casper.test.begin('Image import test with an empty current sprite', 16, function
     test.assertEquals(evalLine('pskl.app.piskelController.getFrameCount()'), 1, 'Piskel has 1 frame');
   }
 
-  startTest(test, onTestStart);
+  casper
+    .start(casper.cli.get('baseUrl')+"/?debug&integration-test")
+    .then(function () {
+      casper.echo("URL loaded");
+      casper.waitForSelector('#drawing-canvas-container canvas', onTestStart, test.timeout, 20000);
+    })
+    .run(function () {
+      test.done();
+    });
 });

test/casperjs/integration/settings/test-import-image-twice.js

@@ -183,5 +183,13 @@ casper.test.begin('Double Image import test', 26, function(test) {
     test.assertEquals(evalLine('pskl.app.piskelController.getFrameCount()'), 1, 'Piskel has 1 frame');
   }
 
-  startTest(test, onTestStart);
+  casper
+    .start(casper.cli.get('baseUrl')+"/?debug&integration-test")
+    .then(function () {
+      casper.echo("URL loaded");
+      casper.waitForSelector('#drawing-canvas-container canvas', onTestStart, test.timeout, 20000);
+    })
+    .run(function () {
+      test.done();
+    });
 });

test/casperjs/integration/settings/test-import-image.js

@@ -139,5 +139,13 @@ casper.test.begin('Simple Image import test', 27, function(test) {
     test.assertEquals(evalLine('pskl.app.piskelController.getFrameCount()'), 1, 'Piskel has 1 frame');
   }
 
-  startTest(test, onTestStart);
+  casper
+    .start(casper.cli.get('baseUrl')+"/?debug&integration-test")
+    .then(function () {
+      casper.echo("URL loaded");
+      casper.waitForSelector('#drawing-canvas-container canvas', onTestStart, test.timeout, 20000);
+    })
+    .run(function () {
+      test.done();
+    });
 });

test/casperjs/integration/settings/test-preferences-main.js

@@ -65,5 +65,13 @@ casper.test.begin('Preferences settings panel test', 11, function(test) {
     test.assert(!isDrawerExpanded(), 'settings drawer is closed');
   }
 
-  startTest(test, onTestStart);
+  casper
+    .start(casper.cli.get('baseUrl')+"/?debug")
+    .then(function () {
+      casper.echo("URL loaded");
+      casper.waitForSelector('#drawing-canvas-container canvas', onTestStart, test.timeout, 20000);
+    })
+    .run(function () {
+      test.done();
+    });
 });

test/casperjs/integration/settings/test-resize-complete.js

@@ -65,5 +65,13 @@ casper.test.begin('Test resize feature works, and check the output', 19, functio
     ]', 0, 0), 'Resized piskel content is as expected');
   }
 
-  startTest(test, onTestStart);
+  casper
+    .start(casper.cli.get('baseUrl')+"/?debug")
+    .then(function () {
+      this.echo("URL loaded");
+      this.waitForSelector('#drawing-canvas-container canvas', onTestStart, test.timeout, 20000);
+    })
+    .run(function () {
+      test.done();
+    });
 });

test/casperjs/integration/settings/test-resize-content-complete.js

@@ -66,5 +66,13 @@ casper.test.begin('Test resize content works, and check the output', 18, functio
     ]', 0, 0), 'Resized piskel content is as expected');
   }
 
-  startTest(test, onTestStart);
+  casper
+    .start(casper.cli.get('baseUrl')+"/?debug")
+    .then(function () {
+      this.echo("URL loaded");
+      this.waitForSelector('#drawing-canvas-container canvas', onTestStart, test.timeout, 20000);
+    })
+    .run(function () {
+      test.done();
+    });
 });

test/casperjs/integration/settings/test-resize-default-size.js

@@ -49,5 +49,13 @@ casper.test.begin('Test updating default size works', 14 , function(test) {
       322, 'Piskel height is now 322 pixels');
   }
 
-  startTest(test, onTestStart);
+  casper
+    .start(casper.cli.get('baseUrl')+"/?debug")
+    .then(function () {
+      this.echo("URL loaded");
+      this.waitForSelector('#drawing-canvas-container canvas', onTestStart, test.timeout, 20000);
+    })
+    .run(function () {
+      test.done();
+    });
 });

test/casperjs/integration/settings/test-resize-input-synchronization.js

@@ -85,5 +85,13 @@ casper.test.begin('Test resize panel width/height inputs are synchronized', 28 ,
     test.assert(!isDrawerExpanded(), 'settings drawer is closed');
   }
 
-  startTest(test, onTestStart);
+  casper
+    .start(casper.cli.get('baseUrl')+"/?debug")
+    .then(function () {
+      this.echo("URL loaded");
+      this.waitForSelector('#drawing-canvas-container canvas', onTestStart, test.timeout, 20000);
+    })
+    .run(function () {
+      test.done();
+    });
 });

test/casperjs/integration/settings/test-resize-origin.js

@@ -74,5 +74,13 @@ casper.test.begin('Test resize feature works, and check the output', 20, functio
     ]', 0, 0), 'Resized piskel content is as expected');
   }
 
-  startTest(test, onTestStart);
+  casper
+    .start(casper.cli.get('baseUrl')+"/?debug")
+    .then(function () {
+      this.echo("URL loaded");
+      this.waitForSelector('#drawing-canvas-container canvas', onTestStart, test.timeout, 20000);
+    })
+    .run(function () {
+      test.done();
+    });
 });

test/casperjs/integration/settings/test-resize.js

@@ -51,5 +51,13 @@ casper.test.begin('Test resize feature works', 16 , function(test) {
     test.assertEquals(evalLine('pskl.app.piskelController.getPiskel().getHeight()'), 320, 'Piskel height is now 320 pixels');
   }
 
-  startTest(test, onTestStart);
+  casper
+    .start(casper.cli.get('baseUrl')+"/?debug")
+    .then(function () {
+      this.echo("URL loaded");
+      this.waitForSelector('#drawing-canvas-container canvas', onTestStart, test.timeout, 20000);
+    })
+    .run(function () {
+      test.done();
+    });
 });

test/casperjs/integration/settings/test-settings-open-panels-on-click.js

@@ -71,5 +71,13 @@ casper.test.begin('Settings Test', 18, function(test) {
     test.assert(!isDrawerExpanded(), 'settings drawer is closed');
   }
 
-  startTest(test, onTestStart);
+  casper
+    .start(casper.cli.get('baseUrl')+"/?debug")
+    .then(function () {
+      this.echo("URL loaded");
+      this.waitForSelector('#drawing-canvas-container canvas', onTestStart, test.timeout, 20000);
+    })
+    .run(function () {
+      test.done();
+    });
 });