Integrate ListThumbnailLoader to list view and grid view.

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

 /* Copyright (c) 2014 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
 /* Special attribute used in HTML to hide elements. */
 body[type='folder'] [invisibleif~='folder'],
 body[type='upload-folder'] [invisibleif~='upload-folder'],
 body[type='saveas-file'] [invisibleif~='saveas-file'],
 body[type='open-file'] [invisibleif~='open-file'],
 body[type='open-multi-file'] [invisibleif~='open-multi-file'],
@@ skipping 718 matching lines @@
 
 body[type='full-page'] .thumbnail-frame > .img-container {
   position: relative;
 }
 
 body[type='full-page'] .thumbnail-frame > .img-container,
 body[type='full-page'] .detail-name .detail-icon {
   cursor: pointer;
 }
 
-.img-container > img {
-  -webkit-user-drag: none;
-  position: absolute;
-}
-
-.img-container > img:not(.cached) {
-  -webkit-animation: fadeIn 250ms linear;
-}
-
 .thumbnail-bottom {
   align-items: center;
   bottom: 0;
   cursor: auto;
   display: flex;
   flex-direction: row;
   justify-content: center;
   left: 0;
   padding: 0 10px;
   position: absolute;
@@ skipping 50 matching lines @@
       url(../images/files/ui/thumbnail_checked.png) 1x,
       url(../images/files/ui/2x/thumbnail_checked.png) 2x);
   opacity: 1;
 }
 
 .thumbnail-grid .img-container {
   height: 100%;
   width: 100%;
 }
 
+.thumbnail-grid .img-container:not([generic-thumbnail]) {
+  -webkit-user-drag: none;
+  background-size: cover;
+  background-position: center;

[fukino, 2015/02/12 07:25:01]

nit: posision < size in alphabetical order

[yawano, 2015/02/12 09:38:24]

Done.

+  opacity: 0;
+  transition: opacity 250ms linear;
+}
+
+.thumbnail-grid .img-container.loaded:not([generic-thumbnail]) {
+  opacity: 1;
+}
+
 .thumbnail-grid .thumbnail-bottom {
   background: rgba(0, 0, 0, 0.55);
   color: #fff;
   height: 30px;
 }
 
 .badge {
   height: 16px;
   position: absolute;
   right: 7px;
@@ skipping 368 matching lines @@
   position: absolute;
   transition: opacity 220ms ease;
   width: 28px;
 }
 
 #list-container list li[selected] .detail-checkmark {
   opacity: 1;
 }
 
 #list-container list li .detail-thumbnail {
+  -webkit-user-drag: none;
+  background-position: center;
+  background-size: cover;
   border-radius: 14px;
   height: 28px;
   opacity: 0;
   overflow: hidden;
   position: absolute;
   transition: opacity 220ms ease;
   width: 28px;
 }
 
-#list-container list li .detail-thumbnail > img {
-  -webkit-user-drag: none;
-  position: absolute;
-}
-
 #list-container list li:not([selected]) .detail-thumbnail.loaded {
   opacity: 1;
 }
 
 .preview-panel .spacer {
   flex: auto;
 }
 
 #delete-button[disabled] {
   display: none;
@@ skipping 658 matching lines @@
   padding: 20px 15px;
 }
 
 .text-measure {
   pointer-events: none;
   position: absolute;
   top: 0;
   visibility: hidden;
   z-index: -1;
 }