Return promise results from PiskelDB and IndexedDBStorageService

PaletteService exposes window.localStorage as this.localStorageService. This is confusing since we also have the LocalStorageService class used to save piskels in local storage.

.eslintignore

@@ -0,0 +1,2 @@
+# Exclude libs.
+**/lib/**/*.js

.gitignore

@@ -1,4 +1,4 @@
-# mac artefacts
+# mac artifacts
 *.DS_Store
 
 # nodejs local installs
@@ -15,10 +15,12 @@ cache
 # netbeans project folder
 nbproject
 
+# vscode workspace folder
+.vscode
+
 # git stackdumps
 *.stackdump
 
-
 # diffs
 diff.txt
 

.jscsrc

@@ -1,75 +0,0 @@
-{
-    "requireCurlyBraces": [
-        "if",
-        "else",
-        "for",
-        "while",
-        "do",
-        "try",
-        "catch"
-    ],
-    "requireOperatorBeforeLineBreak": true,
-    "requireCamelCaseOrUpperCaseIdentifiers": true,
-    "maximumLineLength": {
-      "value": 80,
-      "allExcept": ["comments", "regex"]
-    },
-    "validateIndentation": 2,
-    "validateQuoteMarks": "'",
-
-    "disallowMultipleLineStrings": true,
-    "disallowMixedSpacesAndTabs": true,
-    "disallowTrailingWhitespace": true,
-    "disallowSpaceAfterPrefixUnaryOperators": true,
-    "disallowMultipleVarDecl": true,
-    "disallowKeywordsOnNewLine": ["else"],
-
-    "requireSpaceAfterKeywords": [
-      "if",
-      "else",
-      "for",
-      "while",
-      "do",
-      "switch",
-      "return",
-      "try",
-      "catch"
-    ],
-    "requireSpaceBeforeBinaryOperators": [
-        "=", "+=", "-=", "*=", "/=", "%=", "<<=", ">>=", ">>>=",
-        "&=", "|=", "^=", "+=",
-
-        "+", "-", "*", "/", "%", "<<", ">>", ">>>", "&",
-        "|", "^", "&&", "||", "===", "==", ">=",
-        "<=", "<", ">", "!=", "!=="
-    ],
-    "requireSpaceAfterBinaryOperators": true,
-    "requireSpacesInConditionalExpression": true,
-    "requireSpaceBeforeBlockStatements": true,
-    "requireSpacesInForStatement": true,
-    "requireLineFeedAtFileEnd": true,
-    "requireSpacesInFunctionExpression": {
-        "beforeOpeningCurlyBrace": true
-    },
-    "disallowSpacesInAnonymousFunctionExpression": {
-        "beforeOpeningRoundBrace": false
-    },
-    "disallowSpacesInsideObjectBrackets": "all",
-    "disallowSpacesInsideArrayBrackets": "all",
-    "disallowSpacesInsideParentheses": true,
-
-    "disallowMultipleLineBreaks": true,
-    "disallowNewlineBeforeBlockStatements": true,
-    "disallowKeywords": ["with"],
-    "disallowSpacesInFunctionExpression": null,
-    "disallowSpacesInFunctionDeclaration": null,
-    "disallowSpacesInCallExpression": true,
-    "disallowSpaceAfterObjectKeys": false,
-    "requireSpaceBeforeObjectValues": true,
-    "requireCapitalizedConstructors": true,
-    "requireDotNotation": true,
-    "requireSemicolons": true,
-    "validateParameterSeparator": ", ",
-
-    "jsDoc": null
-}

.travis.yml

@@ -1,14 +1,9 @@
 language: node_js
 node_js:
-  - "4.1"
+  - "7.4.0"
 before_install:
   - npm update -g npm
   - npm install -g grunt-cli
-  - git clone git://github.com/n1k0/casperjs.git ~/casperjs
-  - cd ~/casperjs
-  - git checkout tags/1.1.3
-  - export PATH=$PATH:`pwd`/bin
-  - cd -
 before_script:
   - phantomjs --version
   - casperjs --version

Gruntfile.js

@@ -83,33 +83,12 @@ module.exports = function(grunt) {
       css : ['src/css/**/*.css']
     },
 
-    jscs : {
-      options : {
-        "config": ".jscsrc",
-        "maximumLineLength": 120,
-        "requireCamelCaseOrUpperCaseIdentifiers": "ignoreProperties",
-        "validateQuoteMarks": { "mark": "'", "escape": true },
-        "disallowMultipleVarDecl": "exceptUndefined",
-        "disallowSpacesInAnonymousFunctionExpression": null
-      },
-      js : [ 'src/js/**/*.js' , '!src/js/**/lib/**/*.js' ]
-    },
-
-    jshint: {
-      options: {
-        undef : true,
-        latedef : true,
-        browser : true,
-        trailing : true,
-        curly : true,
-        globals : {'$':true, 'jQuery' : true, 'pskl':true, 'Events':true, 'Constants':true, 'console' : true, 'module':true, 'require':true, 'Q':true, 'Promise': true}
-      },
+    eslint: {
       files: [
         // Includes
-        'Gruntfile.js',
-        'package.json',
         'src/js/**/*.js',
-        // Excludes
+        // Exludes
+        // TODO: remove this (for now we still get warnings from the lib folder)
         '!src/js/**/lib/**/*.js'
       ]
     },
@@ -238,20 +217,6 @@ module.exports = function(grunt) {
           src: ['dest/tmp/css/piskel-style-packaged' + version + '.css'],
           dest: 'dest/prod/css/piskel-style-packaged' + version + '.css'
         }]
-      },
-      // remove the fake header from the desktop build
-      desktop: {
-        options: {
-          patterns: [{
-              match: /<!--standalone-start-->(?:.|[\r\n])*<!--standalone-end-->/,
-              replacement: "",
-              description : "Remove everything between standalone-start & standalone-end"
-            }
-          ]
-        },
-        files: [
-          {src: ['dest/prod/index.html'], dest: 'dest/prod/index.html'}
-        ]
       }
     },
 
