Fixing race condition in prepearing thumbnails for the bottom panel.

chrome/browser/resources/file_manager/js/file_manager.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.
 
 /**
  * FileManager constructor.
  *
  * FileManager objects encapsulate the functionality of the file selector
  * dialogs, as well as the full screen file manager application (though the
  * latter is not yet implemented).
@@ skipping 37 matching lines @@
 
   // TODO(dgozman): This will be changed to LocaleInfo.
   this.locale_ = new v8Locale(navigator.language);
 
   this.initFileSystem_();
   this.initDom_();
   this.initDialogType_();
   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
 };
 
 // Anonymous "namespace".
 (function() {
 
   // Private variables and helper functions.
 
   /**
@@ skipping 149 matching lines @@
     if (x[0] == '/')
       return x.slice(1);
     else
       return x;
   }
 
   function removeChildren(element) {
     element.textContent = '';
   }
 
+  function setClassIf(element, className, condition) {
+    if (condition)
+      element.classList.add(className);
+    else
+      element.classList.remove(className);
+  }
+
   // Public statics.
 
   /**
    * List of dialog types.
    *
    * Keep this in sync with FileManagerDialog::GetDialogTypeAsString, except
    * FULL_PAGE which is specific to this code.
    *
    * @enum {string}
    */
@@ skipping 1851 matching lines @@
     };
 
     if (!selection.indexes.length) {
       this.updateCommonActionButtons_();
       this.updatePreviewPanelVisibility_();
       cr.dispatchSimpleEvent(this, 'selection-summarized');
       return;
     }
 
     this.previewSummary_.textContent = str('COMPUTING_SELECTION');
-    var thumbnails = this.document_.createDocumentFragment();
+    var thumbnails = [];
 
     var pendingFiles = [];
     var thumbnailCount = 0;
     var thumbnailLoaded = -1;
     var forcedShowTimeout = null;
+    var thumbnailsHaveZoom = false;
     var self = this;
 
     function showThumbnails() {
+      // have-zoom class may be updated twice: then timeout exceeds and then
+      // then all images loaded.
+      if (self.selection == selection)
+        setClassIf(self.previewThumbnails_, 'has-zoom', thumbnailsHaveZoom);
+
       if (forcedShowTimeout === null)
         return;
       clearTimeout(forcedShowTimeout);
       forcedShowTimeout = null;
 
       // 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]);
       }
     }
 
     function onThumbnailLoaded() {
       thumbnailLoaded++;
       if (thumbnailLoaded == thumbnailCount)
         showThumbnails();
     }
 
     for (var i = 0; i < selection.indexes.length; i++) {
       var entry = this.directoryModel_.getFileList().item(selection.indexes[i]);
       if (!entry)
         continue;
 
       selection.entries.push(entry);
       selection.urls.push(entry.toURL());
 
       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;

[Vladislav Kaznacheev, 2012/05/18 11:43:40]

Do we need both |hidden| attribute and |has-zoom| class? They seem to be in
sync.

[SeRya, 2012/05/18 12:06:07]

If we only play with the class it triggers animation. It cause flickering on
each selection change. hidden = false suppress the animation.

+          thumbnails.push(zoomed);
+          function onFirstThumbnailLoaded(img, transform) {
+            if (self.decorateThumbnailZoom_(zoomed, img, transform)) {
+              zoomed.hidden = false;
+              thumbnailsHaveZoom = true;
+            }
+            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) {
         selection.iconType = FileType.getIcon(entry);
       } else if (selection.iconType != 'unknown') {
         var iconType = FileType.getIcon(entry);
         if (selection.iconType != iconType)
           selection.iconType = 'unknown';
       }
 
       if (entry.isFile) {
         selection.fileCount += 1;
         selection.showBytes |= !FileType.isHosted(entry);
       } else {
         selection.directoryCount += 1;
       }
       selection.totalCount++;
     }
 
     // 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) {
       // Some internal tasks cannot be defined in terms of file patterns,
       // so we pass selection to check for them manually.
       if (selection.directoryCount == 0 && selection.fileCount > 0) {
         // Only files, not directories, are supported for external tasks.
         chrome.fileBrowserPrivate.getFileTasks(
             selection.urls,
             this.onTasksFound_.bind(this, selection));
@@ skipping 34 matching lines @@
   FileManager.prototype.isSelectionAvailable = function() {
     return !this.isOnGData() ||
         !this.isOffline() ||
         this.selection.allGDataFilesPresent;
   };
 
   /**
    * 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.
+   * @return {boolean} True if zoomed image presents.

[Vladislav Kaznacheev, 2012/05/18 11:43:40]

presents -> is present

[SeRya, 2012/05/18 12:06:07]

Done.

    */
-  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;
-
     if (width < THUMBNAIL_SIZE * 2 && height < THUMBNAIL_SIZE * 2)
-      return;
+      return false;
 
     var scale = Math.min(1,
         IMAGE_HOVER_PREVIEW_SIZE / Math.max(width, height));
 
     var imageWidth = Math.round(width * scale);
     var imageHeight = Math.round(height * scale);
 
     var largeImage = this.document_.createElement('img');
     if (scale < 0.3) {
       // Scaling large images kills animation. Downscale it in advance.
 
       // Canvas scales images with liner interpolation. Make a larger
       // image (but small enough to not kill animation) and let IMG
       // scale it smoothly.
       var INTERMEDIATE_SCALE = 3;
       var canvas = this.document_.createElement('canvas');
       canvas.width = imageWidth * INTERMEDIATE_SCALE;
       canvas.height = imageHeight * INTERMEDIATE_SCALE;
       var ctx = canvas.getContext('2d');
       ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
       // Using bigger than default compression reduces image size by
       // several times. Quality degradation compensated by greater resolution.
       largeImage.src = canvas.toDataURL('image/jpeg', 0.6);
     } else {
       largeImage.src = img.src;
     }
-    var largeImageBox = this.document_.createElement('div');
     largeImageBox.className = 'popup';
 
     var boxWidth = Math.max(THUMBNAIL_SIZE, imageWidth);
     var boxHeight = Math.max(THUMBNAIL_SIZE, imageHeight);
 
     if (transform && transform.rotate90 % 2 == 1) {
       var t = boxWidth;
       boxWidth = boxHeight;
       boxHeight = t;
     }
 
     var style = largeImageBox.style;
     style.width = boxWidth + 'px';
     style.height = boxHeight + 'px';
     style.top = (-boxHeight + THUMBNAIL_SIZE) + 'px';
 
     var style = largeImage.style;
     style.width = imageWidth + 'px';
     style.height = imageHeight + 'px';
     style.left = (boxWidth - imageWidth) / 2 + 'px';
     style.top = (boxHeight - imageHeight) / 2 + 'px';
     style.position = 'relative';
 
     util.applyTransform(largeImage, transform);
 
     largeImageBox.appendChild(largeImage);
     largeImageBox.style.zIndex = 1000;
-    return largeImageBox;
+    return true;
   };
 
   FileManager.prototype.updatePreviewPanelVisibility_ = function() {
     var panel = this.previewPanel_;
     var state = panel.getAttribute('visibility');
     var mustBeVisible = (this.selection.totalCount > 0);
     var self = this;
 
     switch (state) {
       case 'visible':
@@ skipping 2322 matching lines @@
 
     function closeBanner() {
       self.cleanupGDataWelcome_();
       // Stop showing the welcome banner.
       localStorage[WELCOME_HEADER_COUNTER_KEY] = WELCOME_HEADER_COUNTER_LIMIT;
     }
 
     return maybeShowBanner;
   };
 })();