NTP5: Apps regression fix.

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
    * the shadow with transparency. After this point the shadow will become
@@ skipping 108 matching lines @@
    * place and to animate them individually. Each TileCell is associated to
    * one Tile at a time (or none if it is a filler object), and that association
    * might change when the grid is resized. When that happens, the grid is
    * updated and the Tiles are moved to the proper TileCell. We cannot move the
    * the TileCell itself during the resize because this transition is animated
    * with CSS and there's no way to stop CSS animations, and we really want to
    * animate with CSS to take advantage of hardware acceleration.
    * @constructor
    * @extends {HTMLDivElement}
    * @param {HTMLElement} tile Tile element that will be associated to the cell.
-   * @param {Object} config TilePage configuration object.
    */
-  function TileCell(tile, config) {
+  function TileCell(tile) {
     var tileCell = cr.doc.createElement('div');
     tileCell.__proto__ = TileCell.prototype;
-    tileCell.initialize(tile, config);
+    tileCell.initialize(tile);
 
     return tileCell;
   }
 
   TileCell.prototype = {
     __proto__: HTMLDivElement.prototype,
 
     /**
      * Initializes a TileCell.
      * @param {Tile} tile The Tile that will be assigned to this TileCell.
-     * @param {Object} config TilePage configuration object.
      */
-    initialize: function(tile, config) {
+    initialize: function(tile) {
       this.className = 'tile-cell';
       this.assign(tile);
     },
 
     /**
      * The index of the TileCell.
      * @type {number}
      */
     get index() {
       return Array.prototype.indexOf.call(this.tilePage.tiles_,
@@ skipping 286 matching lines @@
       this.tiles_.splice(index, 0, tile);
       this.fireAddedEvent(tile, index, false);
       this.renderGrid();
     },
 
     /**
      * Create a blank tile.
      * @protected
      */
     createTile_: function() {
-      return new this.TileClass(this.config);
+      return new this.TileClass();
     },
 
     /**
      * Create blank tiles.
      * @param {number} count The desired number of Tiles to be created. If this
      *   value the maximum value defined in |config.maxTileCount|, the maximum
      *   value will be used instead.
      * @protected
      */
     createTiles_: function(count) {
@@ skipping 124 matching lines @@
      * Renders the tile grid, and the individual tiles. Rendering the grid
      * consists of adding/removing tile rows and tile cells according to the
      * specified size (defined by the number of columns in the grid). While
      * rendering the grid, the tiles are rendered in order in their respective
      * cells and tile fillers are rendered when needed. This method sets the
      * private properties colCount_ and rowCount_.
      *
      * This method should be called every time the contents of the grid changes,
      * that is, when the number, contents or order of the tiles has changed.
      * @param {number=} opt_colCount The number of columns.
+     * @param {boolean=} opt_doNotScroll Do not fire onScroll event.
      * @protected
      */
-    renderGrid: function(opt_colCount) {
+    renderGrid: function(opt_colCount, opt_doNotScroll) {
       var colCount = opt_colCount || this.colCount_;
 
       var tileGridContent = this.tileGridContent_;
       var tiles = this.tiles_;
       var tileCount = tiles.length;
 
       var rowCount = Math.ceil(tileCount / colCount);
       var tileRows = tileGridContent.getElementsByClassName('tile-row');
 
       for (var tile = 0, row = 0; row < rowCount; row++) {
@@ skipping 17 matching lines @@
         }
 
         // For each column in the current row.
         for (var col = 0; col < colCount; col++, tile++) {
           var tileCell;
           var tileElement;
           if (tileRowTiles[col]) {
             tileCell = tileRowTiles[col];
           } else {
             var span = cr.doc.createElement('span');
-            tileCell = new TileCell(span, this.config);
+            tileCell = new TileCell(span);
           }
 
           // Render Tiles.
           if (tile < tileCount) {
             tileCell.classList.remove('filler');
             tileElement = tiles[tile];
             if (!tileCell.tile)
               tileCell.appendChild(tileElement);
             else if (tileElement != tileCell.tile)
               tileCell.replaceChild(tileElement, tileCell.tile);
@@ skipping 13 matching lines @@
       }
 
       // Remove excessive tile rows from the tile grid.
       while (tileRows.length > rowCount) {
         tileGridContent.removeChild(tileGridContent.lastElementChild);
       }
 
       this.colCount_ = colCount;
       this.rowCount_ = rowCount;
 
-      this.onScroll();
+      if (!opt_doNotScroll)
+        this.onScroll();
     },
 
     // layout
     // -------------------------------------------------------------------------
 
     /**
      * Calculates the layout of the tile page according to the current Bottom
      * Panel's size. This method will resize the containers of the tile page,
      * and re-render the grid when its dimension changes (number of columns or
      * visible rows changes). This method also sets the private properties
@@ skipping 155 matching lines @@
 
     /**
      * Animates a tile restoration.
      * @param {number} index The index of the tile to be restored.
      * @param {Object} newDataList The new data list.
      */
     animateTileRestoration: function(index, newDataList) {
       var tiles = this.tiles_;
       var tileCount = tiles.length;
 
       var tileCells = this.querySelectorAll('.tile-cell');

[Dan Beam, 2012/12/14 22:49:46]

FYI: if you use getElementsByClassName() you won't need to double query
selector, as the collection updates itself as things with that class name get
added.

[pedro (no code reviews), 2012/12/14 23:42:57]

Done. Thanks for the explanation. I wonder why querySelectorAll() is not
auto-updated like getElementsBySomething().

[Dan Beam, 2012/12/17 19:08:56]

This is by design in the new API so mutations events don't need to keep track of
and update live collections.  Also, many web authors just didn't understand that
getElementsBy{Class,Tag}Name() collections change when modifying the DOM.

+
+      // If the desired position is outside the grid, then the grid must be
+      // expanded so there will be a cell in the desired position.
+      if (index >= tileCells.length) {
+        // Create a dummy empty tile in order to expand the grid.
+        this.tiles_.push(createTile(this));
+        this.renderGrid(null, true);
+        tileCells = this.querySelectorAll('.tile-cell');
+      }
+
       var extraTileIndex = Math.min(tileCount, this.config.maxTileCount - 1);
       var extraCell = tileCells[extraTileIndex];
       var extraTileData = newDataList[extraTileIndex + 1];
 
       var repositioningStartIndex = index;
       var repositioningEndIndex = tileCount - (extraTileData ? 1 : 0);
 
       this.initializeRepositioningAnimation_(index, repositioningEndIndex);
 
       var restoredData = newDataList[index];
       var tileBeingRestored = createTile(this, restoredData);
+
+      // Temporarily assume the |index| cell so the tile can be animated in
+      // the right spot.
       tileCells[index].appendChild(tileBeingRestored);
 
       if (this.config.scrollable)
         this.content_.scrollTop = tileCells[index].offsetTop;
 
       var extraTile;
       if (extraCell)
         extraTile = extraCell.tile;
 
       this.executeRepositioningAnimation_(tileBeingRestored, extraTile,
@@ skipping 206 matching lines @@
    * Creates a new tile given a particular data. If there's no data, then
    * a tile filler will be created.
    * @param {TilePage} tilePage A TilePage.
    * @param {Object=} opt_data The data that will be used to create the tile.
    * @return {Tile} The new tile.
    */
   function createTile(tilePage, opt_data) {
     var tile;
     if (opt_data) {
       // If there's data, the new tile will be a real one (not a filler).
-      tile = new tilePage.TileClass(tilePage.config);
-      tile.data = opt_data;
+      tile = new tilePage.TileClass(opt_data);
     } else {
       // Otherwise, it will be a fake filler tile.
       tile = cr.doc.createElement('span');
       tile.className = 'tile';
     }
     return tile;
   }
 
   /**
    * Fades a tile.
    * @param {Tile} tile A Tile.
    * @param {boolean} isFadeIn Whether to fade-in the tile. If |isFadeIn| is
    * false, then the tile is going to fade-out.
    */
   function fadeTile(tile, isFadeIn) {
     var className = 'animate-hide-tile';
     tile.classList.add(className);
     if (isFadeIn) {
       // Forces a reflow to ensure that the fade-out animation will work.
       tile.scrollTop;
       tile.classList.remove(className);
     }
   }
 
   return {
     Tile: Tile,
     TilePage: TilePage,
   };
 });