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 462 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;
+      if (!opt_create)

[Dan Beam, 2012/12/05 18:40:44]

why isn't this simply 2 methods? `set dataList` and createTiles()?

[pedro (no code reviews), 2012/12/05 20:03:55]

For simplicity reasons, I'm trying to share as much code as possible between
Most Visited and Apps, and the Most Visited logic requires the tiles to be
created any time dataList has changed. Apps Page, on the other hand does not
require that.

Please bear in mind that the NTP5 is going to be rewritten from scratch, and all
the code you're seeing now is going to be deleted. I wouldn't be too much
worried about the NTP5 code right now, because this is just for experiment
purposes.

[Dan Beam, 2012/12/05 20:05:54]

If only I had a $1 for every time I heard that ;)

+        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.firstChild;
+      if (this.config.scrollable)
+        this.content_.scrollTop = tileCells[index].offsetTop;
+
+      var extraTile = extraCell && extraCell.firstChild;

[Dan Beam, 2012/12/05 18:40:44]

IMO, these are slightly easier to understand for C++ devs (or anybody unaware of
|| or && returning the results of an expression in JS):

  var extraTile = extraCell ? extraCell.firstChild : null;

or

  var extraTile;
  if (extraCell && extraCell.firstChild)
    extraTile = extraCell.firstChild;

[pedro (no code reviews), 2012/12/05 20:03:55]

Done.

 
       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,
   };
 });