Gallery: Add items to GalleryDataModel before loading their metadata.

ui/file_manager/gallery/js/ribbon.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.
 
 /**
  * Scrollable thumbnail ribbon at the bottom of the Gallery in the Slide mode.
  *
  * @param {!Document} document Document.
  * @param {!cr.ui.ArrayDataModel} dataModel Data model.
  * @param {!cr.ui.ListSelectionModel} selectionModel Selection model.
@@ skipping 158 matching lines @@
   }
 
   var persistentNodes = this.querySelectorAll('.ribbon-image:not([vanishing])');
   if (this.lastVisibleIndex_ < this.dataModel_.length) { // Not at the end.
     var lastNode = persistentNodes[persistentNodes.length - 1];
     if (lastNode.nextSibling) {
       // Pull back a vanishing node from the right.
       lastNode.nextSibling.removeAttribute('vanishing');
     } else {
       // Push a new item at the right end.
-      this.appendChild(this.renderThumbnail_(this.lastVisibleIndex_));
+      var element = this.renderThumbnail_(this.lastVisibleIndex_);
+      element.style.marginLeft = '0';

[yoshiki, 2015/04/06 07:40:38]

nit: Should we apply a class, instead of assigning the style value directly? 

[hirono, 2015/04/06 07:48:08]

Yes! Done

+      this.appendChild(element);
     }
   } else {
     // No items to the right, move the window to the left.
     this.lastVisibleIndex_--;
     if (this.firstVisibleIndex_) {
       this.firstVisibleIndex_--;
       var firstNode = persistentNodes[0];
       if (firstNode.previousSibling) {
         // Pull back a vanishing node from the left.
         firstNode.previousSibling.removeAttribute('vanishing');
       } else {
         // Push a new item at the left end.
-        var newThumbnail = this.renderThumbnail_(this.firstVisibleIndex_);
-        newThumbnail.style.marginLeft = -(this.clientHeight - 2) + 'px';
-        this.insertBefore(newThumbnail, this.firstChild);
-        setTimeout(function() {
-          newThumbnail.style.marginLeft = '0';
-        }, 0);
+        if (this.firstVisibleIndex_ < this.dataModel_.length) {
+          var newThumbnail = this.renderThumbnail_(this.firstVisibleIndex_);
+          newThumbnail.style.marginLeft = -(this.clientHeight - 2) + 'px';
+          this.insertBefore(newThumbnail, this.firstChild);
+          setTimeout(function() {
+            newThumbnail.style.marginLeft = '0';
+          }, 0);
+        }
       }
     }
   }
 
   var removed = false;
   for (var i = 0; i < event.removed.length; i++) {
     var removedDom = this.renderCache_[event.removed[i].getEntry().toURL()];
     if (removedDom) {
       removedDom.removeAttribute('selected');
       removedDom.setAttribute('vanishing', 'smooth');
@@ skipping 181 matching lines @@
 };
 
 /**
  * Set the thumbnail image.
  *
  * @param {!Element} thumbnail Thumbnail element.
  * @param {!Gallery.Item} item Gallery item.
  * @private
  */
 Ribbon.prototype.setThumbnailImage_ = function(thumbnail, item) {
+  if (!item.getThumbnailMetadataItem())
+    return;
   this.thumbnailModel_.get([item.getEntry()]).then(function(metadataList) {
     var loader = new ThumbnailLoader(
         item.getEntry(),
         ThumbnailLoader.LoaderType.IMAGE,
         metadataList[0]);
     loader.load(
         thumbnail.querySelector('.image-wrapper'),
         ThumbnailLoader.FillMode.FILL /* fill */,
         ThumbnailLoader.OptimizationMode.NEVER_DISCARD);
   });
@@ skipping 21 matching lines @@
  * @param {string} oldUrl Old url.
  * @param {string} newUrl New url.
  * @private
  */
 Ribbon.prototype.remapCache_ = function(oldUrl, newUrl) {
   if (oldUrl != newUrl && (oldUrl in this.renderCache_)) {
     this.renderCache_[newUrl] = this.renderCache_[oldUrl];
     delete this.renderCache_[oldUrl];
   }
 };