Integrate ListThumbnailLoader to list view and grid view.

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

Index: ui/file_manager/file_manager/foreground/js/ui/file_grid.js
diff --git a/ui/file_manager/file_manager/foreground/js/ui/file_grid.js b/ui/file_manager/file_manager/foreground/js/ui/file_grid.js
index 294161208428829ffd401981563f9050b2e9df0d..2173b6163331552025c9f37743d639bf95c08ea1 100644
--- a/ui/file_manager/file_manager/foreground/js/ui/file_grid.js
+++ b/ui/file_manager/file_manager/foreground/js/ui/file_grid.js
@@ -45,6 +45,12 @@ FileGrid.decorate = function(
   self.volumeManager_ = volumeManager;
   self.historyLoader_ = historyLoader;
 
+  /** @private {ListThumbnailLoader} */
+  self.listThumbnailLoader_ = null;
+
+  /** @private {function(!Event)} */
+  self.onThumbnailLoadedBound_ = self.onThumbnailLoaded_.bind(self);
+
   self.scrollBar_ = new MainPanelScrollBar();
   self.scrollBar_.initialize(self.parentElement, self);
   self.setBottomMarginForPanel(0);
@@ -59,7 +65,7 @@ FileGrid.decorate = function(
   self.previousItems_ = {};
 
   self.itemConstructor = function(entry) {
-    var item = self.ownerDocument.createElement('LI');
+    var item = self.ownerDocument.createElement('li');
     FileGrid.Item.decorate(
         item,
         entry,
@@ -74,11 +80,47 @@ FileGrid.decorate = function(
 };
 
 /**
+ * Sets list thumbnail loader.
+ * @param {ListThumbnailLoader} listThumbnailLoader A list thumbnail loader.
+ * @private
+ */
+FileGrid.prototype.setListThumbnailLoader = function(listThumbnailLoader) {
+  if (this.listThumbnailLoader_) {
+    this.listThumbnailLoader_.removeEventListener(
+        'thumbnailLoaded', this.onThumbnailLoadedBound_);
+  }
+
+  this.listThumbnailLoader_ = listThumbnailLoader;
+
+  if (this.listThumbnailLoader_) {
+    this.listThumbnailLoader_.addEventListener(
+        'thumbnailLoaded', this.onThumbnailLoadedBound_);
+  }
+};
+
+/**
+ * Handles thumbnail loaded event.
+ * @param {!Event} event An event.
+ * @private
+ */
+FileGrid.prototype.onThumbnailLoaded_ = function(event) {
+  var listItem = this.getListItemByIndex(event.index);
+  if (listItem) {
+    var box = listItem.querySelector('.img-container');
+    if (box)
+      FileGrid.setThumbnailImage_(box, event.dataUrl);
+  }
+};
+
+/**
  * @override
  */
 FileGrid.prototype.mergeItems = function() {

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

As the startIndex and endIndex are in use now, could you declare them explicitly
in parameter list?

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

For grid item, we use mergeItems to call setHighPriorityRange, but for list
view, we use 'scroll' event to call setHighPriorityRange. Can we use consistent
way to call setHighPriorityRange?

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

Done. Changed grid view to onScroll event based implementation.

   cr.ui.Grid.prototype.mergeItems.apply(this, arguments);
 
+  if (this.listThumbnailLoader_)
+    this.listThumbnailLoader_.setHighPriorityRange(arguments[0], arguments[1]);
+
   // Update item cache.
   for (var url in this.previousItems_) {
     if (this.getIndexOfListItem(this.previousItems_[url]) === -1)
@@ -101,16 +143,12 @@ FileGrid.prototype.updateListItemsMetadata = function(type, entries) {
     if (!entry || urls.indexOf(entry.toURL()) === -1)
       continue;
 
-    FileGrid.decorateThumbnailBox_(
-        box,
-        entry,
-        this.metadataCache_,
-        this.fileSystemMetadata_,
-        this.volumeManager_,
-        this.historyLoader_,
-        ThumbnailLoader.FillMode.OVER_FILL,
-        FileGrid.ThumbnailQuality.LOW,
-        /* animation */ false);
+    FileGrid.decorateThumbnailBox_(box,
+                                   entry,
+                                   this.fileSystemMetadata_,
+                                   this.volumeManager_,
+                                   this.historyLoader_,
+                                   this.listThumbnailLoader_);
   }
 };
 
@@ -154,6 +192,7 @@ FileGrid.decorateThumbnail_ = function(
     fileSystemMetadata,
     volumeManager,
     historyLoader,
+    listThumbnailLoader,
     previousItem) {
   li.className = 'thumbnail-item';
   if (entry)
@@ -163,6 +202,8 @@ FileGrid.decorateThumbnail_ = function(
   frame.className = 'thumbnail-frame';
   li.appendChild(frame);
 
+  // TODO(yawano) Most of following codes seems to be unnecessary anymore.
+  // Investigate it, and make this simple.
   var previousBox =
       previousItem ? previousItem.querySelector('.img-container') : null;
   var box;
@@ -184,13 +225,10 @@ FileGrid.decorateThumbnail_ = function(
     FileGrid.decorateThumbnailBox_(
         box,
         entry,
-        metadataCache,
         fileSystemMetadata,
         volumeManager,
         historyLoader,
-        ThumbnailLoader.FillMode.OVER_FILL,
-        FileGrid.ThumbnailQuality.LOW,
-        /* animation */ !previousBox);
+        listThumbnailLoader);
   }
   frame.appendChild(box);
 
@@ -216,20 +254,16 @@ FileGrid.decorateThumbnail_ = function(
  *
  * @param {Element} box Box to decorate.
  * @param {Entry} entry Entry which thumbnail is generating for.
- * @param {MetadataCache} metadataCache To retrieve thumbnail.
  * @param {!FileSystemMetadata} fileSystemMetadata To retrieve metadata.
  * @param {VolumeManagerWrapper} volumeManager Volume manager instance.
  * @param {!importer.HistoryLoader} historyLoader
- * @param {ThumbnailLoader.FillMode} fillMode Fill mode.
- * @param {FileGrid.ThumbnailQuality} quality Thumbnail quality.
- * @param {boolean} animation Whther to use fadein animation or not.

[fukino, 2015/02/12 07:35:16]

fadein animation was removed. Is it intended modification?

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

Yes. This is intentional. Since we use css-transition for the new
implementation, we don't need this parameter any more.

  * @param {function(HTMLImageElement)=} opt_imageLoadCallback Callback called
  *     when the image has been loaded before inserting it into the DOM.
  * @private
  */
 FileGrid.decorateThumbnailBox_ = function(
-    box, entry, metadataCache, fileSystemMetadata, volumeManager, historyLoader,
-    fillMode, quality, animation, opt_imageLoadCallback) {
+    box, entry, fileSystemMetadata, volumeManager, historyLoader,
+    listThumbnailLoader, opt_imageLoadCallback) {
   box.className = 'img-container';
 
   if (importer.isEligibleEntry(volumeManager, entry)) {
@@ -251,43 +285,32 @@ FileGrid.decorateThumbnailBox_ = function(
     return;
   }
 
-  var metadataTypes = 'thumbnail|filesystem|external|media';
-
-  // CONTENT_METADATA contains usually very tiny thumbnails. So use it only for
-  // ThumbnailQuality.LOW.
-  var loadTargets;
-  switch (quality) {
-    case FileGrid.ThumbnailQuality.LOW:
-      loadTargets = [
-        ThumbnailLoader.LoadTarget.CONTENT_METADATA,
-        ThumbnailLoader.LoadTarget.EXTERNAL_METADATA,
-        ThumbnailLoader.LoadTarget.FILE_ENTRY
-      ];
-      break;
-    case FileGrid.ThumbnailQuality.HIGH:
-      loadTargets = [
-        ThumbnailLoader.LoadTarget.EXTERNAL_METADATA,
-        ThumbnailLoader.LoadTarget.FILE_ENTRY
-      ];
-      break;
+  // Set thumbnail if it's already in cache.
+  if (listThumbnailLoader &&
+      listThumbnailLoader.getThumbnailFromCache(entry)) {
+    FileGrid.setThumbnailImage_(
+        box, listThumbnailLoader.getThumbnailFromCache(entry).dataUrl);
+  } else {
+    var mediaType = FileType.getMediaType(entry);
+    box.setAttribute('generic-thumbnail', mediaType);
   }
+};
+
+/**
+ * Sets thumbnail image to the box.
+ * @param {!HTMLDivElement} box Thumbnail div element.
+ * @param {string} dataUrl Data url of thumbnail.
+ * @private
+ */
+FileGrid.setThumbnailImage_ = function(box, dataUrl) {
+  // Remove generic thumbnail if it has.
+  if (box.hasAttribute('generic-thumbnail'))
+    box.removeAttribute('generic-thumbnail');
+
+  box.style.backgroundImage = 'url(' + dataUrl + ')';
 
-  metadataCache.getOne(entry, metadataTypes,
-      function(metadata) {
-        new ThumbnailLoader(entry,
-                            ThumbnailLoader.LoaderType.IMAGE,
-                            metadata,
-                            undefined,  // opt_mediaType
-                            loadTargets).
-            load(box,
-                fillMode,
-                ThumbnailLoader.OptimizationMode.DISCARD_DETACHED,
-                function(image, transform) {
-                  image.classList.toggle('cached', !animation);
-                  if (opt_imageLoadCallback)
-                    opt_imageLoadCallback(image);
-                });
-      });
+  // Add loaded class as async to make transition.
+  setTimeout(function() { box.classList.add('loaded'); }, 0);
 };
 
 /**
@@ -372,6 +395,7 @@ FileGrid.Item.decorate = function(li, entry, grid, previousItem) {
       grid.fileSystemMetadata_,
       grid.volumeManager_,
       grid.historyLoader_,
+      grid.listThumbnailLoader_,
       previousItem);
 
   // Override the default role 'listitem' to 'option' to match the parent's