Gallery: Add items to GalleryDataModel before loading their metadata.

ui/file_manager/gallery/js/mosaic_mode.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.
 
 /**
  * @param {!Element} container Content container.
  * @param {!ErrorBanner} errorBanner Error banner.
  * @param {!cr.ui.ArrayDataModel} dataModel Data model.
  * @param {!cr.ui.ListSelectionModel} selectionModel Selection model.
  * @param {!VolumeManagerWrapper} volumeManager Volume manager.
@@ skipping 506 matching lines @@
 
     // No items left, show the banner.
     if (this.getItemCount_() === 0)
       this.errorBanner_.show('GALLERY_NO_IMAGES');
 
     this.scheduleLayout(Mosaic.LAYOUT_DELAY);
   }
 
   if (event.added.length) {
     var newTiles = [];
-    for (var t = 0; t !== event.added.length; t++)
-      newTiles.push(new Mosaic.Tile(this,
-            assertInstanceof(this.dataModel_.item(index + t), Gallery.Item)));
+    for (var t = 0; t !== event.added.length; t++) {
+      newTiles.push(new Mosaic.Tile(
+          this,
+          assertInstanceof(this.dataModel_.item(index + t),
+          Gallery.Item)));
+    }
 
     this.tiles_.splice.apply(this.tiles_, [index, 0].concat(newTiles));
     this.initTiles_(newTiles);
     this.scheduleLayout(Mosaic.LAYOUT_DELAY);
   }
 
   if (this.tiles_.length !== this.dataModel_.length)
     console.error('Mosaic is out of sync');
 };
 
 /**
  * Content change handler.
  *
  * @param {!Event} event Event.
  * @private
  */
 Mosaic.prototype.onContentChange_ = function(event) {
   if (!this.tiles_)
     return;
 
   if (!event.thumbnailChanged)
     return; // Thumbnail unchanged, nothing to do.
 
   var index = this.dataModel_.indexOf(event.item);
-  if (index !== this.selectionModel_.selectedIndex)
-    console.error('Content changed for unselected item');
-
   this.layoutModel_.invalidateFromTile_(index);
   this.tiles_[index].init();
   this.tiles_[index].unload();
   this.tiles_[index].load(
       Mosaic.Tile.LoadMode.HIGH_DPI,
       this.scheduleLayout.bind(this, Mosaic.LAYOUT_DELAY));
 };
 
 /**
  * Keydown event handler.
@@ skipping 1486 matching lines @@
  * Initializes the thumbnail in the tile. Does not load an image, but sets
  * target dimensions using metadata.
  */
 Mosaic.Tile.prototype.init = function() {
   this.markUnloaded();
   this.left_ = null;  // Mark as not laid out.
 
   // Set higher priority for the selected elements to load them first.
   var priority = this.getAttribute('selected') ? 2 : 3;
 
-  // Use embedded thumbnails on Drive, since they have higher resolution.
-  this.thumbnailLoader_ = new ThumbnailLoader(
-      this.getItem().getEntry(),
-      ThumbnailLoader.LoaderType.CANVAS,
-      this.getItem().getThumbnailMetadataItem(),
-      undefined,  // Media type.
-      [
-        ThumbnailLoader.LoadTarget.EXTERNAL_METADATA,
-        ThumbnailLoader.LoadTarget.FILE_ENTRY
-      ]);
-
-  // If no hidpi embedded thumbnail available, then use the low resolution
-  // for preloading.
-  if (this.thumbnailLoader_.getLoadTarget() ===
-      ThumbnailLoader.LoadTarget.FILE_ENTRY) {
-    this.thumbnailPreloader_ = new ThumbnailLoader(
+  if (this.getItem().getThumbnailMetadataItem()) {
+    // Use embedded thumbnails on Drive, since they have higher resolution.
+    this.thumbnailLoader_ = new ThumbnailLoader(
         this.getItem().getEntry(),
         ThumbnailLoader.LoaderType.CANVAS,
         this.getItem().getThumbnailMetadataItem(),
         undefined,  // Media type.
         [
-          ThumbnailLoader.LoadTarget.CONTENT_METADATA
-        ],
-        // Preloaders have always higher priotity, so the preload images
-        // are loaded as soon as possible.
-        2);
-    if (!this.thumbnailPreloader_.getLoadTarget())
-      this.thumbnailPreloader_ = null;
+          ThumbnailLoader.LoadTarget.EXTERNAL_METADATA,
+          ThumbnailLoader.LoadTarget.FILE_ENTRY
+        ]);
+
+    // If no hidpi embedded thumbnail available, then use the low resolution
+    // for preloading.
+    if (this.thumbnailLoader_.getLoadTarget() ===
+        ThumbnailLoader.LoadTarget.FILE_ENTRY) {
+      this.thumbnailPreloader_ = new ThumbnailLoader(
+          this.getItem().getEntry(),
+          ThumbnailLoader.LoaderType.CANVAS,
+          this.getItem().getThumbnailMetadataItem(),
+          undefined,  // Media type.
+          [
+            ThumbnailLoader.LoadTarget.CONTENT_METADATA
+          ],
+          // Preloaders have always higher priotity, so the preload images
+          // are loaded as soon as possible.
+          2);
+      if (!this.thumbnailPreloader_.getLoadTarget())
+        this.thumbnailPreloader_ = null;
+    }
   }
 
   // Dimensions are always acquired from the metadata. For local files, it is
   // extracted from headers. For Drive files, it is received via the Drive API.
   // If the dimensions are not available, then the fallback dimensions will be
   // used (same as for the generic icon).
   var metadataItem = this.getItem().getMetadataItem();
   var width;
   var height;
-  if (metadataItem.imageWidth && metadataItem.imageHeight) {
+  if (metadataItem && metadataItem.imageWidth && metadataItem.imageHeight) {
     width = metadataItem.imageWidth;
     height = metadataItem.imageHeight;
   } else {
     // No dimensions in metadata, then use the generic dimensions.
     width = Mosaic.Tile.GENERIC_ICON_SIZE;
     height = Mosaic.Tile.GENERIC_ICON_SIZE;
   }
 
   if (width > height) {
     if (width > Mosaic.Tile.MAX_CONTENT_SIZE) {
@@ skipping 29 matching lines @@
   // Attaches the image to the tile and finalizes loading process for the
   // specified loader.
   var finalizeLoader = function(mode, success, loader) {
     if (success && this.wrapper_) {
       // Show the fade-in animation only when previously there was no image
       // attached in this tile.
       if (!this.imageLoaded_ && !this.imagePreloaded_)
         this.wrapper_.classList.add('animated');
       else
         this.wrapper_.classList.remove('animated');
+
+      // Add debug mode classes.
+      this.wrapper_.classList.remove('load-target-content-metadata');
+      this.wrapper_.classList.remove('load-target-external-metadata');
+      this.wrapper_.classList.remove('load-target-file-entry');
+      switch (loader.getLoadTarget()) {
+        case ThumbnailLoader.LoadTarget.CONTENT_METADATA:
+          this.wrapper_.classList.add('load-target-content-metadata');
+          break;
+        case ThumbnailLoader.LoadTarget.EXTERNAL_METADATA:
+          this.wrapper_.classList.add('load-target-external-metadata');
+          break;
+        case ThumbnailLoader.LoadTarget.FILE_ENTRY:
+          this.wrapper_.classList.add('load-target-file-entry');
+              break;
+      }
+
+      loader.attachImage(this.wrapper_, ThumbnailLoader.FillMode.OVER_FILL);
     }
 
-    // Add debug mode classes.
-    this.wrapper_.classList.remove('load-target-content-metadata');
-    this.wrapper_.classList.remove('load-target-external-metadata');
-    this.wrapper_.classList.remove('load-target-file-entry');
-    switch (loader.getLoadTarget()) {
-      case ThumbnailLoader.LoadTarget.CONTENT_METADATA:
-        this.wrapper_.classList.add('load-target-content-metadata');
-        break;
-      case ThumbnailLoader.LoadTarget.EXTERNAL_METADATA:
-        this.wrapper_.classList.add('load-target-external-metadata');
-        break;
-      case ThumbnailLoader.LoadTarget.FILE_ENTRY:
-        this.wrapper_.classList.add('load-target-file-entry');
-        break;
-    }
-    loader.attachImage(this.wrapper_, ThumbnailLoader.FillMode.OVER_FILL);
     onImageLoaded(success);
 
     switch (mode) {
       case Mosaic.Tile.LoadMode.LOW_DPI:
         this.imagePreloading_ = false;
         this.imagePreloaded_ = true;
         break;
       case Mosaic.Tile.LoadMode.HIGH_DPI:
         this.imageLoading_ = false;
         this.imageLoaded_ = true;
@@ skipping 10 matching lines @@
       if (this.imageLoaded_)
         return;
       finalizeLoader(Mosaic.Tile.LoadMode.LOW_DPI,
                      success,
                      this.thumbnailPreloader_);
     }.bind(this));
   }
 
   // Load the high-dpi image only when it is requested, or the low-dpi is not
   // available.
-  if (!this.imageLoading_ &&
+  if (!this.imageLoading_ && this.thumbnailLoader_ &&
       (loadMode === Mosaic.Tile.LoadMode.HIGH_DPI || !this.imagePreloading_)) {
     this.imageLoading_ = true;
     this.thumbnailLoader_.loadDetachedImage(function(success) {
       // Cancel preloading, since the hi-dpi image is ready.
       if (this.thumbnailPreloader_)
         this.thumbnailPreloader_.cancel();
       finalizeLoader(Mosaic.Tile.LoadMode.HIGH_DPI,
                      success,
                      this.thumbnailLoader_);
     }.bind(this));
   }
 };
 
 /**
  * Unloads an image from the tile.
  */
 Mosaic.Tile.prototype.unload = function() {
-  this.thumbnailLoader_.cancel();
+  if (this.thumbnailLoader_)
+    this.thumbnailLoader_.cancel();
   if (this.thumbnailPreloader_)
     this.thumbnailPreloader_.cancel();
   this.imagePreloaded_ = false;
   this.imageLoaded_ = false;
   this.imagePreloading_ = false;
   this.imageLoading_ = false;
-  this.wrapper_.innerText = '';
+  if (this.wrapper_)
+    this.wrapper_.innerText = '';
 };
 
 /**
  * Selects/unselects the tile.
  *
  * @param {boolean} on True if selected.
  */
 Mosaic.Tile.prototype.select = function(on) {
   if (on)
     this.setAttribute('selected', true);
@@ skipping 75 matching lines @@
   return new ImageRect(this.left_ - this.container_.scrollLeft, this.top_,
       this.width_, this.height_).inflate(-margin, -margin);
 };
 
 /**
  * @return {number} X coordinate of the tile center.
  */
 Mosaic.Tile.prototype.getCenterX = function() {
   return this.left_ + Math.round(this.width_ / 2);
 };