Merge 200198

> Fixed loading images in Files.app's slide view due to change in Blink.
> 
> Recently in Blink onerror events became asynchronous instead of synchronous. As a result loading images in Files.app's slide view stopped working. This was because we were setting the src to an empty string to force reloading of the image and since the onerror handler was empty, there was no problem. After onerror got asynchronous, it became called later, after we assigned an onerror handler for the real image. This caused calling an onerror event for setting an src attribute to en empty string, which was handled as an error in loading the real image.
> 
> This patch fixes this issue by using an 1x1 image instead an empty src attribute and waiting until it is loaded before processing the real image.
> 
> TEST=Check if Files.app's slide view is working.
> BUG=240751
> R=yoshiki@chromium.org
> 
> Review URL: https://codereview.chromium.org/14589019

TBR=mtomasz@chromium.org

git-svn-id: svn://svn.chromium.org/chrome/branches/1500/src@203253 0039d316-1c4b-4281-b951-d872f2087c98

1 files changed, 36 insertions, 18 deletions

diff --git a/chrome/browser/resources/file_manager/js/image_editor/image_util.js b/chrome/browser/resources/file_manager/js/image_editor/image_util.js
index c119ce49..b7499b4 100644
--- a/chrome/browser/resources/file_manager/js/image_editor/image_util.js
+++ b/chrome/browser/resources/file_manager/js/image_editor/image_util.js
@@ -430,7 +430,8 @@ ImageUtil.ImageLoader.isTooLarge = function(image) {
  * @param {string} url Image URL.
  * @param {function(function(object))} transformFetcher function to get
  *     the image transform (which we need for the image orientation).
- * @param {function(HTMLCanvasElement)} callback To be called when loaded.
+ * @param {function(HTMLCanvasElement, string=)} callback Callback to be
+ *     called when loaded. The second optional argument is an error identifier.
  * @param {number=} opt_delay Load delay in milliseconds, useful to let the
  *     animations play out before the computation heavy image loading starts.
  */
@@ -450,37 +451,54 @@ ImageUtil.ImageLoader.prototype.load = function(
     }
   };
 
-  var startLoad = function() {
+  var onError = function(opt_error) {
+    this.image_.onerror = null;
+    this.image_.onload = null;
+    var tmpCallback = this.callback_;
+    this.callback_ = null;
+    var emptyCanvas = this.document_.createElement('canvas');
+    emptyCanvas.width = 0;
+    emptyCanvas.height = 0;
+    tmpCallback(emptyCanvas, opt_error);
+  }.bind(this);
+
+  var loadImage = function() {
     ImageUtil.metrics.startInterval(ImageUtil.getMetricName('LoadTime'));
     this.timeout_ = null;
-    // The clients of this class sometimes request the same url repeatedly.
-    // The onload fires only if the src is different from the previous value.
-    // To work around that we reset the src temporarily.
-    this.image_.src = '';
-    var errorCallback = function(error) {
-      this.image_.onerror = null;
-      this.image_.onload = null;
-      var tmpCallback = this.callback_;
-      this.callback_ = null;
-      var emptyCanvas = this.document_.createElement('canvas');
-      emptyCanvas.width = 0;
-      emptyCanvas.height = 0;
-      tmpCallback(emptyCanvas, error);
-    }.bind(this);
     this.image_.onload = function(e) {
       this.image_.onerror = null;
       this.image_.onload = null;
       if (ImageUtil.ImageLoader.isTooLarge(this.image_)) {
-        errorCallback('IMAGE_TOO_BIG_ERROR');
+        onError('IMAGE_TOO_BIG_ERROR');
         return;
       }
       transformFetcher(url, onTransform.bind(this, e.target));
     }.bind(this);
     // errorCallback has an optional error argument, which in case of general
     // error should not be specified
-    this.image_.onerror = errorCallback.bind(this, 'IMAGE_ERROR');
+    this.image_.onerror = onError.bind(this, 'IMAGE_ERROR');
     this.taskId_ = util.loadImage(this.image_, url);
   }.bind(this);
+
+  // The clients of this class sometimes request the same url repeatedly.
+  // The onload fires only if the src is different from the previous value.
+  // To work around that we reset the src temporarily to an 1x1 pixel.
+  // Load an empty 1x1 pixel image first.
+  var resetImage = function(callback) {
+    this.image_.onload = callback;
+    this.image_.onerror = onError.bind(this, 'IMAGE_ERROR');
+    this.image_.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAA' +
+        'AAABAAEAAAICTAEAOw==';
+  }.bind(this);
+
+  // Loads the image. If already loaded, then forces reloads.
+  var startLoad = function() {
+    if (this.image_.src == url)
+      resetImage(loadImage);
+    else
+      loadImage();
+  }.bind(this);
+
   if (opt_delay) {
     this.timeout_ = setTimeout(startLoad, opt_delay);
   } else {