Integrate ListThumbnailLoader to list view and grid view.

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

Index: ui/file_manager/file_manager/foreground/js/ui/file_table.js
diff --git a/ui/file_manager/file_manager/foreground/js/ui/file_table.js b/ui/file_manager/file_manager/foreground/js/ui/file_table.js
index 23c2e7c65ed910a3c3e3a57103146e70338801f5..428334a7ba3e8cec7b112043fe701befc8dc686e 100644
--- a/ui/file_manager/file_manager/foreground/js/ui/file_table.js
+++ b/ui/file_manager/file_manager/foreground/js/ui/file_table.js
@@ -251,12 +251,25 @@ FileTable.decorate = function(
     self, metadataCache, fileSystemMetadata, volumeManager, historyLoader,
     fullPage) {
   cr.ui.Table.decorate(self);
+  FileTableList.decorate(self.list);
   self.__proto__ = FileTable.prototype;
   self.metadataCache_ = metadataCache;
   self.fileSystemMetadata_ = fileSystemMetadata;
   self.volumeManager_ = volumeManager;
   self.historyLoader_ = historyLoader;
 
+  /** @private {ListThumbnailLoader} */
+  self.listThumbnailLoader_ = null;
+
+  /** @private {number} */
+  self.beginIndex_ = 0;
+
+  /** @private {number} */
+  self.endIndex_ = 0;
+
+  /** @private {function(!Event)} */
+  self.onThumbnailLoadedBound_ = self.onThumbnailLoaded_.bind(self);
+
   var nameColumn = new cr.ui.table.TableColumn(
       'name', str('NAME_COLUMN_LABEL'), fullPage ? 386 : 324);
   nameColumn.renderFunction = self.renderName_.bind(self);
@@ -299,6 +312,7 @@ FileTable.decorate = function(
 
   self.scrollBar_ = new ScrollBar();
   self.scrollBar_.initialize(self, self.list);
+
   // Keep focus on the file list when clicking on the header.
   self.header.addEventListener('mousedown', function(e) {
     self.list.focus();
@@ -352,6 +366,58 @@ FileTable.decorate = function(
 };
 
 /**
+ * Updates high priority range of list thumbnail loader based on current
+ * viewport.
+ *
+ * @param {number} beginIndex Begin index.
+ * @param {number} endIndex End index.
+ */
+FileTable.prototype.updateHighPriorityRange = function(beginIndex, endIndex) {
+  // Keep these values to set range when a new list thumbnail loader is set.
+  this.beginIndex_ = beginIndex;
+  this.endIndex_ = endIndex;
+
+  if (this.listThumbnailLoader_ !== null)
+    this.listThumbnailLoader_.setHighPriorityRange(beginIndex, endIndex);
+};
+
+/**
+ * Sets list thumbnail loader.
+ * @param {ListThumbnailLoader} listThumbnailLoader A list thumbnail loader.
+ */
+FileTable.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_);
+    this.listThumbnailLoader_.setHighPriorityRange(
+        this.beginIndex_, this.endIndex_);
+  }
+};
+
+/**
+ * Handles thumbnail loaded event.
+ * @param {!Event} event An event.
+ * @private
+ */
+FileTable.prototype.onThumbnailLoaded_ = function(event) {
+  var listItem = this.getListItemByIndex(event.index);
+  if (listItem) {
+    var box = listItem.querySelector('.detail-thumbnail');
+    if (box) {
+      this.setThumbnailImage_(
+          assertInstanceof(box, HTMLDivElement), event.dataUrl);
+    }
+  }
+};
+
+/**
  * Adjust column width to fit its content.
  * @param {number} index Index of the column to adjust width.
  * @override
@@ -780,23 +846,28 @@ FileTable.prototype.renderThumbnail_ = function(entry) {
       (this.ownerDocument.createElement('div'));
   box.className = 'detail-thumbnail';
 
-  if (entry) {
-    this.metadataCache_.getOne(
-        entry, 'thumbnail|filesystem|external|media',
-        function(metadata) {
-          var loader = new ThumbnailLoader(
-              entry, ThumbnailLoader.LoaderType.IMAGE, metadata);
-          loader.load(box, ThumbnailLoader.FillMode.OVER_FILL,
-                      ThumbnailLoader.OptimizationMode.DISCARD_DETACHED,
-                      function(image, transform) {
-                        box.classList.add('loaded');
-                      });
-        });
+  // Set thumbnail if it's already in cache.
+  if (this.listThumbnailLoader_ &&
+      this.listThumbnailLoader_.getThumbnailFromCache(entry)) {
+    this.setThumbnailImage_(
+        box, this.listThumbnailLoader_.getThumbnailFromCache(entry).dataUrl);
   }
+
   return box;
 };
 
 /**
+ * Sets thumbnail image to the box.
+ * @param {!HTMLDivElement} box Detail thumbnail div element.
+ * @param {string} dataUrl Data url of thumbnail.
+ * @private
+ */
+FileTable.prototype.setThumbnailImage_ = function(box, dataUrl) {
+  box.style.backgroundImage = 'url(' + dataUrl + ')';
+  box.classList.add('loaded');
+};
+
+/**
  * Renders the selection checkmark in the detail table.
  * @return {!HTMLDivElement} Created element.
  * @private