Enabled Mosaic view on each volume.

chrome/browser/resources/file_manager/js/photo/mosaic_mode.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.
 
 /**
  * @param {Element} container Content container.
  * @param {cr.ui.ArrayDataModel} dataModel Data model.
  * @param {cr.ui.ListSelectionModel} selectionModel Selection model.
  * @param {MetadataCache} metadataCache Metadata cache.
  * @param {function} toggleMode Function to switch to the Slide mode.
@@ skipping 67 matching lines @@
   return self;
 }
 
 /**
  * Inherit from HTMLDivElement.
  */
 Mosaic.prototype.__proto__ = HTMLDivElement.prototype;
 
 /**
  * Default layout delay in ms.
+ * @const
+ * @type {number}
  */
 Mosaic.LAYOUT_DELAY = 200;
 
 /**
  * Smooth scroll animation duration when scrolling using keyboard or
  * clicking on a partly visible tile. In ms.
+ * @const
+ * @type {number}
  */
 Mosaic.ANIMATED_SCROLL_DURATION = 500;
 
 /**
  * Decorate a Mosaic instance.
  *
  * @param {Mosaic} self Self pointer.
  * @param {cr.ui.ArrayDataModel} dataModel Data model.
  * @param {cr.ui.ListSelectionModel} selectionModel Selection model.
  * @param {MetadataCache} metadataCache Metadata cache.
@@ skipping 26 matching lines @@
       new Mosaic.SelectionController(this.selectionModel_, this.layoutModel_);
 
   this.tiles_ = [];
   for (var i = 0; i != this.dataModel_.length; i++)
     this.tiles_.push(new Mosaic.Tile(this, this.dataModel_.item(i)));
 
   this.selectionModel_.selectedIndexes.forEach(function(index) {
     this.tiles_[index].select(true);
   }.bind(this));
 
-  this.loadTiles_(this.tiles_);
+  this.initTiles_(this.tiles_);
 
   // The listeners might be called while some tiles are still loading.
   this.initListeners_();
 };
 
 /**
  * @return {boolean} Whether mosaic is initialized.
  */
 Mosaic.prototype.isInitialized = function() {
   return !!this.tiles_;
 };
 
 /**
  * Start listening to events.
  *
  * We keep listening to events even when the mosaic is hidden in order to
  * keep the layout up to date.
  *
  * @private
  */
 Mosaic.prototype.initListeners_ = function() {
   this.ownerDocument.defaultView.addEventListener(
       'resize', this.onResize_.bind(this));
 
   var mouseEventBound = this.onMouseEvent_.bind(this);
   this.addEventListener('mousemove', mouseEventBound);
   this.addEventListener('mousedown', mouseEventBound);
   this.addEventListener('mouseup', mouseEventBound);
+  this.addEventListener('scroll', this.onScroll_.bind(this));
 
   this.selectionModel_.addEventListener('change', this.onSelection_.bind(this));
   this.selectionModel_.addEventListener('leadIndexChange',
       this.onLeadChange_.bind(this));
 
   this.dataModel_.addEventListener('splice', this.onSplice_.bind(this));
   this.dataModel_.addEventListener('content', this.onContentChange_.bind(this));
 };
 
 /**
@@ skipping 75 matching lines @@
 /**
  * @param {number} index Tile index.
  * Scroll the given tile into the viewport.
  */
 Mosaic.prototype.scrollIntoView = function(index) {
   var tile = this.tiles_[index];
   if (tile) tile.scrollIntoView();
 };
 
 /**
- * Load multiple tiles.
+ * Initializes multiple tiles.
  *
  * @param {Array.<Mosaic.Tile>} tiles Array of tiles.
- * @param {function=} opt_callback Completion callback.
+ * @param {function()=} opt_callback Completion callback.
  * @private
  */
