Introduce Image loader extension.

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

 // Copyright (c) 2012 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.
 
 /**
  * Loads a thumbnail using provided url. In CANVAS mode, loaded images
  * are attached as <canvas> element, while in IMAGE mode as <img>.
  * <canvas> renders faster than <img>, however has bigger memory overhead.
  *
  * @param {string} url File URL.
@@ skipping 20 matching lines @@
       if (apps[i].docIcon && apps[i].isPrimary) {
         this.fallbackUrl_ = apps[i].docIcon;
         break;
       }
     }
   }
 
   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_) {
     // Use fallback as the primary thumbnail.
     this.thumbnailUrl_ = this.fallbackUrl_;
     this.fallbackUrl_ = null;
   } // else the generic thumbnail based on the media type will be used.
 }
 
 /**
- * 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.
  * @type {number}
  */
 ThumbnailLoader.AUTO_FILL_THRESHOLD = 0.3;
 
 /**
  * Type of displaying a thumbnail within a box.
  * @enum
  */
 ThumbnailLoader.FillMode = {
   FILL: 0,  // Fill whole box. Image may be cropped.
   FIT: 1,   // Keep aspect ratio, do not crop.
   AUTO: 2   // Try to fill, but if incompatible aspect ratio, then fit.
 };
 
 /**
+ * Optimization mode for downloading thumbnails.
+ * @enum
+ */
+ThumbnailLoader.OptimizationMode = {
+  NEVER_DISCARD: 0,    // Never discards downloading. No optimization.
+  DISCARD_DETACHED: 1  // Canceled if the container is not attached anymore.
+};
+
+/**
  * Type of element to store the image.
  * @enum
  */
 ThumbnailLoader.LoaderType = {
   IMAGE: 0,
   CANVAS: 1
 };
 
 /**
- * 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;
+
+/**
+ * Loads and attaches an image.
  *
  * @param {HTMLElement} box Container element.
  * @param {ThumbnailLoader.FillMode} fillMode Fill mode.
+ * @param {ThumbnailLoader.OptimizationMode=} opt_optimizationMode Optimization
+ *     for downloading thumbnails. By default optimizations are disabled.
  * @param {function(Image, object} opt_onSuccess Success callback,
- *   accepts the image and the transform.
+ *     accepts the image and the transform.
  * @param {function} opt_onError Error callback.
  * @param {function} opt_onGeneric Callback for generic image used.
  */
-ThumbnailLoader.prototype.load = function(
-    box, fillMode, opt_onSuccess, opt_onError, opt_onGeneric) {
+ThumbnailLoader.prototype.load = function(box, fillMode, opt_optimizationMode,
+    opt_onSuccess, opt_onError, opt_onGeneric) {
+  opt_optimizationMode = opt_optimizationMode ||
+      ThumbnailLoader.OptimizationMode.NEVER_DISCARD;
+
   if (!this.thumbnailUrl_) {
     // Relevant CSS rules are in file_types.css.
     box.setAttribute('generic-thumbnail', this.mediaType_);
     if (opt_onGeneric) opt_onGeneric();
     return;
   }
 
   this.canvasUpToDate_ = false;
   this.image_ = new Image();
   this.image_.onload = function() {
     this.attachImage(box, fillMode);
     if (opt_onSuccess)
       opt_onSuccess(this.image_, this.transform_);
   }.bind(this);
   this.image_.onerror = function() {
     if (opt_onError)
       opt_onError();
     if (this.fallbackUrl_) {
       new ThumbnailLoader(this.fallbackUrl_,
                           this.loaderType_,
                           null,
                           this.mediaType_).
           load(box, fillMode, opt_onSuccess);
     } else {
       box.setAttribute('generic-thumbnail', this.mediaType_);
     }
   }.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 (opt_optimizationMode ==
+            ThumbnailLoader.OptimizationMode.DISCARD_DETACHED &&
+            !box.ownerDocument.contains(box)) {
+          // If the container is not attached, then invalidate the download.
+          return false;
+        }
+        return true;
+      });
+
+  if (!taskId)
+    this.image_.classList.add('cached');
 };
 
 /**
  * @return {boolean} True if a valid image is loaded.
  */
 ThumbnailLoader.prototype.hasValidImage = function() {
   return !!(this.image_ && this.image_.width && this.image_.height);
 };
 
 /**
@@ skipping 27 matching lines @@
 ThumbnailLoader.prototype.loadDetachedImage = function(callback) {
   if (!this.thumbnailUrl_) {
     callback(true);
     return;
   }
 
   this.canvasUpToDate_ = false;
   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');
 };
 
 /**
  * Attach the image to a given element.
  * @param {Element} container Parent element.
  * @param {ThumbnailLoader.FillMode} fillMode Fill mode.
  */
 ThumbnailLoader.prototype.attachImage = function(container, fillMode) {
   if (!this.hasValidImage()) {
     container.setAttribute('generic-thumbnail', this.mediaType_);
@@ skipping 101 matching lines @@
 
   function percent(fraction) {
     return (fraction * 100).toFixed(2) + '%';
   }
 
   img.style.width = percent(fractionX);
   img.style.height = percent(fractionY);
   img.style.left = percent((1 - fractionX) / 2);
   img.style.top = percent((1 - fractionY) / 2);
 };