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 72408de1c085d550948bef84dbcec2e1f5a95ef9..77167e50da81a99c7fd30539870024fb14cf1551 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
@@ -257,6 +257,12 @@ FileTable.decorate = function(
   self.volumeManager_ = volumeManager;
   self.historyLoader_ = historyLoader;
 
+  /** @private {!ListThumbnailLoader} */
+  self.listThumbnailLoader_ = null;
+
+  /** @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 +305,10 @@ FileTable.decorate = function(
 
   self.scrollBar_ = new MainPanelScrollBar();
   self.scrollBar_.initialize(self, self.list);
+  self.list.addEventListener('scroll', self.onScroll_.bind(self));
+  self.updateHighPriorityRangeRateLimiter_ =
+      new AsyncUtil.RateLimiter(self.updateHighPriorityRange_.bind(self), 500);
+
   // Keep focus on the file list when clicking on the header.
   self.header.addEventListener('mousedown', function(e) {
     self.list.focus();
@@ -319,6 +329,7 @@ FileTable.decorate = function(
         continue;
       FileTableSplitter.decorate(splitters[i]);
     }
+    self.updateHighPriorityRangeRateLimiter_.run();
   };
 
   // Save the last selection. This is used by shouldStartDragSelection.
@@ -352,6 +363,61 @@ FileTable.decorate = function(
 };
 
 /**
+ * Updates high priority range of list thumbnail loader based on current
+ * viewport. Since this method is cpu-consuming, call this method via
+ * this.updateHighPriorityRangeRateLimiter_.
+ */
+FileTable.prototype.updateHighPriorityRange_ = function() {
+  if (this.listThumbnailLoader_ === null)
+    return;
+
+  var viewport = this.list_.getItemsInViewPort(
+      this.list_.scrollTop, this.list_.clientHeight);
+  this.listThumbnailLoader_.setHighPriorityRange(viewport.first, viewport.last);
+};
+
+/**
+ * Handle scroll event.
+ * @param {!Event} event An event.
+ */
+FileTable.prototype.onScroll_ = function(event) {
+  this.updateHighPriorityRangeRateLimiter_.run();
+};
+
+/**
+ * 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.updateHighPriorityRangeRateLimiter_.run();
+  }
+};
+
+/**
+ * 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_(box, 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