Introduce Image loader extension.

chrome/browser/resources/file_manager/js/media/media_util.js

Index: chrome/browser/resources/file_manager/js/media/media_util.js
diff --git a/chrome/browser/resources/file_manager/js/media/media_util.js b/chrome/browser/resources/file_manager/js/media/media_util.js
index b9934bc2469e1cfe1b8f297b6e5f1d700d76bc42..865f5117fbf72aa7b6ecd4d2b5e649e1637d2c06 100644
--- a/chrome/browser/resources/file_manager/js/media/media_util.js
+++ b/chrome/browser/resources/file_manager/js/media/media_util.js
@@ -38,8 +38,7 @@ function ThumbnailLoader(url, opt_loaderType, opt_metadata, opt_mediaType) {
   if (opt_metadata.thumbnail && opt_metadata.thumbnail.url) {
     this.thumbnailUrl_ = opt_metadata.thumbnail.url;
     this.transform_ = opt_metadata.thumbnail.transform;
-  } else if (FileType.isImage(url) &&
-      ThumbnailLoader.canUseImageUrl_(opt_metadata)) {
+  } else if (FileType.isImage(url)) {
     this.thumbnailUrl_ = url;
     this.transform_ = opt_metadata.media && opt_metadata.media.imageTransform;
   } else if (this.fallbackUrl_) {
@@ -50,16 +49,6 @@ function ThumbnailLoader(url, opt_loaderType, opt_metadata, opt_mediaType) {
 }
 
 /**
- * Files with more pixels won't have thumbnails.
- */
-ThumbnailLoader.MAX_PIXEL_COUNT = 1 << 21; // 2 MPix
-
-/**
- * Files of bigger size won't have thumbnails.
- */
-ThumbnailLoader.MAX_FILE_SIZE = 1 << 20; // 1 Mb
-
-/**
  * In percents (0.0 - 1.0), how much area can be cropped to fill an image
  * in a container, when loading a thumbnail in FillMode.AUTO mode.
  * The specified 30% value allows to fill 16:9, 3:2 pictures in 4:3 element.
@@ -87,21 +76,18 @@ ThumbnailLoader.LoaderType = {
 };
 
 /**
- * If an image file does not have an embedded thumbnail we might want to use
- * the image itself as a thumbnail. If the image is too large it hurts
- * the performance a lot so we allow it only for moderately sized files.
- *
- * @param {Object} metadata Metadata object.
- * @return {boolean} Whether it is OK to use the image url for a preview.
- * @private
+ * Maximum thumbnail's width when generating from the full resolution image.
+ * @const
+ * @type {number}
  */
-ThumbnailLoader.canUseImageUrl_ = function(metadata) {
-  return (metadata.filesystem && metadata.filesystem.size &&
-      metadata.filesystem.size <= ThumbnailLoader.MAX_FILE_SIZE) ||
-     (metadata.media && metadata.media.width && metadata.media.height &&
-      metadata.media.width * metadata.media.height <=
-          ThumbnailLoader.MAX_PIXEL_COUNT);
-};
+ThumbnailLoader.THUMBNAIL_MAX_WIDTH = 500;
+
+/**
+ * Maximum thumbnail's height when generating from the full resolution image.
+ * @const
+ * @type {number}
+ */
+ThumbnailLoader.THUMBNAIL_MAX_HEIGHT = 500;
 
 /**
  *
@@ -142,12 +128,29 @@ ThumbnailLoader.prototype.load = function(
     }
   }.bind(this);
 
-  if (this.image_.src == this.thumbnailUrl_) {
-    console.warn('Thumnbnail already loaded: ' + this.thumbnailUrl_);
+  if (this.image_.src) {
+    console.warn('Thumbnail already loaded: ' + this.thumbnailUrl_);
     return;
   }
 
-  util.loadImage(this.image_, this.thumbnailUrl_);
+  // TODO(mtomasz): Smarter calculation of the requested size.
+  var wasAttached = box.ownerDocument.contains(box);
+  var taskId = util.loadImage(
+      this.image_,
+      this.thumbnailUrl_,
+      { maxWidth: ThumbnailLoader.THUMBNAIL_MAX_WIDTH,
+        maxHeight: ThumbnailLoader.THUMBNAIL_MAX_HEIGHT,
+        cache: true },
+      function() {
+        // If was attached, and it is not anymore, then cancel downloading.
+        var isAttached = box.ownerDocument.contains(box);
+        if (wasAttached && !isAttached)
+          return false;
+        return true;
+      });
+
+  if (!taskId)
+    this.image_.classList.add('cached');
 };
 
 /**
@@ -195,7 +198,17 @@ ThumbnailLoader.prototype.loadDetachedImage = function(callback) {
   this.image_ = new Image();
   this.image_.onload = callback.bind(null, true);
   this.image_.onerror = callback.bind(null, false);
-  util.loadImage(this.image_, this.thumbnailUrl_);
+
+  // TODO(mtomasz): Smarter calculation of the requested size.
+  var taskId = util.loadImage(
+      this.image_,
+      this.thumbnailUrl_,
+      { maxWidth: ThumbnailLoader.THUMBNAIL_MAX_WIDTH,
+        maxHeight: ThumbnailLoader.THUMBNAIL_MAX_HEIGHT,
+        cache: true });
+
+  if (!taskId)
+    this.image_.classList.add('cached');
 };
 
 /**