Merge pull request #353 from juliandescottes/reduce-http-calls

Reduce http calls

.gitignore

@@ -23,6 +23,10 @@ diff.txt
 dest
 build/closure/closure_compiled_binary.js
 
+# spriting artifacts
+src/img/icons.png
+src/css/icons.css
+
 # plato report directory
 report
 

Gruntfile.js

@@ -1,43 +1,42 @@
 module.exports = function(grunt) {
-  var ip = 'localhost';
-  var dateFormat = require('dateformat');
-  var now = new Date();
-  var version = '-' + dateFormat(now, "yyyy-mm-dd-hh-MM");
 
-  var mapToSrcFolder = function (path) {
-    return "src/" + path;
+  // Update this variable if you don't want or can't serve on localhost
+  var hostname = 'localhost';
+
+  // create a version based on the build timestamp
+  var dateFormat = require('dateformat');
+  var version = '-' + dateFormat(new Date(), "yyyy-mm-dd-hh-MM");
+
+  /**
+   * Helper to prefix all strings in provided array with the provided path
+   */
+  var prefixPaths = function (paths, prefix) {
+    return paths.map(function (path) {
+      return prefix + path;
+    });
   };
 
-  var piskelScripts = require('./src/piskel-script-list.js').scripts.map(mapToSrcFolder).filter(function (path) {
+  // get the list of scripts paths to include
+  var scriptPaths = require('./src/piskel-script-list.js').scripts;
+  var piskelScripts = prefixPaths(scriptPaths, "src/").filter(function (path) {
     return path.indexOf('devtools') === -1;
   });
-  var piskelStyles = require('./src/piskel-style-list.js').styles.map(mapToSrcFolder);
 
-  var mapToCasperFolder = function (path) {
-    return "test/casperjs/" + path;
-  };
+  // get the list of styles paths to include
+  var stylePaths = require('./src/piskel-style-list.js').styles;
+  var piskelStyles = prefixPaths(stylePaths, "src/");
 
-  var casperEnvironments = {
-    'local' : {
-      suite : './test/casperjs/LocalTestSuite.js',
-      delay : 50
-    },
-    'travis' : {
-      suite : './test/casperjs/TravisTestSuite.js',
-      delay : 10000
-    }
-  };
+  var getCasperConfig = function (suiteName, delay, host) {
+    var testPaths = require('./test/casperjs/' + suiteName).tests;
+    var tests = prefixPaths(testPaths, "test/casperjs/");
 
-  var getCasperConfig = function (env) {
-    var conf = casperEnvironments[env];
-    var tests = require(conf.suite).tests.map(mapToCasperFolder);
     return {
       filesSrc : tests,
       options : {
         args : {
-          baseUrl : 'http://' + ip + ':' + '<%= express.test.options.port %>/',
+          baseUrl : 'http://' + host + ':' + '<%= express.test.options.port %>/',
           mode : '?debug',
-          delay : conf.delay
+          delay : delay
         },
         async : false,
         direct : false,
@@ -48,19 +47,16 @@ module.exports = function(grunt) {
     };
   };
 
-  var getExpressConfig = function (source, port, host) {
-    var bases;
-    if (typeof source === 'string') {
-      bases = [source];
-    } else if (Array.isArray(source)) {
-      bases = source;
+  var getExpressConfig = function (sourceFolders, port, host) {
+    if (typeof sourceFolders === 'string') {
+      sourceFolders = [sourceFolders];
     }
 
     return {
       options: {
         port: port,
-        hostname : host || ip,
-        bases: bases
+        hostname : host,
+        bases: sourceFolders
       }
     };
   };
@@ -70,14 +66,23 @@ module.exports = function(grunt) {
 
   grunt.initConfig({
     clean: {
-      before: ['dest']
+      all: ['dest', 'src/img/icons.png', 'src/css/icons.css'],
+      prod: ['dest/prod', 'dest/tmp'],
+      desktop: ['dest/desktop', 'dest/tmp'],
+      dev: ['dest/dev', 'dest/tmp']
     },
+
+    /**
+     * STYLE CHECKS
+     */
+
     leadingIndent : {
       options: {
         indentation : "spaces"
       },
       css : ['src/css/**/*.css']
     },
+
     jscs : {
       options : {
         "preset": "google",
@@ -89,6 +94,7 @@ module.exports = function(grunt) {
       },
       js : [ 'src/js/**/*.js' , '!src/js/**/lib/**/*.js' ]
     },
+
     jshint: {
       options: {
         undef : true,
@@ -105,86 +111,103 @@ module.exports = function(grunt) {
         '!src/js/**/lib/**/*.js' // Exclude lib folder (note the leading !)
       ]
     },
+
+    /**
+     * SERVERS, BROWSER LAUNCHERS
+     */
+
     express: {
-      test: getExpressConfig(['src', 'test'], 9991),
-      regular: getExpressConfig('dest', 9001),
-      debug: getExpressConfig(['src', 'test'], 9901)
+      regular: getExpressConfig('dest/prod', 9001, hostname),
+      test: getExpressConfig(['dest/dev', 'test'], 9991, hostname),
+      debug: getExpressConfig(['dest/dev', 'test'], 9901, hostname)
     },
+
     open : {
       regular : {
-        path : 'http://' + ip + ':9001/'
+        path : 'http://' + hostname + ':9001/'
       },
       debug : {
-        path : 'http://' + ip + ':9901/?debug'
+        path : 'http://' + hostname + ':9901/?debug'
       }
     },
 
     watch: {
-      scripts: {
+      prod: {
         files: ['src/**/*.*'],
-        tasks: ['merge'],
+        tasks: ['build'],
+        options: {
+          spawn: false
+        }
+      },
+      dev: {
+        files: ['src/**/*.*'],
+        tasks: ['build-dev'],
         options: {
           spawn: false
         }
       }
     },
-    ghost : {
-      'travis' : getCasperConfig('travis'),
-      'local' : getCasperConfig('local')
+
+    /**
+     * BUILD STEPS
+     */
+
+    sprite:{
+      all : {
+        src: 'src/img/icons/**/*.png',
+        dest: 'src/img/icons.png',
+        destCss: 'src/css/icons.css'
+      }
     },
+
     concat : {
       js : {
         options : {
           separator : ';'
         },
         src : piskelScripts,
-        dest : 'dest/js/piskel-packaged' + version + '.js'
+        dest : 'dest/prod/js/piskel-packaged' + version + '.js'
       },
       css : {
         src : piskelStyles,
-        dest : 'dest/css/piskel-style-packaged' + version + '.css'
+        dest : 'dest/prod/css/piskel-style-packaged' + version + '.css'
       }
     },
+
     uglify : {
       options : {
         mangle : true
       },
       js : {
         files : {
-          'dest/js/piskel-packaged-min.js' : ['dest/js/piskel-packaged' + version + '.js']
+          'dest/tmp/js/piskel-packaged-min.js' : ['dest/prod/js/piskel-packaged' + version + '.js']
         }
       }
     },
+
+    includereplace: {
+      all: {
+        src: 'src/index.html',
+        dest: 'dest/tmp/index.html',
+        options : {
+          globals : {
+            'version' : version
+          }
+        }
+      }
+    },
+
     replace: {
-      main: {
+      // main-partial.html is used when embedded in piskelapp.com
+      mainPartial: {
         options: {
-          patterns: [
-            {
-              match: 'version',
-              replacement: version
-            }
-          ]
-        },
-        files: [
-          {src: ['src/piskel-boot.js'], dest: 'dest/piskel-boot.js'}
-        ]
-      },
-      editor: {
-        options: {
-          patterns: [
-            {
-              match: /templates\//g,
-              replacement: "../templates"+version+"/"
-            },{
-              match: /piskel-boot.js/g,
-              replacement: "../piskel-boot"+version+".js"
-            },{
+          patterns: [{
               match: /^(.|[\r\n])*<!--body-main-start-->/,
-              replacement: "",
+              replacement: "{% raw %}",
               description : "Remove everything before body-main-start comment"
             },{
               match: /<!--body-main-end-->(.|[\r\n])*$/,
-              replacement: "",
+              replacement: "{% endraw %}",
               description : "Remove everything after body-main-end comment"
             },{
               match: /([\r\n])  /g,
@@ -194,29 +217,56 @@ module.exports = function(grunt) {
           ]
         },
         files: [
-          {src: ['src/index.html'], dest: 'dest/piskelapp-partials/main-partial.html'}
+          // src/index.html should already have been moved by the includereplace task
+          {src: ['dest/tmp/index.html'], dest: 'dest/prod/piskelapp-partials/main-partial.html'}
         ]
       }
     },
+
     copy: {
-      main: {
+      prod: {
         files: [
-          {src: ['dest/js/piskel-packaged-min.js'], dest: 'dest/js/piskel-packaged-min' + version + '.js'},
-          {src: ['dest/piskel-boot.js'], dest: 'dest/piskel-boot' + version + '.js'},
-          {src: ['src/logo.png'], dest: 'dest/logo.png'},
-          {src: ['src/js/lib/iframeLoader-0.1.0.js'], dest: 'dest/js/lib/iframeLoader-0.1.0.js'},
-          {src: ['src/js/lib/gif/gif.ie.worker.js'], dest: 'dest/js/lib/gif/gif.ie.worker.js'},
-          {expand: true, src: ['img/**'], cwd: 'src/', dest: 'dest/', filter: 'isFile'},
-          {expand: true, src: ['css/fonts/**'], cwd: 'src/', dest: 'dest/', filter: 'isFile'},
-          {expand: true, src: ['**/*.html'], cwd: 'src/', dest: 'dest/', filter: 'isFile'}
+          // dest/js/piskel-packaged-min.js should have been created by the uglify task
+          {src: ['dest/tmp/js/piskel-packaged-min.js'], dest: 'dest/prod/js/piskel-packaged-min' + version + '.js'},
+          {src: ['dest/tmp/index.html'], dest: 'dest/prod/index.html'},
+          {src: ['src/logo.png'], dest: 'dest/prod/logo.png'},
+          {src: ['src/js/lib/gif/gif.ie.worker.js'], dest: 'dest/prod/js/lib/gif/gif.ie.worker.js'},
+          {expand: true, src: ['img/**'], cwd: 'src/', dest: 'dest/prod/', filter: 'isFile'},
+          {expand: true, src: ['css/fonts/**'], cwd: 'src/', dest: 'dest/prod/', filter: 'isFile'}
+        ]
+      },
+      dev: {
+        files: [
+          // in dev copy everything to dest/dev
+          {src: ['dest/tmp/index.html'], dest: 'dest/dev/index.html'},
+          {src: ['src/piskel-script-list.js'], dest: 'dest/dev/piskel-script-list.js'},
+          {src: ['src/piskel-style-list.js'], dest: 'dest/dev/piskel-style-list.js'},
+          {expand: true, src: ['js/**'], cwd: 'src/', dest: 'dest/dev/', filter: 'isFile'},
+          {expand: true, src: ['css/**'], cwd: 'src/', dest: 'dest/dev/', filter: 'isFile'},
+          {expand: true, src: ['img/**'], cwd: 'src/', dest: 'dest/dev/', filter: 'isFile'},
         ]
       }
     },
+
+    /**
+     * TESTING
+     */
+
     karma: {
       unit: {
         configFile: 'karma.conf.js'
       }
     },
+
+    ghost : {
+      'travis' : getCasperConfig('TravisTestSuite.js', 10000, hostname),
+      'local' : getCasperConfig('LocalTestSuite.js', 50, hostname)
+    },
+
+    /**
+     * DESKTOP BUILDS
+     */
+
     nodewebkit: {
       windows : {
         options: {
@@ -226,15 +276,16 @@ module.exports = function(grunt) {
           linux32: true,
           linux64: true
         },
-        src: ['./dest/**/*', "./package.json", "!./dest/desktop/"]
+        src: ['./dest/prod/**/*', "./package.json", "!./dest/desktop/"]
       },
       macos : {
         options: {
           platforms : ['osx64'],
+          // had performance issues with 0.11.5 on mac os, need to test new versions/new hardware
           version : "0.10.5",
           build_dir: './dest/desktop/'
         },
-        src: ['./dest/**/*', "./package.json", "!./dest/desktop/"]
+        src: ['./dest/prod/**/*', "./package.json", "!./dest/desktop/"]
       }
     }
   });
@@ -246,27 +297,29 @@ module.exports = function(grunt) {
   grunt.registerTask('unit-test', ['karma']);
 
   // Validate & Test
-  grunt.registerTask('test-travis', ['lint', 'unit-test', 'express:test', 'ghost:travis']);
+  grunt.registerTask('test-travis', ['lint', 'unit-test', 'build-dev', 'express:test', 'ghost:travis']);
   // Validate & Test (faster version) will NOT work on travis !!
-  grunt.registerTask('test-local', ['lint', 'unit-test', 'express:test', 'ghost:local']);
-  grunt.registerTask('test-local-nolint', ['unit-test', 'express:test', 'ghost:local']);
+  grunt.registerTask('test-local', ['lint', 'unit-test', 'build-dev', 'express:test', 'ghost:local']);
+  grunt.registerTask('test-local-nolint', ['unit-test', 'build-dev', 'express:test', 'ghost:local']);
 
   grunt.registerTask('test', ['test-travis']);
   grunt.registerTask('precommit', ['test-local']);
 
-  grunt.registerTask('build',  ['concat:js', 'concat:css', 'uglify', 'replace:main', 'replace:editor', 'copy']);
+  grunt.registerTask('build-index.html', ['includereplace']);
+  grunt.registerTask('merge-statics', ['concat:js', 'concat:css', 'uglify']);
+  grunt.registerTask('build',  ['clean:prod', 'sprite', 'merge-statics', 'build-index.html', 'replace', 'copy:prod']);
+  grunt.registerTask('build-dev',  ['clean:dev', 'sprite', 'build-index.html', 'copy:dev']);
 
   // Validate & Build
-  grunt.registerTask('default', ['clean:before', 'lint', 'build']);
+  grunt.registerTask('default', ['lint', 'build']);
 
   // Build stand alone app with nodewebkit
-  grunt.registerTask('desktop', ['default', 'nodewebkit:windows']);
-  grunt.registerTask('desktop-mac', ['default', 'nodewebkit:macos']);
+  grunt.registerTask('desktop', ['clean:desktop', 'default', 'nodewebkit:windows']);
+  grunt.registerTask('desktop-mac', ['clean:desktop', 'default', 'nodewebkit:macos']);
 
   // Start webserver and watch for changes
-  grunt.registerTask('serve', ['build', 'express:regular', 'open:regular', 'express-keepalive', 'watch']);
-
+  grunt.registerTask('serve', ['build', 'express:regular', 'open:regular', 'watch:prod']);
   // Start webserver on src folder, in debug mode
-  grunt.registerTask('serve-debug', ['express:debug', 'open:debug', 'express-keepalive']);
+  grunt.registerTask('serve-debug', ['build-dev', 'express:debug', 'open:debug', 'watch:dev']);
   grunt.registerTask('play', ['serve-debug']);
 };

misc/scripts/copy-to-piskel-website.cmd

@@ -6,7 +6,7 @@ SETLOCAL
   SET PISKELAPP_PATH="C:\Development\git\piskel-website"
 
   ECHO "Copying files to piskelapp"
-  XCOPY "%PISKEL_PATH%\dest" "%PISKELAPP_PATH%\static\editor" /e /i /h /y
+  XCOPY "%PISKEL_PATH%\dest\prod" "%PISKELAPP_PATH%\static\editor" /e /i /h /y
 
   ECHO "Delete previous partial"
   DEL "%PISKELAPP_PATH%\templates\editor\main-partial.html"

package.json

@@ -24,17 +24,19 @@
     "grunt-contrib-watch": "0.6.1",
     "grunt-express": "1.4.1",
     "grunt-ghost": "1.1.0",
+    "grunt-include-replace": "^3.2.0",
     "grunt-jscs": "^1.6.0",
     "grunt-karma": "^0.10.1",
     "grunt-leading-indent": "^0.2.0",
     "grunt-node-webkit-builder": "^1.0.2",
     "grunt-open": "0.2.3",
     "grunt-replace": "^0.8.0",
+    "grunt-spritesmith": "^6.1.0",
+    "jasmine-core": "^2.1.0",
     "karma": "0.12.31",
     "karma-chrome-launcher": "^0.1.4",
     "karma-jasmine": "^0.3.5",
     "karma-phantomjs-launcher": "^0.1.4",
-    "jasmine-core": "^2.1.0",
     "load-grunt-tasks": "^3.1.0"
   },
   "window": {

src/css/dialogs-cheatsheet.css

@@ -3,17 +3,12 @@
   bottom: 10px;
   left: 10px;
 
-  padding: 1px 0 0 45px;
   color : gold;
   font-weight: bold;
   font-size : 1.25em;
   line-height: 20px;
 
-  cursor : pointer;
-
-  background-image:url('../img/keyboard.png');
-  background-size:35px 20px;
-  background-repeat:no-repeat;
+  cursor: pointer;
 
   opacity: 0.5;
   z-index: 11000;
@@ -81,9 +76,7 @@
   height: 30px;
   width: 30px;
   margin: 0 10px 0 0;
-
-  background-size: 20px 20px;
-  background-position: 5px 5px;
+  background-size: 30px 30px;
 }
 
 .cheatsheet-description {
@@ -170,4 +163,65 @@
   position: absolute;
   bottom: 10px;
   right: 10px;
-}
+}
+
+
+.cheatsheet-icon-tool-circle {
+  background-image: url(../img/icons/tools/tool-circle.png);
+}
+
+.cheatsheet-icon-tool-colorpicker {
+  background-image: url(../img/icons/tools/tool-colorpicker.png);
+}
+
+.cheatsheet-icon-tool-colorswap {
+  background-image: url(../img/icons/tools/tool-colorswap.png);
+}
+
+.cheatsheet-icon-tool-dithering {
+  background-image: url(../img/icons/tools/tool-dithering.png);
+}
+
+.cheatsheet-icon-tool-eraser {
+  background-image: url(../img/icons/tools/tool-eraser.png);
+}
+
+.cheatsheet-icon-tool-lasso-select {
+  background-image: url(../img/icons/tools/tool-lasso-select.png);
+}
+
+.cheatsheet-icon-tool-lighten {
+  background-image: url(../img/icons/tools/tool-lighten.png);
+}
+
+.cheatsheet-icon-tool-move {
+  background-image: url(../img/icons/tools/tool-move.png);
+}
+
+.cheatsheet-icon-tool-paint-bucket {
+  background-image: url(../img/icons/tools/tool-paint-bucket.png);
+}
+
+.cheatsheet-icon-tool-pen {
+  background-image: url(../img/icons/tools/tool-pen.png);
+}
+
+.cheatsheet-icon-tool-rectangle-select {
+  background-image: url(../img/icons/tools/tool-rectangle-select.png);
+}
+
+.cheatsheet-icon-tool-rectangle {
+  background-image: url(../img/icons/tools/tool-rectangle.png);
+}
+
+.cheatsheet-icon-tool-shape-select {
+  background-image: url(../img/icons/tools/tool-shape-select.png);
+}
+
+.cheatsheet-icon-tool-stroke {
+  background-image: url(../img/icons/tools/tool-stroke.png);
+}
+
+.cheatsheet-icon-tool-vertical-mirror-pen {
+  background-image: url(../img/icons/tools/tool-vertical-mirror-pen.png);
+}

src/css/frames-list.css

@@ -55,24 +55,28 @@
 }
 
 .add-frame-action {
-  border: #888 solid 4px;
-  font-size: 13px;
-  color: #888;
-  cursor: pointer;
-  padding: 6px 0;
-  border-radius: 4px;
   margin-top: 8px;
-  background-image: url(../img/plus.png);
-  background-repeat: no-repeat;
-  background-position: 3px 7px;
-  background-size: 26px 26px;
-  text-indent: 18px;
+  padding: 6px 0;
+  overflow: hidden;
+  width: 96px;
+
+  border: #888 solid 3px;
+  border-radius: 4px;
+
+  color: #888;
   background-color: #222;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.add-frame-action-icon {
+  margin: 3px;
+  float: left;
 }
 
 .add-frame-action .label {
-  width: 80px;
-  margin: 0 auto;
+  overflow: hidden;
+  text-align: left;
 }
 
 .add-frame-action:hover {
@@ -129,15 +133,9 @@
 }
 
 .preview-tile .tile-overlay.delete-frame-action {
-   background-image: url(../img/garbage.png);
-   background-repeat: no-repeat;
    top: 0;
    right: 0;
    border-bottom-left-radius: 3px;
-   height: 30px;
-   width: 30px;
-   background-position: 5px 5px;
-   background-size: 20px;
    cursor: pointer;
 }
 
@@ -145,10 +143,6 @@
    bottom: 0;
    right: 0;
    border-bottom-left-radius: 3px;
-   background-image: url(../img/duplicate.png);
-   background-repeat: no-repeat;
-   background-position: 5px 5px;
-   background-size: 20px;
    cursor: pointer;
 }
 
@@ -156,10 +150,6 @@
    bottom: 0;
    left: 0;
    border-top-right-radius: 3px;
-   background-image: url(../img/dragndrop.png);
-   background-repeat: no-repeat;
-   background-position: 5px 5px;
-   background-size: 20px;
    cursor: move;
 }
 

src/css/icons.css

@@ -1,24 +0,0 @@
-.action-icon {
-  cursor: pointer;
-  height: 100%;
-  background-repeat: no-repeat;
-  background-position: 50%;
-}
-
-.edit-icon {
-  background-image: url('../img/tools/pen.png');
-  background-repeat: no-repeat;
-}
-
-.merge-icon {
-  background-image: url('../img/merge-icon.png');
-  background-repeat: no-repeat;
-}
-
-.plus-icon {
-  font-size:15px;
-  text-align:center;
-}
-
-.delete-icon {
-}

src/css/layout.css

@@ -103,22 +103,22 @@
 
 .light-picker-background,
 .light-canvas-background .canvas-background {
-  background: url(../img/canvas_background/light_canvas_background.png) repeat;
+  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABlBMVEXf39////8zI3BgAAAAHklEQVR4AWNghAIGCMDgjwgFCDDSw2M0PSCD0fQAACRcAgF4ciGUAAAAAElFTkSuQmCC') repeat;
 }
 
 .medium-picker-background,
 .medium-canvas-background .canvas-background {
-  background: url(../img/canvas_background/medium_canvas_background.png) repeat;
+  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABlBMVEW6urr///82MBGFAAAAHUlEQVR4AWOAAUYoQOePEAUj3v9oYDQ9gMBoegAAJFwCAbLaTIMAAAAASUVORK5CYII=') repeat;
 }
 
 .lowcont-medium-picker-background,
 .lowcont-medium-canvas-background .canvas-background {
-  background: url(../img/canvas_background/lowcont_medium_canvas_background.png) repeat;
+  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABlBMVEXV1dXb29tFGkCIAAAAHklEQVR4AWNghAIGCMDgjwgFCDDSw2M0PSCD0fQAACRcAgF4ciGUAAAAAElFTkSuQmCC') repeat;
 }
 
 .lowcont-dark-picker-background,
 .lowcont-dark-canvas-background .canvas-background {
-  background: url(../img/canvas_background/lowcont_dark_canvas_background.png) repeat;
+  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABlBMVEVMTExVVVUnhsEkAAAAHUlEQVR4AWOAAUYoQOePEAUj3v9oYDQ9gMBoegAAJFwCAbLaTIMAAAAASUVORK5CYII=') repeat;
 }
 
 .canvas.onion-skin-canvas {

src/css/settings.css

@@ -21,55 +21,6 @@
   margin-right: 0;
 }
 
-/********************************************************** *j* j** j*j j j j** *****************/
-/* Settings icons                                            I  I   I I I\I  \                  */
-/********************************************************** *** *** *** * * '** *****************/
-
-.tool-icon.gallery-icon {
-  background-image: url(../img/gallery.png);
-  background-position: 3px 3px;
-  background-size: 39px 39px;
-}
-
-.tool-icon.resize-icon {
-  background-image: url(../img/resize-icon.png);
-  background-position: 10px 10px;
-  background-size: 26px 26px;
-}
-
-.tool-icon.save-icon {
-  background-image: url(../img/save.png);
-  background-position: 6px 6px;
-  background-size: 36px 36px;
-}
-
-.tool-icon.gear-icon {
-  background-image: url(../img/gear.png);
-  background-position: 6px 7px;
-  background-size: 32px 32px;
-}
-
-.tool-icon.export-icon {
-  background-image: url(../img/export.png);
-  background-position: 7px 5px;
-  background-size: 36px 36px;
-  position: relative;
-}
-
-.tool-icon.local-storage-icon {
-  background-image: url(../img/local-storage-icon.png);
-  background-position: 10px 12px;
-  background-size: 30px;
-  position: relative;
-}
-
-.tool-icon.import-icon {
-  background-image: url(../img/import-icon.png);
-  background-position: 10px 5px;
-  background-size: 26px;
-  position: relative;
-}
-
 .tool-icon .label {
   position: absolute;
   left: 0;

src/css/sprites.css

@@ -0,0 +1,113 @@
+/*
+Icon classes can be used entirely standalone. They are named after their original file names.
+
+```html
+<!-- `display: block` sprite -->
+<div class="icon-home"></div>
+
+<!-- `display: inline-block` sprite -->
+<img class="icon-home" />
+```
+*/
+.icon-cloud_export {
+  background-image: url(../img/spritesheet.png);
+  background-position: -512px -276px;
+  width: 50px;
+  height: 47px;
+}
+.icon-dragndrop {
+  background-image: url(../img/spritesheet.png);
+  background-position: -564px -173px;
+  width: 48px;
+  height: 48px;
+}
+.icon-duplicate {
+  background-image: url(../img/spritesheet.png);
+  background-position: -512px -369px;
+  width: 16px;
+  height: 16px;
+}
+.icon-export {
+  background-image: url(../img/spritesheet.png);
+  background-position: -564px -225px;
+  width: 43px;
+  height: 42px;
+}
+.icon-favicon {
+  background-image: url(../img/spritesheet.png);
+  background-position: -582px -151px;
+  width: 16px;
+  height: 16px;
+}
+.icon-gallery {
+  background-image: url(../img/spritesheet.png);
+  background-position: -512px -225px;
+  width: 52px;
+  height: 51px;
+}
+.icon-garbage {
+  background-image: url(../img/spritesheet.png);
+  background-position: 0px 0px;
+  width: 512px;
+  height: 512px;
+}
+.icon-gear {
+  background-image: url(../img/spritesheet.png);
+  background-position: -563px -323px;
+  width: 38px;
+  height: 37px;
+}
+.icon-import-icon {
+  background-image: url(../img/spritesheet.png);
+  background-position: -576px -69px;
+  width: 28px;
+  height: 36px;
+}
+.icon-keyboard {
+  background-image: url(../img/spritesheet.png);
+  background-position: -512px -133px;
+  width: 70px;
+  height: 40px;
+}
+.icon-local-storage-icon {
+  background-image: url(../img/spritesheet.png);
+  background-position: -512px 0px;
+  width: 100px;
+  height: 69px;
+}
+.icon-merge-icon {
+  background-image: url(../img/spritesheet.png);
+  background-position: -512px -69px;
+  width: 64px;
+  height: 64px;
+}
+.icon-plus {
+  background-image: url(../img/spritesheet.png);
+  background-position: -512px -323px;
+  width: 51px;
+  height: 46px;
+}
+.icon-popup-preview-arrow-gold {
+  background-image: url(../img/spritesheet.png);
+  background-position: -576px -105px;
+  width: 24px;
+  height: 18px;
+}
+.icon-popup-preview-arrow-white {
+  background-image: url(../img/spritesheet.png);
+  background-position: -582px -133px;
+  width: 24px;
+  height: 18px;
+}
+.icon-resize-icon {
+  background-image: url(../img/spritesheet.png);
+  background-position: -512px -173px;
+  width: 52px;
+  height: 52px;
+}
+.icon-save {
+  background-image: url(../img/spritesheet.png);
+  background-position: -562px -276px;
+  width: 43px;
+  height: 42px;
+}

src/css/toolbox-animated-preview.css

@@ -121,15 +121,18 @@
 }
 
 .open-popup-preview-button {
-  width : 18px;
-  height: 18px;
-
   border : 2px solid white;
-  background-image: url(../img/popup-preview-arrow-white.png);
   background-color : rgba(0,0,0,0.3);
 }
 
 .open-popup-preview-button:hover {
   border-color: gold;
-  background-image: url(../img/popup-preview-arrow-gold.png);
+}
+
+/**
+ * The regular image is provided bby the sprite icons.png+icons.css
+ */
+.icon-minimap-popup-preview-arrow-white:hover {
+  background-image: url(../img/icons/minimap/minimap-popup-preview-arrow-gold.png);
+  background-position: 0 0;
 }

src/css/toolbox-layers-list.css

@@ -5,13 +5,6 @@
 .layers-list-container {
 }
 
-/*.layers-title {
-  background-image: url('../img/layers.svg');
-  background-size: 22px;
-  background-repeat: no-repeat;
-  background-position: 97%;
-}*/
-
 .layers-title {
   position: relative;
 }

src/css/toolbox-palettes-list.css

@@ -137,10 +137,6 @@
     outline: none;
 }
 
-.palettes-list-actions .edit-icon {
-    background-size: 15px;
-    background-position: 50%;
-}
 .palettes-list-no-colors {
     height: 42px;
     width: 100%;

src/css/tools.css

@@ -5,9 +5,6 @@
   height: 46px;
   margin: 1px;
   background-color: #3a3a3a;
-  background-repeat: no-repeat;
-  background-position: 12px 12px;
-  background-size: 24px 24px;
 }
 
 .tool-icon.selected {
@@ -22,145 +19,49 @@
   width : 100%;
   border: 3px solid gold;
   box-sizing: border-box;
-  -moz-box-sizing: border-box;
 }
 
 .tool-icon:hover {
   background-color: #444;
 }
 
-/*
- * Tool icons:
- */
-.tool-icon.tool-pen {
-  background-image: url(../img/tools/pen.png);
-}
-
-.tool-icon.tool-vertical-mirror-pen {
-  background-image: url(../img/tools/mirror.png);
-  background-position: 0px 10px;
-  background-size: 38px 27px;
-}
-
-.tool-icon.tool-paint-bucket {
-  background-image: url(../img/tools/paintbucket.png);
-}
-
-.tool-icon.tool-eraser {
-  background-image: url(../img/tools/eraser.png);
-}
-
-.tool-icon.tool-stroke {
-  background-image: url(../img/tools/stroke.png);
-}
-
-.tool-icon.tool-rectangle {
-  background-image: url(../img/tools/rectangle.png);
-  background-position: 12px 14px;
-  background-size: 24px 20px;
-}
-
-.tool-icon.tool-circle {
-  background-image: url(../img/tools/circle.png);
-}
-
-.tool-icon.tool-move {
-  background-image: url(../img/tools/hand.png);
-  background-size: 24px 24px;
-}
-
-.tool-icon.tool-rectangle-select {
-  background-image: url(../img/tools/rectangle_selection.png);
-  background-position: 12px 14px;
-  background-size: 24px 20px;
-}
-
-.tool-icon.tool-lasso-select {
-  background-image: url(../img/tools/lasso.png);
-}
-
-.tool-icon.tool-shape-select {
-  background-image: url(../img/tools/magicwand.png);
-}
-
-.tool-icon.tool-lighten {
-  background-image: url(../img/tools/lighten.png);
-  background-position: 8px 8px;
-  background-size: 30px 30px;
-}
-
-.tool-icon.tool-colorpicker {
-  background-image: url(../img/tools/eyedropper.png);
-  background-size: 23px 23px;
-}
-
-.tool-icon.tool-colorswap {
-  background-image: url(../img/tools/swap-colors.png);
-  background-position: 6px 6px;
-  background-size: 36px 36px;
-}
-
-.tool-icon.tool-flip {
-  background-image: url(../img/tools/flip.png);
-  background-position: 7px 11px;
-  background-size: 32px;
-}
-
-.tool-icon.tool-rotate {
-  background-image: url(../img/tools/rotate.png);
-  background-position: 10px 9px;
-  background-size: 26px;
-}
-
-.tool-icon.tool-clone {
-  background-image: url(../img/tools/clone.png);
-  background-position: 9px 15px;
-  background-size: 30px;
-}
-
-.tool-icon.tool-dithering {
-  background-image: url(../img/tools/dithering.png);
-  background-position: 8px 9px;
-  background-size: 30px;
-}
-
 /*
  * Tool cursors:
  */
 
 .tool-paint-bucket .drawing-canvas-container:hover,
 .tool-colorswap .drawing-canvas-container:hover {
-  cursor: url(../img/icons/paint-bucket.png) 12 12, pointer;
+  cursor: url(../img/cursors/paint-bucket.png) 12 12, pointer;
 }
 
 .tool-vertical-mirror-pen .drawing-canvas-container:hover {
-  cursor: url(../img/icons/vertical-mirror-pen.png) 5 15, pointer;
+  cursor: url(../img/cursors/vertical-mirror-pen.png) 5 15, pointer;
 }
 
 .tool-pen .drawing-canvas-container:hover,
 .tool-lighten .drawing-canvas-container:hover,
 .tool-dithering .drawing-canvas-container:hover {
-  cursor: url(../img/icons/pen.png) 0 15, pointer;
+  cursor: url(../img/cursors/pen.png) 0 15, pointer;
 }
 
 .tool-eraser .drawing-canvas-container:hover {
-  cursor: url(../img/icons/eraser.png) 0 15, pointer;
+  cursor: url(../img/cursors/eraser.png) 0 15, pointer;
 }
 
 .tool-stroke .drawing-canvas-container:hover {
-  cursor: url(../img/icons/pen.png) 0 15, pointer;
+  cursor: url(../img/cursors/pen.png) 0 15, pointer;
 }
 
 .tool-rectangle .drawing-canvas-container:hover {
-  cursor: url(../img/icons/rectangle.png) 0 15, pointer;
+  cursor: url(../img/cursors/rectangle.png) 0 15, pointer;
 }
 
 .tool-circle .drawing-canvas-container:hover {
-  cursor: url(../img/icons/circle.png) 2 15, pointer;
+  cursor: url(../img/cursors/circle.png) 2 15, pointer;
 }
 
 .tool-move .drawing-canvas-container:hover {
-  cursor: url(../img/icons/hand.png) 7 7, pointer;
+  cursor: url(../img/cursors/hand.png) 7 7, pointer;
 }
 
 .tool-rectangle-select .drawing-canvas-container:hover,
@@ -169,26 +70,26 @@
 }
 
 .tool-shape-select .drawing-canvas-container:hover {
-  cursor: url(../img/icons/wand.png) 15 15, pointer;
+  cursor: url(../img/cursors/wand.png) 15 15, pointer;
 }
 
 .tool-colorpicker .drawing-canvas-container:hover {
-  cursor: url(../img/icons/dropper.png) 0 15, pointer;
+  cursor: url(../img/cursors/dropper.png) 0 15, pointer;
 }
 
-.swap-colors-icon {
-  background-image: url(../img/tools/swap-arrow-square-small-grey.png);
+.swap-colors-button {
   position: relative;
   top: 50px;
   left: 6px;
   height: 18px;
   width: 18px;
-  background-size: 18px;
+
   opacity : 0.3;
+
   cursor : pointer;
 }
 
-.swap-colors-icon:hover {
+.swap-colors-button:hover {
   opacity : 1;
 }