NTP5: Refactoring appData to use Tile's data implementation.

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
    * 100% opaque.
    * @type {number}
    * @const
    */
   var MAX_SCROLL_SHADOW_GAP = 16;
 
   /**
@@ skipping 52 matching lines @@
       this.reset();
     },
 
     /**
      * Resets the tile DOM.
      */
     reset: function() {
     },
 
     /**
-     * Update the appearance of this tile according to |data|.
+     * The data for this Tile.
      * @param {Object} data A dictionary of relevant data for the page.
      */
-    setData: function(data) {
+    set data(data) {
       // TODO(pedrosimonetti): Remove data.filler usage everywhere.
       if (!data || data.filler) {
         if (this.data_)
           this.reset();
         return;
       }
 
       this.data_ = data;
-    }
+    },

[Dan Beam, 2012/12/11 01:49:24]

why don't you put `get data` here so you don't have to replicate it other
places?

[pedro (no code reviews), 2012/12/11 07:20:53]

As I explained earlier, that is not possible: http://jsfiddle.net/qycMs/

Included getter here too in case a Tile subclass does not implement a new setter
(and getter, once it is required).

[pedro (no code reviews), 2012/12/11 07:35:13]

Actually, I cannot include this getter here because it won't be enumerated,
therefore the Tile.subclass function won't work. Just removed the getter.

   };
 
   var TileGetters = {
     /**
      * The TileCell associated to this Tile.
      * @type {TileCell}
      */
     'tileCell': function() {
       return findAncestorByClass(this, 'tile-cell');
     },
 
     /**
      * The index of the Tile.
      * @type {number}
      */
     'index': function() {
       assert(this.tileCell);
       return this.tileCell.index;
     },
-
-    /**
-     * Tile data object.
-     * @type {Object}
-     */
-    'data': function() {
-      return this.data_;
-    }
   };
 
   //----------------------------------------------------------------------------
   // TileCell
   //----------------------------------------------------------------------------
 
   /**
    * Creates a new TileCell object. A TileCell represents a cell in the
    * TilePage's grid. A TilePage uses TileCells to position Tiles in the proper
    * place and to animate them individually. Each TileCell is associated to
@@ skipping 28 matching lines @@
       this.className = 'tile-cell';
       this.assign(tile);
     },
 
     /**
      * The index of the TileCell.
      * @type {number}
      */
     get index() {
       return Array.prototype.indexOf.call(this.tilePage.tiles_,
-          this.firstChild);
+          this.tile);
     },
 
     /**
+     * The Tile associated to this TileCell.
+     * @type {Tile}
+     */
+    get tile() {
+      return this.firstElementChild;
+    },
+
+    /**
      * The TilePage associated to this TileCell.
      * @type {TilePage}
      */
     get tilePage() {
       return findAncestorByClass(this, 'tile-page');
     },
 
     /**
      * Assigns a Tile to the this TileCell.
      * @type {TilePage}
      */
     assign: function(tile) {
-      if (this.firstChild)
-        this.replaceChild(tile, this.firstChild);
+      if (this.tile)
+        this.replaceChild(tile, this.tile);
       else
         this.appendChild(tile);
     },
 
     /**
      * Called when an app is removed from Chrome. Animates its disappearance.
      * @param {boolean=} opt_animate Whether the animation should be animated.
      */
     doRemove: function(opt_animate) {
-      if (opt_animate)
-        this.firstChild.classList.add('removing-tile-contents');
-      else
-        this.tilePage.removeTile(this, false);
+      this.tilePage.removeTile(this.tile, false);
     },
   };
 
   //----------------------------------------------------------------------------
   // TilePage
   //----------------------------------------------------------------------------
 
   /**
    * Creates a new TilePage object. This object contains tiles and controls
    * their layout.
@@ skipping 233 matching lines @@
      * @param {Tile} tile The tile to be added.
      * @param {number} index The location in the tile grid to insert it at.
      * @protected
      */
     addTileAt: function(tile, index) {
       this.tiles_.splice(index, 0, tile);
       this.fireAddedEvent(tile, index);
     },
 
     /**
+     * Create a blank tile.
+     * @protected
+     */
+    createTile_: function() {
+      return new this.TileClass(this.config);
+    },
+
+    /**
      * Create blank tiles.
-     * @private
-     * @param {number} count The number of Tiles to be created.
+     * @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) {
-      var Class = this.TileClass;
-      var config = this.config;
-      count = Math.min(count, config.maxTileCount);
+      count = Math.min(count, this.config.maxTileCount);
       for (var i = 0; i < count; i++) {
-        this.appendTile(new Class(config));
+        this.appendTile(this.createTile_());
       }
     },
 
     /**
      * Update the tiles after a change to |dataList_|.
      */
     updateTiles_: function() {
       var maxTileCount = this.config.maxTileCount;
       var dataList = this.dataList_;
       var tiles = this.tiles;
       for (var i = 0; i < maxTileCount; i++) {
         var data = dataList[i];
         var tile = tiles[i];
 
         // TODO(pedrosimonetti): What do we do when there's no tile here?
         if (!tile)
           return;
 
         if (i >= dataList.length)
           tile.reset();
         else
-          tile.setData(data);
+          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.
      */
@@ skipping 96 matching lines @@
      * @param {number=} opt_colCount The number of columns.
      * @private
      */
     renderGrid_: function(opt_colCount) {
       var colCount = opt_colCount || this.colCount_;
 
       var tileGridContent = this.tileGridContent_;
       var tiles = this.tiles_;
       var tileCount = tiles.length;
 
-      var numOfVisibleRows = this.numOfVisibleRows_;
       var rowCount = Math.ceil(tileCount / colCount);
       var tileRows = tileGridContent.getElementsByClassName('tile-row');
 
-      var pageOffset = this.pageOffset_;
-
       for (var tile = 0, row = 0; row < rowCount; row++) {
         var tileRow = tileRows[row];
 
         // Create tile row if there's no one yet.
         if (!tileRow) {
           tileRow = cr.doc.createElement('div');
           tileRow.className = 'tile-row';
           tileGridContent.appendChild(tileRow);
         }
 
@@ skipping 15 matching lines @@
             tileCell = tileRowTiles[col];
           } else {
             var span = cr.doc.createElement('span');
             tileCell = new TileCell(span, this.config);
           }
 
           // Render Tiles.
           if (tile < tileCount) {
             tileCell.classList.remove('filler');
             tileElement = tiles[tile];
-            if (!tileCell.firstChild)
+            if (!tileCell.tile)
               tileCell.appendChild(tileElement);
-            else if (tileElement != tileCell.firstChild)
-              tileCell.replaceChild(tileElement, tileCell.firstChild);
+            else if (tileElement != tileCell.tile)
+              tileCell.replaceChild(tileElement, tileCell.tile);
           } else if (!tileCell.classList.contains('filler')) {
             tileCell.classList.add('filler');
             tileElement = cr.doc.createElement('span');
             tileElement.className = 'tile';
-            if (tileCell.firstChild)
-              tileCell.replaceChild(tileElement, tileCell.firstChild);
+            if (tileCell.tile)
+              tileCell.replaceChild(tileElement, tileCell.tile);
             else
               tileCell.appendChild(tileElement);
           }
 
           if (!tileRowTiles[col])
             tileRow.appendChild(tileCell);
         }
       }
 
       // Remove excessive tile rows from the tile grid.
@@ skipping 188 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;
+      var 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 197 matching lines @@
    * 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.setData(opt_data);
+      tile.data = 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,
   };
 });