support animated GIF

ui/file_manager/gallery/js/image_editor/image_util.js

 // Copyright 2014 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.
 
 // Namespace object for the utilities.
 var ImageUtil = {};
 
 /**
  * Performance trace.
  */
@@ skipping 422 matching lines @@
  */
 ImageUtil.ImageLoader = function(document, metadataModel) {
   this.document_ = document;
 
   /**
    * @private {!MetadataModel}
    * @const
    */
   this.metadataModel_ = metadataModel;
 
-  this.image_ = new Image();
   this.generation_ = 0;
 
   /**
    * @type {number}
    * @private
    */
   this.timeout_ = 0;
 
   /**
    * @type {?function(!HTMLCanvasElement, string=)}
@@ skipping 19 matching lines @@
  * @param {number=} opt_delay Load delay in milliseconds, useful to let the
  *     animations play out before the computation heavy image loading starts.
  */
 ImageUtil.ImageLoader.prototype.load = function(item, callback, opt_delay) {
   var entry = item.getEntry();
 
   this.cancel();
   this.entry_ = entry;
   this.callback_ = callback;
 
-  var targetImage = this.image_;
+  var targetImage = assertInstanceof(this.document_.createElement('img'),
+      HTMLImageElement);
   // The transform fetcher is not cancellable so we need a generation counter.
   var generation = ++this.generation_;
 
   /**
    * @param {!HTMLImageElement} image Image to be transformed.
    * @param {Object=} opt_transform Transformation.
    */
   var onTransform = function(image, opt_transform) {
     if (generation === this.generation_) {
       this.convertImage_(
-          image, opt_transform || { scaleX: 1, scaleY: 1, rotate90: 0});
+          image, opt_transform);

[yawano, 2016/01/20 06:41:33]

nit: this line also fits in one line.

[ryoh, 2016/01/21 03:19:55]

Done.

     }
   };
   onTransform = onTransform.bind(this);
 
   /**
    * @param {string=} opt_error Error.
    */
   var onError = function(opt_error) {
     targetImage.onerror = null;
     targetImage.onload = null;
@@ skipping 28 matching lines @@
     targetImage.onerror = onError.bind(null, 'GALLERY_IMAGE_ERROR');
 
     targetImage.src = url;
   }.bind(this);
 
   // Loads the image. If already loaded, then forces a reload.
   var startLoad = function() {
     if (generation !== this.generation_)
       return;
 
-    // Target current image.
-    targetImage = this.image_;
-
     // Obtain target URL.
     if (FileType.isRaw(entry)) {
       var timestamp =
           item.getMetadataItem() &&
           item.getMetadataItem().modificationTime &&
           item.getMetadataItem().modificationTime.getTime();
       ImageLoaderClient.getInstance().load(entry.toURL(), function(result) {
         if (generation !== this.generation_)
           return;
         if (result.status === 'success')
@@ skipping 47 matching lines @@
  * Stops loading image.
  */
 ImageUtil.ImageLoader.prototype.cancel = function() {
   if (!this.callback_)
     return;
   this.callback_ = null;
   if (this.timeout_) {
     clearTimeout(this.timeout_);
     this.timeout_ = 0;
   }
-  if (this.image_) {
-    this.image_.onload = function() {};
-    this.image_.onerror = function() {};
-    // Force to free internal image by assigning empty image.
-    this.image_.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAA' +
-        'AAABAAEAAAICTAEAOw==';
-    this.image_ = document.createElement('img');
-  }
   this.generation_++;  // Silence the transform fetcher if it is in progress.
 };
 
 /**
  * @param {!HTMLImageElement} image Image to be transformed.
  * @param {!Object} transform transformation description to apply to the image.
  * @private
  */
 ImageUtil.ImageLoader.prototype.convertImage_ = function(image, transform) {
+  if (!transform ||
+        (transform.rotate90 === 0 &&
+         transform.scaleX === 1 &&
+         transform.scaleY === 1)) {
+    try {

[hirono, 2016/01/20 06:07:09]

Why is this try closure needed?

[ryoh, 2016/01/21 03:19:55]

It's copied from here:
https://code.google.com/p/chromium/codesearch#chromium/src/ui/file_manager/ga...

I think this try block is also not required.
I will remove both of them.

+      setTimeout(this.callback_, 0, image);
+    } catch (e) {
+      console.error(e);
+    }
+    this.callback_ = null;
+    return;
+  }
   var canvas = this.document_.createElement('canvas');
 
   if (transform.rotate90 & 1) {  // Rotated +/-90deg, swap the dimensions.
     canvas.width = image.height;
     canvas.height = image.width;
   } else {
     canvas.width = image.width;
     canvas.height = image.height;
   }
 
@@ skipping 90 matching lines @@
 ImageUtil.getMetricName = function(name) {
   return 'PhotoEditor.' + name;
 };
 
 /**
  * Used for metrics reporting, keep in sync with the histogram description.
  * @type {Array<string>}
  * @const
  */
 ImageUtil.FILE_TYPES = ['jpg', 'png', 'gif', 'bmp', 'webp'];