confirm backup session delete, add animation

src/css/dialogs-browse-backups.css

@@ -43,6 +43,16 @@
   box-sizing: border-box;
 }
 
+.browse-backups .session-item {
+  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;

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

@@ -1,6 +1,22 @@
 (function () {
   var ns = $.namespace('pskl.controller.dialogs.backups.steps');
 
+  /**
+   * 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;
@@ -57,11 +73,18 @@
       this.backupsController.mergeData.selectedSession = sessionId;
       this.backupsController.next();
     } else if (action == 'delete') {
-      pskl.app.backupService.deleteSession(sessionId).then(function () {
+      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(500)
+        ]).then(function () {
           // Refresh the list of sessions
           this.update();
         }.bind(this));
       }
+    }
   };
 
 })();