Add type annotations to gallery/js/mosaic_mode.js.

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 {!Element} container Content container.
+ * @param {!ErrorBanner} errorBanner Error banner.
+ * @param {!cr.ui.ArrayDataModel} dataModel Data model.
+ * @param {!cr.ui.ListSelectionModel} selectionModel Selection model.
  * @param {!VolumeManager} volumeManager Volume manager.
  * @param {function()} toggleMode Function to switch to the Slide mode.
  * @constructor
+ * @struct
  */
 function MosaicMode(
     container, errorBanner, dataModel, selectionModel, volumeManager,
     toggleMode) {
-  this.mosaic_ = new Mosaic(container.ownerDocument, errorBanner,
+  this.mosaic_ = new Mosaic(assert(container.ownerDocument), errorBanner,
       dataModel, selectionModel, volumeManager);
   container.appendChild(this.mosaic_);
 
   this.toggleMode_ = toggleMode;
   this.mosaic_.addEventListener('dblclick', this.toggleMode_);
   this.showingTimeoutID_ = null;
 }
 
 /**
- * @return {Mosaic} The mosaic control.
+ * @return {!Mosaic} The mosaic control.
  */
 MosaicMode.prototype.getMosaic = function() { return this.mosaic_; };
 
 /**
  * @return {string} Mode name.
  */
 MosaicMode.prototype.getName = function() { return 'mosaic'; };
 
 /**
  * @return {string} Mode title.
  */
 MosaicMode.prototype.getTitle = function() { return 'GALLERY_MOSAIC'; };
 
 /**
  * Execute an action (this mode has no busy state).
  * @param {function()} action Action to execute.
  */
 MosaicMode.prototype.executeWhenReady = function(action) { action(); };
 
 /**
  * @return {boolean} Always true (no toolbar fading in this mode).
  */
 MosaicMode.prototype.hasActiveTool = function() { return true; };
 
 /**
  * Keydown handler.
  *
- * @param {Event} event Event.
+ * @param {!Event} event Event.
  */
 MosaicMode.prototype.onKeyDown = function(event) {
   switch (util.getKeyModifiers(event) + event.keyIdentifier) {
     case 'Enter':
       if (!document.activeElement ||
           document.activeElement.localName !== 'button') {
         this.toggleMode_();
         event.preventDefault();
       }
       return;
   }
   this.mosaic_.onKeyDown(event);
 };
 
 ////////////////////////////////////////////////////////////////////////////////
 
 /**
  * Mosaic control.
  *
- * @param {Document} document Document.
- * @param {ErrorBanner} errorBanner Error banner.
- * @param {cr.ui.ArrayDataModel} dataModel Data model.
- * @param {cr.ui.ListSelectionModel} selectionModel Selection model.
- * @param {VolumeManagerWrapper} volumeManager Volume manager.
- * @return {Element} Mosaic element.
+ * @param {!Document} document Document.
+ * @param {!ErrorBanner} errorBanner Error banner.
+ * @param {!cr.ui.ArrayDataModel} dataModel Data model.
+ * @param {!cr.ui.ListSelectionModel} selectionModel Selection model.
+ * @param {!VolumeManager} volumeManager Volume manager.
+ * @return {!Element} Mosaic element.
  * @constructor
+ * @struct
+ * @extends {HTMLDivElement}
+ * @suppress {checkStructDictInheritance}
  */
 function Mosaic(document, errorBanner, dataModel, selectionModel,
     volumeManager) {
-  var self = document.createElement('div');
+  var self = assertInstanceof(document.createElement('div'), HTMLDivElement);
   Mosaic.decorate(self, errorBanner, dataModel, selectionModel, volumeManager);
   return self;
 }
 
 /**
  * Inherits 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;
 
 /**
  * Decorates a Mosaic instance.
  *
- * @param {Mosaic} self Self pointer.
- * @param {ErrorBanner} errorBanner Error banner.
- * @param {cr.ui.ArrayDataModel} dataModel Data model.
- * @param {cr.ui.ListSelectionModel} selectionModel Selection model.
- * @param {VolumeManagerWrapper} volumeManager Volume manager.
+ * @param {!HTMLDivElement} self Self pointer.
+ * @param {!ErrorBanner} errorBanner Error banner.
+ * @param {!cr.ui.ArrayDataModel} dataModel Data model.
+ * @param {!cr.ui.ListSelectionModel} selectionModel Selection model.
+ * @param {!VolumeManager} volumeManager Volume manager.
  */
 Mosaic.decorate = function(
     self, errorBanner, dataModel, selectionModel, volumeManager) {
   self.__proto__ = Mosaic.prototype;
+  self = /** @type {!Mosaic} */ (self);
   self.className = 'mosaic';
 
   self.dataModel_ = dataModel;
   self.selectionModel_ = selectionModel;
   self.volumeManager_ = volumeManager;
   self.errorBanner_ = errorBanner;
 
+  /**
+   * @type {Array.<!Mosaic.Tile>}
+   * @private
+   */
+  self.tiles_ = null;
+
+  /**
+   * @type {boolean}
+   * @private
+   */
+  self.loadVisibleTilesSuppressed_ = false;
+
+  /**
+   * @type {boolean}
+   * @private
+   */
+  self.loadVisibleTilesScheduled_ = false;
+
+  /**
+   * @type {number}
+   * @private
+   */
+  self.showingTimeoutID_ = 0;
+
+  /**
+   * @type {Mosaic.SelectionController}
+   * @private
+   */
+  self.selectionController_ = null;
+
+  /**
+   * @type {Mosaic.Layout}
+   * @private
+   */
+  self.layoutModel_ = null;
+
+  /**
+   * @type {boolean}
+   * @private
+   */
+  self.suppressHovering_ = false;
+
+  /**
+   * @type {number}
+   * @private
+   */
+  self.layoutTimer_ = 0;
+
+  /**
+   * @type {number}
+   * @private
+   */
+  self.scrollAnimation_ = 0;
+
   // Initialization is completed lazily on the first call to |init|.
 };
 
 /**
  * Initializes the mosaic element.
  */
 Mosaic.prototype.init = function() {
   if (this.tiles_)
     return; // Already initialized, nothing to do.
 
@@ skipping 55 matching lines @@
 };
 
 /**
  * Smoothly scrolls the container to the specified position using
  * f(x) = sqrt(x) speed function normalized to animation duration.
  * @param {number} targetPosition Horizontal scroll position in pixels.
  */
 Mosaic.prototype.animatedScrollTo = function(targetPosition) {
   if (this.scrollAnimation_) {
     webkitCancelAnimationFrame(this.scrollAnimation_);
-    this.scrollAnimation_ = null;
+    this.scrollAnimation_ = 0;
   }
 
   // Mouse move events are fired without touching the mouse because of scrolling
   // the container. Therefore, these events have to be suppressed.
   this.suppressHovering_ = true;
 
   // Calculates integral area from t1 to t2 of f(x) = sqrt(x) dx.
   var integral = function(t1, t2) {
     return 2.0 / 3.0 * Math.pow(t2, 3.0 / 2.0) -
            2.0 / 3.0 * Math.pow(t1, 3.0 / 2.0);
@@ skipping 48 matching lines @@
 /**
  * @param {number} index Tile index.
  * @return {ImageRect} Tile's image rectangle.
  */
 Mosaic.prototype.getTileRect = function(index) {
   var tile = this.tiles_[index];
   return tile && tile.getImageRect();
 };
 
 /**
+ * Scroll the given tile into the viewport.
  * @param {number} index Tile index.
- * Scroll the given tile into the viewport.
  */
-Mosaic.prototype.scrollIntoView = function(index) {
+Mosaic.prototype.scrollIntoViewByIndex = function(index) {
   var tile = this.tiles_[index];
   if (tile) tile.scrollIntoView();
 };
 
 /**
  * Initializes multiple tiles.
  *
- * @param {Array.<Mosaic.Tile>} tiles Array of tiles.
+ * @param {!Array.<!Mosaic.Tile>} tiles Array of tiles.
  * @private
  */
 Mosaic.prototype.initTiles_ = function(tiles) {
   for (var i = 0; i < tiles.length; i++) {
     tiles[i].init();
   }
 };
 
 /**
  * Reloads all tiles.
  */
 Mosaic.prototype.reload = function() {
   this.layoutModel_.reset_();
   this.tiles_.forEach(function(t) { t.markUnloaded(); });
   this.initTiles_(this.tiles_);
 };
 
 /**
  * Layouts 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;
+    this.layoutTimer_ = 0;
   }
   while (true) {
     var index = this.layoutModel_.getTileCount();
     if (index === this.tiles_.length)
       break; // All tiles done.
     var tile = this.tiles_[index];
     if (!tile.isInitialized())
       break;  // Next layout will try to restart from here.
     this.layoutModel_.add(tile, index + 1 === this.tiles_.length);
   }
   this.loadVisibleTiles_();
 };
 
 /**
  * Schedules the layout.
  *
  * @param {number=} opt_delay Delay in ms.
  */
 Mosaic.prototype.scheduleLayout = function(opt_delay) {
   if (!this.layoutTimer_) {
     this.layoutTimer_ = setTimeout(function() {
-      this.layoutTimer_ = null;
+      this.layoutTimer_ = 0;
       this.layout();
     }.bind(this), opt_delay || 0);
   }
 };
 
 /**
  * Resize handler.
  *
  * @private
  */
 Mosaic.prototype.onResize_ = function() {
   this.layoutModel_.setViewportSize(this.clientWidth, this.clientHeight -
       (Mosaic.Layout.PADDING_TOP + Mosaic.Layout.PADDING_BOTTOM));
   this.scheduleLayout();
 };
 
 /**
  * Mouse event handler.
  *
- * @param {Event} event Event.
+ * @param {!Event} event Event.
  * @private
  */
 Mosaic.prototype.onMouseEvent_ = function(event) {
   // Navigating with mouse, enable hover state.
   if (!this.suppressHovering_)
     this.classList.add('hover-visible');
 
   if (event.type === 'mousemove')
     return;
 
@@ skipping 15 matching lines @@
  */
 Mosaic.prototype.onScroll_ = function() {
   requestAnimationFrame(function() {
     this.loadVisibleTiles_();
   }.bind(this));
 };
 
 /**
  * Selection change handler.
  *
- * @param {Event} event Event.
+ * @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);
   }
 };
 
 /**
  * Leads item change handler.
  *
- * @param {Event} event Event.
+ * @param {!Event} event Event.
  * @private
  */
 Mosaic.prototype.onLeadChange_ = function(event) {
   var index = event.newValue;
   if (index >= 0) {
     var tile = this.tiles_[index];
     if (tile) tile.scrollIntoView();
   }
 };
 
 /**
  * Splice event handler.
  *
- * @param {Event} event Event.
+ * @param {!Event} event Event.
  * @private
  */
 Mosaic.prototype.onSplice_ = function(event) {
   var index = event.index;
   this.layoutModel_.invalidateFromTile_(index);
 
   if (event.removed.length) {
     for (var t = 0; t !== event.removed.length; t++) {
       // If the layout for the tile has not done yet, the parent is null.
       // And the layout will not be done after onSplice_ because it is removed
@@ skipping 21 matching lines @@
     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.
+ * @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].init();
   this.tiles_[index].unload();
   this.tiles_[index].load(
       Mosaic.Tile.LoadMode.HIGH_DPI,
       this.scheduleLayout.bind(this, Mosaic.LAYOUT_DELAY));
 };
 
 /**
  * Keydown event handler.
  *
- * @param {Event} event Event.
+ * @param {!Event} event Event.
  * @return {boolean} True if the event has been consumed.
  */
 Mosaic.prototype.onKeyDown = function(event) {
   this.selectionController_.handleKeyDown(event);
   if (event.defaultPrevented)  // Navigating with keyboard, hide hover state.
     this.classList.remove('hover-visible');
   return event.defaultPrevented;
 };
 
 /**
@@ skipping 16 matching lines @@
   var duration = ImageView.MODE_TRANSITION_DURATION;
   if (this.canZoom()) {
     // Fade in in parallel with the zoom effect.
     this.setAttribute('visible', 'zooming');
   } else {
     // Mosaic is not animating but the large image is. Fade in the mosaic
     // shortly before the large image animation is done.
     duration -= 100;
   }
   this.showingTimeoutID_ = setTimeout(function() {
-    this.showingTimeoutID_ = null;
+    this.showingTimeoutID_ = 0;
     // Make the selection visible.
     // If the mosaic is not animated it will start fading in now.
     this.setAttribute('visible', 'normal');
     this.loadVisibleTiles_();
   }.bind(this), duration);
 };
 
 /**
  * Hides the mosaic.
  */
 Mosaic.prototype.hide = function() {
   this.errorBanner_.clear();
 
-  if (this.showingTimeoutID_ !== null) {
+  if (this.showingTimeoutID_ !== 0) {
     clearTimeout(this.showingTimeoutID_);
-    this.showingTimeoutID_ = null;
+    this.showingTimeoutID_ = 0;
   }
   this.removeAttribute('visible');
 };
 
 /**
  * Checks if the mosaic view is visible.
  * @return {boolean} True if visible, false otherwise.
  * @private
  */
 Mosaic.prototype.isVisible_ = function() {
@@ skipping 105 matching lines @@
  * @private
  */
 Mosaic.prototype.getItemCount_ = function() {
   return this.dataModel_.length;
 };
 
 ////////////////////////////////////////////////////////////////////////////////
 
 /**
  * Creates a selection controller that is to be used with grid.
- * @param {cr.ui.ListSelectionModel} selectionModel The selection model to
+ * @param {!cr.ui.ListSelectionModel} selectionModel The selection model to
  *     interact with.
- * @param {Mosaic.Layout} layoutModel The layout model to use.
+ * @param {!Mosaic.Layout} layoutModel The layout model to use.
  * @constructor
- * @extends {!cr.ui.ListSelectionController}
+ * @struct
+ * @extends {cr.ui.ListSelectionController}
+ * @suppress {checkStructDictInheritance}
  */
 Mosaic.SelectionController = function(selectionModel, layoutModel) {
   cr.ui.ListSelectionController.call(this, selectionModel);
   this.layoutModel_ = layoutModel;
 };
 
 /**
  * Extends cr.ui.ListSelectionController.
  */
 Mosaic.SelectionController.prototype.__proto__ =
@@ skipping 25 matching lines @@
 };
 
 ////////////////////////////////////////////////////////////////////////////////
 
 /**
  * Mosaic layout.
  *
  * @param {string=} opt_mode Layout mode.
  * @param {Mosaic.Density=} opt_maxDensity Layout density.
  * @constructor
+ * @struct
  */
 Mosaic.Layout = function(opt_mode, opt_maxDensity) {
-  this.mode_ = opt_mode || Mosaic.Layout.MODE_TENTATIVE;
+  this.mode_ = opt_mode || Mosaic.Layout.Mode.TENTATIVE;
   this.maxDensity_ = opt_maxDensity || Mosaic.Density.createHighest();
+
+  /**
+   * @type {!Array.<!Mosaic.Column>}
+   * @private
+   */
+  this.columns_ = [];
+
+  /**
+   * @type {Mosaic.Column}
+   * @private
+   */
+  this.newColumn_ = null;
+
+  /**
+   * @type {number}
+   * @private
+   */
+  this.viewportWidth_ = 0;
+
+  /**
+   * @type {number}
+   * @private
+   */
+  this.viewportHeight_ = 0;
+
+  /**
+   * @type {Mosaic.Density}
+   * @private
+   */
+  this.density_ = null;
+
   this.reset_();
 };
 
 /**
  * Blank space at the top of the mosaic element. We do not do that in CSS
  * to make transition effects easier.
+ * @type {number}
+ * @const
  */
 Mosaic.Layout.PADDING_TOP = 50;
 
 /**
  * Blank space at the bottom of the mosaic element.
+ * @type {number}
+ * @const
  */
 Mosaic.Layout.PADDING_BOTTOM = 50;
 
 /**
  * Horizontal and vertical spacing between images. Should be kept in sync
  * with the style of .mosaic-item in gallery.css (= 2 * ( 4 + 1))
+ * @type {number}
+ * @const
  */
 Mosaic.Layout.SPACING = 10;
 
 /**
  * Margin for scrolling using keyboard. Distance between a selected tile
  * and window border.
+ * @type {number}
+ * @const
  */
 Mosaic.Layout.SCROLL_MARGIN = 30;
 
 /**
- * Layout mode: commit to DOM immediately.
+ * Layout mode.
+ * @enum {string}
  */
-Mosaic.Layout.MODE_FINAL = 'final';
-
-/**
- * Layout mode: do not commit layout to DOM until it is complete or the viewport
- * overflows.
- */
-Mosaic.Layout.MODE_TENTATIVE = 'tentative';
-
-/**
- * Layout mode: never commit layout to DOM.
- */
-Mosaic.Layout.MODE_DRY_RUN = 'dry_run';
+Mosaic.Layout.Mode = {
+  // Commit to DOM immediately.
+  FINAL: 'final',
+  // Do not commit layout to DOM until it is complete or the viewport
+  // overflows.
+  TENTATIVE: 'tentative',
+  // Never commit layout to DOM.
+  DRY_RUN: 'dry_run',
+};
 
 /**
  * Resets the layout.
  *
  * @private
  */
 Mosaic.Layout.prototype.reset_ = function() {
   this.columns_ = [];
   this.newColumn_ = null;
   this.density_ = Mosaic.Density.createLowest();
-  if (this.mode_ !== Mosaic.Layout.MODE_DRY_RUN)  // DRY_RUN is sticky.
-    this.mode_ = Mosaic.Layout.MODE_TENTATIVE;
+  if (this.mode_ !== Mosaic.Layout.Mode.DRY_RUN)  // DRY_RUN is sticky.
+    this.mode_ = Mosaic.Layout.Mode.TENTATIVE;
 };
 
 /**
  * @param {number} width Viewport width.
  * @param {number} height Viewport height.
  */
 Mosaic.Layout.prototype.setViewportSize = function(width, height) {
   this.viewportWidth_ = width;
   this.viewportHeight_ = height;
   this.reset_();
 };
 
 /**
  * @return {number} Total width of the layout.
  */
 Mosaic.Layout.prototype.getWidth = function() {
   var lastColumn = this.getLastColumn_();
   return lastColumn ? lastColumn.getRight() : 0;
 };
 
 /**
  * @return {number} Total height of the layout.
  */
 Mosaic.Layout.prototype.getHeight = function() {
   var firstColumn = this.columns_[0];
   return firstColumn ? firstColumn.getHeight() : 0;
 };
 
 /**
- * @return {Array.<Mosaic.Tile>} All tiles in the layout.
+ * @return {!Array.<!Mosaic.Tile>} All tiles in the layout.
  */
 Mosaic.Layout.prototype.getTiles = function() {
   return Array.prototype.concat.apply([],
       this.columns_.map(function(c) { return c.getTiles(); }));
 };
 
 /**
  * @return {number} Total number of tiles added to the layout.
  */
 Mosaic.Layout.prototype.getTileCount = function() {
@@ skipping 13 matching lines @@
  * @return {number} Total number of tiles in completed columns.
  */
 Mosaic.Layout.prototype.getLaidOutTileCount = function() {
   var lastColumn = this.getLastColumn_();
   return lastColumn ? lastColumn.getNextTileIndex() : 0;
 };
 
 /**
  * Adds a tile to the layout.
  *
- * @param {Mosaic.Tile} tile The tile to be added.
+ * @param {!Mosaic.Tile} tile The tile to be added.
  * @param {boolean} isLast True if this tile is the last.
  */
 Mosaic.Layout.prototype.add = function(tile, isLast) {
   var layoutQueue = [tile];
 
   // There are two levels of backtracking in the layout algorithm.
   // |Mosaic.Layout.density_| tracks the state of the 'global' backtracking
   // which aims to use as much of the viewport space as possible.
   // It starts with the lowest density and increases it until the layout
   // fits into the viewport. If it does not fit even at the highest density,
@@ skipping 25 matching lines @@
 
     if (this.newColumn_.isSuboptimal()) {
       layoutQueue = this.newColumn_.getTiles().concat(layoutQueue);
       this.newColumn_.retryWithLowerDensity();
       continue;
     }
 
     this.columns_.push(this.newColumn_);
     this.newColumn_ = null;
 
-    if (this.mode_ === Mosaic.Layout.MODE_FINAL && isFinalColumn) {
+    if (this.mode_ === Mosaic.Layout.Mode.FINAL && isFinalColumn) {
       this.commit_();
       continue;
     }
 
     if (this.getWidth() > this.viewportWidth_) {
       // Viewport completely filled.
       if (this.density_.equals(this.maxDensity_)) {
         // Max density reached, commit if tentative, just continue if dry run.
-        if (this.mode_ === Mosaic.Layout.MODE_TENTATIVE)
+        if (this.mode_ === Mosaic.Layout.Mode.TENTATIVE)
           this.commit_();
         continue;
       }
 
       // Rollback the entire layout, retry with higher density.
       layoutQueue = this.getTiles().concat(layoutQueue);
       this.columns_ = [];
       this.density_.increase();
       continue;
     }
 
-    if (isFinalColumn && this.mode_ === Mosaic.Layout.MODE_TENTATIVE) {
+    if (isFinalColumn && this.mode_ === Mosaic.Layout.Mode.TENTATIVE) {
       // The complete tentative layout fits into the viewport.
       var stretched = this.findHorizontalLayout_();
       if (stretched)
         this.columns_ = stretched.columns_;
       // Center the layout in the viewport and commit.
       this.commit_((this.viewportWidth_ - this.getWidth()) / 2,
                    (this.viewportHeight_ - this.getHeight()) / 2);
     }
   }
 };
 
 /**
  * Commits the tentative layout.
  *
  * @param {number=} opt_offsetX Horizontal offset.
  * @param {number=} opt_offsetY Vertical offset.
  * @private
  */
 Mosaic.Layout.prototype.commit_ = function(opt_offsetX, opt_offsetY) {
   for (var i = 0; i !== this.columns_.length; i++) {
     this.columns_[i].layout(opt_offsetX, opt_offsetY);
   }
-  this.mode_ = Mosaic.Layout.MODE_FINAL;
+  this.mode_ = Mosaic.Layout.Mode.FINAL;
 };
 
 /**
  * Finds the most horizontally stretched layout built from the same tiles.
  *
  * The main layout algorithm fills the entire available viewport height.
  * If there is too few tiles this results in a layout that is unnaturally
  * stretched in the vertical direction.
  *
  * This method tries a number of smaller heights and returns the most
@@ skipping 11 matching lines @@
 
   var tiles = this.getTiles();
   if (tiles.length === 1)
     return null;  // Single tile layout is always the same.
 
   var tileHeights = tiles.map(function(t) { return t.getMaxContentHeight(); });
   var minTileHeight = Math.min.apply(null, tileHeights);
 
   for (var h = minTileHeight; h < this.viewportHeight_; h += minTileHeight) {
     var layout = new Mosaic.Layout(
-        Mosaic.Layout.MODE_DRY_RUN, this.density_.clone());
+        Mosaic.Layout.Mode.DRY_RUN, this.density_.clone());
     layout.setViewportSize(this.viewportWidth_, h);
     for (var t = 0; t !== tiles.length; t++)
       layout.add(tiles[t], t + 1 === tiles.length);
 
     if (layout.getWidth() <= this.viewportWidth_)
       return layout;
   }
 
   return null;
 };
 
 /**
  * Invalidates the layout after the given tile was modified (added, deleted or
  * changed dimensions).
  *
  * @param {number} index Tile index.
  * @private
  */
 Mosaic.Layout.prototype.invalidateFromTile_ = function(index) {
   var columnIndex = this.getColumnIndexByTile_(index);
   if (columnIndex < 0)
     return; // Index not in the layout, probably already invalidated.
 
   if (this.columns_[columnIndex].getLeft() >= this.viewportWidth_) {
     // The columns to the right cover the entire viewport width, so there is no
     // chance that the modified layout would fit into the viewport.
     // No point in restarting the entire layout, keep the columns to the right.
-    console.assert(this.mode_ === Mosaic.Layout.MODE_FINAL,
+    console.assert(this.mode_ === Mosaic.Layout.Mode.FINAL,
         'Expected FINAL layout mode');
     this.columns_ = this.columns_.slice(0, columnIndex);
     this.newColumn_ = null;
   } else {
     // There is a chance that the modified layout would fit into the viewport.
     this.reset_();
-    this.mode_ = Mosaic.Layout.MODE_TENTATIVE;
+    this.mode_ = Mosaic.Layout.Mode.TENTATIVE;
   }
 };
 
 /**
  * Gets the index of the tile to the left or to the right from the given tile.
  *
  * @param {number} index Tile index.
  * @param {number} direction -1 for left, 1 for right.
  * @return {number} Adjacent tile index.
  */
@@ skipping 91 matching lines @@
   return -1;
 };
 
 /**
  * Scales the given array of size values to satisfy 3 conditions:
  * 1. The new sizes must be integer.
  * 2. The new sizes must sum up to the given |total| value.
  * 3. The relative proportions of the sizes should be as close to the original
  *    as possible.
  *
- * @param {Array.<number>} sizes Array of sizes.
+ * @param {!Array.<number>} sizes Array of sizes.
  * @param {number} newTotal New total size.
  */
 Mosaic.Layout.rescaleSizesToNewTotal = function(sizes, newTotal) {
   var total = 0;
 
   var partialTotals = [0];
   for (var i = 0; i !== sizes.length; i++) {
     total += sizes[i];
     partialTotals.push(total);
   }
 
   var scale = newTotal / total;
 
   for (i = 0; i !== sizes.length; i++) {
     sizes[i] = Math.round(partialTotals[i + 1] * scale) -
         Math.round(partialTotals[i] * scale);
   }
 };
 
 ////////////////////////////////////////////////////////////////////////////////
 
 /**
  * Representation of the layout density.
  *
  * @param {number} horizontal Horizontal density, number tiles per row.
  * @param {number} vertical Vertical density, frequency of rows forced to
  *   contain a single tile.
  * @constructor
+ * @struct
  */
 Mosaic.Density = function(horizontal, vertical) {
   this.horizontal = horizontal;
   this.vertical = vertical;
 };
 
 /**
  * Minimal horizontal density (tiles per row).
+ * @type {number}
+ * @const
  */
 Mosaic.Density.MIN_HORIZONTAL = 1;
 
 /**
  * Minimal horizontal density (tiles per row).
+ * @type {number}
+ * @const
  */
 Mosaic.Density.MAX_HORIZONTAL = 3;
 
 /**
  * Minimal vertical density: force 1 out of 2 rows to containt a single tile.
+ * @type {number}
+ * @const
  */
 Mosaic.Density.MIN_VERTICAL = 2;
 
 /**
  * Maximal vertical density: force 1 out of 3 rows to containt a single tile.
+ * @type {number}
+ * @const
  */
 Mosaic.Density.MAX_VERTICAL = 3;
 
 /**
- * @return {Mosaic.Density} Lowest density.
+ * @return {!Mosaic.Density} Lowest density.
  */
 Mosaic.Density.createLowest = function() {
   return new Mosaic.Density(
       Mosaic.Density.MIN_HORIZONTAL,
       Mosaic.Density.MIN_VERTICAL /* ignored when horizontal is at min */);
 };
 
 /**
- * @return {Mosaic.Density} Highest density.
+ * @return {!Mosaic.Density} Highest density.
  */
 Mosaic.Density.createHighest = function() {
   return new Mosaic.Density(
       Mosaic.Density.MAX_HORIZONTAL,
       Mosaic.Density.MAX_VERTICAL);
 };
 
 /**
- * @return {Mosaic.Density} A clone of this density object.
+ * @return {!Mosaic.Density} A clone of this density object.
  */
 Mosaic.Density.prototype.clone = function() {
   return new Mosaic.Density(this.horizontal, this.vertical);
 };
 
 /**
- * @param {Mosaic.Density} that The other object.
+ * @param {!Mosaic.Density} that The other object.
  * @return {boolean} True if equal.
  */
 Mosaic.Density.prototype.equals = function(that) {
   return this.horizontal === that.horizontal &&
          this.vertical === that.vertical;
 };
 
 /**
  * Increases the density to the next level.
  */
@@ skipping 28 matching lines @@
 ////////////////////////////////////////////////////////////////////////////////
 
 /**
  * A column in a mosaic layout. Contains rows.
  *
  * @param {number} index Column index.
  * @param {number} firstRowIndex Global row index.
  * @param {number} firstTileIndex Index of the first tile in the column.
  * @param {number} left Left edge coordinate.
  * @param {number} maxHeight Maximum height.
- * @param {Mosaic.Density} density Layout density.
+ * @param {!Mosaic.Density} density Layout density.
  * @constructor
+ * @struct
  */
 Mosaic.Column = function(index, firstRowIndex, firstTileIndex, left, maxHeight,
                          density) {
   this.index_ = index;
   this.firstRowIndex_ = firstRowIndex;
   this.firstTileIndex_ = firstTileIndex;
   this.left_ = left;
   this.maxHeight_ = maxHeight;
   this.density_ = density;
 
+  /**
+   * @type {number}
+   * @private
+   */
+  this.width_ = 0;
+
+  /**
+   * @type {!Array.<!Mosaic.Tile>}
+   * @private
+   */
+  this.tiles_ = [];
+
+  /**
+   * @type {!Array.<!Mosaic.Row>}
+   * @private
+   */
+  this.rows_ = [];
+
+  /**
+   * @type {Mosaic.Row}
+   * @private
+   */
+  this.newRow_ = null;
+
+  /**
+   * @type {!Array.<number>}
+   * @private
+   */
+  this.rowHeights_ = [];
+
+  /**
+   * @type {number}
+   * @private
+   */
+  this.height_ = 0;
+
   this.reset_();
 };
 
 /**
  * Resets the layout.
  * @private
  */
 Mosaic.Column.prototype.reset_ = function() {
   this.tiles_ = [];
   this.rows_ = [];
@@ skipping 13 matching lines @@
 };
 
 /**
  * @return {number} Global index of the last row + 1.
  */
 Mosaic.Column.prototype.getNextRowIndex = function() {
   return this.firstRowIndex_ + this.rows_.length;
 };
 
 /**
- * @return {Array.<Mosaic.Tile>} Array of tiles in the column.
+ * @return {!Array.<!Mosaic.Tile>} Array of tiles in the column.
  */
 Mosaic.Column.prototype.getTiles = function() { return this.tiles_ };
 
 /**
  * @param {number} index Tile index.
  * @return {boolean} True if this column contains the tile with the given index.
  */
 Mosaic.Column.prototype.hasTile = function(index) {
   return this.firstTileIndex_ <= index &&
       index < (this.firstTileIndex_ + this.getTileCount());
@@ skipping 22 matching lines @@
   for (var r = 0; r !== this.rows_.length; r++) {
     if (this.rows_[r].hasTile(index))
       return this.rows_[r];
   }
   return null;
 };
 
 /**
  * Adds a tile to the column.
  *
- * @param {Mosaic.Tile} tile The tile to add.
+ * @param {!Mosaic.Tile} tile The tile to add.
  */
 Mosaic.Column.prototype.add = function(tile) {
   var rowIndex = this.getNextRowIndex();
 
   if (!this.newRow_)
     this.newRow_ = new Mosaic.Row(this.getNextTileIndex());
 
   this.tiles_.push(tile);
   this.newRow_.add(tile);
 
@@ skipping 123 matching lines @@
   return false;
 };
 
 ////////////////////////////////////////////////////////////////////////////////
 
 /**
  * A row in a mosaic layout. Contains tiles.
  *
  * @param {number} firstTileIndex Index of the first tile in the row.
  * @constructor
+ * @struct
  */
 Mosaic.Row = function(firstTileIndex) {
   this.firstTileIndex_ = firstTileIndex;
   this.tiles_ = [];
+
+  /**
+   * @type {number}
+   * @private
+   */
+  this.top_ = 0;
+
+  /**
+   * @type {number}
+   * @private
+   */
+  this.height_ = 0;
 };
 
 /**
- * @param {Mosaic.Tile} tile The tile to add.
+ * @param {!Mosaic.Tile} tile The tile to add.
  */
 Mosaic.Row.prototype.add = function(tile) {
   console.assert(this.getTileCount() < Mosaic.Density.MAX_HORIZONTAL);
   this.tiles_.push(tile);
 };
 
 /**
- * @return {Array.<Mosaic.Tile>} Array of tiles in the row.
+ * @return {!Array.<!Mosaic.Tile>} Array of tiles in the row.
  */
 Mosaic.Row.prototype.getTiles = function() { return this.tiles_ };
 
 /**
  * Gets a tile by index.
  * @param {number} index Tile index.
  * @return {Mosaic.Tile} Requested tile or null if not found.
  */
 Mosaic.Row.prototype.getTileByIndex = function(index) {
   if (!this.hasTile(index))
@@ skipping 119 matching lines @@
     this.tiles_[t].layout(tileLeft, top, tileWidth, height);
     tileLeft += tileWidth;
   }
 };
 
 ////////////////////////////////////////////////////////////////////////////////
 
 /**
  * A single tile of the image mosaic.
  *
- * @param {Element} container Container element.
- * @param {Gallery.Item} item Gallery item associated with this tile.
- * @param {EntryLocation} locationInfo Location information for the tile.
- * @return {Element} The new tile element.
+ * @param {!Element} container Container element.
+ * @param {!Gallery.Item} item Gallery item associated with this tile.
+ * @param {EntryLocation=} opt_locationInfo Location information for the tile.
+ * @return {!Element} The new tile element.
  * @constructor
+ * @extends {HTMLDivElement}
+ * @struct
+ * @suppress {checkStructDictInheritance}
  */
-Mosaic.Tile = function(container, item, locationInfo) {
+Mosaic.Tile = function(container, item, opt_locationInfo) {
   var self = container.ownerDocument.createElement('div');
-  Mosaic.Tile.decorate(self, container, item, locationInfo);
+  Mosaic.Tile.decorate(self, container, item, opt_locationInfo);
   return self;
 };
 
 /**
- * @param {Element} self Self pointer.
- * @param {Element} container Container element.
- * @param {Gallery.Item} item Gallery item associated with this tile.
- * @param {EntryLocation} locationInfo Location info for the tile image.
+ * @param {!Element} self Self pointer.
+ * @param {!Element} container Container element.
+ * @param {!Gallery.Item} item Gallery item associated with this tile.
+ * @param {EntryLocation=} opt_locationInfo Location info for the tile image.
  */
-Mosaic.Tile.decorate = function(self, container, item, locationInfo) {
+Mosaic.Tile.decorate = function(self, container, item, opt_locationInfo) {
   self.__proto__ = Mosaic.Tile.prototype;
+  self = /** @type {!Mosaic.Tile} */ (self);
   self.className = 'mosaic-tile';
 
   self.container_ = container;
   self.item_ = item;
+  self.hidpiEmbedded_ = opt_locationInfo && opt_locationInfo.isDriveBased;
+
+  /**
+   * @type {?number}
+   * @private
+   */
   self.left_ = null; // Mark as not laid out.
-  self.hidpiEmbedded_ = locationInfo && locationInfo.isDriveBased;
+
+  /**
+   * @type {number}
+   * @private
+   */
+  self.top_ = 0;
+
+  /**
+   * @type {number}
+   * @private
+   */
+  self.width_ = 0;
+
+  /**
+   * @type {number}
+   * @private
+   */
+  self.height_ = 0;
+
+  /**
+   * @type {number}
+   * @private
+   */
+  self.maxContentHeight_ = 0;
+
+  /**
+   * @type {number}
+   * @private
+   */
+  self.aspectRatio_ = 0;
+
+  /**
+   * @type {ThumbnailLoader}
+   * @private
+   */
+  self.thumbnailPreloader_ = null;
+
+  /**
+   * @type {ThumbnailLoader}
+   * @private
+   */
+  self.thumbnailLoader_ = null;
+
+  /**
+   * @type {boolean}
+   * @private
+   */
+  self.imagePreloaded_ = false;
+
+  /**
+   * @type {boolean}
+   * @private
+   */
+  self.imageLoaded_ = false;
+
+  /**
+   * @type {boolean}
+   * @private
+   */
+  self.imagePreloading_ = false;
+
+  /**
+   * @type {boolean}
+   * @private
+   */
+  self.imageLoading_ = false;
+
+  /**
+   * @type {HTMLDivElement}
+   * @private
+   */
+  self.wrapper_ = null;
 };
 
 /**
  * Load mode for the tile's image.
  * @enum {number}
  */
 Mosaic.Tile.LoadMode = {
   LOW_DPI: 0,
   HIGH_DPI: 1
 };
 
 /**
 * Inherit from HTMLDivElement.
 */
 Mosaic.Tile.prototype.__proto__ = HTMLDivElement.prototype;
 
 /**
  * Minimum tile content size.
+ * @type {number}
+ * @const
  */
 Mosaic.Tile.MIN_CONTENT_SIZE = 64;
 
 /**
  * Maximum tile content size.
+ * @type {number}
+ * @const
  */
 Mosaic.Tile.MAX_CONTENT_SIZE = 512;
 
 /**
  * Default size for a tile with no thumbnail image.
+ * @type {number}
+ * @const
  */
 Mosaic.Tile.GENERIC_ICON_SIZE = 128;
 
 /**
  * Max size of an image considered to be 'small'.
  * Small images are laid out slightly differently.
+ * @type {number}
+ * @const
  */
 Mosaic.Tile.SMALL_IMAGE_SIZE = 160;
 
 /**
- * @return {Gallery.Item} The Gallery item.
+ * @return {!Gallery.Item} The Gallery item.
  */
 Mosaic.Tile.prototype.getItem = function() { return this.item_; };
 
 /**
  * @return {number} Maximum content height that this tile can have.
  */
 Mosaic.Tile.prototype.getMaxContentHeight = function() {
   return this.maxContentHeight_;
 };
 
@@ skipping 142 matching lines @@
  * Loads an image into the tile.
  *
  * The mode argument is a hint. Use low-dpi for faster response, and high-dpi
  * for better output, but possibly affecting performance.
  *
  * If the mode is high-dpi, then a the high-dpi image is loaded, but also
  * low-dpi image is loaded for preloading (if available).
  * For the low-dpi mode, only low-dpi image is loaded. If not available, then
  * the high-dpi image is loaded as a fallback.
  *
- * @param {Mosaic.Tile.LoadMode} loadMode Loading mode.
+ * @param {!Mosaic.Tile.LoadMode} loadMode Loading mode.
  * @param {function(boolean)} onImageLoaded Callback when image is loaded.
  *     The argument is true for success, false for failure.
  */
 Mosaic.Tile.prototype.load = function(loadMode, onImageLoaded) {
   // 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.
@@ skipping 87 matching lines @@
   this.height_ = height;
 
   this.style.left = left + 'px';
   this.style.top = top + 'px';
   this.style.width = width + 'px';
   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');
+    this.wrapper_ = assertInstanceof(util.createChild(border, 'img-wrapper'),
+        HTMLDivElement);
   }
   if (this.hasAttribute('selected'))
     this.scrollIntoView(false);
 
   if (this.imageLoaded_) {
     this.thumbnailLoader_.attachImage(this.wrapper_,
                                       ThumbnailLoader.FillMode.OVER_FILL);
   }
 };
 
@@ skipping 37 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);
 };