NTP5: Reuse insertion/removal animations for Apps.

chrome/browser/resources/ntp_search/tile_page.js

Index: chrome/browser/resources/ntp_search/tile_page.js
diff --git a/chrome/browser/resources/ntp_search/tile_page.js b/chrome/browser/resources/ntp_search/tile_page.js
index b16f20d44a13183978ce6db14a13442c52aba96d..750511daf68d5082c6e3f7a582b5b614efe34223 100644
--- a/chrome/browser/resources/ntp_search/tile_page.js
+++ b/chrome/browser/resources/ntp_search/tile_page.js
@@ -488,10 +488,15 @@ cr.define('ntp', function() {
      * 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.
@@ -854,7 +859,12 @@ cr.define('ntp', function() {
       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);
@@ -955,7 +965,8 @@ cr.define('ntp', function() {
 
       // 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_;
@@ -990,7 +1001,9 @@ cr.define('ntp', function() {
         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);
       }
     },