From 629ecf83b42d566f3a4dea2cc7683925e1d3fc6c Mon Sep 17 00:00:00 2001
From: juliandescottes <julian.descottes@gmail.com>
Date: Thu, 3 Aug 2017 00:12:59 +0200
Subject: [PATCH] add comments for values synced between JS and CSS

---
 src/css/dialogs-browse-backups.css                        | 2 ++
 src/js/controller/dialogs/backups/steps/SelectSession.js  | 4 +++-
 src/js/controller/dialogs/backups/steps/SessionDetails.js | 7 +++++--
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/css/dialogs-browse-backups.css b/src/css/dialogs-browse-backups.css
index 966d4ccb..f617065e 100644
--- a/src/css/dialogs-browse-backups.css
+++ b/src/css/dialogs-browse-backups.css
@@ -72,6 +72,7 @@
 }
 
 .browse-backups .session-item {
+  /* Transition duration should be kept in sync with SelectSession.DELETE_TRANSITION_DURATION */
   transition: all 500ms;
 }
 
@@ -99,6 +100,7 @@
 .browse-backups .snapshot-preview {
   flex-grow: 0;
   flex-shrink: 1;
+  /* Keep synced with SessionDetails.PREVIEW_SIZE */
   height: 60px;
   width: 60px;
   margin-right: 20px;
diff --git a/src/js/controller/dialogs/backups/steps/SelectSession.js b/src/js/controller/dialogs/backups/steps/SelectSession.js
index 0e905c7b..0c1b5b97 100644
--- a/src/js/controller/dialogs/backups/steps/SelectSession.js
+++ b/src/js/controller/dialogs/backups/steps/SelectSession.js
@@ -1,6 +1,8 @@
 (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).
@@ -82,7 +84,7 @@
         Q.all([
           pskl.app.backupService.deleteSession(sessionId),
           // Wait for 500ms for the .hide opacity transition.
-          wait(500)
+          wait(DELETE_TRANSITION_DURATION)
         ]).then(function () {
           // Refresh the list of sessions
           this.update();
diff --git a/src/js/controller/dialogs/backups/steps/SessionDetails.js b/src/js/controller/dialogs/backups/steps/SessionDetails.js
index 5c73ec31..8fff179e 100644
--- a/src/js/controller/dialogs/backups/steps/SessionDetails.js
+++ b/src/js/controller/dialogs/backups/steps/SessionDetails.js
@@ -1,6 +1,9 @@
 (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;
@@ -68,8 +71,8 @@
 
   ns.SessionDetails.prototype.getFirstFrameAsImage_ = function (piskel) {
     var frame = pskl.utils.LayerUtils.mergeFrameAt(piskel.getLayers(), 0);
-    var wZoom = 60 / piskel.width;
-    var hZoom = 60 / piskel.height;
+    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);
   };