NTP5: Reuse insertion/removal animations for Apps.

chrome/browser/resources/ntp_search/tile_page.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.
 
 cr.define('ntp', function() {
   'use strict';
 
 
   /**
    * The maximum gap from the edge of the scrolling area which will display
@@ skipping 470 matching lines @@
           tile.data = data;
       }
     },
 
     /**
      * Sets the dataList that will be used to create Tiles. This method will
      * create/remove necessary/unnecessary tiles, render the grid when the
      * number of tiles has changed, and finally will call |updateTiles_| which
      * will in turn render the individual tiles.
      * @param {Array} dataList The array of data.
+     * @param {boolean=} opt_create Whether to create tiles.
      */
-    setDataList: function(dataList) {
+    setDataList: function(dataList, opt_create) {
       this.dataList_ = dataList.slice(0, this.config.maxTileCount);
 
+      opt_create = typeof opt_create == 'undefined' ? true : opt_create;

[Dan Beam, 2012/12/07 05:08:56]

nit: I generally think it's better to have `undefined` match the truthiness
(i.e. opt_dontCreate) so when you don't pass an argument the truthiness matches
(i.e. addEventListener('blah', func) is natural to me even though it takes
[true, false] as the third argument).  this also allows one to simply say:

  if (opt_dontCreate)
    return;

with no added preparation or sniffing of arguments.

[pedro (no code reviews), 2012/12/08 02:57:29]

I went ahead and implemented your previous suggestion, separating this into two
methods.

+      if (!opt_create)
+        return;
+
       var dataListLength = this.dataList_.length;
       var tileCount = this.tileCount;
       // Create or remove tiles if necessary.
       if (tileCount < dataListLength) {
         this.createTiles_(dataListLength - tileCount);
       } else if (tileCount > dataListLength) {
         var tiles = this.tiles_;
         while (tiles.length > dataListLength) {
           var previousLength = tiles.length;
           // It doesn't matter which tiles are being removed here because
@@ skipping 342 matching lines @@
 
       var repositioningStartIndex = index;
       var repositioningEndIndex = tileCount - (extraTileData ? 1 : 0);
 
       this.initializeRepositioningAnimation_(index, repositioningEndIndex);
 
       var restoredData = newDataList[index];
       var tileBeingRestored = createTile(this, restoredData);
       tileCells[index].appendChild(tileBeingRestored);
 
-      var extraTile = extraCell.tile;
+      if (this.config.scrollable)
+        this.content_.scrollTop = tileCells[index].offsetTop;
+
+      var extraTile;
+      if (extraCell)
+        extraTile = extraCell.tile;
 
       this.executeRepositioningAnimation_(tileBeingRestored, extraTile,
           repositioningStartIndex, repositioningEndIndex, false);
 
       // Cleans up the animation.
       var onPositioningTransitionEnd = function(e) {
         var propertyName = e.propertyName;
         if (!(propertyName == '-webkit-transform' ||
               propertyName == 'opacity')) {
           return;
@@ skipping 80 matching lines @@
      * @param {number} endIndex Index of the last tile to be repositioned.
      * @param {boolean} isRemoving Whether the tile is being removed.
      * @private
      */
     executeRepositioningAnimation_: function(targetTile, extraTile, startIndex,
         endIndex, isRemoving) {
       targetTile.classList.add('target-tile');
 
       // Alternate the visualization of the target and extra tiles.
       fadeTile(targetTile, !isRemoving);
-      fadeTile(extraTile, isRemoving);
+      if (extraTile)
+        fadeTile(extraTile, isRemoving);
 
       // Move tiles to the new position.
       var tiles = this.tiles_;
       var positionDiff = isRemoving ? -1 : 1;
       for (var i = startIndex; i < endIndex; i++) {
         var position = this.getTilePosition_(i + positionDiff);
         this.moveTileTo_(tiles[i], position.left, position.top);
       }
     },
 
@@ skipping 14 matching lines @@
       targetTile.classList.remove('target-tile');
 
       // Move tiles back to relative position.
       var tiles = this.tiles_;
       var tileCells = this.querySelectorAll('.tile-cell');
       var positionDiff = isRemoving ? -1 : 1;
       for (var i = startIndex; i < endIndex; i++) {
         var tile = tiles[i];
         this.resetTilePosition_(tile);
         tile.style.zIndex = '';
-        tileCells[i + positionDiff].assign(tile);
+        var tileCell = tileCells[i + positionDiff];
+        if (tileCell)
+          tileCell.assign(tile);
       }
     },
 
     /**
      * Animates the display of columns.
      * @param {number} col The column number.
      * @param {boolean} show Whether or not to show the row.
      */
     showTileCols_: function(col, show) {
       var prop = show ? 'remove' : 'add';
@@ skipping 91 matching lines @@
       tile.scrollTop;
       tile.classList.remove(className);
     }
   }
 
   return {
     Tile: Tile,
     TilePage: TilePage,
   };
 });