Add transition animations to thumbnail updates in list view.

BUG=456016
TEST=manually tested; Edit some file in list view and see the thumbnail is updated with transition animation.

Review URL: https://codereview.chromium.org/954373003

Cr-Commit-Position: refs/heads/master@{#318679}

ui/file_manager/file_manager/foreground/css/file_manager.css

@@ -1247,6 +1247,15 @@ li[renaming=''] .badge {
   }
 }
 
+@-webkit-keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
 /* Table splitter element */
 .table-header-splitter {
   background-image: -webkit-image-set(
@@ -1370,24 +1379,32 @@ body.check-select #list-container list li[selected] .detail-checkmark {
 }
 
 #list-container list li .detail-thumbnail {
+  height: 28px;
+  overflow: hidden;
+  position: absolute;
+  width: 28px;
+}
+
+#list-container list li .detail-thumbnail > .thumbnail {
   -webkit-user-drag: none;
   background-color: rgb(245, 245, 245);
   background-position: center;
   background-size: cover;
   border-radius: 14px;
-  height: 28px;
-  opacity: 0;
-  overflow: hidden;
+  height: 100%;
+  opacity: 1;
   position: absolute;
-  transition: opacity 220ms ease;
-  width: 28px;
+  width: 100%;
 }
 
-#list-container list li .detail-thumbnail.loaded {
-  opacity: 1;
+#list-container list li .detail-thumbnail > .thumbnail.animate {
+  -webkit-animation: fadeIn 220ms ease;
 }
 
-body.check-select #list-container list li[selected] .detail-thumbnail.loaded {
+body.check-select #list-container list li[selected] .detail-thumbnail
+> .thumbnail {
+  /* Fade out after checkmark fades in. */
+  -webkit-animation: fadeOut 0ms 220ms ease backwards;
   opacity: 0;
 }
 

ui/file_manager/file_manager/foreground/js/ui/file_grid.js

@@ -279,7 +279,7 @@ FileGrid.setThumbnailImage_ = function(box, dataUrl, shouldAnimate) {
   thumbnail.style.backgroundImage = 'url(' + dataUrl + ')';
   thumbnail.addEventListener('webkitAnimationEnd', function() {
     // Remove animation css once animation is completed in order not to animate
-    // agein when an item is attached to the dom again.
+    // again when an item is attached to the dom again.
     thumbnail.classList.remove('animate');
 
     for (var i = 0; i < oldThumbnails.length; i++) {

ui/file_manager/file_manager/foreground/js/ui/file_table.js

@@ -394,7 +394,8 @@ FileTable.prototype.onThumbnailLoaded_ = function(event) {
     var box = listItem.querySelector('.detail-thumbnail');
     if (box) {
       this.setThumbnailImage_(
-          assertInstanceof(box, HTMLDivElement), event.dataUrl);
+          assertInstanceof(box, HTMLDivElement), event.dataUrl,
+          true /* with animation */);
     }
   }
 };
@@ -814,7 +815,8 @@ FileTable.prototype.renderThumbnail_ = function(entry) {
   if (this.listThumbnailLoader_ &&
       this.listThumbnailLoader_.getThumbnailFromCache(entry)) {
     this.setThumbnailImage_(
-        box, this.listThumbnailLoader_.getThumbnailFromCache(entry).dataUrl);
+        box, this.listThumbnailLoader_.getThumbnailFromCache(entry).dataUrl,
+        false /* without animation */);
   }
 
   return box;
@@ -824,12 +826,31 @@ FileTable.prototype.renderThumbnail_ = function(entry) {
  * Sets thumbnail image to the box.
  * @param {!HTMLDivElement} box Detail thumbnail div element.
  * @param {string} dataUrl Data url of thumbnail.
+ * @param {boolean} shouldAnimate Whether the thumbnail is shown with animation
+ *     or not.
  * @private
  */
-FileTable.prototype.setThumbnailImage_ = function(box, dataUrl) {
-  // TODO(yawano): Add transition animation for thumbnail update.
-  box.style.backgroundImage = 'url(' + dataUrl + ')';
-  box.classList.add('loaded');
+FileTable.prototype.setThumbnailImage_ = function(box, dataUrl, shouldAnimate) {
+  var oldThumbnails = box.querySelectorAll('.thumbnail');
+
+  var thumbnail = box.ownerDocument.createElement('div');
+  thumbnail.classList.add('thumbnail');
+  thumbnail.style.backgroundImage = 'url(' + dataUrl + ')';
+  thumbnail.addEventListener('webkitAnimationEnd', function() {
+    // Remove animation css once animation is completed in order not to animate
+    // again when an item is attached to the dom again.
+    thumbnail.classList.remove('animate');
+
+    for (var i = 0; i < oldThumbnails.length; i++) {
+      if (box.contains(oldThumbnails[i]))
+        box.removeChild(oldThumbnails[i]);
+    }
+  });
+
+  if (shouldAnimate)
+    thumbnail.classList.add('animate');
+
+  box.appendChild(thumbnail);
 };
 
 /**