-Mosaic.prototype.loadTiles_ = function(tiles, opt_callback) {
+Mosaic.prototype.initTiles_ = function(tiles, opt_callback) {
   // We do not want to use tile indices in asynchronous operations because they
   // do not survive data model splices. Copy tile references instead.
   tiles = tiles.slice();
 
   // Throttle the metadata access so that we do not overwhelm the file system.
   var MAX_CHUNK_SIZE = 10;
 
   var loadChunk = function() {
     if (!tiles.length) {
       if (opt_callback) opt_callback();
       return;
     }
     var chunkSize = Math.min(tiles.length, MAX_CHUNK_SIZE);
     var loaded = 0;
     for (var i = 0; i != chunkSize; i++) {
-      this.loadTile_(tiles.shift(), function() {
+      this.initTile_(tiles.shift(), function() {
         if (++loaded == chunkSize) {
           this.layout();
           loadChunk();
         }
       }.bind(this));
     }
   }.bind(this);
 
   loadChunk();
 };
 
 /**
- * Load a single tile.
+ * Initializes a single tile.
  *
  * @param {Mosaic.Tile} tile Tile.
- * @param {function} callback Completion callback.
+ * @param {function()} callback Completion callback.
  * @private
  */
-Mosaic.prototype.loadTile_ = function(tile, callback) {
+Mosaic.prototype.initTile_ = function(tile, callback) {
   var url = tile.getItem().getUrl();
-  var onImageLoaded = function(success) {
-    if (!success && this.onThumbnailError_) {
-      this.onThumbnailError_(url);
-    }
-    callback();
-  }.bind(this);
+  var onImageMeasured = callback;
   this.metadataCache_.get(url, Gallery.METADATA_TYPE,
-      function(metadata) { tile.load(metadata, onImageLoaded) });
+      function(metadata) {
+        tile.init(metadata, onImageMeasured);
+      });
 };
 
 /**
  * Reload all tiles.
  */
 Mosaic.prototype.reload = function() {
   this.layoutModel_.reset_();
   this.tiles_.forEach(function(t) { t.markUnloaded() });
-  this.loadTiles_(this.tiles_);
+  this.initTiles_(this.tiles_);
 };
 
 /**
  * Layout the tiles in the order of their indices.
  *
  * Starts where it last stopped (at #0 the first time).
  * Stops when all tiles are processed or when the next tile is still loading.
  */
 Mosaic.prototype.layout = function() {
   if (this.layoutTimer_) {
     clearTimeout(this.layoutTimer_);
     this.layoutTimer_ = null;
   }
   while (true) {
     var index = this.layoutModel_.getTileCount();
     if (index == this.tiles_.length)
       break; // All tiles done.
     var tile = this.tiles_[index];
-    if (!tile.isLoaded())
+    if (!tile.isInitialized())
       break;  // Next layout will try to restart from here.
     this.layoutModel_.add(tile, index + 1 == this.tiles_.length);
   }
+  this.loadVisibleTiles_();
 };
 
 /**
  * Schedule the layout.
  *
  * @param {number=} opt_delay Delay in ms.
  */
 Mosaic.prototype.scheduleLayout = function(opt_delay) {
   if (!this.layoutTimer_) {
     this.layoutTimer_ = setTimeout(function() {
@@ skipping 34 matching lines @@
        target = target.parentNode) {
     if (target.classList.contains('mosaic-tile')) {
       index = this.dataModel_.indexOf(target.getItem());
       break;
     }
   }
   this.selectionController_.handlePointerDownUp(event, index);
 };
 
 /**
+ * Scroll handler.
+ * @private
+ */
+Mosaic.prototype.onScroll_ = function() {
+  this.loadVisibleTiles_();
+};
+
+/**
  * Selection change handler.
  *
  * @param {Event} event Event.
  * @private
  */
 Mosaic.prototype.onSelection_ = function(event) {
   for (var i = 0; i != event.changes.length; i++) {
     var change = event.changes[i];
     var tile = this.tiles_[change.index];
     if (tile) tile.select(change.selected);
@@ skipping 31 matching lines @@
     this.tiles_.splice(index, event.removed.length);
     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, this.dataModel_.item(index + t)));
 
     this.tiles_.splice.apply(this.tiles_, [index, 0].concat(newTiles));
-    this.loadTiles_(newTiles);
+    this.initTiles_(newTiles);
   }
 
   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.metadata)
     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].load(
-      event.metadata, this.scheduleLayout.bind(this, Mosaic.LAYOUT_DELAY));
+  this.tiles_[index].init(event.metadata, function() {
+        this.tiles_[index].load(
+            this.scheduleLayout.bind(this, Mosaic.LAYOUT_DELAY),
+            this.onThumbnailError_);
+      }.bind(this));
 };
 
 /**
  * Keydown event handler.
  *
  * @param {Event} event Event.
  * @return {boolean} True if the event has been consumed.
  */
 Mosaic.prototype.onKeyDown = function(event) {
   this.selectionController_.handleKeyDown(event);
@@ skipping 33 matching lines @@
 };
 
 /**
  * Hide the mosaic.
  */
 Mosaic.prototype.hide = function() {
   this.removeAttribute('visible');
 };
 
 /**
+ * Loads visible tiles. Ignores consecutive calls. Does not reload already
+ * loaded images.
+ * @private
+ */
+Mosaic.prototype.loadVisibleTiles_ = function() {
+  if (this.loadVisibleTilesTimer_) {
+    clearTimeout(this.loadVisibleTilesTimer_);
+    this.loadVisibleTilesTimer_ = null;
+  }
+  this.loadVisibleTilesTimer_ = setTimeout(function() {
+    var viewportRect = new Rect(0, 0, this.clientWidth, this.clientHeight);
+    for (var index = 0; index < this.tiles_.length; index++) {
+      var tile = this.tiles_[index];
+      var imageRect = tile.getImageRect();
+      if (!tile.isLoading() && !tile.isLoaded() && imageRect &&
+          imageRect.intersects(viewportRect)) {
+        tile.load(function() {}, this.onThumbnailError_);
+      }
+    }
+  }.bind(this), 100);
+};
+
+/**
  * Apply or reset the zoom transform.
  *
  * @param {Rect} tileRect Tile rectangle. Reset the transform if null.
  * @param {Rect} imageRect Large image rectangle. Reset the transform if null.
  * @param {boolean=} opt_instant True of the transition should be instant.
  */
 Mosaic.prototype.transform = function(tileRect, imageRect, opt_instant) {
   if (opt_instant) {
     this.style.webkitTransitionDuration = '0';
   } else {
@@ skipping 1040 matching lines @@
 Mosaic.Tile.prototype.getMaxContentHeight = function() {
   return this.maxContentHeight_;
 };
 
 /**
  * @return {number} The aspect ratio of the tile image.
  */
 Mosaic.Tile.prototype.getAspectRatio = function() { return this.aspectRatio_ };
 
 /**
+ * @return {boolean} True if the tile is initialized.
+ */
+Mosaic.Tile.prototype.isInitialized = function() {
+  return !!this.maxContentHeight_;
+};
+
+/**
  * @return {boolean} True if the tile is loaded.
  */
-Mosaic.Tile.prototype.isLoaded = function() { return !!this.maxContentHeight_ };
+Mosaic.Tile.prototype.isLoaded = function() {
+  return this.imageLoaded_;
+};
+
+/**
+ * @return {boolean} True if the tile is being loaded.
+ */
+Mosaic.Tile.prototype.isLoading = function() {
+  return this.imageLoading_;
+};
 
 /**
  * Mark the tile as not loaded to prevent it from participating in the layout.
  */
 Mosaic.Tile.prototype.markUnloaded = function() {
   this.maxContentHeight_ = 0;
+  if (this.thumbnailLoader_) {
+    this.thumbnailLoader_.cancel();
+    this.imageLoaded_ = false;
+    this.imageLoading_ = false;
+  }
 };
 
 /**
- * Load the thumbnail image into the tile.
+ * Initializes the thumbnail in the tile. Does not load an image, but sets
+ * target dimensions using metadata.
  *
  * @param {Object} metadata Metadata object.
- * @param {function} callback Completion callback.
+ * @param {function()} onImageMeasured Image measured callback.
  */
-Mosaic.Tile.prototype.load = function(metadata, callback) {
+Mosaic.Tile.prototype.init = function(metadata, onImageMeasured) {
   this.markUnloaded();
   this.left_ = null;  // Mark as not laid out.
 
-  this.thumbnailLoader_ = new ThumbnailLoader(this.getItem().getUrl(),
-                                              ThumbnailLoader.LoaderType.CANVAS,
-                                              metadata);
+  this.thumbnailLoader_ = new ThumbnailLoader(
+      this.getItem().getUrl(),
+      ThumbnailLoader.LoaderType.CANVAS,
+      metadata,
+      undefined,  // Media type.
+      ThumbnailLoader.UseEmbedded.NO_EMBEDDED);
 
+  var setDimensions = function(width, height) {
+    if (width > height) {
+      if (width > Mosaic.Tile.MAX_CONTENT_SIZE) {
+        height = Math.round(height * Mosaic.Tile.MAX_CONTENT_SIZE / width);
+        width = Mosaic.Tile.MAX_CONTENT_SIZE;
+      }
+    } else {
+      if (height > Mosaic.Tile.MAX_CONTENT_SIZE) {
+        width = Math.round(width * Mosaic.Tile.MAX_CONTENT_SIZE / height);
+        height = Mosaic.Tile.MAX_CONTENT_SIZE;
+      }
+    }
+    this.maxContentHeight_ = Math.max(Mosaic.Tile.MIN_CONTENT_SIZE, height);
+    this.aspectRatio_ = width / height;
+    onImageMeasured();
+  }.bind(this);
+
+  // Dimensions are always acquired from the metadata. If it is not available,
+  // then the image will not be displayed.
+  if (metadata.media && metadata.media.width) {
+    setDimensions(metadata.media.width, metadata.media.height);
+  } else {
+    // No dimensions in metadata, then display the generic icon instead.
+    // TODO(mtomasz): Display a gneric icon instead of a black rectangle.
+    setDimensions(Mosaic.Tile.GENERIC_ICON_SIZE,
+                  Mosaic.Tile.GENERIC_ICON_SIZE);
+  }
+};
+
+/**
+ * Loads an image into the tile.
+ *
+ * @param {function(boolean)} onImageLoaded Callback when image is loaded.
+ *     The argument is true for success, false for failure.
+ * @param {function()=} opt_onThumbnailError Callback for image loading error.
+ */
+Mosaic.Tile.prototype.load = function(onImageLoaded, opt_onThumbnailError) {
+  this.imageLoaded_ = false;
+  this.imageLoading_ = true;
   this.thumbnailLoader_.loadDetachedImage(function(success) {
-    if (this.thumbnailLoader_.hasValidImage()) {
-      var width = this.thumbnailLoader_.getWidth();
-      var height = this.thumbnailLoader_.getHeight();
-      if (width > height) {
-        if (width > Mosaic.Tile.MAX_CONTENT_SIZE) {
-          height = Math.round(height * Mosaic.Tile.MAX_CONTENT_SIZE / width);
-          width = Mosaic.Tile.MAX_CONTENT_SIZE;
-        }
-      } else {
-        if (height > Mosaic.Tile.MAX_CONTENT_SIZE) {
-          width = Math.round(width * Mosaic.Tile.MAX_CONTENT_SIZE / height);
-          height = Mosaic.Tile.MAX_CONTENT_SIZE;
-        }
-      }
-      this.maxContentHeight_ = Math.max(Mosaic.Tile.MIN_CONTENT_SIZE, height);
-      this.aspectRatio_ = width / height;
-    } else {
-      this.maxContentHeight_ = Mosaic.Tile.GENERIC_ICON_SIZE;
-      this.aspectRatio_ = 1;
+    if (!success) {
+      if (opt_onThumbnailError)
+        opt_onThumbnailError();
     }
-
-    callback(success);
+    if (this.wrapper_) {
+      this.thumbnailLoader_.attachImage(this.wrapper_,
+                                        ThumbnailLoader.FillMode.FILL);
+    }
+    onImageLoaded(success);
+    this.imageLoaded_ = true;
+    this.imageLoading_ = false;
   }.bind(this));
 };
 
 /**
  * Select/unselect the tile.
  *
  * @param {boolean} on True if selected.
  */
 Mosaic.Tile.prototype.select = function(on) {
   if (on)
@@ skipping 22 matching lines @@
   this.style.height = height + 'px';
 
   if (!this.wrapper_) {  // First time, create DOM.
     this.container_.appendChild(this);
     var border = util.createChild(this, 'img-border');
     this.wrapper_ = util.createChild(border, 'img-wrapper');
   }
   if (this.hasAttribute('selected'))
     this.scrollIntoView(false);
 
-  this.thumbnailLoader_.attachImage(this.wrapper_,
-                                    ThumbnailLoader.FillMode.FILL);
+  if (this.imageLoaded_) {
+    this.thumbnailLoader_.attachImage(this.wrapper_,
+                                      ThumbnailLoader.FillMode.FILL);
+  }
 };
 
 /**
  * If the tile is not fully visible scroll the parent to make it fully visible.
  * @param {boolean=} opt_animated True, if scroll should be animated,
  *     default: true.
  */
 Mosaic.Tile.prototype.scrollIntoView = function(opt_animated) {
   if (this.left_ == null)  // Not laid out.
     return;
@@ skipping 29 matching lines @@
   return new Rect(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);
 };