Fixing race condition in prepearing thumbnails for the bottom panel.

chrome/browser/resources/file_manager/js/file_manager.js

Index: chrome/browser/resources/file_manager/js/file_manager.js
diff --git a/chrome/browser/resources/file_manager/js/file_manager.js b/chrome/browser/resources/file_manager/js/file_manager.js
index b4529d8f326803d94c258d7e5f338431ea6a6bce..ef729e463c82be51eaa39fd5cf84b16351cb38b3 100644
--- a/chrome/browser/resources/file_manager/js/file_manager.js
+++ b/chrome/browser/resources/file_manager/js/file_manager.js
@@ -55,6 +55,14 @@ function FileManager(dialogDom) {
   this.dialogDom_.style.opacity = '1';
 }
 
+/**
+ * Maximum delay in milliseconds for updating thumbnails in the bottom panel
+ * to mitigate flickering. If images load faster then the delay they replace
+ * old images smoothly. On the other hand we don't want to keep old images
+ * too long.
+ */
+FileManager.THUMBNAIL_SHOW_DELAY = 100;
+
 FileManager.prototype = {
   __proto__: cr.EventTarget.prototype
 };
@@ -2095,7 +2103,7 @@ FileManager.prototype = {
     }
 
     this.previewSummary_.textContent = str('COMPUTING_SELECTION');
-    var thumbnails = this.document_.createDocumentFragment();
+    var thumbnails = [];
 
     var pendingFiles = [];
     var thumbnailCount = 0;
@@ -2112,7 +2120,8 @@ FileManager.prototype = {
       // Selection could change while images are loading.
       if (self.selection == selection) {
         removeChildren(self.previewThumbnails_);
-        self.previewThumbnails_.appendChild(thumbnails);
+        for (var i = 0; i < thumbnails.length; i++)
+          self.previewThumbnails_.appendChild(thumbnails[i]);
       }
     }
 
@@ -2133,21 +2142,28 @@ FileManager.prototype = {
       if (thumbnailCount < MAX_PREVIEW_THUMBAIL_COUNT) {
         var box = this.document_.createElement('div');
         box.className = 'thumbnail';
-        function imageLoadCalback(index, box, img, transform) {
-          if (index == 0)
-            thumbnails.insertBefore(self.renderThumbnailZoom_(img, transform),
-                                    thumbnails.firstChild);
-          onThumbnailLoaded();
+        if (thumbnailCount == 0) {
+          var zoomed = this.document_.createElement('div');
+          zoomed.hidden = true;
+          thumbnails.push(zoomed);
+          function onFirstThumbnailLoaded(img, transform) {
+            self.decorateThumbnailZoom_(zoomed, img, transform);
+            zoomed.hidden = false;
+            onThumbnailLoaded();
+          }
+          var thumbnail = this.renderThumbnailBox_(entry, true,
+                                                   onFirstThumbnailLoaded);
+        } else {
+          var thumbnail = this.renderThumbnailBox_(entry, true,
+                                                   onThumbnailLoaded);
         }
-        var thumbnail = this.renderThumbnailBox_(entry, true,
-            imageLoadCalback.bind(null, thumbnailCount, box));
         thumbnailCount++;
         box.appendChild(thumbnail);
         box.style.zIndex = MAX_PREVIEW_THUMBAIL_COUNT + 1 - i;
         box.addEventListener('click',
             this.dispatchDefaultTask_.bind(this, selection));
 
-        thumbnails.appendChild(box);
+        thumbnails.push(box);
       }
 
       if (selection.iconType == null) {
@@ -2170,7 +2186,8 @@ FileManager.prototype = {
     // Now this.selection is complete. Update buttons.
     this.updateCommonActionButtons_();
     this.updatePreviewPanelVisibility_();
-    forcedShowTimeout = setTimeout(showThumbnails, 100);
+    forcedShowTimeout = setTimeout(showThumbnails,
+        FileManager.THUMBNAIL_SHOW_DELAY);
     onThumbnailLoaded();
 
     if (this.dialogType_ == FileManager.DialogType.FULL_PAGE) {
@@ -2225,11 +2242,12 @@ FileManager.prototype = {
    * Creates enlarged image for a bottom pannel thumbnail.
    * Image's assumed to be just loaded and not inserted into the DOM.
    *
+   * @param {HTMLElement} largeImageBox DIV element to decorate.
    * @param {HTMLElement} img Loaded image.
    * @param {Object} transform Image transformation description.
-   * @return {Element} Created element.
    */
-  FileManager.prototype.renderThumbnailZoom_ = function(img, transform) {
+  FileManager.prototype.decorateThumbnailZoom_ = function(largeImageBox,
+                                                          img, transform) {
     var width = img.width;
     var height = img.height;
     var THUMBNAIL_SIZE = 45;
@@ -2262,7 +2280,6 @@ FileManager.prototype = {
     } else {
       largeImage.src = img.src;
     }
-    var largeImageBox = this.document_.createElement('div');
     largeImageBox.className = 'popup';
 
     var boxWidth = Math.max(THUMBNAIL_SIZE, imageWidth);