@@ -351,11 +316,13 @@ module.exports = function(grunt) {
 
   // TEST TASKS
   // Run linting
-  grunt.registerTask('lint', ['jscs:js', 'leadingIndent:css', 'jshint']);
+  grunt.registerTask('lint', ['eslint', 'leadingIndent:css']);
   // Run unit-tests
   grunt.registerTask('unit-test', ['karma']);
   // Run integration tests
   grunt.registerTask('integration-test', ['build-dev', 'connect:test', 'casperjs:integration']);
+  // Run drawing tests
+  grunt.registerTask('drawing-test', ['build-dev', 'connect:test', 'casperjs:drawing']);
   // Run linting, unit tests, drawing tests and integration tests
   grunt.registerTask('test', ['lint', 'unit-test', 'build-dev', 'connect:test', 'casperjs:drawing', 'casperjs:integration']);
 
@@ -370,8 +337,8 @@ module.exports = function(grunt) {
   grunt.registerTask('merge-statics', ['concat:js', 'concat:css', 'uglify']);
   grunt.registerTask('build',  ['clean:prod', 'sprite', 'merge-statics', 'build-index.html', 'replace:mainPartial', 'replace:css', 'copy:prod']);
   grunt.registerTask('build-dev',  ['clean:dev', 'sprite', 'build-index.html', 'copy:dev']);
-  grunt.registerTask('desktop', ['clean:desktop', 'default', 'replace:desktop', 'nwjs:windows']);
-  grunt.registerTask('desktop-mac', ['clean:desktop', 'default', 'replace:desktop', 'nwjs:macos']);
+  grunt.registerTask('desktop', ['clean:desktop', 'default', 'nwjs:windows']);
+  grunt.registerTask('desktop-mac', ['clean:desktop', 'default', 'nwjs:macos']);
   grunt.registerTask('desktop-mac-old', ['clean:desktop', 'default', 'replace:desktop', 'nwjs:macos_old']);
 
   // SERVER TASKS

README.md

@@ -1,50 +1,21 @@
 Piskel
 ======
 
-[![Travis Status](https://api.travis-ci.org/juliandescottes/piskel.png?branch=master)](https://travis-ci.org/juliandescottes/piskel) [![Built with Grunt](https://cdn.gruntjs.com/builtwith.png)](http://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/)
 
-A simple web-based tool for Spriting and Pixel art.
+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](http://piskelapp.com)**.
 
-![Piskel editor screenshot](https://screenletstore.appspot.com/img/8f03e768-ac59-11e3-b2a1-7f5a1b97c420.jpeg "Piskel editor screenshot")
+<img
+  src="https://screenletstore.appspot.com/img/95aaa0f0-37a4-11e7-a652-7b8128ce3e3b.png"
+  title="Piskel editor screenshot"
+  width="500">
 
-You can try the standalone editor at **http://juliandescottes.github.io/piskel** or see it integrated in **http://piskelapp.com**.
+## About Piskel
 
-Piskel is mainly developped by :
+### Built with
 
-* **[@juliandescottes](https://github.com/juliandescottes)**
-* **[@grosbouddha](https://github.com/grosbouddha)**
-
-## What's the point ?
-
-You can use Piskel to do two things :
-* **spriting** : create retro-style sprites for games
-
-![Megaman spritesheet](http://piskel-imgstore-a.appspot.com/img/c8081287-ac58-11e3-bd8c-b3c4036c0eee.png "Megaman spritesheet")
-
-* **pixelart** : create crazy/pretty pixelart animations for fun !
-
-![Rabbit jumping](http://piskel-imgstore-a.appspot.com/img/947f2dab-ac58-11e3-949a-b3c4036c0eee.gif "Rabit jumping")
-
-Integrated in **[piskelapp.com](http://piskelapp.com)**, you can share everything you work on with others as easily as you share a link.
-
-## Requirements
-
-Piskel supports the following browsers :
-* **Chrome** (latest)
-* **Firefox** (latest)
-* **Internet Explorer** 11+
-
-... and a fairly recent computer.
-
-We don't plan/want/could be forced into supporting older IEs. For Opera and Safari, we've never tested them but the gap shouldn't be huge.
-
-## Offline version
-
-Offline builds are available. More details in the [dedicated wiki page](https://github.com/juliandescottes/piskel/wiki/Desktop-applications).
-
-## Built with
-
-The Piskel editor is purely built in **JavaScript, HTML and CSS**. It uses Canvas extensively for displaying all them pretty sprites.
+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
@@ -59,17 +30,32 @@ 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)
 
+### Browser Support
+
+Piskel supports the following browsers:
+* **Chrome** (latest)
+* **Firefox** (latest)
+* **Edge** (latest)
+* **Internet Explorer** 11
+
+### Mobile/Tablets
+
+There is no support for mobile.
+
+### Offline builds
+
+Offline builds are available. More details in the [dedicated wiki page](https://github.com/piskelapp/piskel/wiki/Desktop-applications).
 
 ## Contributing ?
 
 Help is always welcome !
 
-* **Issues** : Found a problem when using the application, want to request a feature, [open an issue](https://github.com/juliandescottes/piskel/issues).
-* **Participate** : Have a look at the [wiki](https://github.com/juliandescottes/piskel/wiki) to set up the development environment
+* **Issues** : Found a problem when using the application, want to request a feature, [open an issue](https://github.com/piskelapp/piskel/issues).
+* **Development** : Have a look at the [wiki](https://github.com/piskelapp/piskel/wiki) to set up the development environment
 
 ## License
 
-Copyright 2016 Julian Descottes
+Copyright 2017 Julian Descottes
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -83,7 +69,3 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 
-## Mobile/Tablets
-
-There is no support for mobile for now.
-

bin/copy-to-piskel-website.js

@@ -17,7 +17,16 @@ function onCopy(err) {
 
   console.log('Copied static files to piskel-website...');
   let previousPartialPath = path.resolve(PISKELAPP_PATH, 'templates/editor/main-partial.html');
+  fs.access(previousPartialPath, fs.constants.F_OK, function (err) {
+    if (err) {
+      // File does not exit, call next step directly.
+      console.error('Previous main partial doesn\'t exist yet.');
+      onDeletePreviousPartial();
+    } else {
+      // File exists, try to delete it before moving on.
       fs.unlink(previousPartialPath, onDeletePreviousPartial);
+    }
+  })
 }
 
 function onDeletePreviousPartial(err) {

misc/icons/source/common-backup.svg

@@ -0,0 +1,80 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   width="90"
+   height="90"
+   viewBox="0 0 89.999997 90"
+   enable-background="new 0 0 89.231 100"
+   xml:space="preserve"
+   inkscape:version="0.92.1 r15371"
+   sodipodi:docname="common-backup.svg"
+   inkscape:export-filename="C:\Development\git\piskel\misc\icons\source\tool-rotate.png"
+   inkscape:export-xdpi="45"
+   inkscape:export-ydpi="45"><metadata
+     id="metadata15"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs13" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1148"
+     id="namedview11"
+     showgrid="false"
+     inkscape:zoom="7.75"
+     inkscape:cx="13.031976"
+     inkscape:cy="43.272537"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Layer_1" /><g
+     id="g3760"
+     transform="matrix(0,-0.97677741,0.97203982,0,-2.1261998,91.355253)"
+     style="fill:#ff00ff;fill-opacity:1"><path
+       style="fill:#ff00ff;fill-opacity:1"
+       inkscape:connector-curvature="0"
+       id="path3"
+       d="m 29.229405,55.37008 c -0.387431,-1.333059 -0.642506,-2.72161 -0.738881,-4.152895 h -8.675106 c 0.115651,2.460738 0.552554,4.838559 1.260594,7.099021 z" /><path
+       style="fill:#ff00ff;fill-opacity:1"
+       inkscape:connector-curvature="0"
+       id="path5"
+       d="m 29.023802,70.783821 5.579515,-6.601516 c -1.862622,-1.780814 -3.387929,-3.907969 -4.44999,-6.287065 l -8.152106,2.946124 c 1.604978,3.800815 4.017584,7.185766 7.022581,9.942457 z" /><path
+       style="fill:#ff00ff;fill-opacity:1"
+       inkscape:connector-curvature="0"
+       id="path7"
+       d="m 47.110967,69.703978 c -3.887799,-0.260871 -7.469766,-1.6322 -10.437498,-3.790608 l -5.577588,6.598963 c 4.487901,3.403448 10.011517,5.524225 16.015086,5.803594 z" /><path
+       style="fill:#ff00ff;fill-opacity:1;stroke:none"
+       inkscape:connector-curvature="0"
+       id="path9"
+       d="M 48.464084,21.400659 V 14.532532 L 28.981398,25.698341 48.464084,36.86415 v -6.867489 c 11.042093,0 20.024317,8.91683 20.024317,19.877897 0,10.509484 -8.258763,19.134189 -18.671845,19.828145 v 8.611948 c 15.190751,-0.703524 27.330245,-13.189635 27.330245,-28.440093 0,-15.700763 -12.86681,-28.473899 -28.682717,-28.473899 z" /></g><g
+     id="g4513"
+     transform="translate(0,-2)"><rect
+       y="32.516129"
+       x="42"
+       height="15.612903"
+       width="7.9999986"
+       id="rect4494"
+       style="fill:#ff00f7;fill-opacity:1;stroke:#ffffed;stroke-width:0;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:6.04534006;stroke-opacity:1" /><rect
+       transform="rotate(120)"
+       y="-76.050484"
+       x="12.680965"
+       height="15.612903"
+       width="7.9999986"
+       id="rect4494-7"
+       style="fill:#ff00f7;fill-opacity:1;stroke:#ffffed;stroke-width:0;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:6.04534006;stroke-opacity:1" /></g></svg>

package.json

@@ -1,16 +1,16 @@
 {
   "name": "piskel",
-  "version": "0.11.0",
+  "version": "0.12.1",
   "description": "Pixel art editor",
   "author": "Julian Descottes <julian.descottes@gmail.com>",
   "contributors": [
     "Vincent Renaudin"
   ],
-  "homepage": "http://github.com/juliandescottes/piskel",
+  "homepage": "http://github.com/piskelapp/piskel",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
-    "url": "http://github.com/juliandescottes/piskel.git"
+    "url": "http://github.com/piskelapp/piskel.git"
   },
   "files": [
     "dest/prod",
@@ -39,6 +39,7 @@
     "grunt-contrib-jshint": "1.1.0",
     "grunt-contrib-uglify": "2.3.0",
     "grunt-contrib-watch": "1.0.0",
+    "grunt-eslint": "^19.0.0",
     "grunt-include-replace": "4.0.1",
     "grunt-jscs": "2.8.0",
     "grunt-karma": "1.0.0",
@@ -62,6 +63,6 @@
     "icon": "dest/prod/logo.png",
     "toolbar": false,
     "width": 1000,
-    "height": 500
+    "height": 700
   }
 }

src/css/dialogs-browse-backups.css

@@ -0,0 +1,152 @@
+#dialog-container.browse-backups {
+  width: 700px;
+  height: 500px;
+  top : 50%;
+  left : 50%;
+  position : absolute;
+  margin-left: -350px;
+}
+
+.backups-step-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.backups-step-content {
+  width: 100%;
+  height: 10px;
+  flex-grow: 1;
+  background: #444;
+
+  padding: 20px;
+  overflow: auto;
+  box-sizing: border-box;
+}
+
+.backups-step-actions {
+  flex-grow: 0;
+  flex-shrink: 1;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+}
+
+.show #dialog-container.browse-backups {
+  margin-top: -250px;
+}
+
+.browse-backups .browse-backups-disclaimer {
+  display: flex;
+  margin-bottom: 20px;
+  align-items: center;
+}
+
+.browse-backups .browse-backups-disclaimer-content {
+  padding: 0 20px;
+  font-size: 13px;
+}
+
+.browse-backups .browse-backups-disclaimer .backups-icon {
+  border: 1px solid gold;
+  flex-shrink: 0;
+  width: 90px;
+  height: 90px;
+}
+
+.browse-backups .centered-message {
+  position: absolute;
+  left: 50%;
+  width: 200px;
+  margin-top: 100px;
+  margin-left: -130px;
+  padding: 30px;
+
+  font-size: 16px;
+  text-align: center;
+  border: 1px solid;
+}
+
+.browse-backups .session-list-empty,
+.browse-backups .snapshot-list-empty {
+  color: #bbb;
+}
+
+.browse-backups .session-list-error,
+.browse-backups .snapshot-list-error {
+  color: white;
+}
+
+.browse-backups .session-item {
+  /* Transition duration should be kept in sync with SelectSession.DELETE_TRANSITION_DURATION */
+  transition: all 500ms;
+}
+
+/* Hide and slide up next sessions when deleting an item */
+.browse-backups .session-item.deleting {
+  opacity: 0;
+  margin-bottom: -60px;
+}
+
+.browse-backups .session-item,
+.browse-backups .snapshot-item {
+  display: flex;
+  align-items: center;
+
+  width: 100%;
+  height: 80px;
+
+  margin-bottom: 10px;
+  padding: 0 20px;
+
+  border: 1px solid #666;
+  box-sizing: border-box;
+}
+
+.browse-backups .snapshot-preview {
+  flex-grow: 0;
+  flex-shrink: 1;
+  /* Keep synced with SessionDetails.PREVIEW_SIZE */
+  height: 60px;
+  width: 60px;
+  margin-right: 20px;
+}
+
+.browse-backups .session-details,
+.browse-backups .snapshot-details {
+  flex-grow: 1;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.browse-backups .session-details-title,
+.browse-backups .snapshot-details-title {
+  font-size: 13px;
+}
+
+.browse-backups .session-details-info,
+.browse-backups .snapshot-details-info {
+  font-size: 11px;
+  color: #bbb;
+  line-height: 1.5em;
+}
+
+.browse-backups .session-actions,
+.browse-backups .snapshot-actions {
+  flex-grow: 0;
+  flex-shrink: 1;
+  display: flex;
+}
+
+.browse-backups .session-actions button,
+.browse-backups .snapshot-actions button {
+  margin-left: 10px;
+}
+
+.browse-backups .session-item:last-child,
+.browse-backups .snapshot-item:last-child {
+  margin-bottom: 0;
+}

src/css/dialogs-import.css

@@ -183,22 +183,14 @@
 .import-meta-value,
 .import-meta-label {
   padding: 2px 4px;
-  border: 1px solid gold;
 }
 
 .import-meta-label {
   border-radius: 2px 0 0 2px;
   color: var(--highlight-color);
-  border-right-width: 0;
-}
-
-.import-meta-title .import-meta-label {
-  border-right-width: 1px;
-  border-radius: 2px;
 }
 
 .import-meta-value {
-  border-radius: 0 2px 2px 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -242,7 +234,7 @@
 .insert-mode-option {
   display: flex;
   align-items: center;
-  margin-bottom: 5px;
+  margin: 5px 0;
 }
 
 .import-resize-option :checked + span,
@@ -250,11 +242,15 @@
   color: var(--highlight-color);
 }
 
+.import-resize-option input,
+.insert-mode-option input {
+  margin: 5px;
+}
+
 /**
  * ADJUST SIZE
  */
-.import-resize-anchor-info,
-.import-resize-option-label {
+.import-resize-anchor-info {
   margin-bottom: 10px;
 }
 

src/css/settings-application.css

@@ -1,11 +1,9 @@
-/*******************************/
-/*  Application Setting panel  */
-/*******************************/
-.application-settings-form {
-  height: 100%;
-}
+/********************************/
+/*  Preferences Settings panel  */
+/********************************/
 
-.settings-section-application {
+.settings-section-preferences {
+  height: 100%;
   position: relative;
   overflow: hidden;
   margin: 0 20px;
@@ -45,14 +43,11 @@
   vertical-align: middle;
 }
 
-.layer-opacity-input {
+.layer-opacity-input,
+.tile-mask-opacity-input {
   width: 100px;
 }
 
-.seamless-opacity-input {
-  width: 75px;
-}
-
 .settings-opacity-text {
   height: 31px;
   display: inline-block;
@@ -64,17 +59,62 @@
   text-align: center;
 }
 
+.settings-item-grid-size,
+.settings-item-grid-color {
+  display: flex;
+  align-items: center;
+}
+
+.settings-item-grid-size > label,
+.settings-item-grid-color > label {
+  width: 65px;
+  flex-shrink: 0;
+}
+
+.settings-item-grid-size .size-picker-option {
+  border-color: #888;
+}
+
+.settings-item-grid-size .size-picker-option:not(.selected):hover {
+  border-color: white;
+}
+
 .grid-width-select,
 .color-format-select {
   margin: 5px 5px 0 5px;
 }
 
-.settings-section-application > .settings-title {
+
+.grid-colors-list {
+  overflow: hidden;
+  padding: 0 5px;
+}
+
+.grid-colors-item {
+  float: left;
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  border: 2px solid #888;
+  margin-right: 2px;
+  margin-bottom: 2px;
+  box-sizing: border-box;
+}
+
+.grid-colors-item:hover {
+  border-color: white;
+}
+
+.grid-colors-item.selected {
+  border-color: gold;
+}
+
+.settings-section-preferences > .settings-title {
   /* Override the default 10px margin bottom for this panel */
   margin-bottom: 15px;
 }
 
-.settings-section-application .button-primary {
+.settings-section-preferences .button-primary {
   margin-top: 10px;
 }
 

src/css/settings-export.css

@@ -43,8 +43,29 @@
   float : left;
 }
 
+.gif-export-warning {
+  display: none;
+}
+
+.gif-export-warning.visible {
+  display: flex;
+  align-items: center;
+  border: 1px solid red;
+  padding: 5px;
+  margin: 5px 0;
+}
+
+.gif-export-warning-icon {
+  flex-shrink: 0;
+  margin-right: 5px;
+}
+
+.gif-export-warning-message {
+  font-weight: normal;
+}
+
 .preview-upload-ongoing:before{
-  content: "Upload ongoing ...";
+  content: "Upload in progress...";
   position: absolute;
   display: block;
   height: 100%;
@@ -100,45 +121,6 @@
   line-height: 23px;
 }
 
-.export-tabs {
-  overflow: hidden;
-  position: relative;
-}
-
-.export-tabs:after {
-  content: "";
-  display: block;
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  height: 1px;
-  z-index: 0;
-  background-color: var(--highlight-color);
-}
-
-.export-tab {
-  float: left;
-  cursor: pointer;
-  padding: 5px;
-  border: 1px solid transparent;
-  border-radius: 2px 2px 0 0;
-  /* Make sure the tab and its border are positioned above the :after element; */
-  position: relative;
-  z-index: 1;
-}
-
-.export-tab.selected,
-.export-tab:hover {
-  color: var(--highlight-color);
-}
-
-.export-tab.selected {
-  border-color: var(--highlight-color);
-  border-bottom-color: #444;
-  border-style: solid;
-  border-width: 1px;
-}
-
 .export-panel-header {
   padding: 10px 5px 0px;
 }

src/css/style.css

@@ -55,6 +55,10 @@ body {
   margin-left: 0;
 }
 
+.hidden {
+  display: none;
+}
+
 /**
  * TOOLTIPS
  */

src/css/toolbox-palettes-list.css

@@ -76,6 +76,11 @@
   position: relative;
 }
 
+.palettes-list-colors.tiny > .palettes-list-color {
+  width: calc((100% - 35px) / 10);
+  height: 16px;
+}
+
 .palettes-list-color div {
   height: 100%;
 }
@@ -121,7 +126,8 @@
  * Color index for the 9 first colors
  */
 
-.palettes-list-color:nth-child(-n+10):after {
+:not(.tiny) > .palettes-list-color:nth-child(-n+10):after {
+  content: attr(data-color-index);
   position: absolute;
   top: 0;
   right: 0;
@@ -136,39 +142,3 @@
   padding: 2px 3px 2px 3px;
   border-radius: 0 0 0 2px;
 }
-
-.palettes-list-color:nth-child(1):after {
-  content: "1";
-}
-
-.palettes-list-color:nth-child(2):after {
-  content: "2";
-}
-
-.palettes-list-color:nth-child(3):after {
-  content: "3";
-}
-
-.palettes-list-color:nth-child(4):after {
-  content: "4";
-}
-
-.palettes-list-color:nth-child(5):after {
-  content: "5";
-}
-
-.palettes-list-color:nth-child(6):after {
-  content: "6";
-}
-
-.palettes-list-color:nth-child(7):after {
-  content: "7";
-}
-
-.palettes-list-color:nth-child(8):after {
-  content: "8";
-}
-
-.palettes-list-color:nth-child(9):after {
-  content: "9";
-}

src/css/transformations.css

@@ -3,5 +3,38 @@
 }
 
 .transformations-container .tool-icon {
-  float:left;
+  margin: 0 0 5px 0;
+}
+
+.transformations-container .tools-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  height: 46px;
+
+  /* Override the float:left set on tools-wrapper in layout.css; */
+  float: initial;
+}
+
+.transformations-container.show-more .tools-wrapper {
+  height: auto;
+  /* Compensate the 5px bottom-margin coming from the tool-icon */
+  margin-bottom: -5px;
+}
+
+.transformations-show-more-link {
+  position: absolute;
+  color: #999;
+  right: 10px;
+  font-weight: normal;
+  cursor: pointer;
+  transition: 0.2s linear;
+}
+
+.transformations-show-more-link:hover {
+  color: white;
+}
+
+.show-more .transformations-show-more-link {
+  color: gold;
 }

src/css/widgets-size-picker.css

@@ -1,9 +1,13 @@
-.pen-size-container {
+/***********************/
+/* SIZE PICKER WIDGET */
+/***********************/
+
+.size-picker-container {
   overflow: hidden;
   padding: 5px 5px;
 }
 
-.pen-size-option {
+.size-picker-option {
   float: left;
   box-sizing: border-box;
   width: 20px;
@@ -15,20 +19,20 @@
   cursor: pointer;
 }
 
-.pen-size-option[data-size='1'] {
+.size-picker-option[data-size='1'] {
   padding: 5px;
 }
-.pen-size-option[data-size='2'] {
+.size-picker-option[data-size='2'] {
   padding: 4px;
 }
-.pen-size-option[data-size='3'] {
+.size-picker-option[data-size='3'] {
   padding: 3px;
 }
-.pen-size-option[data-size='4'] {
+.size-picker-option[data-size='4'] {
   padding: 2px;
 }
 
-.pen-size-option:before {
+.size-picker-option:before {
   content: '';
   width: 100%;
   height: 100%;
@@ -39,19 +43,19 @@
   font-size: 90%;
 }
 
-.pen-size-option:hover {
+.size-picker-option:hover {
   border-color: #888;
 }
 
-.pen-size-option.selected:before {
+.size-picker-option.selected:before {
   background-color: var(--highlight-color);
 }
 
-.pen-size-option.selected {
+.size-picker-option.selected {
   border-color: var(--highlight-color);
 }
 
-.pen-size-option.labeled:before {
-  content: attr(real-pen-size);
+.size-picker-option.labeled:before {
+  content: attr(real-size);
   color: black;
 }

src/css/widgets-tabs.css

@@ -0,0 +1,42 @@
+/*****************/
+/*  TABS WIDGET  */
+/*****************/
+
+.tab-list {
+  overflow: hidden;
+  position: relative;
+}
+
+.tab-list:after {
+  content: "";
+  display: block;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 1px;
+  z-index: 0;
+  background-color: var(--highlight-color);
+}
+
+.tab-item {
+  float: left;
+  cursor: pointer;
+  padding: 5px;
+  border: 1px solid transparent;
+  border-radius: 2px 2px 0 0;
+  /* Make sure the tab and its border are positioned above the :after element; */
+  position: relative;
+  z-index: 1;
+}
+
+.tab-item.selected,
+.tab-item:hover {
+  color: var(--highlight-color);
+}
+
+.tab-item.selected {
+  border-color: var(--highlight-color);
+  border-bottom-color: #444;
+  border-style: solid;
+  border-width: 1px;
+}

src/index.html

@@ -22,9 +22,7 @@
     color:white;">
       <span style="top:45%">Loading Piskel ...</span>
   </div>
-  <!--standalone-start-->
   @@include('templates/debug-header.html', {})
-  <!--standalone-end-->
 
   <!-- the comment below indicates the beginning of markup reused by the editor integrated in piskelapp.com -->
   <!-- do not delete, do not move :) -->
@@ -69,6 +67,7 @@
   </div>
 
   @@include('templates/misc-templates.html', {})
+  @@include('templates/data-uri-export.html', {})
   @@include('templates/popup-preview.html', {})
 
   <span class="cheatsheet-link icon-common-keyboard-gold"
@@ -77,15 +76,19 @@
        rel="tooltip" data-placement="left" title="Performance problem detected, learn more.">&nbsp;</div>
 
   <!-- dialogs partials -->
-  @@include('templates/dialogs/create-palette.html', {})
+  @@include('templates/dialogs/browse-backups.html', {})
   @@include('templates/dialogs/browse-local.html', {})
   @@include('templates/dialogs/cheatsheet.html', {})
+  @@include('templates/dialogs/create-palette.html', {})
   @@include('templates/dialogs/import.html', {})
   @@include('templates/dialogs/performance-info.html', {})
   @@include('templates/dialogs/unsupported-browser.html', {})
 
   <!-- settings-panel partials -->
-  @@include('templates/settings/application.html', {})
+  @@include('templates/settings/preferences.html', {})
+  @@include('templates/settings/preferences/grid.html', {})
+  @@include('templates/settings/preferences/misc.html', {})
+  @@include('templates/settings/preferences/tile.html', {})
   @@include('templates/settings/resize.html', {})
   @@include('templates/settings/save.html', {})
   @@include('templates/settings/import.html', {})

src/js/.eslintrc

@@ -0,0 +1,99 @@
+{
+  "env": {
+    "es6": true,
+    "browser": true
+  },
+  "globals": {
+    "$": true,
+    "jQuery": true,
+    "pskl": true,
+    "Events": true,
+    "Constants": true,
+    "console": true,
+    "module": true,
+    "require": true,
+    "Q": true,
+    "Promise": true
+  },
+  "rules": {
+    "no-undef": 2,
+    "no-use-before-define": [
+      2,
+      {
+        "functions": false
+      }
+    ],
+    "curly": [
+      2,
+      "all"
+    ],
+    "operator-linebreak": [
+      2,
+      "after"
+    ],
+    "camelcase": [
+      2,
+      {
+        "properties": "never"
+      }
+    ],
+    "max-len": [
+      2,
+      120
+    ],
+    "indent": [
+      2,
+      2,
+      {
+        "SwitchCase": 1
+      }
+    ],
+    "quotes": [
+      2,
+      "single"
+    ],
+    "no-multi-str": 2,
+    "no-mixed-spaces-and-tabs": 2,
+    "no-trailing-spaces": 2,
+    "space-unary-ops": [
+      2,
+      {
+        "nonwords": false,
+        "overrides": {}
+      }
+    ],
+    "one-var": [
+      2,
+      "never"
+    ],
+    "brace-style": [
+      2,
+      "1tbs",
+      {
+        "allowSingleLine": true
+      }
+    ],
+    "keyword-spacing": [
+      2,
+      {}
+    ],
+    "space-infix-ops": 2,
+    "space-before-blocks": [
+      2,
+      "always"
+    ],
+    "eol-last": 2,
+    "space-in-parens": [
+      2,
+      "never"
+    ],
+    "no-multiple-empty-lines": 2,
+    "no-with": 2,
+    "no-spaced-func": 2,
+    "dot-notation": 2,
+    "semi": [
+      2,
+      "always"
+    ]
+  }
+}

src/js/Constants.js

@@ -12,7 +12,7 @@ var Constants = {
   MAX_HEIGHT : 1024,
   MAX_WIDTH : 1024,
 
-  MAX_PALETTE_COLORS : 100,
+  MAX_PALETTE_COLORS : 256,
   // allow current colors service to get up to 256 colors.
   // GIF generation is different if the color count goes over 256.
   MAX_WORKER_COLORS : 256,
@@ -58,8 +58,11 @@ var Constants = {
   // The datastore limit is 1 MiB, which we roughly approximate to 1 million characters.
   APPENGINE_SAVE_LIMIT : 1 * 1024 * 1024,
 
+  // Message displayed when an action will lead to erase the current animation.
+  CONFIRM_OVERWRITE: 'This will replace your current animation, are you sure you want to continue?',
+
   // SERVICE URLS
   APPENGINE_SAVE_URL : 'save',
-  IMAGE_SERVICE_UPLOAD_URL : 'http://piskel-imgstore-b.appspot.com/__/upload',
-  IMAGE_SERVICE_GET_URL : 'http://piskel-imgstore-b.appspot.com/img/'
+  IMAGE_SERVICE_UPLOAD_URL : '{{protocol}}://piskel-imgstore-b.appspot.com/__/upload',
+  IMAGE_SERVICE_GET_URL : '{{protocol}}://piskel-imgstore-b.appspot.com/img/'
 };

src/js/Events.js

@@ -64,9 +64,10 @@ var Events = {
   SELECTION_CREATED: 'SELECTION_CREATED',
   SELECTION_MOVE_REQUEST: 'SELECTION_MOVE_REQUEST',
   SELECTION_DISMISSED: 'SELECTION_DISMISSED',
-  SELECTION_COPY: 'SELECTION_COPY',
-  SELECTION_CUT: 'SELECTION_CUT',
-  SELECTION_PASTE: 'SELECTION_PASTE',
+
+  CLIPBOARD_COPY: 'CLIPBOARD_COPY',
+  CLIPBOARD_CUT: 'CLIPBOARD_CUT',
+  CLIPBOARD_PASTE: 'CLIPBOARD_PASTE',
 
   SHOW_NOTIFICATION: 'SHOW_NOTIFICATION',
   HIDE_NOTIFICATION: 'HIDE_NOTIFICATION',

src/js/app.js

@@ -10,11 +10,17 @@
   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
        */
       this.isAppEngineVersion = !!pskl.appEngineToken_;
 
+      // This id is used to keep track of sessions in the BackupService.
+      this.sessionId = pskl.utils.Uuid.generate();
+
       this.shortcutService = new pskl.service.keyboard.ShortcutService();
       this.shortcutService.init();
 
@@ -111,6 +117,9 @@
       this.canvasBackgroundController = new pskl.controller.CanvasBackgroundController();
       this.canvasBackgroundController.init();
 
+      this.indexedDbStorageService = new pskl.service.storage.IndexedDbStorageService(this.piskelController);
+      this.indexedDbStorageService.init();
+
       this.localStorageService = new pskl.service.storage.LocalStorageService(this.piskelController);
       this.localStorageService.init();
 
@@ -165,6 +174,9 @@
         this.currentColorsService);
       this.performanceReportService.init();
 
+      this.clipboardService = new pskl.service.ClipboardService(this.piskelController);
+      this.clipboardService.init();
+
       this.drawingLoop = new pskl.rendering.DrawingLoop();
       this.drawingLoop.addCallback(this.render, this);
       this.drawingLoop.start();
@@ -192,6 +204,11 @@
           dialogId : 'unsupported-browser'
         });
       }
+
+      if (pskl.utils.Environment.isDebug()) {
+        pskl.app.shortcutService.registerShortcut(pskl.service.keyboard.Shortcuts.DEBUG.RELOAD_STYLES,
+          window.reloadStyles);
+      }
     },
 
     loadPiskel_ : function (piskelData) {

src/js/controller/DrawingController.js

@@ -64,6 +64,10 @@
     pskl.app.shortcutService.registerShortcut(shortcuts.MISC.RESET_ZOOM, this.resetZoom_.bind(this));
     pskl.app.shortcutService.registerShortcut(shortcuts.MISC.INCREASE_ZOOM, this.updateZoom_.bind(this, 1));
     pskl.app.shortcutService.registerShortcut(shortcuts.MISC.DECREASE_ZOOM, this.updateZoom_.bind(this, -1));
+    pskl.app.shortcutService.registerShortcut(shortcuts.MISC.OFFSET_UP, this.updateOffset_.bind(this, 'up'));
+    pskl.app.shortcutService.registerShortcut(shortcuts.MISC.OFFSET_RIGHT, this.updateOffset_.bind(this, 'right'));
+    pskl.app.shortcutService.registerShortcut(shortcuts.MISC.OFFSET_DOWN, this.updateOffset_.bind(this, 'down'));
+    pskl.app.shortcutService.registerShortcut(shortcuts.MISC.OFFSET_LEFT, this.updateOffset_.bind(this, 'left'));
 
     window.setTimeout(function () {
       this.afterWindowResize_();
@@ -262,6 +266,29 @@
     this.updateZoom_(modifier, coords);
   };
 
+  /**
+   * Update the current viewport offset of 1 pixel in the provided direction.
+   * Direction can be one of 'up', 'right', 'down', 'left'.
+   * Callback for the OFFSET_${DIR} shortcuts.
+   */
+  ns.DrawingController.prototype.updateOffset_ = function (direction) {
+    var off = this.getOffset();
+    if (direction === 'up') {
+      off.y -= 1;
+    } else if (direction === 'right') {
+      off.x += 1;
+    } else if (direction === 'down') {
+      off.y += 1;
+    } else if (direction === 'left') {
+      off.x -= 1;
+    }
+
+    this.setOffset(
+      off.x,
+      off.y
+    );
+  };
+
   /**
    * Update the current zoom level by a given multiplier.
    *

src/js/controller/LayersListController.js

@@ -17,7 +17,7 @@
     this.rootEl.addEventListener('click', this.onClick_.bind(this));
     this.toggleLayerPreviewEl.addEventListener('click', this.toggleLayerPreview_.bind(this));
 
-    this.initCreateLayerButton_();
+    this.createButtonTooltips_();
     this.initToggleLayerPreview_();
 
     this.renderLayerList_();
@@ -46,12 +46,24 @@
     }
   };
 
-  ns.LayersListController.prototype.initCreateLayerButton_ = function () {
-    var tooltip = pskl.utils.TooltipFormatter.format('Create a layer', null, [
+  ns.LayersListController.prototype.createButtonTooltips_ = function () {
+    var addTooltip = pskl.utils.TooltipFormatter.format('Create a layer', null, [
       {key : 'shift', description : 'Clone current layer'}
     ]);
     var addButton = this.rootEl.querySelector('[data-action="add"]');
-    addButton.setAttribute('title', tooltip);
+    addButton.setAttribute('title', addTooltip);
+
+    var moveDownTooltip = pskl.utils.TooltipFormatter.format('Move layer down', null, [
+      {key : 'shift', description : 'Move to the bottom'}
+    ]);
+    var moveDownButton = this.rootEl.querySelector('[data-action="down"]');
+    moveDownButton.setAttribute('title', moveDownTooltip);
+
+    var moveUpTooltip = pskl.utils.TooltipFormatter.format('Move layer up', null, [
+      {key : 'shift', description : 'Move to the top'}
+    ]);
+    var moveUpButton = this.rootEl.querySelector('[data-action="up"]');
+    moveUpButton.setAttribute('title', moveUpTooltip);
   };
 
   ns.LayersListController.prototype.initToggleLayerPreview_ = function () {
@@ -157,9 +169,9 @@
   ns.LayersListController.prototype.onButtonClick_ = function (button, evt) {
     var action = button.getAttribute('data-action');
     if (action == 'up') {
-      this.piskelController.moveLayerUp();
+      this.piskelController.moveLayerUp(evt.shiftKey);
     } else if (action == 'down') {
-      this.piskelController.moveLayerDown();
+      this.piskelController.moveLayerDown(evt.shiftKey);
     } else if (action == 'add') {
       if (evt.shiftKey) {
         this.piskelController.duplicateCurrentLayer();

src/js/controller/PalettesListController.js

@@ -51,12 +51,17 @@
   };
 
   ns.PalettesListController.prototype.fillColorListContainer = function () {
-
     var colors = this.getSelectedPaletteColors_();
 
     if (colors.length > 0) {
-      var html = colors.map(function (color, index) {
-        return pskl.utils.Template.replace(this.paletteColorTemplate_, {color : color, index : index});
+      var html = colors.filter(function (color) {
+        return !!color;
+      }).map(function (color, index) {
+        return pskl.utils.Template.replace(this.paletteColorTemplate_, {
+          color : color,
+          index : index + 1,
+          title : color.toUpperCase()
+        });
       }.bind(this)).join('');
       this.colorListContainer_.innerHTML = html;
 
@@ -64,6 +69,10 @@
     } else {
       this.colorListContainer_.innerHTML = pskl.utils.Template.get('palettes-list-no-colors-partial');
     }
+
+    // If we have more than 10 colors, use tiny mode, where 10 colors will fit on the same
+    // line.
+    this.colorListContainer_.classList.toggle('tiny', colors.length > 10);
   };
 
   ns.PalettesListController.prototype.selectPalette = function (paletteId) {
@@ -101,7 +110,7 @@
     var currentIndex = 0;
     var selectedColor = document.querySelector('.' + PRIMARY_COLOR_CLASSNAME);
     if (selectedColor) {
-      currentIndex = parseInt(selectedColor.dataset.colorIndex, 10);
+      currentIndex = parseInt(selectedColor.dataset.colorIndex, 10) - 1;
     }
     return currentIndex;
   };

src/js/controller/PenSizeController.js

@@ -1,23 +1,19 @@
 (function () {
   var ns = $.namespace('pskl.controller');
 
-  ns.PenSizeController = function () {};
+  ns.PenSizeController = function () {
+    this.sizePicker = new pskl.widgets.SizePicker(this.onSizePickerChanged_.bind(this));
+  };
 
   ns.PenSizeController.prototype.init = function () {
-    this.container = document.querySelector('.pen-size-container');
-    pskl.utils.Event.addEventListener(this.container, 'click', this.onPenSizeOptionClick_, this);
+    this.sizePicker.init(document.querySelector('.pen-size-container'));
 
     $.subscribe(Events.PEN_SIZE_CHANGED, this.onPenSizeChanged_.bind(this));
-
     this.updateSelectedOption_();
   };
 
-  ns.PenSizeController.prototype.onPenSizeOptionClick_ = function (e) {
-    var size = e.target.dataset.size;
-    if (!isNaN(size)) {
-      size = parseInt(size, 10);
+  ns.PenSizeController.prototype.onSizePickerChanged_ = function (size) {
     pskl.app.penSizeService.setPenSize(size);
-    }
   };
 
   ns.PenSizeController.prototype.onPenSizeChanged_ = function (e) {
@@ -25,19 +21,7 @@
   };
 
   ns.PenSizeController.prototype.updateSelectedOption_ = function () {
-    pskl.utils.Dom.removeClass('labeled', this.container);
-    pskl.utils.Dom.removeClass('selected', this.container);
     var size = pskl.app.penSizeService.getPenSize();
-    var selectedOption;
-    if (size <= 4) {
-      selectedOption = this.container.querySelector('[data-size="' + size + '"]');
-    } else {
-      selectedOption = this.container.querySelector('[data-size="4"]');
-      selectedOption.classList.add('labeled');
-      selectedOption.setAttribute('real-pen-size', size);
-    }
-    if (selectedOption) {
-      selectedOption.classList.add('selected');
-    }
+    this.sizePicker.setSize(size);
   };
 })();

src/js/controller/TransformationsController.js

@@ -1,22 +1,30 @@
 (function () {
   var ns = $.namespace('pskl.controller');
+  var SHOW_MORE_CLASS = 'show-more';
 
   ns.TransformationsController = function () {
     this.tools = [
       new pskl.tools.transform.Flip(),
       new pskl.tools.transform.Rotate(),
       new pskl.tools.transform.Clone(),
-      new pskl.tools.transform.Center()
+      new pskl.tools.transform.Center(),
+      new pskl.tools.transform.Crop(),
     ];
 
     this.toolIconBuilder = new pskl.tools.ToolIconBuilder();
   };
 
   ns.TransformationsController.prototype.init = function () {
-    var container = document.querySelector('.transformations-container');
-    this.toolsContainer = container.querySelector('.tools-wrapper');
-    container.addEventListener('click', this.onTransformationClick_.bind(this));
+    this.container = document.querySelector('.transformations-container');
+    this.container.addEventListener('click', this.onTransformationClick_.bind(this));
+
+    this.showMoreLink = this.container.querySelector('.transformations-show-more-link');
+    this.showMoreLink.addEventListener('click', this.toggleShowMoreTools_.bind(this));
+
     this.createToolsDom_();
+    this.updateShowMoreLink_();
+
+    $.subscribe(Events.USER_SETTINGS_CHANGED, this.onUserSettingsChange_.bind(this));
   };
 
   ns.TransformationsController.prototype.applyTool = function (toolId, evt) {
@@ -30,13 +38,35 @@
 
   ns.TransformationsController.prototype.onTransformationClick_ = function (evt) {
     var toolId = evt.target.dataset.toolId;
+    if (toolId) {
       this.applyTool(toolId, evt);
+    }
+  };
+
+  ns.TransformationsController.prototype.toggleShowMoreTools_ = function (evt) {
+    var showMore = pskl.UserSettings.get(pskl.UserSettings.TRANSFORM_SHOW_MORE);
+    pskl.UserSettings.set(pskl.UserSettings.TRANSFORM_SHOW_MORE, !showMore);
+  };
+
+  ns.TransformationsController.prototype.onUserSettingsChange_ = function (evt, settingName) {
+    if (settingName == pskl.UserSettings.TRANSFORM_SHOW_MORE) {
+      this.updateShowMoreLink_();
+    }
+  };
+
+  ns.TransformationsController.prototype.updateShowMoreLink_ = function () {
+    var showMoreEnabled = pskl.UserSettings.get(pskl.UserSettings.TRANSFORM_SHOW_MORE);
+    this.container.classList.toggle(SHOW_MORE_CLASS, showMoreEnabled);
+
+    // Hide the link in case there are 4 or less tools available.
+    this.showMoreLink.classList.toggle('hidden', this.tools.length < 5);
   };
 
   ns.TransformationsController.prototype.createToolsDom_ = function() {
     var html = this.tools.reduce(function (p, tool) {
       return p + this.toolIconBuilder.createIcon(tool, 'left');
     }.bind(this), '');
-    this.toolsContainer.innerHTML = html;
+    var toolsContainer = this.container.querySelector('.tools-wrapper');
+    toolsContainer.innerHTML = html;
   };
 })();

src/js/controller/dialogs/BrowseLocalController.js

@@ -10,7 +10,7 @@
 
     this.localStorageItemTemplate_ = pskl.utils.Template.get('local-storage-item-template');
 
-    this.service_ = pskl.app.localStorageService;
+    this.service_ = pskl.app.indexedDbStorageService;
     this.piskelList = $('.local-piskel-list');
     this.prevSessionContainer = $('.previous-session');
 
@@ -36,9 +36,8 @@
   };
 
   ns.BrowseLocalController.prototype.fillLocalPiskelsList_ = function () {
+    this.service_.getKeys().then(function (keys) {
       var html = '';
-    var keys = this.service_.getKeys();
-
       keys.sort(function (k1, k2) {
         if (k1.date < k2.date) {return 1;}
         if (k1.date > k2.date) {return -1;}
@@ -55,5 +54,6 @@
 
       var tableBody_ = this.piskelList.get(0).tBodies[0];
       tableBody_.innerHTML = html;
+    }.bind(this));
   };
 })();

src/js/controller/dialogs/DialogsController.js

@@ -25,6 +25,10 @@
     'unsupported-browser' : {
       template : 'templates/dialogs/unsupported-browser.html',
       controller : ns.UnsupportedBrowserController
+    },
+    'browse-backups' : {
+      template : 'templates/dialogs/browse-backups.html',
+      controller : ns.backups.BrowseBackups
     }
   };
 

src/js/controller/dialogs/backups/BrowseBackups.js

@@ -0,0 +1,81 @@
+(function () {
+  var ns = $.namespace('pskl.controller.dialogs.backups');
+
+  var stepDefinitions = {
+    'SELECT_SESSION' : {
+      controller : ns.steps.SelectSession,
+      template : 'backups-select-session'
+    },
+    'SESSION_DETAILS' : {
+      controller : ns.steps.SessionDetails,
+      template : 'backups-session-details'
+    },
+  };
+
+  ns.BrowseBackups = function (piskelController, args) {
+    this.piskelController = piskelController;
+
+    // Backups data object used by steps to communicate and share their
+    // results.
+    this.backupsData = {
+      sessions: [],
+      selectedSession : null
+    };
+  };
+
+  pskl.utils.inherit(ns.BrowseBackups, pskl.controller.dialogs.AbstractDialogController);
+
+  ns.BrowseBackups.prototype.init = function () {
+    this.superclass.init.call(this);
+
+    // Prepare wizard steps.
+    this.steps = this.createSteps_();
+
+    // Start wizard widget.
+    var wizardContainer = document.querySelector('.backups-wizard-container');
+    this.wizard = new pskl.widgets.Wizard(this.steps, wizardContainer);
+    this.wizard.init();
+
+    this.wizard.goTo('SELECT_SESSION');
+  };
+
+  ns.BrowseBackups.prototype.back = function () {
+    this.wizard.back();
+    this.wizard.getCurrentStep().instance.onShow();
+  };
+
+  ns.BrowseBackups.prototype.next = function () {
+    var step = this.wizard.getCurrentStep();
+    if (step.name === 'SELECT_SESSION') {
+      this.wizard.goTo('SESSION_DETAILS');
+    }
+  };
+
+  ns.BrowseBackups.prototype.destroy = function (file) {
+    Object.keys(this.steps).forEach(function (stepName) {
+      var step = this.steps[stepName];
+      step.instance.destroy();
+      step.instance = null;
+      step.el = null;
+    }.bind(this));
+
+    this.superclass.destroy.call(this);
+  };
+
+  ns.BrowseBackups.prototype.createSteps_ = function () {
+    var steps = {};
+    Object.keys(stepDefinitions).forEach(function (stepName) {
+      var definition = stepDefinitions[stepName];
+      var el = pskl.utils.Template.getAsHTML(definition.template);
+      var instance = new definition.controller(this.piskelController, this, el);
+      instance.init();
+      steps[stepName] = {
+        name: stepName,
+        el: el,
+        instance: instance
+      };
+    }.bind(this));
+
+    return steps;
+  };
+})();

src/js/controller/dialogs/backups/steps/SelectSession.js

@@ -0,0 +1,101 @@
+(function () {
+  var ns = $.namespace('pskl.controller.dialogs.backups.steps');
+
+  // Should match the transition duration for.session-item defined in dialogs-browse-backups.css
+  var DELETE_TRANSITION_DURATION = 500;
+  /**
+   * Helper that returns a promise that will resolve after waiting for a
+   * given time (in ms).
+   *
+   * @param {Number} time
+   *        The time to wait.
+   * @return {Promise} promise that resolves after time.
+   */
+  var wait = function (time) {
+    var deferred = Q.defer();
+    setTimeout(function () {
+      deferred.resolve();
+    }, time);
+    return deferred.promise;
+  };
+
+  ns.SelectSession = function (piskelController, backupsController, container) {
+    this.piskelController = piskelController;
+    this.backupsController = backupsController;
+    this.container = container;
+  };
+
+  ns.SelectSession.prototype.addEventListener = function (el, type, cb) {
+    pskl.utils.Event.addEventListener(el, type, cb, this);
+  };
+
+  ns.SelectSession.prototype.init = function () {
+    this.addEventListener(this.container, 'click', this.onContainerClick_);
+  };
+
+  ns.SelectSession.prototype.onShow = function () {
+    this.update();
+  };
+
+  ns.SelectSession.prototype.update = function () {
+    pskl.app.backupService.list().then(function (sessions) {
+      var html = this.getMarkupForSessions_(sessions);
+      this.container.querySelector('.session-list').innerHTML = html;
+    }.bind(this)).catch(function () {
+      var html = pskl.utils.Template.get('session-list-error');
+      this.container.querySelector('.session-list').innerHTML = html;
+    }.bind(this));
+  };
+
+  ns.SelectSession.prototype.getMarkupForSessions_ = function (sessions) {
+    if (sessions.length === 0) {
+      return pskl.utils.Template.get('session-list-empty');
+    }
+
+    var sessionItemTemplate = pskl.utils.Template.get('session-list-item');
+    return sessions.reduce(function (previous, session) {
+      if (session.id === pskl.app.sessionId) {
+        // Do not show backups for the current session.
+        return previous;
+      }
+      var view = {
+        id: session.id,
+        name: session.name,
+        description: session.description ? '- ' + session.description : '',
+        date: pskl.utils.DateUtils.format(session.endDate, 'the {{Y}}/{{M}}/{{D}} at {{H}}:{{m}}'),
+        count: session.count === 1 ? '1 snapshot' : session.count + ' snapshots'
+      };
+      return previous + pskl.utils.Template.replace(sessionItemTemplate, view);
+    }, '');
+  };
+
+  ns.SelectSession.prototype.destroy = function () {
+    pskl.utils.Event.removeAllEventListeners(this);
+  };
+
+  ns.SelectSession.prototype.onContainerClick_ = function (evt) {
+    var sessionId = evt.target.dataset.sessionId;
+    if (!sessionId) {
+      return;
+    }
+
+    var action = evt.target.dataset.action;
+    if (action == 'view') {
+      this.backupsController.backupsData.selectedSession = sessionId;
+      this.backupsController.next();
+    } else if (action == 'delete') {
+      if (window.confirm('Are you sure you want to delete this session?')) {
+        evt.target.closest('.session-item').classList.add('deleting');
+        Q.all([
+          pskl.app.backupService.deleteSession(sessionId),
+          // Wait for 500ms for the .hide opacity transition.
+          wait(DELETE_TRANSITION_DURATION)
+        ]).then(function () {
+          // Refresh the list of sessions
+          this.update();
+        }.bind(this));
+      }
+    }
+  };
+
+})();

src/js/controller/dialogs/backups/steps/SessionDetails.js

@@ -0,0 +1,102 @@
+(function () {
+  var ns = $.namespace('pskl.controller.dialogs.backups.steps');
+
+  // Should match the preview dimensions defined in dialogs-browse-backups.css
+  var PREVIEW_SIZE = 60;
+
+  ns.SessionDetails = function (piskelController, backupsController, container) {
+    this.piskelController = piskelController;
+    this.backupsController = backupsController;
+    this.container = container;
+  };
+
+  ns.SessionDetails.prototype.init = function () {
+    this.backButton = this.container.querySelector('.back-button');
+    this.addEventListener(this.backButton, 'click', this.onBackClick_);
+    this.addEventListener(this.container, 'click', this.onContainerClick_);
+  };
+
+  ns.SessionDetails.prototype.destroy = function () {
+    pskl.utils.Event.removeAllEventListeners(this);
+  };
+
+  ns.SessionDetails.prototype.addEventListener = function (el, type, cb) {
+    pskl.utils.Event.addEventListener(el, type, cb, this);
+  };
+
+  ns.SessionDetails.prototype.onShow = function () {
+    var sessionId = this.backupsController.backupsData.selectedSession;
+    pskl.app.backupService.getSnapshotsBySessionId(sessionId).then(function (snapshots) {
+      var html = this.getMarkupForSnapshots_(snapshots);
+      this.container.querySelector('.snapshot-list').innerHTML = html;
+
+      // Load the image of the first frame for each sprite and update the list.
+      snapshots.forEach(function (snapshot) {
+        this.updateSnapshotPreview_(snapshot);
+      }.bind(this));
+    }.bind(this)).catch(function () {
+      var html = pskl.utils.Template.get('snapshot-list-error');
+      this.container.querySelector('.snapshot-list').innerHTML = html;
+    }.bind(this));
+  };
+
+  ns.SessionDetails.prototype.getMarkupForSnapshots_ = function (snapshots) {
+    if (snapshots.length === 0) {
+      // This should normally never happen, all sessions have at least one snapshot and snapshots
+      // can not be individually deleted.
+      console.warn('Could not retrieve snapshots for a session');
+      return pskl.utils.Template.get('snapshot-list-empty');
+    }
+
+    var sessionItemTemplate = pskl.utils.Template.get('snapshot-list-item');
+    return snapshots.reduce(function (previous, snapshot) {
+      var view = {
+        id: snapshot.id,
+        name: snapshot.name,
+        description: snapshot.description ? '- ' + snapshot.description : '',
+        date: pskl.utils.DateUtils.format(snapshot.date, 'the {{Y}}/{{M}}/{{D}} at {{H}}:{{m}}'),
+        frames: snapshot.frames === 1 ? '1 frame' : snapshot.frames + ' frames',
+        resolution: pskl.utils.StringUtils.formatSize(snapshot.width, snapshot.height),
+        fps: snapshot.fps
+      };
+      return previous + pskl.utils.Template.replace(sessionItemTemplate, view);
+    }, '');
+  };
+
+  ns.SessionDetails.prototype.updateSnapshotPreview_ = function (snapshot) {
+    pskl.utils.serialization.Deserializer.deserialize(
+      JSON.parse(snapshot.serialized),
+      function (piskel) {
+        var selector = '.snapshot-item[data-snapshot-id="' + snapshot.id + '"] .snapshot-preview';
+        var previewContainer = this.container.querySelector(selector);
+        if (!previewContainer) {
+          return;
+        }
+        var image = this.getFirstFrameAsImage_(piskel);
+        previewContainer.appendChild(image);
+      }.bind(this)
+    );
+  };
+
+  ns.SessionDetails.prototype.getFirstFrameAsImage_ = function (piskel) {
+    var frame = pskl.utils.LayerUtils.mergeFrameAt(piskel.getLayers(), 0);
+    var wZoom = PREVIEW_SIZE / piskel.width;
+    var hZoom = PREVIEW_SIZE / piskel.height;
+    var zoom = Math.min(hZoom, wZoom);
+    return pskl.utils.FrameUtils.toImage(frame, zoom);
+  };
+
+  ns.SessionDetails.prototype.onBackClick_ = function () {
+    this.backupsController.back(this);
+  };
+
+  ns.SessionDetails.prototype.onContainerClick_ = function (evt) {
+    var action = evt.target.dataset.action;
+    if (action == 'load' && window.confirm(Constants.CONFIRM_OVERWRITE)) {
+      var snapshotId = evt.target.dataset.snapshotId * 1;
+      pskl.app.backupService.loadSnapshotById(snapshotId).then(function () {
+        $.publish(Events.DIALOG_HIDE);
+      });
+    }
+  };
+})();

src/js/controller/dialogs/importwizard/ImportWizard.js

@@ -80,7 +80,13 @@
     var step = this.wizard.getCurrentStep();
 
     if (step.name === 'IMAGE_IMPORT') {
+      if (this.piskelController.isEmpty()) {
+        // If the current sprite is empty finalize immediately and replace the current sprite.
+        this.mergeData.importMode = ns.steps.SelectMode.MODES.REPLACE;
+        this.finalizeImport_();
+      } else {
         this.wizard.goTo('SELECT_MODE');
+      }
     } else if (step.name === 'SELECT_MODE') {
       if (this.mergeData.importMode === ns.steps.SelectMode.MODES.REPLACE) {
         this.finalizeImport_();
@@ -144,9 +150,7 @@
 
     if (mode === ns.steps.SelectMode.MODES.REPLACE) {
       // Replace the current piskel and close the dialog.
-      var message = 'This will replace your current animation,' +
-                      ' are you sure you want to continue?';
-      if (window.confirm(message)) {
+      if (window.confirm(Constants.CONFIRM_OVERWRITE)) {
         this.piskelController.setPiskel(piskel);
         this.closeDialog();
       }

src/js/controller/dialogs/importwizard/steps/AdjustSize.js

@@ -69,16 +69,15 @@
     var anchorInfo = this.container.querySelector('.import-resize-anchor-info');
     if (isBigger && keep) {
       anchorInfo.innerHTML = [
-        '<span class="import-resize-warning">',
-          'Imported content will be cropped!',
-        '</span>',
-        ' ',
-        'Select crop origin'
+        '<div class="import-resize-warning">',
+        '  Imported content will be cropped!',
+        '</div>',
+        'Select crop anchor:'
       ].join('');
     } else if (isBigger) {
-      anchorInfo.innerHTML = 'Select the anchor for resizing the canvas';
+      anchorInfo.innerHTML = 'Select resize anchor:';
     } else {
-      anchorInfo.innerHTML = 'Select where the import should be positioned';
+      anchorInfo.innerHTML = 'Select position anchor:';
     }
   };
 

src/js/controller/dialogs/importwizard/steps/ImageImport.js

@@ -42,12 +42,17 @@
     this.addEventListener(this.frameOffsetY, 'keyup', this.onFrameInputKeyUp_);
 
     pskl.utils.FileUtils.readImageFile(this.file_, this.onImageLoaded_.bind(this));
+
+    if (this.piskelController.isEmpty()) {
+      this.nextButton.textContent = 'import';
+    }
   };
 
   ns.ImageImport.prototype.onNextClick = function () {
     this.container.classList.add('import-image-loading');
     this.createPiskelFromImage().then(function (piskel) {
       this.mergeData.mergePiskel = piskel;
+      this.container.classList.remove('import-image-loading');
       this.superclass.onNextClick.call(this);
     }.bind(this)).catch(function (e) {
       console.error(e);
@@ -257,9 +262,7 @@
         context.lineTo(maxWidth * scaleX, y * scaleY);
       }
 
-      // Set the line style to dashed
       context.lineWidth = 1;
-      // context.setLineDash([2, 1]);
       context.strokeStyle = 'gold';
       context.stroke();
 

src/js/controller/piskel/PiskelController.js

@@ -12,11 +12,15 @@
   /**
    * Set the current piskel. Will reset the selected frame and layer unless specified
    * @param {Object} piskel
-   * @param {Boolean} preserveState if true, keep the selected frame and layer
+   * @param {Object} options:
+   *                 preserveState {Boolean} if true, keep the selected frame and layer
+   *                 noSnapshot {Boolean} if true, do not save a snapshot in the piskel
+   *                            history for this call to setPiskel
    */
-  ns.PiskelController.prototype.setPiskel = function (piskel, preserveState) {
+  ns.PiskelController.prototype.setPiskel = function (piskel, options) {
     this.piskel = piskel;
-    if (!preserveState) {
+    options = options || {};
+    if (!options.preserveState) {
       this.currentLayerIndex = 0;
       this.currentFrameIndex = 0;
     }
@@ -233,8 +237,9 @@
   ns.PiskelController.prototype.duplicateCurrentLayer = function () {
     var layer = this.getCurrentLayer();
     var clone = pskl.utils.LayerUtils.clone(layer);
-    this.piskel.addLayer(clone);
-    this.setCurrentLayerIndex(this.piskel.getLayers().length - 1);
+    var currentLayerIndex = this.getCurrentLayerIndex();
+    this.piskel.addLayerAt(clone, currentLayerIndex + 1);
+    this.setCurrentLayerIndex(currentLayerIndex + 1);
   };
 
   ns.PiskelController.prototype.createLayer = function (name) {
@@ -246,9 +251,9 @@
       for (var i = 0 ; i < this.getFrameCount() ; i++) {
         layer.addFrame(this.createEmptyFrame_());
       }
-      this.piskel.addLayer(layer);
-      this.setCurrentLayerIndex(this.piskel.getLayers().length - 1);
-
+      var currentLayerIndex = this.getCurrentLayerIndex();
+      this.piskel.addLayerAt(layer, currentLayerIndex + 1);
+      this.setCurrentLayerIndex(currentLayerIndex + 1);
     } else {
       throw 'Layer name should be unique';
     }
@@ -258,15 +263,15 @@
     return this.piskel.getLayersByName(name).length > 0;
   };
 
-  ns.PiskelController.prototype.moveLayerUp = function () {
+  ns.PiskelController.prototype.moveLayerUp = function (toTop) {
     var layer = this.getCurrentLayer();
-    this.piskel.moveLayerUp(layer);
+    this.piskel.moveLayerUp(layer, toTop);
     this.selectLayer(layer);
   };
 
-  ns.PiskelController.prototype.moveLayerDown = function () {
+  ns.PiskelController.prototype.moveLayerDown = function (toBottom) {
     var layer = this.getCurrentLayer();
-    this.piskel.moveLayerDown(layer);
+    this.piskel.moveLayerDown(layer, toBottom);
     this.selectLayer(layer);
   };
 
@@ -292,4 +297,12 @@
   ns.PiskelController.prototype.serialize = function () {
     return pskl.utils.serialization.Serializer.serialize(this.piskel);
   };
+
+  /**
+   * Check if the current sprite is empty. Emptiness here means no pixel has been filled
+   * on any layer or frame for the current sprite.
+   */
+  ns.PiskelController.prototype.isEmpty = function () {
+    return pskl.app.currentColorsService.getCurrentColors().length === 0;
+  };
 })();

src/js/controller/piskel/PublicPiskelController.js

@@ -49,14 +49,25 @@
     return this.piskelController;
   };
 
-  ns.PublicPiskelController.prototype.setPiskel = function (piskel, preserveState) {
-    this.piskelController.setPiskel(piskel, preserveState);
+  /**
+   * Set the current piskel. Will reset the selected frame and layer unless specified
+   * @param {Object} piskel
+   * @param {Object} options:
+   *                 preserveState {Boolean} if true, keep the selected frame and layer
+   *                 noSnapshot {Boolean} if true, do not save a snapshot in the piskel
+   *                            history for this call to setPiskel
+   */
+  ns.PublicPiskelController.prototype.setPiskel = function (piskel, options) {
+    this.piskelController.setPiskel(piskel, options);
 
     $.publish(Events.FRAME_SIZE_CHANGED);
     $.publish(Events.PISKEL_RESET);
+
+    if (!options || !options.noSnapshot) {
       $.publish(Events.PISKEL_SAVE_STATE, {
         type : pskl.service.HistoryService.SNAPSHOT
       });
+    }
   };
 
   ns.PublicPiskelController.prototype.resetWrap_ = function (methodName) {

src/js/controller/preview/PreviewController.js

@@ -102,7 +102,7 @@
       this.disablePreviewSizeWidget_('No other option available');
       validSizes = ['original'];
     } else if (seamlessModeEnabled) {
-      this.disablePreviewSizeWidget_('Disabled in seamless mode');
+      this.disablePreviewSizeWidget_('Disabled in tile mode');
       validSizes = ['original'];
     } else {
       this.enablePreviewSizeWidget_();
@@ -309,7 +309,8 @@
     var isSeamless = pskl.UserSettings.get(pskl.UserSettings.SEAMLESS_MODE);
     this.renderer.setRepeated(isSeamless);
 
-    var height, width;
+    var width;
+    var height;
 
     if (isSeamless) {
       height = PREVIEW_SIZE;

src/js/controller/settings/ApplicationSettingsController.js

@@ -1,144 +0,0 @@
-(function () {
-  var ns = $.namespace('pskl.controller.settings');
-
-  ns.ApplicationSettingsController = function () {};
-
-  pskl.utils.inherit(ns.ApplicationSettingsController, pskl.controller.settings.AbstractSettingController);
-
-  ns.ApplicationSettingsController.prototype.init = function() {
-    this.backgroundContainer = document.querySelector('.background-picker-wrapper');
-    this.addEventListener(this.backgroundContainer, 'click', this.onBackgroundClick_);
-
-    // Highlight selected background :
-    var background = pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND);
-    var selectedBackground = this.backgroundContainer.querySelector('[data-background=' + background + ']');
-    if (selectedBackground) {
-      selectedBackground.classList.add('selected');
-    }
-
-    // Grid display and size
-    var gridWidth = pskl.UserSettings.get(pskl.UserSettings.GRID_WIDTH);
-    var gridSelect = document.querySelector('.grid-width-select');
-    var selectedOption = gridSelect.querySelector('option[value="' + gridWidth + '"]');
-    if (selectedOption) {
-      selectedOption.setAttribute('selected', 'selected');
-    }
-
-    this.addEventListener(gridSelect, 'change', this.onGridWidthChange_);
-
-    // Seamless mode
-    var seamlessMode = pskl.UserSettings.get(pskl.UserSettings.SEAMLESS_MODE);
-    var seamlessModeCheckbox = document.querySelector('.seamless-mode-checkbox');
-    if (seamlessMode) {
-      seamlessModeCheckbox.setAttribute('checked', seamlessMode);
-    }
-    this.addEventListener(seamlessModeCheckbox, 'change', this.onSeamlessModeChange_);
-
-    // Max FPS
-    var maxFpsInput = document.querySelector('.max-fps-input');
-    maxFpsInput.value = pskl.UserSettings.get(pskl.UserSettings.MAX_FPS);
-    this.addEventListener(maxFpsInput, 'change', this.onMaxFpsChange_);
-
-    // Color format
-    var colorFormat = pskl.UserSettings.get(pskl.UserSettings.COLOR_FORMAT);
-    var colorFormatSelect = document.querySelector('.color-format-select');
-    var selectedColorFormatOption = colorFormatSelect.querySelector('option[value="' + colorFormat + '"]');
-    if (selectedColorFormatOption) {
-      selectedColorFormatOption.setAttribute('selected', 'selected');
-    }
-
-    this.addEventListener(colorFormatSelect, 'change', this.onColorFormatChange_);
-
-    // Layer preview opacity
-    var layerOpacityInput = document.querySelector('.layer-opacity-input');
-    layerOpacityInput.value = pskl.UserSettings.get(pskl.UserSettings.LAYER_OPACITY);
-    this.addEventListener(layerOpacityInput, 'change', this.onLayerOpacityChange_);
-    this.addEventListener(layerOpacityInput, 'input', this.onLayerOpacityChange_);
-    this.updateLayerOpacityText_(layerOpacityInput.value);
-
-    // Seamless mask opacity
-    var seamlessOpacityInput = document.querySelector('.seamless-opacity-input');
-    seamlessOpacityInput.value = pskl.UserSettings.get(pskl.UserSettings.SEAMLESS_OPACITY);
-    this.addEventListener(seamlessOpacityInput, 'change', this.onSeamlessOpacityChange_);
-    this.addEventListener(seamlessOpacityInput, 'input', this.onSeamlessOpacityChange_);
-    this.updateSeamlessOpacityText_(seamlessOpacityInput.value);
-
-    // Form
-    this.applicationSettingsForm = document.querySelector('[name="application-settings-form"]');
-    this.addEventListener(this.applicationSettingsForm, 'submit', this.onFormSubmit_);
-  };
-
-  ns.ApplicationSettingsController.prototype.onGridWidthChange_ = function (evt) {
-    var width = parseInt(evt.target.value, 10);
-    pskl.UserSettings.set(pskl.UserSettings.GRID_WIDTH, width);
-  };
-
-  ns.ApplicationSettingsController.prototype.onColorFormatChange_ = function (evt) {
-    pskl.UserSettings.set(pskl.UserSettings.COLOR_FORMAT, evt.target.value);
-  };
-
-  ns.ApplicationSettingsController.prototype.onSeamlessModeChange_ = function (evt) {
-    pskl.UserSettings.set(pskl.UserSettings.SEAMLESS_MODE, evt.currentTarget.checked);
-  };
-
-  ns.ApplicationSettingsController.prototype.onBackgroundClick_ = function (evt) {
-    var target = evt.target;
-    var background = target.dataset.background;
-    if (background) {
-      pskl.UserSettings.set(pskl.UserSettings.CANVAS_BACKGROUND, background);
-      var selected = this.backgroundContainer.querySelector('.selected');
-      if (selected) {
-        selected.classList.remove('selected');
-      }
-      target.classList.add('selected');
-    }
-  };
-
-  ns.ApplicationSettingsController.prototype.onMaxFpsChange_ = function (evt) {
-    var target = evt.target;
-    var fps = parseInt(target.value, 10);
-    if (fps && !isNaN(fps)) {
-      pskl.UserSettings.set(pskl.UserSettings.MAX_FPS, fps);
-    } else {
-      target.value = pskl.UserSettings.get(pskl.UserSettings.MAX_FPS);
-    }
-  };
-
-  ns.ApplicationSettingsController.prototype.onLayerOpacityChange_ = function (evt) {
-    var target = evt.target;
-    var opacity = parseFloat(target.value);
-    if (!isNaN(opacity)) {
-      pskl.UserSettings.set(pskl.UserSettings.LAYER_OPACITY, opacity);
-      pskl.UserSettings.set(pskl.UserSettings.LAYER_PREVIEW, opacity !== 0);
-      this.updateLayerOpacityText_(opacity);
-    } else {
-      target.value = pskl.UserSettings.get(pskl.UserSettings.LAYER_OPACITY);
-    }
-  };
-
-  ns.ApplicationSettingsController.prototype.onSeamlessOpacityChange_ = function (evt) {
-    var target = evt.target;
-    var opacity = parseFloat(target.value);
-    if (!isNaN(opacity)) {
-      pskl.UserSettings.set(pskl.UserSettings.SEAMLESS_OPACITY, opacity);
-      this.updateSeamlessOpacityText_(opacity);
-    } else {
-      target.value = pskl.UserSettings.get(pskl.UserSettings.SEAMLESS_OPACITY);
-    }
-  };
-
-  ns.ApplicationSettingsController.prototype.updateLayerOpacityText_ = function (opacity) {
-    var layerOpacityText = document.querySelector('.layer-opacity-text');
-    layerOpacityText.innerHTML = opacity;
-  };
-
-  ns.ApplicationSettingsController.prototype.updateSeamlessOpacityText_ = function (opacity) {
-    var seamlessOpacityText = document.querySelector('.seamless-opacity-text');
-    seamlessOpacityText.innerHTML = opacity;
-  };
-
-  ns.ApplicationSettingsController.prototype.onFormSubmit_ = function (evt) {
-    evt.preventDefault();
-    $.publish(Events.CLOSE_SETTINGS_DRAWER);
-  };
-})();

src/js/controller/settings/ImportController.js

@@ -14,6 +14,7 @@
     this.hiddenOpenPiskelInput = document.querySelector('[name="open-piskel-input"]');
 
     this.addEventListener('.browse-local-button', 'click', this.onBrowseLocalClick_);
+    this.addEventListener('.browse-backups-button', 'click', this.onBrowseBackupsClick_);
     this.addEventListener('.file-input-button', 'click', this.onFileInputClick_);
 
     // different handlers, depending on the Environment
@@ -23,24 +24,6 @@
       this.addEventListener(this.hiddenOpenPiskelInput, 'change', this.onOpenPiskelChange_);
       this.addEventListener('.open-piskel-button', 'click', this.onOpenPiskelClick_);
     }
-
-    this.initRestoreSession_();
-  };
-
-  ns.ImportController.prototype.initRestoreSession_ = function () {
-    var previousSessionContainer = document.querySelector('.previous-session');
-    var previousInfo = pskl.app.backupService.getPreviousPiskelInfo();
-    if (previousInfo) {
-      var previousSessionTemplate_ = pskl.utils.Template.get('previous-session-info-template');
-      var date = pskl.utils.DateUtils.format(previousInfo.date, '{{H}}:{{m}} - {{Y}}/{{M}}/{{D}}');
-      previousSessionContainer.innerHTML = pskl.utils.Template.replace(previousSessionTemplate_, {
-        name : previousInfo.name,
-        date : date
-      });
-      this.addEventListener('.restore-session-button', 'click', this.onRestorePreviousSessionClick_);
-    } else {
-      previousSessionContainer.innerHTML = 'No piskel backup was found on this browser.';
-    }
   };
 
   ns.ImportController.prototype.closeDrawer_ = function () {
@@ -77,6 +60,13 @@
     this.closeDrawer_();
   };
 
+  ns.ImportController.prototype.onBrowseBackupsClick_ = function (evt) {
+    $.publish(Events.DIALOG_SHOW, {
+      dialogId : 'browse-backups'
+    });
+    this.closeDrawer_();
+  };
+
   ns.ImportController.prototype.openPiskelFile_ = function (file) {
     if (this.isPiskel_(file)) {
       $.publish(Events.DIALOG_SHOW, {

src/js/controller/settings/PreferencesController.js

@@ -0,0 +1,35 @@
+(function () {
+  var ns = $.namespace('pskl.controller.settings');
+
+  var tabs = {
+    'misc' : {
+      template : 'templates/settings/preferences/misc.html',
+      controller : ns.preferences.MiscPreferencesController
+    },
+    'grid' : {
+      template : 'templates/settings/preferences/grid.html',
+      controller : ns.preferences.GridPreferencesController
+    },
+    'tile' : {
+      template : 'templates/settings/preferences/tile.html',
+      controller : ns.preferences.TilePreferencesController
+    }
+  };
+
+  ns.PreferencesController = function () {
+    this.tabsWidget = new pskl.widgets.Tabs(tabs, this, pskl.UserSettings.PREFERENCES_TAB);
+  };
+
+  pskl.utils.inherit(ns.PreferencesController, pskl.controller.settings.AbstractSettingController);
+
+  ns.PreferencesController.prototype.init = function() {
+    var container = document.querySelector('.settings-section-preferences');
+    this.tabsWidget.init(container);
+  };
+
+  ns.PreferencesController.prototype.destroy = function () {
+    this.tabsWidget.destroy();
+    this.superclass.destroy.call(this);
+  };
+
+})();

src/js/controller/settings/SaveController.js

@@ -34,7 +34,7 @@
     this.saveDesktopAsNewButton = document.querySelector('#save-desktop-as-new-button');
     this.saveFileDownloadButton = document.querySelector('#save-file-download-button');
 
-    this.safeAddEventListener_(this.saveLocalStorageButton, 'click', this.saveToLocalStorage_);
+    this.safeAddEventListener_(this.saveLocalStorageButton, 'click', this.saveToIndexedDb_);
     this.safeAddEventListener_(this.saveGalleryButton, 'click', this.saveToGallery_);
     this.safeAddEventListener_(this.saveDesktopButton, 'click', this.saveToDesktop_);
     this.safeAddEventListener_(this.saveDesktopAsNewButton, 'click', this.saveToDesktopAsNew_);
@@ -99,7 +99,7 @@
     if (pskl.app.isLoggedIn()) {
       this.saveToGallery_();
     } else {
-      this.saveToLocalStorage_();
+      this.saveToIndexedDb_();
     }
   };
 
@@ -111,8 +111,8 @@
     this.saveTo_('saveToGallery', false);
   };
 
-  ns.SaveController.prototype.saveToLocalStorage_ = function () {
-    this.saveTo_('saveToLocalStorage', false);
+  ns.SaveController.prototype.saveToIndexedDb_ = function () {
+    this.saveTo_('saveToIndexedDb', false);
   };
 
   ns.SaveController.prototype.saveToDesktop_ = function () {

src/js/controller/settings/SettingsController.js

@@ -3,8 +3,8 @@
 
   var settings = {
     'user' : {
-      template : 'templates/settings/application.html',
-      controller : ns.ApplicationSettingsController
+      template : 'templates/settings/preferences.html',
+      controller : ns.PreferencesController
     },
     'resize' : {
       template : 'templates/settings/resize.html',

src/js/controller/settings/exportimage/ExportController.js

@@ -22,6 +22,7 @@
 
   ns.ExportController = function (piskelController) {
     this.piskelController = piskelController;
+    this.tabsWidget = new pskl.widgets.Tabs(tabs, this, pskl.UserSettings.EXPORT_TAB);
     this.onSizeInputChange_ = this.onSizeInputChange_.bind(this);
   };
 
@@ -47,47 +48,16 @@
     this.onSizeInputChange_();
 
     // Initialize tabs and panel
-    this.exportPanel = document.querySelector('.export-panel');
-    this.exportTabs = document.querySelector('.export-tabs');
-    this.addEventListener(this.exportTabs, 'click', this.onTabsClicked_);
-
-    var tab = pskl.UserSettings.get(pskl.UserSettings.EXPORT_TAB);
-    this.selectTab(tab);
+    var container = document.querySelector('.settings-section-export');
+    this.tabsWidget.init(container);
   };
 
   ns.ExportController.prototype.destroy = function () {
     this.sizeInputWidget.destroy();
-    this.currentController.destroy();
+    this.tabsWidget.destroy();
     this.superclass.destroy.call(this);
   };
 
-  ns.ExportController.prototype.selectTab = function (tabId) {
-    if (!tabs[tabId] || this.currentTab == tabId) {
-      return;
-    }
-
-    if (this.currentController) {
-      this.currentController.destroy();
-    }
-
-    this.exportPanel.innerHTML = pskl.utils.Template.get(tabs[tabId].template);
-    this.currentController = new tabs[tabId].controller(this.piskelController, this);
-    this.currentController.init();
-    this.currentTab = tabId;
-    pskl.UserSettings.set(pskl.UserSettings.EXPORT_TAB, tabId);
-
-    var selectedTab = this.exportTabs.querySelector('.selected');
-    if (selectedTab) {
-      selectedTab.classList.remove('selected');
-    }
-    this.exportTabs.querySelector('[data-tab-id="' + tabId + '"]').classList.add('selected');
-  };
-
-  ns.ExportController.prototype.onTabsClicked_ = function (e) {
-    var tabId = pskl.utils.Dom.getData(e.target, 'tabId');
-    this.selectTab(tabId);
-  };
-
   ns.ExportController.prototype.onScaleChange_ = function () {
     var value = parseFloat(this.scaleInput.value);
     if (!isNaN(value)) {

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

@@ -14,14 +14,22 @@
   pskl.utils.inherit(ns.GifExportController, pskl.controller.settings.AbstractSettingController);
 
   ns.GifExportController.prototype.init = function () {
-
     this.uploadStatusContainerEl = document.querySelector('.gif-upload-status');
     this.previewContainerEl = document.querySelector('.gif-export-preview');
     this.uploadButton = document.querySelector('.gif-upload-button');
     this.downloadButton = document.querySelector('.gif-download-button');
+    this.repeatCheckbox = document.querySelector('.gif-repeat-checkbox');
+
+    // Initialize repeatCheckbox state
+    this.repeatCheckbox.checked = this.getRepeatSetting_();
 
     this.addEventListener(this.uploadButton, 'click', this.onUploadButtonClick_);
     this.addEventListener(this.downloadButton, 'click', this.onDownloadButtonClick_);
+    this.addEventListener(this.repeatCheckbox, 'change', this.onRepeatCheckboxChange_);
+
+    var currentColors = pskl.app.currentColorsService.getCurrentColors();
+    var tooManyColors = currentColors.length >= MAX_GIF_COLORS;
+    document.querySelector('.gif-export-warning').classList.toggle('visible', tooManyColors);
   };
 
   ns.GifExportController.prototype.getZoom_ = function () {
@@ -85,7 +93,8 @@
     var isTransparent = layers.some(function (l) {return l.isTransparent();});
     var preserveColors = !isTransparent && currentColors.length < MAX_GIF_COLORS;
 
-    var transparentColor, transparent;
+    var transparentColor;
+    var transparent;
     // transparency only supported if preserveColors is true, see Issue #357
     if (preserveColors) {
       transparentColor = this.getTransparentColor(currentColors);
@@ -104,6 +113,7 @@
       width: width * zoom,
       height: height * zoom,
       preserveColors : preserveColors,
+      repeat: this.getRepeatSetting_() ? 0 : 1,
       transparent : transparent
     });
 
@@ -148,6 +158,15 @@
     return transparentColor;
   };
 
+  ns.GifExportController.prototype.onRepeatCheckboxChange_ = function () {
+    var checked = this.repeatCheckbox.checked;
+    pskl.UserSettings.set(pskl.UserSettings.EXPORT_GIF_REPEAT, checked);
+  };
+
+  ns.GifExportController.prototype.getRepeatSetting_ = function () {
+    return pskl.UserSettings.get(pskl.UserSettings.EXPORT_GIF_REPEAT);
+  };
+
   ns.GifExportController.prototype.updateStatus_ = function (imageUrl, error) {
     if (imageUrl) {
       var linkTpl = '<a class="highlight" href="{{link}}" target="_blank">{{shortLink}}</a>';

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

@@ -190,7 +190,7 @@
     var json = {
       'frames': frames,
       'meta': {
-        'app': 'https://github.com/juliandescottes/piskel/',
+        'app': 'https://github.com/piskelapp/piskel/',
         'version': '1.0',
         'image': name + '.png',
         'format': 'RGBA8888',
@@ -207,6 +207,14 @@
   };
 
   ns.PngExportController.prototype.onDataUriClick_ = function (evt) {
-    window.open(this.createPngSpritesheet_().toDataURL('image/png'));
+    var popup = window.open('about:blank');
+    var dataUri = this.createPngSpritesheet_().toDataURL('image/png');
+    window.setTimeout(function () {
+      var html = pskl.utils.Template.getAndReplace('data-uri-export-partial', {
+        src: dataUri
+      });
+      popup.document.title = dataUri;
+      popup.document.body.innerHTML = html;
+    }.bind(this), 500);
   };
 })();

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

@@ -0,0 +1,90 @@
+(function () {
+  var ns = $.namespace('pskl.controller.settings.preferences');
+
+  var colorsMap = {
+    'transparent': Constants.TRANSPARENT_COLOR,
+    'white': '#FFF1E8',
+    'light-gray': '#C2C3C7',
+    'dark-gray': '#5F574F',
+    'black': '#000000',
+    'blue': '#29ADFF',
+    'dark-blue': '#1D2B53',
+    'green': '#00E436',
+    'dark-green': '#008751',
+    'peach': '#FFCCAA',
+    'pink': '#FF77A8',
+    'yellow': '#FFEC27',
+    'orange': '#FFA300',
+    'red': '#FF004D',
+  };
+
+  ns.GridPreferencesController = function (piskelController, preferencesController) {
+    this.piskelController = piskelController;
+    this.preferencesController = preferencesController;
+    this.sizePicker = new pskl.widgets.SizePicker(this.onSizePickerChanged_.bind(this));
+  };
+
+  pskl.utils.inherit(ns.GridPreferencesController, pskl.controller.settings.AbstractSettingController);
+
+  ns.GridPreferencesController.prototype.init = function () {
+    // Grid enabled
+    var isEnabled = pskl.UserSettings.get(pskl.UserSettings.GRID_ENABLED);
+    var enableGridCheckbox = document.querySelector('.enable-grid-checkbox');
+    if (isEnabled) {
+      enableGridCheckbox.setAttribute('checked', 'true');
+    }
+    this.addEventListener(enableGridCheckbox, 'change', this.onEnableGridChange_);
+
+    // Grid size
+    var gridWidth = pskl.UserSettings.get(pskl.UserSettings.GRID_WIDTH);
+    this.sizePicker.init(document.querySelector('.grid-size-container'));
+    this.sizePicker.setSize(gridWidth);
+
+    // Grid color
+    var colorListItemTemplate = pskl.utils.Template.get('color-list-item-template');
+
+    var gridColor = pskl.UserSettings.get(pskl.UserSettings.GRID_COLOR);
+    var gridColorSelect = document.querySelector('#grid-color');
+
+    var markup = '';
+    Object.keys(colorsMap).forEach(function (key, index) {
+      var background = colorsMap[key];
+      if (key === 'transparent') {
+        background = 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZ' +
+            'F8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)';
+      }
+      markup += pskl.utils.Template.replace(colorListItemTemplate, {
+        color: colorsMap[key],
+        title: key,
+        background: background,
+        ':selected': gridColor === colorsMap[key]
+      });
+    });
+    this.gridColorList = document.querySelector('.grid-colors-list');
+    this.gridColorList.innerHTML = markup;
+
+    this.addEventListener(this.gridColorList, 'click', this.onGridColorClicked_.bind(this));
+  };
+
+  ns.GridPreferencesController.prototype.destroy = function () {
+    this.sizePicker.destroy();
+    this.superclass.destroy.call(this);
+  };
+
+  ns.GridPreferencesController.prototype.onSizePickerChanged_ = function (size) {
+    pskl.UserSettings.set(pskl.UserSettings.GRID_WIDTH, size);
+  };
+
+  ns.GridPreferencesController.prototype.onEnableGridChange_ = function (evt) {
+    pskl.UserSettings.set(pskl.UserSettings.GRID_ENABLED, evt.currentTarget.checked);
+  };
+
+  ns.GridPreferencesController.prototype.onGridColorClicked_ = function (evt) {
+    var color = evt.target.dataset.color;
+    if (color) {
+      pskl.UserSettings.set(pskl.UserSettings.GRID_COLOR, color);
+      this.gridColorList.querySelector('.selected').classList.remove('selected');
+      evt.target.classList.add('selected');
+    }
+  };
+})();

src/js/controller/settings/preferences/MiscPreferencesController.js

@@ -0,0 +1,88 @@
+(function () {
+  var ns = $.namespace('pskl.controller.settings.preferences');
+
+  ns.MiscPreferencesController = function (piskelController, preferencesController) {
+    this.piskelController = piskelController;
+    this.preferencesController = preferencesController;
+  };
+
+  pskl.utils.inherit(ns.MiscPreferencesController, pskl.controller.settings.AbstractSettingController);
+
+  ns.MiscPreferencesController.prototype.init = function () {
+
+    this.backgroundContainer = document.querySelector('.background-picker-wrapper');
+    this.addEventListener(this.backgroundContainer, 'click', this.onBackgroundClick_);
+
+    // Highlight selected background :
+    var background = pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND);
+    var selectedBackground = this.backgroundContainer.querySelector('[data-background=' + background + ']');
+    if (selectedBackground) {
+      selectedBackground.classList.add('selected');
+    }
+
+    // Max FPS
+    var maxFpsInput = document.querySelector('.max-fps-input');
+    maxFpsInput.value = pskl.UserSettings.get(pskl.UserSettings.MAX_FPS);
+    this.addEventListener(maxFpsInput, 'change', this.onMaxFpsChange_);
+
+    // Color format
+    var colorFormat = pskl.UserSettings.get(pskl.UserSettings.COLOR_FORMAT);
+    var colorFormatSelect = document.querySelector('.color-format-select');
+    var selectedColorFormatOption = colorFormatSelect.querySelector('option[value="' + colorFormat + '"]');
+    if (selectedColorFormatOption) {
+      selectedColorFormatOption.setAttribute('selected', 'selected');
+    }
+    this.addEventListener(colorFormatSelect, 'change', this.onColorFormatChange_);
+
+    // Layer preview opacity
+    var layerOpacityInput = document.querySelector('.layer-opacity-input');
+    layerOpacityInput.value = pskl.UserSettings.get(pskl.UserSettings.LAYER_OPACITY);
+    this.addEventListener(layerOpacityInput, 'change', this.onLayerOpacityChange_);
+    this.addEventListener(layerOpacityInput, 'input', this.onLayerOpacityChange_);
+    this.updateLayerOpacityText_(layerOpacityInput.value);
+  };
+
+  ns.MiscPreferencesController.prototype.onBackgroundClick_ = function (evt) {
+    var target = evt.target;
+    var background = target.dataset.background;
+    if (background) {
+      pskl.UserSettings.set(pskl.UserSettings.CANVAS_BACKGROUND, background);
+      var selected = this.backgroundContainer.querySelector('.selected');
+      if (selected) {
+        selected.classList.remove('selected');
+      }
+      target.classList.add('selected');
+    }
+  };
+
+  ns.MiscPreferencesController.prototype.onColorFormatChange_ = function (evt) {
+    pskl.UserSettings.set(pskl.UserSettings.COLOR_FORMAT, evt.target.value);
+  };
+
+  ns.MiscPreferencesController.prototype.onMaxFpsChange_ = function (evt) {
+    var target = evt.target;
+    var fps = parseInt(target.value, 10);
+    if (fps && !isNaN(fps)) {
+      pskl.UserSettings.set(pskl.UserSettings.MAX_FPS, fps);
+    } else {
+      target.value = pskl.UserSettings.get(pskl.UserSettings.MAX_FPS);
+    }
+  };
+
+  ns.MiscPreferencesController.prototype.onLayerOpacityChange_ = function (evt) {
+    var target = evt.target;
+    var opacity = parseFloat(target.value);
+    if (!isNaN(opacity)) {
+      pskl.UserSettings.set(pskl.UserSettings.LAYER_OPACITY, opacity);
+      pskl.UserSettings.set(pskl.UserSettings.LAYER_PREVIEW, opacity !== 0);
+      this.updateLayerOpacityText_(opacity);
+    } else {
+      target.value = pskl.UserSettings.get(pskl.UserSettings.LAYER_OPACITY);
+    }
+  };
+
+  ns.MiscPreferencesController.prototype.updateLayerOpacityText_ = function (opacity) {
+    var layerOpacityText = document.querySelector('.layer-opacity-text');
+    layerOpacityText.innerHTML = (opacity * 1).toFixed(2);
+  };
+})();

src/js/controller/settings/preferences/TilePreferencesController.js

@@ -0,0 +1,47 @@
+(function () {
+  var ns = $.namespace('pskl.controller.settings.preferences');
+
+  ns.TilePreferencesController = function (piskelController, preferencesController) {
+    this.piskelController = piskelController;
+    this.preferencesController = preferencesController;
+  };
+
+  pskl.utils.inherit(ns.TilePreferencesController, pskl.controller.settings.AbstractSettingController);
+
+  ns.TilePreferencesController.prototype.init = function () {
+    // Tile mode
+    var tileMode = pskl.UserSettings.get(pskl.UserSettings.SEAMLESS_MODE);
+    var tileModeCheckbox = document.querySelector('.tile-mode-checkbox');
+    if (tileMode) {
+      tileModeCheckbox.setAttribute('checked', tileMode);
+    }
+    this.addEventListener(tileModeCheckbox, 'change', this.onTileModeChange_);
+
+    // Tile mask opacity
+    var tileMaskOpacityInput = document.querySelector('.tile-mask-opacity-input');
+    tileMaskOpacityInput.value = pskl.UserSettings.get(pskl.UserSettings.SEAMLESS_OPACITY);
+    this.addEventListener(tileMaskOpacityInput, 'change', this.onTileMaskOpacityChange_);
+    this.addEventListener(tileMaskOpacityInput, 'input', this.onTileMaskOpacityChange_);
+    this.updateTileMaskOpacityText_(tileMaskOpacityInput.value);
+  };
+
+  ns.TilePreferencesController.prototype.onTileModeChange_ = function (evt) {
+    pskl.UserSettings.set(pskl.UserSettings.SEAMLESS_MODE, evt.currentTarget.checked);
+  };
+
+  ns.TilePreferencesController.prototype.onTileMaskOpacityChange_ = function (evt) {
+    var target = evt.target;
+    var opacity = parseFloat(target.value);
+    if (!isNaN(opacity)) {
+      pskl.UserSettings.set(pskl.UserSettings.SEAMLESS_OPACITY, opacity);
+      this.updateTileMaskOpacityText_(opacity);
+    } else {
+      target.value = pskl.UserSettings.get(pskl.UserSettings.SEAMLESS_OPACITY);
+    }
+  };
+
+  ns.TilePreferencesController.prototype.updateTileMaskOpacityText_ = function (opacity) {
+    var seamlessOpacityText = document.querySelector('.tile-mask-opacity-text');
+    seamlessOpacityText.innerHTML = (opacity * 1).toFixed(2);
+  };
+})();

src/js/controller/settings/resize/ResizeController.js

@@ -69,7 +69,9 @@
       resizeContent: this.resizeContentCheckbox.checked
     });
 
-    pskl.app.piskelController.setPiskel(piskel, true);
+    pskl.app.piskelController.setPiskel(piskel, {
+      preserveState: true
+    });
 
     $.publish(Events.CLOSE_SETTINGS_DRAWER);
   };

src/js/database/BackupDatabase.js

@@ -0,0 +1,258 @@
+(function () {
+  var ns = $.namespace('pskl.database');
+
+  var DB_NAME = 'PiskelSessionsDatabase';
+  var DB_VERSION = 1;
+
+  // Simple wrapper to promisify a request.
+  var _requestPromise = function (req) {
+    var deferred = Q.defer();
+    req.onsuccess = deferred.resolve.bind(deferred);
+    req.onerror = deferred.reject.bind(deferred);
+    return deferred.promise;
+  };
+
+  /**
+   * The BackupDatabase handles all the database interactions related
+   * to piskel snapshots continuously saved while during the usage of
+   * Piskel.
+   */
+  ns.BackupDatabase = function () {
+    this.db = null;
+  };
+
+  ns.BackupDatabase.DB_NAME = DB_NAME;
+
+  /**
+   * Open and initialize the database.
+   * Returns a promise that resolves when the databse is opened.
+   */
+  ns.BackupDatabase.prototype.init = function () {
+    var request = window.indexedDB.open(DB_NAME, DB_VERSION);
+    request.onupgradeneeded = this.onUpgradeNeeded_.bind(this);
+
+    return _requestPromise(request).then(function (event) {
+      this.db = event.target.result;
+      return this.db;
+    }.bind(this)).catch(function (e) {
+      console.log('Could not initialize the piskel backup database');
+    });
+  };
+
+  ns.BackupDatabase.prototype.onUpgradeNeeded_ = function (event) {
+    // Set this.db early to allow migration scripts to access it in oncomplete.
+    this.db = event.target.result;
+
+    // Create an object store "piskels" with the autoIncrement flag set as true.
+    var objectStore = this.db.createObjectStore('snapshots', { keyPath: 'id', autoIncrement : true });
+
+    objectStore.createIndex('session_id', 'session_id', { unique: false });
+    objectStore.createIndex('date', 'date', { unique: false });
+    objectStore.createIndex('session_id, date', ['session_id', 'date'], { unique: false });
+
+    objectStore.transaction.oncomplete = function(event) {
+      // Nothing to do at the moment!
+    }.bind(this);
+  };
+
+  ns.BackupDatabase.prototype.openObjectStore_ = function () {
+    return this.db.transaction(['snapshots'], 'readwrite').objectStore('snapshots');
+  };
+
+  /**
+   * Send an add request for the provided snapshot.
+   * Returns a promise that resolves the request event.
+   */
+  ns.BackupDatabase.prototype.createSnapshot = function (snapshot) {
+    var objectStore = this.openObjectStore_();
+    var request = objectStore.add(snapshot);
+    return _requestPromise(request);
+  };
+
+  /**
+   * Send a put request for the provided snapshot.
+   * Returns a promise that resolves the request event.
+   */
+  ns.BackupDatabase.prototype.updateSnapshot = function (snapshot) {
+    var objectStore = this.openObjectStore_();
+    var request = objectStore.put(snapshot);
+    return _requestPromise(request);
+  };
+
+  /**
+   * Send a delete request for the provided snapshot.
+   * Returns a promise that resolves the request event.
+   */
+  ns.BackupDatabase.prototype.deleteSnapshot = function (snapshot) {
+    var objectStore = this.openObjectStore_();
+    var request = objectStore.delete(snapshot.id);
+    return _requestPromise(request);
+  };
+
+  /**
+   * Send a get request for the provided snapshotId.
+   * Returns a promise that resolves the request event.
+   */
+  ns.BackupDatabase.prototype.getSnapshot = function (snapshotId) {
+    var objectStore = this.openObjectStore_();
+    var request = objectStore.get(snapshotId);
+    return _requestPromise(request).then(function (event) {
+      return event.target.result;
+    });
+  };
+
+  /**
+   * Get the last (most recent) snapshot that satisfies the accept filter provided.
+   * Returns a promise that will resolve with the first matching snapshot (or null
+   * if no valid snapshot is found).
+   *
+   * @param {Function} accept:
+   *        Filter method that takes a snapshot as argument and should return true
+   *        if the snapshot is valid.
+   */
+  ns.BackupDatabase.prototype.findLastSnapshot = function (accept) {
+    // Create the backup promise.
+    var deferred = Q.defer();
+
+    // Open a transaction to the snapshots object store.
+    var objectStore = this.db.transaction(['snapshots']).objectStore('snapshots');
+
+    var index = objectStore.index('date');
+    var range = IDBKeyRange.upperBound(Infinity);
+    index.openCursor(range, 'prev').onsuccess = function(event) {
+      var cursor = event.target.result;
+      var snapshot = cursor && cursor.value;
+
+      // Resolve null if we couldn't find a matching snapshot.
+      if (!snapshot) {
+        deferred.resolve(null);
+      } else if (accept(snapshot)) {
+        deferred.resolve(snapshot);
+      } else {
+        cursor.continue();
+      }
+    };
+
+    return deferred.promise;
+  };
+
+  /**
+   * Retrieve all the snapshots for a given session id, sorted by descending date order.
+   * Returns a promise that resolves with an array of snapshots.
+   *
+   * @param {String} sessionId
+   *        The session id
+   */
+  ns.BackupDatabase.prototype.getSnapshotsBySessionId = function (sessionId) {
+    // Create the backup promise.
+    var deferred = Q.defer();
+
+    // Open a transaction to the snapshots object store.
+    var objectStore = this.db.transaction(['snapshots']).objectStore('snapshots');
+
+    // Loop on all the saved snapshots for the provided piskel id
+    var index = objectStore.index('session_id, date');
+    var keyRange = IDBKeyRange.bound(
+      [sessionId, 0],
+      [sessionId, Infinity]
+    );
+
+    var snapshots = [];
+    // Ordered by date in descending order.
+    index.openCursor(keyRange, 'prev').onsuccess = function(event) {
+      var cursor = event.target.result;
+      if (cursor) {
+        snapshots.push(cursor.value);
+        cursor.continue();
+      } else {
+        // Consumed all piskel snapshots
+        deferred.resolve(snapshots);
+      }
+    };
+
+    return deferred.promise;
+  };
+
+  ns.BackupDatabase.prototype.getSessions = function () {
+    // Create the backup promise.
+    var deferred = Q.defer();
+
+    // Open a transaction to the snapshots object store.
+    var objectStore = this.db.transaction(['snapshots']).objectStore('snapshots');
+
+    var sessions = {};
+
+    var _createSession = function (snapshot) {
+      sessions[snapshot.session_id] = {
+        startDate: snapshot.date,
+        endDate: snapshot.date,
+        name: snapshot.name,
+        description: snapshot.description,
+        id: snapshot.session_id,
+        count: 1
+      };
+    };
+
+    var _updateSession = function (snapshot) {
+      var s = sessions[snapshot.session_id];
+      s.startDate = Math.min(s.startDate, snapshot.date);
+      s.endDate = Math.max(s.endDate, snapshot.date);
+      s.count++;
+
+      if (s.endDate === snapshot.date) {
+        // If the endDate was updated, update also the session metadata to
+        // reflect the latest state.
+        s.name = snapshot.name;
+        s.description = snapshot.description;
+      }
+    };
+
+    var index = objectStore.index('date');
+    var range = IDBKeyRange.upperBound(Infinity);
+    index.openCursor(range, 'prev').onsuccess = function(event) {
+      var cursor = event.target.result;
+      var snapshot = cursor && cursor.value;
+      if (!snapshot) {
+        deferred.resolve(sessions);
+      } else {
+        if (sessions[snapshot.session_id]) {
+          _updateSession(snapshot);
+        } else {
+          _createSession(snapshot);
+        }
+        cursor.continue();
+      }
+    };
+
+    return deferred.promise.then(function (sessions) {
+      // Convert the sessions map to an array.
+      return Object.keys(sessions).map(function (key) {
+        return sessions[key];
+      });
+    });
+  };
+
+  ns.BackupDatabase.prototype.deleteSnapshotsForSession = function (sessionId) {
+    // Create the backup promise.
+    var deferred = Q.defer();
+
+    // Open a transaction to the snapshots object store.
+    var objectStore = this.openObjectStore_();
+
+    // Loop on all the saved snapshots for the provided piskel id
+    var index = objectStore.index('session_id');
+    var keyRange = IDBKeyRange.only(sessionId);
+
+    index.openCursor(keyRange).onsuccess = function(event) {
+      var cursor = event.target.result;
+      if (cursor) {
+        cursor.delete();
+        cursor.continue();
+      } else {
+        deferred.resolve();
+      }
+    };
+
+    return deferred.promise;
+  };
+})();

src/js/database/PiskelDatabase.js

@@ -0,0 +1,139 @@
+(function () {
+  var ns = $.namespace('pskl.database');
+
+  var DB_NAME = 'PiskelDatabase';
+  var DB_VERSION = 1;
+
+  // Simple wrapper to promisify a request.
+  var _requestPromise = function (req) {
+    var deferred = Q.defer();
+    req.onsuccess = deferred.resolve.bind(deferred);
+    req.onerror = deferred.reject.bind(deferred);
+    return deferred.promise;
+  };
+
+  /**
+   * The PiskelDatabase handles all the database interactions related
+   * to the local piskel saved that can be performed in-browser.
+   */
+  ns.PiskelDatabase = function (options) {
+    this.db = null;
+  };
+
+  ns.PiskelDatabase.DB_NAME = DB_NAME;
+
+  ns.PiskelDatabase.prototype.init = function () {
+    var request = window.indexedDB.open(DB_NAME, DB_VERSION);
+    request.onupgradeneeded = this.onUpgradeNeeded_.bind(this);
+
+    return _requestPromise(request).then(function (event) {
+      this.db = event.target.result;
+      return this.db;
+    }.bind(this));
+  };
+
+  ns.PiskelDatabase.prototype.onUpgradeNeeded_ = function (event) {
+    // Set this.db early to allow migration scripts to access it in oncomplete.
+    this.db = event.target.result;
+
+    // Create an object store "piskels" with the autoIncrement flag set as true.
+    var objectStore = this.db.createObjectStore('piskels', { keyPath : 'name' });
+    objectStore.transaction.oncomplete = function(event) {
+      pskl.database.migrate.MigrateLocalStorageToIndexedDb.migrate(this);
+    }.bind(this);
+  };
+
+  ns.PiskelDatabase.prototype.openObjectStore_ = function () {
+    return this.db.transaction(['piskels'], 'readwrite').objectStore('piskels');
+  };
+
+  /**
+   * Send a get request for the provided name.
+   * Returns a promise that resolves the request event.
+   */
+  ns.PiskelDatabase.prototype.get = function (name) {
+    var objectStore = this.openObjectStore_();
+    return _requestPromise(objectStore.get(name)).then(function (event) {
+      return event.target.result;
+    });
+  };
+
+  /**
+   * List all locally saved piskels.
+   * Returns a promise that resolves an array of objects:
+   * - name: name of the piskel
+   * - description: description of the piskel
+   * - date: save date
+   *
+   * The sprite content is not contained in the object and
+   * needs to be retrieved with a separate get.
+   */
+  ns.PiskelDatabase.prototype.list = function () {
+    var deferred = Q.defer();
+
+    var piskels = [];
+    var objectStore = this.openObjectStore_();
+    var cursor = objectStore.openCursor();
+    cursor.onsuccess = function(event) {
+      var cursor = event.target.result;
+      if (cursor) {
+        piskels.push({
+          name: cursor.value.name,
+          date: cursor.value.date,
+          description: cursor.value.description
+        });
+        cursor.continue();
+      } else {
+        // Cursor consumed all availabled piskels
+        deferred.resolve(piskels);
+      }
+    };
+
+    cursor.onerror = function () {
+      deferred.reject();
+    };
+
+    return deferred.promise;
+  };
+
+  /**
+   * Send an put request for the provided args.
+   * Returns a promise that resolves the request event.
+   */
+  ns.PiskelDatabase.prototype.update = function (name, description, date, serialized) {
+    var data = {};
+
+    data.name = name;
+    data.serialized = serialized;
+    data.date = date;
+    data.description = description;
+
+    var objectStore = this.openObjectStore_();
+    return _requestPromise(objectStore.put(data));
+  };
+
+  /**
+   * Send an add request for the provided args.
+   * Returns a promise that resolves the request event.
+   */
+  ns.PiskelDatabase.prototype.create = function (name, description, date, serialized) {
+    var data = {};
+
+    data.name = name;
+    data.serialized = serialized;
+    data.date = date;
+    data.description = description;
+
+    var objectStore = this.openObjectStore_();
+    return _requestPromise(objectStore.add(data));
+  };
+
+  /**
+   * Delete a saved piskel for the provided name.
+   * Returns a promise that resolves the request event.
+   */
+  ns.PiskelDatabase.prototype.delete = function (name) {
+    var objectStore = this.openObjectStore_();
+    return _requestPromise(objectStore.delete(name));
+  };
+})();

src/js/database/migrate/MigrateLocalStorageToIndexedDb.js

@@ -0,0 +1,76 @@
+(function () {
+  var ns = $.namespace('pskl.database.migrate');
+
+  // Simple migration helper to move local storage saves to indexed db.
+  ns.MigrateLocalStorageToIndexedDb = {};
+
+  ns.MigrateLocalStorageToIndexedDb.migrate = function (piskelDatabase) {
+    var deferred = Q.defer();
+
+    var localStorageService = pskl.app.localStorageService;
+
+    var localStorageKeys = localStorageService.getKeys();
+    var migrationData = localStorageKeys.map(function (key) {
+      return {
+        name: key.name,
+        description: key.description,
+        date: key.date,
+        serialized: localStorageService.getPiskel(key.name)
+      };
+    });
+
+    // Define the sequential migration process.
+    // Wait for each sprite to be saved before saving the next one.
+    var success = true;
+    var migrateSprite = function (index) {
+      var data = migrationData[index];
+      if (!data) {
+        console.log('Data migration from local storage to indexed db finished.');
+        if (success) {
+          console.log('Local storage piskels successfully migrated. Old copies will be deleted.');
+          ns.MigrateLocalStorageToIndexedDb.deleteLocalStoragePiskels();
+        }
+
+        deferred.resolve();
+      } else {
+        ns.MigrateLocalStorageToIndexedDb.save_(piskelDatabase, data)
+          .then(function () {
+            migrateSprite(index + 1);
+          })
+          .catch(function (e) {
+            var success = false;
+            console.error('Failed to migrate local storage sprite for name: ' + data.name);
+            migrateSprite(index + 1);
+          });
+      }
+    };
+
+    // Start the migration.
+    migrateSprite(0);
+
+    return deferred.promise;
+  };
+
+  ns.MigrateLocalStorageToIndexedDb.save_ = function (piskelDatabase, piskelData) {
+    return piskelDatabase.get(piskelData.name).then(function (data) {
+      if (typeof data !== 'undefined') {
+        return piskelDatabase.update(piskelData.name, piskelData.description, piskelData.date, piskelData.serialized);
+      } else {
+        return piskelDatabase.create(piskelData.name, piskelData.description, piskelData.date, piskelData.serialized);
+      }
+    });
+  };
+
+  ns.MigrateLocalStorageToIndexedDb.deleteLocalStoragePiskels = function () {
+    var localStorageKeys = pskl.app.localStorageService.getKeys();
+
+    // Remove all sprites.
+    localStorageKeys.forEach(function (key) {
+      window.localStorage.removeItem('piskel.' + key.name);
+    });
+
+    // Remove keys.
+    window.localStorage.removeItem('piskel.keys');
+  };
+
+})();

src/js/devtools/DrawingTestPlayer.js

@@ -32,6 +32,7 @@
   };
 
   ns.DrawingTestPlayer.prototype.setupInitialState_ = function () {
+
     var size = this.initialState.size;
     var piskel = this.createPiskel_(size.width, size.height);
     pskl.app.piskelController.setPiskel(piskel);
@@ -39,9 +40,10 @@
     $.publish(Events.SELECT_PRIMARY_COLOR, [this.initialState.primaryColor]);
     $.publish(Events.SELECT_SECONDARY_COLOR, [this.initialState.secondaryColor]);
     $.publish(Events.SELECT_TOOL, [this.initialState.selectedTool]);
-    if (this.initialState.penSize) {
+
+    // Old tests do not have penSize stored in initialState, fallback to 1.
+    var penSize = this.initialState.penSize || 1;
     pskl.app.penSizeService.setPenSize(this.initialState.penSize);
-    }
   };
 
   ns.DrawingTestPlayer.prototype.createPiskel_ = function (width, height) {
@@ -108,6 +110,8 @@
         this.playTransformToolEvent_(recordEvent);
       } else if (recordEvent.type === 'instrumented-event') {
         this.playInstrumentedEvent_(recordEvent);
+      } else if (recordEvent.type === 'clipboard-event') {
+        this.playClipboardEvent_(recordEvent);
       }
 
       // Record the time spent replaying the event
@@ -169,6 +173,16 @@
     pskl.app.piskelController[recordEvent.methodName].apply(pskl.app.piskelController, recordEvent.args);
   };
 
+  ns.DrawingTestPlayer.prototype.playClipboardEvent_ = function (recordEvent) {
+    $.publish(recordEvent.event.type, {
+      preventDefault: function () {},
+      clipboardData: {
+        items: [],
+        setData: function () {}
+      }
+    });
+  };
+
   ns.DrawingTestPlayer.prototype.onTestEnd_ = function () {
     this.removeMouseShim_();
     // Restore the original drawing loop.

src/js/devtools/DrawingTestRecorder.js

@@ -15,6 +15,10 @@
     $.subscribe(Events.TRANSFORMATION_EVENT, this.onTransformationEvent_.bind(this));
     $.subscribe(Events.PRIMARY_COLOR_SELECTED, this.onColorEvent_.bind(this, true));
     $.subscribe(Events.SECONDARY_COLOR_SELECTED, this.onColorEvent_.bind(this, false));
+    $.subscribe(Events.CLIPBOARD_COPY, this.onClipboardEvent_.bind(this));
+    $.subscribe(Events.CLIPBOARD_CUT, this.onClipboardEvent_.bind(this));
+    $.subscribe(Events.CLIPBOARD_PASTE, this.onClipboardEvent_.bind(this));
+
 
     for (var key in this.piskelController) {
       if (typeof this.piskelController[key] == 'function') {
@@ -85,7 +89,7 @@
         which : domEvent.which,
         shiftKey : domEvent.shiftKey,
         altKey : domEvent.altKey,
-        ctrlKey : domEvent.ctrlKey,
+        ctrlKey : domEvent.ctrlKey || domEvent.metaKey,
         target : {
           nodeName : domEvent.target.nodeName
         }
@@ -136,12 +140,27 @@
     }
   };
 
+  ns.DrawingTestRecorder.prototype.onClipboardEvent_ = function (evt) {
+    if (this.isRecording) {
+      var recordEvent = {};
+      recordEvent.type = 'clipboard-event';
+      recordEvent.event = evt;
+      this.events.push(recordEvent);
+    }
+  };
+
   ns.DrawingTestRecorder.prototype.onInstrumentedMethod_ = function (callee, methodName, args) {
     if (this.isRecording) {
       var recordEvent = {};
       recordEvent.type = 'instrumented-event';
       recordEvent.methodName = methodName;
       recordEvent.args = Array.prototype.slice.call(args, 0);
+
+      if (methodName === 'setPiskel' && args[1].noSnapshot) {
+        // Skip recording calls to setPiskel that don't trigger a save.
+        return;
+      }
+
       this.events.push(recordEvent);
     }
   };

src/js/model/Piskel.js

@@ -16,7 +16,6 @@
       this.descriptor = descriptor;
       this.savePath = null;
       this.fps = fps;
-
     } else {
       throw 'Missing arguments in Piskel constructor : ' + Array.prototype.join.call(arguments, ',');
     }
@@ -82,20 +81,28 @@
     this.layers.splice(index, 0, layer);
   };
 
-  ns.Piskel.prototype.moveLayerUp = function (layer) {
+  ns.Piskel.prototype.moveLayerUp = function (layer, toTop) {
     var index = this.layers.indexOf(layer);
-    if (index > -1 && index < this.layers.length - 1) {
-      this.layers[index] = this.layers[index + 1];
-      this.layers[index + 1] = layer;
-    }
+    var toIndex = toTop ? this.layers.length - 1 : index + 1;
+    this.moveLayer_(index, toIndex);
   };
 
-  ns.Piskel.prototype.moveLayerDown = function (layer) {
+  ns.Piskel.prototype.moveLayerDown = function (layer, toBottom) {
     var index = this.layers.indexOf(layer);
-    if (index > 0) {
-      this.layers[index] = this.layers[index - 1];
-      this.layers[index - 1] = layer;
+    var toIndex = toBottom ? 0 : index - 1;
+    this.moveLayer_(index, toIndex);
+  };
+
+  /**
+   * Move the layer at the provided index to the provided toIndex.
+   */
+  ns.Piskel.prototype.moveLayer_ = function (fromIndex, toIndex) {
+    if (fromIndex == -1 || toIndex == -1 || fromIndex == toIndex) {
+      return;
     }
+    toIndex = pskl.utils.Math.minmax(toIndex, 0, this.layers.length - 1);
+    var layer = this.layers.splice(fromIndex, 1)[0];
+    this.layers.splice(toIndex, 0, layer);
   };
 
   ns.Piskel.prototype.removeLayer = function (layer) {

src/js/rendering/frame/CachedFrameRenderer.js

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

src/js/rendering/frame/FrameRenderer.js

@@ -55,7 +55,7 @@
     this.displayCanvas = null;
     this.setDisplaySize(renderingOptions.width, renderingOptions.height);
 
-    this.setGridWidth(pskl.UserSettings.get(pskl.UserSettings.GRID_WIDTH));
+    this.setGridWidth(this.getUserGridWidth_());
 
     $.subscribe(Events.USER_SETTINGS_CHANGED, this.onUserSettingsChange_.bind(this));
   };
@@ -138,6 +138,10 @@
     this.offset.y = y;
   };
 
+  ns.FrameRenderer.prototype.getGridColor = function () {
+    return pskl.UserSettings.get(pskl.UserSettings.GRID_COLOR);
+  };
+
   ns.FrameRenderer.prototype.setGridWidth = function (value) {
     this.gridWidth_ = value;
   };
@@ -180,11 +184,18 @@
   };
 
   ns.FrameRenderer.prototype.onUserSettingsChange_ = function (evt, settingName, settingValue) {
-    if (settingName == pskl.UserSettings.GRID_WIDTH) {
-      this.setGridWidth(settingValue);
+    var settings = pskl.UserSettings;
+    if (settingName == settings.GRID_WIDTH || settingName == settings.GRID_ENABLED) {
+      this.setGridWidth(this.getUserGridWidth_());
     }
   };
 
+  ns.FrameRenderer.prototype.getUserGridWidth_ = function () {
+    var gridEnabled = pskl.UserSettings.get(pskl.UserSettings.GRID_ENABLED);
+    var width = pskl.UserSettings.get(pskl.UserSettings.GRID_WIDTH);
+    return gridEnabled ? width : 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.
@@ -258,7 +269,7 @@
     var isZoomedOut = translateX > 0 || translateY > 0;
     // Draw the background / zoomed-out color only if needed. Otherwise the clearRect
     // happening after that will clear "out of bounds" and seems to be doing nothing
-    // on some chromebooks (cf https://github.com/juliandescottes/piskel/issues/651)
+    // on some chromebooks (cf https://github.com/piskelapp/piskel/issues/651)
     if (isZoomedOut) {
       // Draw background
       displayContext.fillStyle = Constants.ZOOMED_OUT_BACKGROUND_COLOR;
@@ -288,15 +299,25 @@
     // Draw grid.
     var gridWidth = this.computeGridWidthForDisplay_();
     if (gridWidth > 0) {
+      var gridColor = this.getGridColor();
       // Scale out before drawing the grid.
       displayContext.scale(1 / z, 1 / z);
-      // Clear vertical lines.
-      for (var i = 1 ; i < frame.getWidth() ; i++) {
-        displayContext.clearRect((i * z) - (gridWidth / 2), 0, gridWidth, h * z);
+
+      var drawOrClear;
+      if (gridColor === Constants.TRANSPARENT_COLOR) {
+        drawOrClear = displayContext.clearRect.bind(displayContext);
+      } else {
+        displayContext.fillStyle = gridColor;
+        drawOrClear = displayContext.fillRect.bind(displayContext);
       }
-      // Clear horizontal lines.
+
+      // Draw or clear vertical lines.
+      for (var i = 1 ; i < frame.getWidth() ; i++) {
+        drawOrClear((i * z) - (gridWidth / 2), 0, gridWidth, h * z);
+      }
+      // Draw or clear horizontal lines.
       for (var j = 1 ; j < frame.getHeight() ; j++) {
-        displayContext.clearRect(0, (j * z) - (gridWidth / 2), w * z, gridWidth);
+        drawOrClear(0, (j * z) - (gridWidth / 2), w * z, gridWidth);
       }
     }
 

src/js/selection/BaseSelection.js

@@ -5,9 +5,23 @@
     this.reset();
   };
 
+  ns.BaseSelection.prototype.stringify = function () {
+    return JSON.stringify({
+      pixels: this.pixels,
+      time: this.time
+    });
+  };
+
+  ns.BaseSelection.prototype.parse = function (str) {
+    var selectionData = JSON.parse(str);
+    this.pixels = selectionData.pixels;
+    this.time = selectionData.time;
+  };
+
   ns.BaseSelection.prototype.reset = function () {
     this.pixels = [];
     this.hasPastedContent = false;
+    this.time = -1;
   };
 
   ns.BaseSelection.prototype.move = function (colDiff, rowDiff) {
@@ -30,5 +44,8 @@
     });
 
     this.hasPastedContent = true;
+    // Keep track of the selection time to compare between local selection and
+    // paste event selections.
+    this.time = Date.now();
   };
 })();

src/js/selection/SelectionManager.js

@@ -17,14 +17,11 @@
     $.subscribe(Events.SELECTION_CREATED, $.proxy(this.onSelectionCreated_, this));
     $.subscribe(Events.SELECTION_DISMISSED, $.proxy(this.onSelectionDismissed_, this));
     $.subscribe(Events.SELECTION_MOVE_REQUEST, $.proxy(this.onSelectionMoved_, this));
-    $.subscribe(Events.SELECTION_COPY, this.copy.bind(this));
-    $.subscribe(Events.SELECTION_CUT, this.cut.bind(this));
-    $.subscribe(Events.SELECTION_PASTE, this.paste.bind(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));
 
     var shortcuts = pskl.service.keyboard.Shortcuts;
-    pskl.app.shortcutService.registerShortcut(shortcuts.SELECTION.PASTE, this.paste.bind(this));
-    pskl.app.shortcutService.registerShortcut(shortcuts.SELECTION.CUT, this.cut.bind(this));
-    pskl.app.shortcutService.registerShortcut(shortcuts.SELECTION.COPY, this.copy.bind(this));
     pskl.app.shortcutService.registerShortcut(shortcuts.SELECTION.DELETE, this.onDeleteShortcut_.bind(this));
     pskl.app.shortcutService.registerShortcut(shortcuts.SELECTION.COMMIT, this.commit.bind(this));
 
@@ -78,29 +75,85 @@
       scope : this,
       replay : {
         type : SELECTION_REPLAY.ERASE,
-        pixels : JSON.parse(JSON.stringify(pixels.slice(0)))
+        pixels : JSON.parse(JSON.stringify(pixels))
       }
     });
   };
 
-  ns.SelectionManager.prototype.cut = function() {
-    if (this.currentSelection) {
-      // Put cut target into the selection:
+  ns.SelectionManager.prototype.copy = function(event, domEvent) {
+    if (this.currentSelection && this.piskelController.getCurrentFrame()) {
       this.currentSelection.fillSelectionFromFrame(this.piskelController.getCurrentFrame());
+      if (domEvent) {
+        domEvent.clipboardData.setData('text/plain', this.currentSelection.stringify());
+        domEvent.preventDefault();
+      }
+      if (event.type === Events.CLIPBOARD_CUT) {
         this.erase();
       }
+    }
   };
 
-  ns.SelectionManager.prototype.paste = function() {
-    if (!this.currentSelection || !this.currentSelection.hasPastedContent) {
-      if (window.localStorage.getItem('piskel.clipboard')) {
-        this.currentSelection = JSON.parse(window.localStorage.getItem('piskel.clipboard'));
-      } else {
+  ns.SelectionManager.prototype.paste = function(event, domEvent) {
+    var items = domEvent ? domEvent.clipboardData.items : [];
+
+    try {
+      for (var i = 0 ; i < items.length ; i++) {
+        var item = items[i];
+
+        if (/^image/i.test(item.type)) {
+          this.pasteImage_(item);
+          event.stopPropagation();
+          return;
+        }
+
+        if (/^text\/plain/i.test(item.type)) {
+          this.pasteText_(item);
+          event.stopPropagation();
           return;
         }
       }
+    } catch (e) {
+      // Some of the clipboard APIs are not available on Safari/IE
+      // Allow Piskel to fallback on local currentSelection pasting.
+    }
 
-    var pixels = this.currentSelection.pixels;
+    // temporarily keeping this code path for tests and fallbacks.
+    if (this.currentSelection && this.currentSelection.hasPastedContent) {
+      this.pastePixelsOnCurrentFrame_(this.currentSelection.pixels);
+    }
+  };
+
+  ns.SelectionManager.prototype.pasteImage_ = function(clipboardItem) {
+    var blob = clipboardItem.getAsFile();
+    pskl.utils.FileUtils.readImageFile(blob, function (image) {
+      pskl.app.fileDropperService.dropPosition_ = {x: 0, y: 0};
+      pskl.app.fileDropperService.onImageLoaded_(image, blob);
+    }.bind(this));
+  };
+
+  ns.SelectionManager.prototype.pasteText_ = function(clipboardItem) {
+    var blob = clipboardItem.getAsString(function (selectionString) {
+      var selectionData = JSON.parse(selectionString);
+      var time = selectionData.time;
+      var pixels = selectionData.pixels;
+
+      if (this.currentSelection && this.currentSelection.time >= time) {
+        // If the local selection is newer or equal to the one coming from the clipboard event
+        // use the local one. The reason is that the "move" information is only updated locally
+        // without synchronizing it to the clipboard.
+        // TODO: the selection should store the origin of the selection and the selection itself
+        // separately.
+        pixels = this.currentSelection.pixels;
+      }
+
+      if (pixels) {
+        // If the current clipboard data is some random text, pixels will not be defined.
+        this.pastePixelsOnCurrentFrame_(pixels);
+      }
+    }.bind(this));
+  };
+
+  ns.SelectionManager.prototype.pastePixelsOnCurrentFrame_ = function (pixels) {
     var frame = this.piskelController.getCurrentFrame();
 
     this.pastePixels_(frame, pixels);
@@ -123,8 +176,7 @@
     var tool = pskl.app.drawingController.currentToolBehavior;
     var isSelectionTool = tool instanceof pskl.tools.drawing.selection.BaseSelect;
     if (isSelectionTool) {
-      var overlay = pskl.app.drawingController.overlayFrame;
-      tool.commitSelection(overlay);
+      tool.commitSelection();
     }
   };
 
@@ -147,13 +199,6 @@
     });
   };
 
-  ns.SelectionManager.prototype.copy = function() {
-    if (this.currentSelection && this.piskelController.getCurrentFrame()) {
-      this.currentSelection.fillSelectionFromFrame(this.piskelController.getCurrentFrame());
-      window.localStorage.setItem('piskel.clipboard', JSON.stringify(this.currentSelection));
-    }
-  };
-
   /**
    * @private
    */

src/js/service/BackupService.js

@@ -1,65 +1,161 @@
 (function () {
   var ns = $.namespace('pskl.service');
 
-  // 1 minute = 1000 * 60
-  var BACKUP_INTERVAL = 1000 * 60;
+  var ONE_SECOND = 1000;
+  var ONE_MINUTE = 60 * ONE_SECOND;
 
-  ns.BackupService = function (piskelController) {
+  // Save every minute = 1000 * 60
+  var BACKUP_INTERVAL = ONE_MINUTE;
+  // Store a new snapshot every 5 minutes.
+  var SNAPSHOT_INTERVAL = ONE_MINUTE * 5;
+  // Store up to 12 snapshots for a piskel session, min. 1 hour of work
+  var MAX_SNAPSHOTS_PER_SESSION = 12;
+  var MAX_SESSIONS = 10;
+
+  ns.BackupService = function (piskelController, backupDatabase) {
     this.piskelController = piskelController;
-    this.lastHash = null;
+    // Immediately store the current when initializing the Service to avoid storing
+    // empty sessions.
+    this.lastHash = this.piskelController.getPiskel().getHash();
+    this.nextSnapshotDate = -1;
+
+    // backupDatabase can be provided for testing purposes.
+    this.backupDatabase = backupDatabase || new pskl.database.BackupDatabase();
   };
 
   ns.BackupService.prototype.init = function () {
-    var previousPiskel = window.localStorage.getItem('bkp.next.piskel');
-    var previousInfo = window.localStorage.getItem('bkp.next.info');
-    if (previousPiskel && previousInfo) {
-      this.savePiskel_('prev', previousPiskel, previousInfo);
-    }
-
+    this.backupDatabase.init().then(function () {
       window.setInterval(this.backup.bind(this), BACKUP_INTERVAL);
+    }.bind(this));
+  };
+
+  // This is purely exposed for testing, so that backup dates can be set programmatically.
+  ns.BackupService.prototype.currentDate_ = function () {
+    return Date.now();
   };
 
   ns.BackupService.prototype.backup = function () {
     var piskel = this.piskelController.getPiskel();
-    var descriptor = piskel.getDescriptor();
     var hash = piskel.getHash();
-    var info = {
-      name : descriptor.name,
-      description : descriptor.info,
-      date : Date.now(),
-      hash : hash
-    };
 
     // Do not save an unchanged piskel
-    if (hash !== this.lastHash) {
+    if (hash === this.lastHash) {
+      return Q.resolve();
+    }
+
+    // Update the hash
+    // TODO: should only be done after a successful save.
     this.lastHash = hash;
-      var serializedPiskel = pskl.utils.serialization.Serializer.serialize(piskel);
-      this.savePiskel_('next', serializedPiskel, JSON.stringify(info));
-    }
+
+    // Prepare the backup snapshot.
+    var descriptor = piskel.getDescriptor();
+    var date = this.currentDate_();
+    var snapshot = {
+      session_id: pskl.app.sessionId,
+      date: date,
+      name: descriptor.name,
+      description: descriptor.description,
+      frames: piskel.getFrameCount(),
+      width: piskel.getWidth(),
+      height: piskel.getHeight(),
+      fps: piskel.getFPS(),
+      serialized: pskl.utils.serialization.Serializer.serialize(piskel)
     };
 
-  ns.BackupService.prototype.getPreviousPiskelInfo = function () {
-    var previousInfo = window.localStorage.getItem('bkp.prev.info');
-    if (previousInfo) {
-      return JSON.parse(previousInfo);
+    return this.getSnapshotsBySessionId(pskl.app.sessionId).then(function (snapshots) {
+      var latest = snapshots[0];
+
+      if (latest && date < this.nextSnapshotDate) {
+        // update the latest snapshot
+        snapshot.id = latest.id;
+        return this.backupDatabase.updateSnapshot(snapshot);
+      } else {
+        // add a new snapshot
+        this.nextSnapshotDate = date + SNAPSHOT_INTERVAL;
+        return this.backupDatabase.createSnapshot(snapshot).then(function () {
+          if (snapshots.length >= MAX_SNAPSHOTS_PER_SESSION) {
+            // remove oldest snapshot
+            return this.backupDatabase.deleteSnapshot(snapshots[snapshots.length - 1]);
+          }
+        }.bind(this)).then(function () {
+          var isNewSession = !latest;
+          if (!isNewSession) {
+            return;
+          }
+          return this.backupDatabase.getSessions().then(function (sessions) {
+            if (sessions.length <= MAX_SESSIONS) {
+              // If MAX_SESSIONS has not been reached, no need to delete
+              // previous sessions.
+              return;
             }
-  };
 
-  ns.BackupService.prototype.load = function() {
-    var previousPiskel = window.localStorage.getItem('bkp.prev.piskel');
-    previousPiskel = JSON.parse(previousPiskel);
+            // Prepare an array containing all the ids of the sessions to be deleted.
+            var sessionIdsToDelete = sessions.sort(function (s1, s2) {
+              return s1.startDate - s2.startDate;
+            }).map(function (s) {
+              return s.id;
+            }).slice(0, sessions.length - MAX_SESSIONS);
 
-    pskl.utils.serialization.Deserializer.deserialize(previousPiskel, function (piskel) {
-      pskl.app.piskelController.setPiskel(piskel);
+            // Delete all the extra sessions.
+            return Q.all(sessionIdsToDelete.map(function (id) {
+              return this.deleteSession(id);
+            }.bind(this)));
+          }.bind(this));
+        }.bind(this));
+      }
+    }.bind(this)).catch(function (e) {
+      console.error(e);
     });
   };
 
-  ns.BackupService.prototype.savePiskel_ = function (type, piskel, info) {
-    try {
-      window.localStorage.setItem('bkp.' + type + '.piskel', piskel);
-      window.localStorage.setItem('bkp.' + type + '.info', info);
-    } catch (e) {
-      console.error('Could not save piskel backup in localStorage.', e);
+  ns.BackupService.prototype.getSnapshotsBySessionId = function (sessionId) {
+    return this.backupDatabase.getSnapshotsBySessionId(sessionId);
+  };
+
+  ns.BackupService.prototype.deleteSession = function (sessionId) {
+    return this.backupDatabase.deleteSnapshotsForSession(sessionId);
+  };
+
+  ns.BackupService.prototype.getPreviousPiskelInfo = function () {
+    return this.backupDatabase.findLastSnapshot(function (snapshot) {
+      return snapshot.session_id !== pskl.app.sessionId;
+    });
+  };
+
+  ns.BackupService.prototype.list = function() {
+    return this.backupDatabase.getSessions();
+  };
+
+  ns.BackupService.prototype.loadSnapshotById = function(snapshotId) {
+    var deferred = Q.defer();
+
+    this.backupDatabase.getSnapshot(snapshotId).then(function (snapshot) {
+      pskl.utils.serialization.Deserializer.deserialize(
+        JSON.parse(snapshot.serialized),
+        function (piskel) {
+          pskl.app.piskelController.setPiskel(piskel);
+          deferred.resolve();
         }
+      );
+    });
+
+    return deferred.promise;
+  };
+
+  // Load "latest" backup snapshot.
+  ns.BackupService.prototype.load = function() {
+    var deferred = Q.defer();
+
+    this.getPreviousPiskelInfo().then(function (snapshot) {
+      pskl.utils.serialization.Deserializer.deserialize(
+        JSON.parse(snapshot.serialized),
+        function (piskel) {
+          pskl.app.piskelController.setPiskel(piskel);
+          deferred.resolve();
+        }
+      );
+    });
+
+    return deferred.promise;
   };
 })();

src/js/service/BeforeUnloadService.js

@@ -30,9 +30,11 @@
   };
 
   ns.BeforeUnloadService.prototype.onBeforeUnload = function (evt) {
+    // Attempt one last backup. Some of it may fail due to the asynchronous
+    // nature of IndexedDB.
     pskl.app.backupService.backup();
     if (pskl.app.savedStatusService.isDirty()) {
-      var confirmationMessage = 'Your Piskel seems to have unsaved changes';
+      var confirmationMessage = 'Your current sprite has unsaved changes. Are you sure you want to quit?';
 
       evt = evt || window.event;
       if (evt) {

src/js/service/ClipboardService.js

@@ -0,0 +1,25 @@
+(function () {
+  var ns = $.namespace('pskl.service');
+
+  ns.ClipboardService = function (piskelController) {
+    this.piskelController = piskelController;
+  };
+
+  ns.ClipboardService.prototype.init = function () {
+    window.addEventListener('copy', this._onCopy.bind(this), true);
+    window.addEventListener('cut', this._onCut.bind(this), true);
+    window.addEventListener('paste', this._onPaste.bind(this), true);
+  };
+
+  ns.ClipboardService.prototype._onCut = function (event) {
+    $.publish(Events.CLIPBOARD_CUT, event);
+  };
+
+  ns.ClipboardService.prototype._onCopy = function (event) {
+    $.publish(Events.CLIPBOARD_COPY, event);
+  };
+
+  ns.ClipboardService.prototype._onPaste = function (event) {
+    $.publish(Events.CLIPBOARD_PASTE, event);
+  };
+})();

src/js/service/FileDropperService.js

@@ -35,13 +35,9 @@
       var isPiskel = /\.piskel$/i.test(file.name);
       var isPalette = /\.(gpl|txt|pal)$/i.test(file.name);
       if (isImage) {
-        $.publish(Events.DIALOG_SHOW, {
-          dialogId : 'import',
-          initArgs : {
-            rawFiles: [file]
-          }
-        });
-        // pskl.utils.FileUtils.readImageFile(file, this.onImageLoaded_.bind(this));
+        pskl.utils.FileUtils.readImageFile(file, function (image) {
+          this.onImageLoaded_(image, file);
+        }.bind(this));
       } else if (isPiskel) {
         pskl.utils.PiskelFileUtils.loadFromFile(file, this.onPiskelFileLoaded_, this.onPiskelFileError_);
       } else if (isPalette) {
@@ -56,7 +52,7 @@
   };
 
   ns.FileDropperService.prototype.onPiskelFileLoaded_ = function (piskel) {
-    if (window.confirm('This will replace your current animation')) {
+    if (window.confirm(Constants.CONFIRM_OVERWRITE)) {
       pskl.app.piskelController.setPiskel(piskel);
     }
   };
@@ -65,10 +61,23 @@
     $.publish(Events.PISKEL_FILE_IMPORT_FAILED, [reason]);
   };
 
-  ns.FileDropperService.prototype.onImageLoaded_ = function (importedImage) {
+  ns.FileDropperService.prototype.onImageLoaded_ = function (importedImage, file) {
+    var piskelWidth = pskl.app.piskelController.getWidth();
+    var piskelHeight = pskl.app.piskelController.getHeight();
+
     if (this.isMultipleFiles_) {
       this.piskelController.addFrameAtCurrentIndex();
       this.piskelController.selectNextFrame();
+    } else if (importedImage.width > piskelWidth || importedImage.height > piskelHeight) {
+      // For single file imports, if the file is too big, trigger the import wizard.
+      $.publish(Events.DIALOG_SHOW, {
+        dialogId : 'import',
+        initArgs : {
+          rawFiles: [file]
+        }
+      });
+
+      return;
     }
 
     var currentFrame = this.piskelController.getCurrentFrame();

src/js/service/ImageUploadService.js

@@ -15,10 +15,17 @@
       data : imageData
     };
 
+    var protocol = pskl.utils.Environment.isHttps() ? 'https' : 'http';
     var wrappedSuccess = function (response) {
-      success(Constants.IMAGE_SERVICE_GET_URL + response.responseText);
+      var getUrl = pskl.utils.Template.replace(Constants.IMAGE_SERVICE_GET_URL, {
+        protocol: protocol
+      });
+      success(getUrl + response.responseText);
     };
 
-    pskl.utils.Xhr.post(Constants.IMAGE_SERVICE_UPLOAD_URL, data, wrappedSuccess, error);
+    var uploadUrl = pskl.utils.Template.replace(Constants.IMAGE_SERVICE_UPLOAD_URL, {
+      protocol: protocol
+    });
+    pskl.utils.Xhr.post(uploadUrl, data, wrappedSuccess, error);
   };
 })();

src/js/service/keyboard/KeycodeTranslator.js

@@ -3,6 +3,7 @@
     8 : 'back',
     13 : 'enter',
     27 : 'esc',
+    32 : 'space',
     37 : 'left',
     38 : 'up',
     39 : 'right',

src/js/service/keyboard/Shortcuts.js

@@ -61,7 +61,11 @@
       ONION_SKIN : createShortcut('onion-skin', 'Toggle onion skin', 'alt+O'),
       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')
+      CLOSE_POPUP : createShortcut('close-popup', 'Close an opened popup', 'ESC'),
+      OFFSET_UP : createShortcut('move-up', 'Move viewport up', 'shift+up'),
+      OFFSET_RIGHT : createShortcut('move-right', 'Move viewport right', 'shift+right'),
+      OFFSET_DOWN : createShortcut('move-down', 'Move viewport down', 'shift+down'),
+      OFFSET_LEFT : createShortcut('move-left', 'Move viewport left', 'shift+left'),
     },
 
     STORAGE : {
@@ -80,6 +84,10 @@
         '123456789'.split(''), '1 to 9')
     },
 
+    DEBUG : {
+      RELOAD_STYLES : createShortcut('move-left', 'Move viewport left', 'ctrl+alt+R'),
+    },
+
     CATEGORIES : ['TOOL', 'SELECTION', 'MISC', 'STORAGE', 'COLOR']
   };
 })();

src/js/service/palette/PaletteService.js

@@ -3,11 +3,12 @@
 
   ns.PaletteService = function () {
     this.dynamicPalettes = [];
-    this.localStorageService = window.localStorage;
+    // Exposed for tests.
+    this.localStorageGlobal = window.localStorage;
   };
 
   ns.PaletteService.prototype.getPalettes = function () {
-    var palettesString = this.localStorageService.getItem('piskel.palettes');
+    var palettesString = this.localStorageGlobal.getItem('piskel.palettes');
     var palettes = JSON.parse(palettesString) || [];
     palettes = palettes.map(function (palette) {
       return pskl.model.Palette.fromObject(palette);
@@ -54,7 +55,7 @@
     palettes = palettes.filter(function (palette) {
       return this.dynamicPalettes.indexOf(palette) === -1;
     }.bind(this));
-    this.localStorageService.setItem('piskel.palettes', JSON.stringify(palettes));
+    this.localStorageGlobal.setItem('piskel.palettes', JSON.stringify(palettes));
     $.publish(Events.PALETTE_LIST_UPDATED);
   };
 

src/js/service/performance/PerformanceReport.js

@@ -16,7 +16,7 @@
    */
   ns.PerformanceReport = function (piskel, colorsCount) {
     var pixels = piskel.getWidth() * piskel.getHeight();
-    this.resolution = pixels > (500 * 500);
+    this.resolution = pixels > (512 * 512);
 
     var layersCount = piskel.getLayers().length;
     this.layers = layersCount > 25;
@@ -24,10 +24,10 @@
     var framesCount = piskel.getLayerAt(0).size();
     this.frames = framesCount > 100;
 
-    this.colors = colorsCount > 100;
+    this.colors = colorsCount >= 256;
 
-    var overallScore = (pixels / 2500) + (layersCount * 4) + framesCount + colorsCount;
-    this.overall = overallScore > 100;
+    var overallScore = (pixels / 2620) + (layersCount * 4) + framesCount + (colorsCount * 100 / 256);
+    this.overall = overallScore > 200;
   };
 
   ns.PerformanceReport.prototype.equals = function (report) {

src/js/service/storage/IndexedDbStorageService.js

@@ -0,0 +1,57 @@
+(function () {
+  var ns = $.namespace('pskl.service.storage');
+
+  ns.IndexedDbStorageService = function (piskelController) {
+    this.piskelController = piskelController;
+    this.piskelDatabase = new pskl.database.PiskelDatabase();
+  };
+
+  ns.IndexedDbStorageService.prototype.init = function () {
+    this.piskelDatabase.init().catch(function (e) {
+      console.log('Failed to initialize PiskelDatabase, local browser saves will be unavailable.');
+    });
+  };
+
+  ns.IndexedDbStorageService.prototype.save = function (piskel) {
+    var name = piskel.getDescriptor().name;
+    var description = piskel.getDescriptor().description;
+    var date = Date.now();
+    var serialized = pskl.utils.serialization.Serializer.serialize(piskel);
+
+    return this.save_(name, description, date, serialized);
+  };
+
+  ns.IndexedDbStorageService.prototype.save_ = function (name, description, date, serialized) {
+    return this.piskelDatabase.get(name).then(function (piskelData) {
+      if (typeof piskelData !== 'undefined') {
+        return this.piskelDatabase.update(name, description, date, serialized);
+      } else {
+        return this.piskelDatabase.create(name, description, date, serialized);
+      }
+    }.bind(this));
+  };
+
+  ns.IndexedDbStorageService.prototype.load = function (name) {
+    return this.piskelDatabase.get(name).then(function (piskelData) {
+      if (typeof piskelData !== 'undefined') {
+        var serialized = piskelData.serialized;
+        pskl.utils.serialization.Deserializer.deserialize(
+          JSON.parse(serialized),
+          function (piskel) {
+            pskl.app.piskelController.setPiskel(piskel);
+          }
+        );
+      } else {
+        console.log('no local browser save found for name: ' + name);
+      }
+    });
+  };
+
+  ns.IndexedDbStorageService.prototype.remove = function (name) {
+    return this.piskelDatabase.delete(name);
+  };
+
+  ns.IndexedDbStorageService.prototype.getKeys = function () {
+    return this.piskelDatabase.list();
+  };
+})();

src/js/service/storage/StorageService.js

@@ -27,10 +27,15 @@
     return this.delegateSave_(pskl.app.galleryStorageService, piskel);
   };
 
+  // @deprecated, use saveToIndexedDb unless indexedDb is not available.
   ns.StorageService.prototype.saveToLocalStorage = function (piskel) {
     return this.delegateSave_(pskl.app.localStorageService, piskel);
   };
 
+  ns.StorageService.prototype.saveToIndexedDb = function (piskel) {
+    return this.delegateSave_(pskl.app.indexedDbStorageService, piskel);
+  };
+
   ns.StorageService.prototype.saveToFileDownload = function (piskel) {
     return this.delegateSave_(pskl.app.fileDownloadStorageService, piskel);
   };
@@ -67,7 +72,7 @@
       // wrap in timeout in order to start saving only after event.preventDefault
       // has been done
       window.setTimeout(function () {
-        this.saveToLocalStorage(this.piskelController.getPiskel());
+        this.saveToIndexedDb(this.piskelController.getPiskel());
       }.bind(this), 0);
     }
   };

src/js/tools/drawing/Circle.js

@@ -35,7 +35,11 @@
     var evenY = (coords.y0 + coords.y1) % 2;
     var rX = coords.x1 - xC;
     var rY = coords.y1 - yC;
-    var x, y, angle, r;
+
+    var x;
+    var y;
+    var angle;
+    var r;
 
     if (penSize == 1) {
       for (x = coords.x0 ; x <= xC ; x++) {

src/js/tools/drawing/Stroke.js

@@ -97,8 +97,31 @@
       linePixels = pskl.PixelUtils.getLinePixels(col, this.startCol, row, this.startRow);
     }
 
-    pskl.PixelUtils.resizePixels(linePixels, penSize).forEach(function (point) {
-      targetFrame.setPixel(point[0], point[1], color);
+    //draw the square ends of the line
+    pskl.PixelUtils.resizePixel(linePixels[0].col, linePixels[0].row, penSize)
+      .forEach(function (point) {targetFrame.setPixel(point[0], point[1], color);});
+    pskl.PixelUtils.resizePixel(linePixels[linePixels.length - 1].col, linePixels[linePixels.length - 1].row, penSize)
+      .forEach(function (point) {targetFrame.setPixel(point[0], point[1],color);});
+
+    //for each step along the line, draw an x centered on that pixel of size penSize
+    linePixels.forEach(function (point) {
+      for (var i = 0; i < penSize; i++) {
+        targetFrame.setPixel(
+          point.col - Math.floor(penSize / 2) + i, point.row - Math.floor(penSize / 2) + i, color
+        );
+        targetFrame.setPixel(
+          point.col - Math.floor(penSize / 2) + i, point.row + Math.ceil(penSize / 2) - i - 1, color
+        );
+        //draw an additional x directly next to the first to prevent unwanted dithering
+        if (i !== 0) {
+          targetFrame.setPixel(
+            point.col - Math.floor(penSize / 2) + i, point.row - Math.floor(penSize / 2) + i - 1, color
+          );
+          targetFrame.setPixel(
+            point.col - Math.floor(penSize / 2) + i, point.row + Math.ceil(penSize / 2) - i, color
+          );
+        }
+      }
     });
   };
 

src/js/tools/drawing/VerticalMirrorPen.js

@@ -44,10 +44,17 @@
   };
 
   ns.VerticalMirrorPen.prototype.getSymmetricCol_ = function(col, frame) {
-    return frame.getWidth() - col - 1;
+    return frame.getWidth() - col - this.getPenSizeOffset_();
   };
 
   ns.VerticalMirrorPen.prototype.getSymmetricRow_ = function(row, frame) {
-    return frame.getHeight() - row - 1;
+    return frame.getHeight() - row - this.getPenSizeOffset_();
+  };
+
+  /**
+   * Depending on the pen size, the mirrored index need to have an offset of 1 pixel.
+   */
+  ns.VerticalMirrorPen.prototype.getPenSizeOffset_ = function(row, frame) {
+    return pskl.app.penSizeService.getPenSize() % 2;
   };
 })();

src/js/tools/drawing/selection/AbstractDragSelect.js

@@ -16,7 +16,7 @@
   ns.AbstractDragSelect.prototype.onSelectStart_ = function (col, row, frame, overlay) {
     if (this.hasSelection) {
       this.hasSelection = false;
-      this.commitSelection(overlay);
+      this.commitSelection();
     } else {
       this.hasSelection = true;
       this.onDragSelectStart_(col, row);

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

@@ -26,6 +26,8 @@
       {key : 'ctrl+v', description : 'Paste the copied area'},
       {key : 'shift', description : 'Hold to move the content'}
     ];
+
+    $.subscribe(Events.SELECTION_DISMISSED, this.onSelectionDismissed_.bind(this));
   };
 
   pskl.utils.inherit(ns.BaseSelect, pskl.tools.drawing.BaseTool);
@@ -52,7 +54,7 @@
       this.mode = 'moveSelection';
       if (event.shiftKey && !this.isMovingContent_) {
         this.isMovingContent_ = true;
-        $.publish(Events.SELECTION_CUT);
+        $.publish(Events.CLIPBOARD_CUT);
         this.drawSelectionOnOverlay_(overlay);
       }
       this.onSelectionMoveStart_(col, row, frame, overlay);
@@ -111,16 +113,24 @@
   };
 
   /**
-   * Protected method, should be called when the selection is dismissed.
+   * Protected method, should be called when the selection is committed,
+   * typically by clicking outside of the selected area.
    */
-  ns.BaseSelect.prototype.commitSelection = function (overlay) {
+  ns.BaseSelect.prototype.commitSelection = function () {
     if (this.isMovingContent_) {
-      $.publish(Events.SELECTION_PASTE);
+      $.publish(Events.CLIPBOARD_PASTE);
       this.isMovingContent_ = false;
     }
 
     // Clean previous selection:
     $.publish(Events.SELECTION_DISMISSED);
+  };
+
+  /**
+   * Protected method, should be called when the selection is dismissed.
+   */
+  ns.BaseSelect.prototype.onSelectionDismissed_ = function () {
+    var overlay = pskl.app.drawingController.overlayFrame;
     overlay.clear();
     this.hasSelection = false;
   };

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

@@ -24,7 +24,7 @@
   ns.ShapeSelect.prototype.onSelectStart_ = function (col, row, frame, overlay) {
     if (this.hasSelection) {
       this.hasSelection = false;
-      this.commitSelection(overlay);
+      this.commitSelection();
     } else {
       this.hasSelection = true;
       // From the pixel clicked, get shape using an algorithm similar to the paintbucket one:

src/js/tools/transform/Crop.js

@@ -0,0 +1,127 @@
+(function () {
+  var ns = $.namespace('pskl.tools.transform');
+
+  ns.Crop = function () {
+    this.toolId = 'tool-crop';
+    this.helpText = 'Crop the sprite';
+    this.tooltipDescriptors = [
+      {
+        description : 'Crop to fit the content or the selection. ' +
+                      'Applies to all frames and layers!'
+      }
+    ];
+  };
+
+  // This transform tool is the only one that adapts to the current selection and can't
+  // rely on the default AbstractTransformTool behavior.
+  pskl.utils.inherit(ns.Crop, pskl.tools.Tool);
+
+  ns.Crop.prototype.applyTransformation = function (evt) {
+    var frames = this.getFrames_();
+
+    var boundaries;
+    if (pskl.app.selectionManager.currentSelection) {
+      // If we have a selection, we will compute the boundaries of the selection instead
+      // of looping on the frames.
+      boundaries = this.getBoundariesForSelection_();
+    } else {
+      boundaries = pskl.tools.transform.TransformUtils.getBoundaries(frames);
+    }
+
+    var applied = this.applyTool_(frames, boundaries);
+    if (applied) {
+      this.raiseSaveStateEvent({
+        boundaries : boundaries
+      });
+    }
+  };
+
+  ns.Crop.prototype.replay = function (frame, replayData) {
+    var frames = this.getFrames_();
+    this.applyTool_(frames, replayData.boundaries);
+  };
+
+  ns.Crop.prototype.applyTool_ = function (frames, boundaries) {
+    if (boundaries.minx >= boundaries.maxx) {
+      return false;
+    }
+
+    var currentPiskel = pskl.app.piskelController.getPiskel();
+    var width = 1 + boundaries.maxx - boundaries.minx;
+    var height = 1 + boundaries.maxy - boundaries.miny;
+
+    if (width === currentPiskel.getWidth() && height === currentPiskel.getHeight()) {
+      // Do not perform an unnecessary resize if it's a noop.
+      return false;
+    }
+
+    frames.forEach(function (frame) {
+      pskl.tools.transform.TransformUtils.moveFramePixels(frame, -boundaries.minx, -boundaries.miny);
+    });
+
+    var piskel = pskl.utils.ResizeUtils.resizePiskel(currentPiskel, {
+      width :  1 + boundaries.maxx - boundaries.minx,
+      height :  1 + boundaries.maxy - boundaries.miny,
+      origin: 'TOP-LEFT',
+      resizeContent: false
+    });
+
+    // Clear the current selection.
+    $.publish(Events.SELECTION_DISMISSED);
+
+    // Replace the current piskel with the resized version.
+    pskl.app.piskelController.setPiskel(piskel, {
+      preserveState: true,
+      // Saving is already handled by recording the transform tool action, no need for
+      // an expensive snapshot.
+      noSnapshot: true
+    });
+
+    return true;
+  };
+
+  /**
+   * Retrieve the list of frames for the current piskel in a single flat array.
+   */
+  ns.Crop.prototype.getFrames_ = function () {
+    var currentPiskel = pskl.app.piskelController.getPiskel();
+
+    // Get all frames in a single array.
+    var frames = currentPiskel.getLayers().map(function (l) {
+      return l.getFrames();
+    }).reduce(function (p, n) {
+      return p.concat(n);
+    });
+
+    return frames;
+  };
+
+  /**
+   * Retrieve a boundaries object {minx, maxx, miny, maxy} for the current selection.
+   */
+  ns.Crop.prototype.getBoundariesForSelection_ = function () {
+    var selectionManager = pskl.app.selectionManager;
+    var pixels = selectionManager.currentSelection.pixels;
+
+    // Fetch the first frame to perform out-of-bound checks.
+    var currentPiskel = pskl.app.piskelController.getPiskel();
+    var exampleFrame = currentPiskel.getLayerAt(0).getFrameAt(0);
+
+    // Anything different from Constants.TRANSPARENT_COLOR toInt().
+    var FAKE_COLOR = 1;
+    // Create a fake frame reimplementing the forEachPixel API.
+    var selectionFrame = {
+      forEachPixel : function (callback) {
+        for (var i = 0; i < pixels.length ; i++) {
+          var pixel = pixels[i];
+          // Selections might contain out of bound pixels, filter those out.
+          if (exampleFrame.containsPixel(pixel.col, pixel.row)) {
+            callback(FAKE_COLOR, pixel.col, pixel.row);
+          }
+        }
+      }
+    };
+
+    return pskl.tools.transform.TransformUtils.getBoundaries([selectionFrame]);
+  };
+})();

src/js/tools/transform/TransformUtils.js

@@ -64,13 +64,15 @@
       return frame;
     },
 
-    center : function(frame) {
-      // Figure out the boundary
-      var minx = frame.width;
-      var miny = frame.height;
+    getBoundaries : function(frames) {
+      var minx = +Infinity;
+      var miny = +Infinity;
       var maxx = 0;
       var maxy = 0;
+
       var transparentColorInt = pskl.utils.colorToInt(Constants.TRANSPARENT_COLOR);
+
+      frames.forEach(function (frame) {
         frame.forEachPixel(function (color, x, y) {
           if (color !== transparentColorInt) {
             minx = Math.min(minx, x);
@@ -79,17 +81,17 @@
             maxy = Math.max(maxy, y);
           }
         });
+      });
 
-      // Calculate how much to move the pixels
-      var bw = (maxx - minx + 1) / 2;
-      var bh = (maxy - miny + 1) / 2;
-      var fw = frame.width / 2;
-      var fh = frame.height / 2;
+      return {
+        minx: minx,
+        maxx: maxx,
+        miny: miny,
+        maxy: maxy,
+      };
+    },
 
-      var dx = Math.floor(fw - bw - minx);
-      var dy = Math.floor(fh - bh - miny);
-
-      // Actually move the pixels
+    moveFramePixels : function (frame, dx, dy) {
       var clone = frame.clone();
       frame.forEachPixel(function(color, x, y) {
         var _x = x;
@@ -104,7 +106,24 @@
           frame.setPixel(_x, _y, Constants.TRANSPARENT_COLOR);
         }
       });
+    },
 
+    center : function(frame) {
+      // Figure out the boundary
+      var boundaries = ns.TransformUtils.getBoundaries([frame]);
+
+      // Calculate how much to move the pixels
+      var bw = (boundaries.maxx - boundaries.minx + 1) / 2;
+      var bh = (boundaries.maxy - boundaries.miny + 1) / 2;
+      var fw = frame.width / 2;
+      var fh = frame.height / 2;
+
+      var dx = Math.floor(fw - bw - boundaries.minx);
+      var dy = Math.floor(fh - bh - boundaries.miny);
+
+      // Actually move the pixels
+
+      ns.TransformUtils.moveFramePixels(frame, dx, dy);
       return frame;
     }
   };

src/js/utils/Environment.js

@@ -23,7 +23,15 @@
 
     isIntegrationTest : function () {
       return window.location.href.indexOf('integration-test') !== -1;
-    }
+    },
+
+    isDebug : function () {
+      return window.location.href.indexOf('debug') !== -1;
+    },
+
+    isHttps : function () {
+      return window.location.href.indexOf('https://') === 0;
+    },
   };
 
 })();

src/js/utils/FunctionUtils.js

@@ -21,7 +21,8 @@
      * every X milliseconds, where X is the provided interval.
      */
     throttle : function (fn, interval) {
-      var last, timer;
+      var last;
+      var timer;
       return function () {
         var now = Date.now();
         if (last && now < last + interval) {

src/js/utils/PixelUtils.js

@@ -182,7 +182,7 @@
       var loopCount = 0;
       var cellCount = frame.getWidth() * frame.getHeight();
       while (queue.length > 0) {
-        loopCount ++;
+        loopCount++;
 
         var currentItem = queue.pop();
 

src/js/utils/Template.js

@@ -28,7 +28,10 @@
       var dummyEl = ns.Template._getDummyEl();
       dummyEl.innerHTML = html;
       var element = dummyEl.children[0];
+
+      if (!pskl.utils.UserAgent.isIE11) {
         dummyEl.innerHTML = '';
+      }
 
       return element;
     },
@@ -78,7 +81,9 @@
       dummyEl.textContent = string;
       var sanitizedString = dummyEl.innerHTML;
 
+      if (!pskl.utils.UserAgent.isIE11) {
         dummyEl.innerHTML = '';
+      }
 
       return sanitizedString;
     },
@@ -87,9 +92,9 @@
       // IE11 specific implementation
       function () {
         return document.createElement('div');
-        }
+      } :
       // Normal, sane browsers implementation.
-      : function () {
+      function () {
         if (!ns.Template._dummyEl) {
           ns.Template._dummyEl = document.createElement('div');
         }

src/js/utils/UserSettings.js

@@ -2,6 +2,8 @@
   var ns = $.namespace('pskl');
 
   ns.UserSettings = {
+    GRID_COLOR : 'GRID_COLOR',
+    GRID_ENABLED : 'GRID_ENABLED',
     GRID_WIDTH : 'GRID_WIDTH',
     MAX_FPS : 'MAX_FPS',
     DEFAULT_SIZE : 'DEFAULT_SIZE',
@@ -15,11 +17,16 @@
     LAYER_OPACITY : 'LAYER_OPACITY',
     EXPORT_SCALE: 'EXPORT_SCALE',
     EXPORT_TAB: 'EXPORT_TAB',
+    EXPORT_GIF_REPEAT: 'EXPORT_GIF_REPEAT',
     PEN_SIZE : 'PEN_SIZE',
     RESIZE_SETTINGS: 'RESIZE_SETTINGS',
     COLOR_FORMAT: 'COLOR_FORMAT',
+    TRANSFORM_SHOW_MORE: 'TRANSFORM_SHOW_MORE',
+    PREFERENCES_TAB: 'PREFERENCES_TAB',
     KEY_TO_DEFAULT_VALUE_MAP_ : {
-      'GRID_WIDTH' : 0,
+      'GRID_COLOR' : Constants.TRANSPARENT_COLOR,
+      'GRID_ENABLED' : false,
+      'GRID_WIDTH' : 1,
       'MAX_FPS' : 24,
       'DEFAULT_SIZE' : {
         width : Constants.DEFAULT.WIDTH,
@@ -35,6 +42,7 @@
       'LAYER_PREVIEW' : true,
       'EXPORT_SCALE' : 1,
       'EXPORT_TAB' : 'gif',
+      'EXPORT_GIF_REPEAT' : true,
       'PEN_SIZE' : 1,
       'RESIZE_SETTINGS': {
         maintainRatio : true,
@@ -42,6 +50,8 @@
         origin : 'TOPLEFT'
       },
       COLOR_FORMAT: 'hex',
+      TRANSFORM_SHOW_MORE: false,
+      PREFERENCES_TAB: 'misc',
     },
 
     /**
@@ -77,7 +87,7 @@
     /**
      * @private
      */
-    readFromLocalStorage_ : function(key) {
+    readFromLocalStorage_ : function (key) {
       var value = window.localStorage[key];
       if (typeof value != 'undefined') {
         value = JSON.parse(value);
@@ -88,7 +98,7 @@
     /**
      * @private
      */
-    writeToLocalStorage_ : function(key, value) {
+    writeToLocalStorage_ : function (key, value) {
       // TODO(grosbouddha): Catch storage exception here.
       window.localStorage[key] = JSON.stringify(value);
     },
@@ -103,7 +113,7 @@
     /**
      * @private
      */
-    checkKeyValidity_ : function(key) {
+    checkKeyValidity_ : function (key) {
       if (key.indexOf(pskl.service.keyboard.Shortcut.USER_SETTINGS_PREFIX) === 0) {
         return true;
       }
@@ -114,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/widgets/HslRgbColorPicker.js

@@ -227,7 +227,8 @@
     var dimension = slider.dataset.dimension;
     var model = slider.dataset.model;
 
-    var start, end;
+    var start;
+    var end;
     var isHueSlider = dimension === 'h';
     if (!isHueSlider) {
       var colors = this.getSliderBackgroundColors_(model, dimension);

src/js/widgets/SizePicker.js

@@ -0,0 +1,50 @@
+(function () {
+  var ns = $.namespace('pskl.widgets');
+
+  ns.SizePicker = function (onChange) {
+    this.onChange = onChange;
+  };
+
+  ns.SizePicker.prototype.init = function (container) {
+    this.container = container;
+    pskl.utils.Event.addEventListener(this.container, 'click', this.onSizeOptionClick_, this);
+  };
+
+  ns.SizePicker.prototype.destroy = function () {
+    pskl.utils.Event.removeAllEventListeners(this);
+  };
+
+  ns.SizePicker.prototype.getSize = function () {
+    var selectedOption = this.container.querySelector('.selected');
+    return selectedOption ? selectedOption.dataset.size : null;
+  };
+
+  ns.SizePicker.prototype.setSize = function (size) {
+    if (this.getSize() === size) {
+      return;
+    }
+
+    pskl.utils.Dom.removeClass('labeled', this.container);
+    pskl.utils.Dom.removeClass('selected', this.container);
+    var selectedOption;
+    if (size <= 4) {
+      selectedOption = this.container.querySelector('[data-size="' + size + '"]');
+    } else {
+      selectedOption = this.container.querySelector('[data-size="4"]');
+      selectedOption.classList.add('labeled');
+      selectedOption.setAttribute('real-size', size);
+    }
+    if (selectedOption) {
+      selectedOption.classList.add('selected');
+    }
+  };
+
+  ns.SizePicker.prototype.onSizeOptionClick_ = function (e) {
+    var size = e.target.dataset.size;
+    if (!isNaN(size)) {
+      size = parseInt(size, 10);
+      this.onChange(size);
+      this.setSize(size);
+    }
+  };
+})();

src/js/widgets/Tabs.js

@@ -0,0 +1,57 @@
+(function () {
+  var ns = $.namespace('pskl.widgets');
+
+  ns.Tabs = function (tabs, parentController, settingsName) {
+    this.tabs = tabs;
+    this.parentController = parentController;
+    this.settingsName = settingsName;
+
+    this.currentTab = null;
+    this.currentController = null;
+  };
+
+  ns.Tabs.prototype.init = function (container) {
+    this.tabListEl = container.querySelector('.tab-list');
+    this.tabContentlEl = container.querySelector('.tab-content');
+    pskl.utils.Event.addEventListener(this.tabListEl, 'click', this.onTabsClicked_, this);
+
+    var tab = pskl.UserSettings.get(this.settingsName);
+    if (tab) {
+      this.selectTab(tab);
+    }
+  };
+
+  ns.Tabs.prototype.destroy = function () {
+    if (this.currentController) {
+      this.currentController.destroy();
+    }
+    pskl.utils.Event.removeAllEventListeners(this);
+  };
+
+  ns.Tabs.prototype.selectTab = function (tabId) {
+    if (!this.tabs[tabId] || this.currentTab == tabId) {
+      return;
+    }
+
+    if (this.currentController) {
+      this.currentController.destroy();
+    }
+
+    this.tabContentlEl.innerHTML = pskl.utils.Template.get(this.tabs[tabId].template);
+    this.currentController = new this.tabs[tabId].controller(pskl.app.piskelController, this.parentController);
+    this.currentController.init();
+    this.currentTab = tabId;
+    pskl.UserSettings.set(this.settingsName, tabId);
+
+    var selectedTab = this.tabListEl.querySelector('.selected');
+    if (selectedTab) {
+      selectedTab.classList.remove('selected');
+    }
+    this.tabListEl.querySelector('[data-tab-id="' + tabId + '"]').classList.add('selected');
+  };
+
+  ns.Tabs.prototype.onTabsClicked_ = function (e) {
+    var tabId = pskl.utils.Dom.getData(e.target, 'tabId');
+    this.selectTab(tabId);
+  };
+})();

src/js/worker/imageprocessor/ImageProcessorWorker.js

@@ -2,7 +2,9 @@
   var ns = $.namespace('pskl.worker.imageprocessor');
 
   ns.ImageProcessorWorker = function () {
-    var currentStep, currentProgress, currentTotal;
+    var currentStep;
+    var currentProgress;
+    var currentTotal;
 
     var initStepCounter_ = function (total) {
       currentStep = 0;

src/piskel-boot.js

@@ -68,12 +68,21 @@
     };
     loadScript('piskel-script-list.js', 'loadNextScript()');
 
+    var styles;
     window.loadStyles = function () {
-      var styles = window.pskl_exports.styles;
+      styles = window.pskl_exports.styles;
       for (var i = 0 ; i < styles.length ; i++) {
         loadStyle(styles[i]);
       }
     };
+
+    window.reloadStyles = function () {
+      for (var i = 0 ; i < styles.length ; i++) {
+        document.querySelector('link[href="' + styles[i] + '"]').remove();
+        loadStyle(styles[i]);
+      }
+    };
+
     loadScript('piskel-style-list.js', 'loadStyles()');
   } else {
     var script;

src/piskel-script-list.js

@@ -79,6 +79,11 @@
   "js/model/Palette.js",
   "js/model/Piskel.js",
 
+  // Database (IndexedDB)
+  "js/database/BackupDatabase.js",
+  "js/database/PiskelDatabase.js",
+  "js/database/migrate/MigrateLocalStorageToIndexedDb.js",
+
   // Selection
   "js/selection/SelectionManager.js",
   "js/selection/BaseSelection.js",
@@ -122,7 +127,10 @@
 
   // Settings sub-controllers
   "js/controller/settings/AbstractSettingController.js",
-  "js/controller/settings/ApplicationSettingsController.js",
+  "js/controller/settings/preferences/GridPreferencesController.js",
+  "js/controller/settings/preferences/MiscPreferencesController.js",
+  "js/controller/settings/preferences/TilePreferencesController.js",
+  "js/controller/settings/PreferencesController.js",
   "js/controller/settings/exportimage/GifExportController.js",
   "js/controller/settings/exportimage/PngExportController.js",
   "js/controller/settings/exportimage/ZipExportController.js",
@@ -141,6 +149,9 @@
   "js/controller/dialogs/CreatePaletteController.js",
   "js/controller/dialogs/BrowseLocalController.js",
   "js/controller/dialogs/CheatsheetController.js",
+  "js/controller/dialogs/backups/steps/SelectSession.js",
+  "js/controller/dialogs/backups/steps/SessionDetails.js",
+  "js/controller/dialogs/backups/BrowseBackups.js",
   "js/controller/dialogs/importwizard/steps/AbstractImportStep.js",
   "js/controller/dialogs/importwizard/steps/AdjustSize.js",
   "js/controller/dialogs/importwizard/steps/ImageImport.js",
@@ -159,12 +170,15 @@
   "js/widgets/FramePicker.js",
   "js/widgets/HslRgbColorPicker.js",
   "js/widgets/SizeInput.js",
+  "js/widgets/SizePicker.js",
   "js/widgets/SynchronizedInputs.js",
+  "js/widgets/Tabs.js",
   "js/widgets/Wizard.js",
 
   // Services
   "js/service/storage/StorageService.js",
   "js/service/storage/FileDownloadStorageService.js",
+  "js/service/storage/IndexedDbStorageService.js",
   "js/service/storage/LocalStorageService.js",
   "js/service/storage/GalleryStorageService.js",
   "js/service/storage/DesktopStorageService.js",
@@ -190,15 +204,13 @@
   "js/service/keyboard/ShortcutService.js",
   "js/service/ImportService.js",
   "js/service/ImageUploadService.js",
+  "js/service/ClipboardService.js",
   "js/service/CurrentColorsService.js",
   "js/service/FileDropperService.js",
   "js/service/SelectedColorsService.js",
   "js/service/MouseStateService.js",
   "js/service/performance/PerformanceReport.js",
   "js/service/performance/PerformanceReportService.js",
-  "js/service/storage/LocalStorageService.js",
-  "js/service/storage/GalleryStorageService.js",
-  "js/service/storage/DesktopStorageService.js",
 
   // Tools
   "js/tools/ToolsHelper.js",
@@ -226,6 +238,7 @@
   "js/tools/transform/AbstractTransformTool.js",
   "js/tools/transform/Center.js",
   "js/tools/transform/Clone.js",
+  "js/tools/transform/Crop.js",
   "js/tools/transform/Flip.js",
   "js/tools/transform/Rotate.js",
   "js/tools/transform/TransformUtils.js",

src/piskel-style-list.js

@@ -15,10 +15,10 @@
   "css/settings-resize.css",
   "css/settings-save.css",
   "css/tools.css",
-  "css/pensize.css",
   "css/icons.css",
   "css/color-picker-slider.css",
   "css/dialogs.css",
+  "css/dialogs-browse-backups.css",
   "css/dialogs-browse-local.css",
   "css/dialogs-cheatsheet.css",
   "css/dialogs-create-palette.css",
@@ -39,5 +39,7 @@
   "css/minimap.css",
   "css/widgets-anchor.css",
   "css/widgets-frame-picker.css",
+  "css/widgets-size-picker.css",
+  "css/widgets-tabs.css",
   "css/widgets-wizard.css"
 ];

src/templates/data-uri-export.html

@@ -0,0 +1,70 @@
+<div style="display:none">
+  <script type="text/template" id="data-uri-export-partial">
+    <style>
+      html, body {
+        margin: 0;
+      }
+
+      body {
+        background: #444;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        font-family: monospace;
+      }
+
+      #image-wrapper {
+        flex-grow: 1;
+        flex-shrink: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+      }
+
+      img {
+        background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABlBMVEXf39////8zI3BgAAAAHklEQVR4AWNghAIGCMDgjwgFCDDSw2M0PSCD0fQAACRcAgF4ciGUAAAAAElFTkSuQmCC') repeat;
+      }
+
+      #bottom-wrapper {
+        width: 600px;
+        height: 300px;
+        margin-top: 20px;
+        position: relative;
+        flex-shrink: 0;
+      }
+
+      textarea {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+        padding: 10px;
+        border-style: none;
+
+        background: black;
+        color: gold;
+        font-family: monospace;
+      }
+
+      span {
+        position: absolute;
+        bottom: 10px;
+        left: 10px;
+        font-size: 12px;
+        padding: 5px;
+        color: white;
+        background-color: #444;
+      }
+    </style>
+    <body>
+      <div id="image-wrapper">
+        <img src="{{src}}" alt="Exported image as data-uri">
+      </div>
+      <div id="bottom-wrapper">
+        <textarea spellcheck="false" onclick="this.select()">{{src}}</textarea>
+        <span>Data-uri for the exported framesheet</span>
+      </div>
+    </body>
+  </script>
+</div>

src/templates/debug-header.html

@@ -4,16 +4,48 @@
   }
 
   .fake-piskelapp-header {
+    position: relative;
     text-align: center;
     height: 40px;
     line-height: 40px;
     font-size: 24px;
     background: black;
     color: gold;
+    z-index: 100;
   }
 
   .piskel-name.piskel-name-saving {
     color: red;
   }
+
+  .new-piskel-desktop {
+    position: absolute;
+
+    display: flex;
+    top: 7px;
+    right: 7px;
+
+    height: 26px;
+    width: 26px;
+
+    border-radius: 3px;
+    font-size: 22px;
+    color: black;
+    background: gold;
+    text-decoration: none;
+
+    align-items: center;
+    justify-content: center;
+  }
 </style>
-<div class="fake-piskelapp-header"><span class="piskel-name"></span></div>
+<div class="fake-piskelapp-header">
+  <a
+    href="index.html"
+    target="_blank"
+    class="new-piskel-desktop button button-primary"
+    title="Create a new sprite"
+    rel="tooltip"
+    data-placement="left"
+    >+</a>
+  <span class="piskel-name"></span>
+</div>

src/templates/dialogs/browse-backups.html

@@ -0,0 +1,83 @@
+<script type="text/template" id="templates/dialogs/browse-backups.html">
+  <div class="dialog-wrapper">
+    <h3 class="dialog-head">
+      Browse backups
+      <span class="dialog-close">X</span>
+    </h3>
+    <div class="dialog-content backups-wizard-container"></div>
+  </div>
+</script>
+
+<script type="text/template" id="backups-select-session">
+<div class="backups-step-container">
+  <div class="backups-step-content">
+    <div class="browse-backups-disclaimer">
+      <div class="backups-icon icon-common-backup-white">&nbsp;</div>
+      <div class="browse-backups-disclaimer-content">
+        <!-- Keep in sync with MAX_SESSIONS in BackupService.js -->
+        If you forgot to save your work or if Piskel crashed, try to restore one of the automatically backed up sessions below (up to 10 sessions).
+        <br/>
+        <br/>
+        Backups may be erased without notice, so try to save your work to a file or to your gallery as soon as you can.
+      </div>
+    </div>
+    <div class="session-list">
+    </div>
+  </div>
+</div>
+</script>
+
+<script type="text/template" id="session-list-empty">
+<div class="centered-message session-list-empty">No session found ...</div>
+</script>
+
+<script type="text/template" id="session-list-error">
+<div class="centered-message session-list-error">Could not load backup sessions, something went wrong.</div>
+</script>
+
+<script type="text/template" id="session-list-item">
+<div class="session-item">
+  <div class="session-details">
+    <span class="session-details-title">{{name}} {{description}}</span>
+    <span class="session-details-info">Session recorded {{date}}</span>
+    <span class="session-details-info">{{count}} saved</span>
+  </div>
+  <div class="session-actions">
+    <button class="button" data-session-id="{{id}}" data-action="delete">Delete</button>
+    <button class="button button-primary" data-session-id="{{id}}" data-action="view">View</button>
+  </div>
+</div>
+</script>
+
+<script type="text/template" id="backups-session-details">
+<div class="backups-step-container">
+  <div class="backups-step-content">
+    <div class="snapshot-list"></div>
+  </div>
+  <div class="backups-step-actions">
+    <button class="button back-button">back</button>
+  </div>
+</div>
+</script>
+
+<script type="text/template" id="snapshot-list-empty">
+<div class="centered-message snapshot-list-empty">No snapshot found ...</div>
+</script>
+
+<script type="text/template" id="snapshot-list-error">
+<div class="centered-message snapshot-list-error">Could not load snapshots, something went wrong.</div>
+</script>
+
+<script type="text/template" id="snapshot-list-item">
+<div class="snapshot-item" data-snapshot-id={{id}}>
+  <div class="snapshot-preview lowcont-dark-picker-background"></div>
+  <div class="snapshot-details">
+    <span class="snapshot-details-title">{{name}} {{description}}</span>
+    <span class="snapshot-details-info">Snapshot recorded {{date}}</span>
+    <span class="snapshot-details-info">{{frames}}, size {{resolution}}, {{fps}}fps</span>
+  </div>
+  <div class="snapshot-actions">
+    <button class="button button-primary" data-action="load" data-snapshot-id="{{id}}">Load</button>
+  </div>
+</div>
+</script>

src/templates/dialogs/import.html

@@ -67,11 +67,11 @@
     <div class="import-mode">
       <div class="import-mode-title">How do you want to import the new content?</div>
       <div class="import-mode-section">
-        <span class="import-mode-section-description">Combine the imported content and your sprite.</span>
-        <button class="import-mode-merge-button button-primary button">Merge</button>
+        <span class="import-mode-section-description">Combine with your sprite</span>
+        <button class="import-mode-merge-button button-primary button">Combine</button>
       </div>
       <div class="import-mode-section">
-        <span class="import-mode-section-description">Replace your current sprite by the imported content.</span>
+        <span class="import-mode-section-description">Replace your sprite</span>
         <button class="import-mode-replace-button button-primary button">Replace</button>
       </div>
     </div>
@@ -131,9 +131,6 @@
     The imported image is bigger than the current sprite.
   </div>
   <div class="import-resize-section">
-    <div class="import-resize-option-label">
-      How do you want to proceed?
-    </div>
     <label class="import-resize-option">
       <input type="radio" name="resize-mode" id="resize-option-expand" value="expand" {{expandChecked}}/>
       <span>Expand canvas to {{newSize}}</span>
@@ -162,19 +159,19 @@
   </div>
 
   <div class="import-step-content">
-    <div>Select a frame in your current sprite:</div>
+    <div>Select the insertion frame:</div>
     <div class="insert-frame-preview"></div>
     <div class="insert-mode-container">
       <div class="insert-mode-option-label">
-        How should the imported frames be inserted:
+        Insert imported frames:
       </div>
       <label class="insert-mode-option">
         <input type="radio" name="insert-mode" id="insert-mode-add" value="add" checked="checked"/>
-        <span>Add new frames</span>
+        <span>as new frames</span>
       </label>
       <label class="insert-mode-option">
         <input type="radio" name="insert-mode" id="insert-mode-insert" value="insert"/>
-        <span>Insert in existing frames</span>
+        <span>in existing frames</span>
       </label>
     </div>
     <div class="import-step-buttons">
@@ -184,13 +181,3 @@
   </div>
 </div>
 </script>
-
-<script type="text/template" id="import-invalid-file">
-<div class="import-step-container">
-  <div>THIS IS AN INVALID FILEZ</div>
-  <div class="import-step-buttons">
-    <button class="import-back-button button">back</button>
-    <button class="import-next-button button button-primary">next</button>
-  </div>
-</div>
-</script>