Refactoring NTP5: new implementation of TilePage and MostVisitedPage (which now inherits from Thumb…

chrome/browser/resources/ntp_search/most_visited_page.js

Index: chrome/browser/resources/ntp_search/most_visited_page.js
diff --git a/chrome/browser/resources/ntp_search/most_visited_page.js b/chrome/browser/resources/ntp_search/most_visited_page.js
index 8b005b93a45cfa1f297943308c6adc8f5ed1b5fd..c3000c13f6d7c1222c192f4ed3865b093fdc2dd1 100644
--- a/chrome/browser/resources/ntp_search/most_visited_page.js
+++ b/chrome/browser/resources/ntp_search/most_visited_page.js
@@ -5,123 +5,32 @@
 cr.define('ntp', function() {
   'use strict';
 
-  var TilePage = ntp.TilePage;
-
-  /**
-   * A counter for generating unique tile IDs.
-   */
-  var tileID = 0;
+  var Thumbnail = ntp.Thumbnail;
+  var ThumbnailPage = ntp.ThumbnailPage;
 
   /**
    * Creates a new Most Visited object for tiling.
    * @constructor

[jeremycho_google, 2012/08/03 20:51:24]

@param

[pedrosimonetti2, 2012/08/03 22:02:39]

Done.

    * @extends {HTMLAnchorElement}
    */
-  function MostVisited() {
+  function MostVisited(gridValues) {
     var el = cr.doc.createElement('a');
     el.__proto__ = MostVisited.prototype;
-    el.initialize();
+    el.initialize(gridValues);
 
     return el;
   }
 
   MostVisited.prototype = {
-    __proto__: HTMLAnchorElement.prototype,
+    __proto__: Thumbnail.prototype,
 
-    initialize: function() {
-      this.reset();
+    initialize: function(gridValues) {
+      Thumbnail.prototype.initialize.apply(this, arguments);
 
       this.addEventListener('click', this.handleClick_);
       this.addEventListener('keydown', this.handleKeyDown_);
     },
 
-    get index() {
-      assert(this.tile);
-      return this.tile.index;
-    },
-
-    get data() {
-      return this.data_;
-    },
-
-    /**
-     * Clears the DOM hierarchy for this node, setting it back to the default
-     * for a blank thumbnail.
-     */
-    reset: function() {
-      this.className = 'most-visited filler real';
-      this.innerHTML =
-          '<span class="thumbnail-wrapper fills-parent">' +
-            '<div class="close-button"></div>' +
-            '<span class="thumbnail fills-parent">' +
-              // thumbnail-shield provides a gradient fade effect.
-              '<div class="thumbnail-shield fills-parent"></div>' +
-            '</span>' +
-            '<span class="favicon"></span>' +
-          '</span>' +
-          '<div class="color-stripe"></div>' +
-          '<span class="title"></span>';
-
-      this.querySelector('.close-button').title =
-          loadTimeData.getString('removethumbnailtooltip');
-
-      this.tabIndex = -1;
-      this.data_ = null;
-      this.removeAttribute('id');
-      this.title = '';
-    },
-
-    /**
-     * Update the appearance of this tile according to |data|.
-     * @param {Object} data A dictionary of relevant data for the page.
-     */
-    updateForData: function(data) {
-      if (this.classList.contains('blacklisted') && data) {
-        // Animate appearance of new tile.
-        this.classList.add('new-tile-contents');
-      }
-      this.classList.remove('blacklisted');
-
-      if (!data || data.filler) {
-        if (this.data_)
-          this.reset();
-        return;
-      }
-
-      var id = tileID++;
-      this.id = 'most-visited-tile-' + id;
-      this.data_ = data;
-      this.classList.add('focusable');
-
-      var faviconDiv = this.querySelector('.favicon');
-      var faviconUrl = 'chrome://favicon/size/16/' + data.url;
-      faviconDiv.style.backgroundImage = url(faviconUrl);
-      chrome.send('getFaviconDominantColor', [faviconUrl, this.id]);
-
-      var title = this.querySelector('.title');
-      title.textContent = data.title;
-      title.dir = data.direction;
-
-      // Sets the tooltip.
-      this.title = data.title;
-
-      var thumbnailUrl = 'chrome://thumb/' + data.url;
-      this.querySelector('.thumbnail').style.backgroundImage =
-          url(thumbnailUrl);
-
-      this.href = data.url;
-
-      this.classList.remove('filler');
-    },
-
-    /**
-     * Sets the color of the favicon dominant color bar.
-     * @param {string} color The css-parsable value for the color.
-     */
-    set stripeColor(color) {
-      this.querySelector('.color-stripe').style.backgroundColor = color;
-    },
-
     /**
      * Handles a click on the tile.
      * @param {Event} e The click event.
@@ -131,6 +40,9 @@ cr.define('ntp', function() {
         this.blacklist_();
         e.preventDefault();
       } else {
+        // TODO(xci): How do we handle the logging? Maybe we should let the
+        // handleClick_() be implemented by Thumbnail subclasses.
+
         // Records an app launch from the most visited page (Chrome will decide
         // whether the url is an app). TODO(estade): this only works for clicks;
         // other actions like "open in new tab" from the context menu won't be
@@ -141,6 +53,7 @@ cr.define('ntp', function() {
         // Records the index of this tile.
         chrome.send('metricsHandler:recordInHistogram',
                     ['NewTabPage.MostVisited', this.index, 8]);
+        // TODO(xci) logging
         chrome.send('mostVisitedAction',
                     [ntp.NtpFollowAction.CLICKED_TILE]);
       }
@@ -193,83 +106,16 @@ cr.define('ntp', function() {
     },
 
     /**
-     * Set the size and position of the most visited tile.
-     * @param {number} size The total size of |this|.
-     * @param {number} x The x-position.
-     * @param {number} y The y-position.
-     *     animate.
-     */
-    setBounds: function(size, x, y) {
-      this.style.width = toCssPx(size);
-      this.style.height = toCssPx(heightForWidth(size));
-
-      this.style.left = toCssPx(x);
-      this.style.right = toCssPx(x);
-      this.style.top = toCssPx(y);
-    },
-
-    /**
      * Returns whether this element can be 'removed' from chrome (i.e. whether
      * the user can drag it onto the trash and expect something to happen).
      * @return {boolean} True, since most visited pages can always be
      *     blacklisted.
      */
     canBeRemoved: function() {
-      return true;
-    },
-
-    /**
-     * Removes this element from chrome, i.e. blacklists it.
-     */
-    removeFromChrome: function() {
-      this.blacklist_();
-      this.parentNode.classList.add('finishing-drag');
-    },
-
-    /**
-     * Called when a drag of this tile has ended (after all animations have
-     * finished).
-     */
-    finalizeDrag: function() {
-      this.parentNode.classList.remove('finishing-drag');
-    },
-
-    /**
-     * Called when a drag is starting on the tile. Updates dataTransfer with
-     * data for this tile (for dragging outside of the NTP).
-     */
-    setDragData: function(dataTransfer) {
-      dataTransfer.setData('Text', this.data_.title);
-      dataTransfer.setData('URL', this.data_.url);
+      return this.isRemovable;
     },
   };
 
-  var mostVisitedPageGridValues = {
-    // The fewest tiles we will show in a row.
-    minColCount: 2,
-    // The most tiles we will show in a row.
-    maxColCount: 4,
-
-    // The smallest a tile can be.
-    minTileWidth: 122,
-    // The biggest a tile can be. 212 (max thumbnail width) + 2.
-    maxTileWidth: 214,
-
-    // The padding between tiles, as a fraction of the tile width.
-    tileSpacingFraction: 1 / 8,
-  };
-  TilePage.initGridValues(mostVisitedPageGridValues);
-
-  /**
-   * Calculates the height for a Most Visited tile for a given width. The size
-   * is based on the thumbnail, which should have a 212:132 ratio.
-   * @return {number} The height.
-   */
-  function heightForWidth(width) {
-    // The 2s are for borders, the 31 is for the title.
-    return (width - 2) * 132 / 212 + 2 + 31;
-  }
-
   var THUMBNAIL_COUNT = 8;
 
   /**
@@ -278,7 +124,7 @@ cr.define('ntp', function() {
    * @extends {TilePage}
    */
   function MostVisitedPage() {
-    var el = new TilePage(mostVisitedPageGridValues);
+    var el = new ThumbnailPage();
     el.__proto__ = MostVisitedPage.prototype;
     el.initialize();
 
@@ -286,78 +132,23 @@ cr.define('ntp', function() {
   }
 
   MostVisitedPage.prototype = {
-    __proto__: TilePage.prototype,
+    __proto__: ThumbnailPage.prototype,
 
-    initialize: function() {
-      this.classList.add('most-visited-page');
-      this.data_ = null;
-      this.mostVisitedTiles_ = this.getElementsByClassName('most-visited real');
+    ThumbnailClass: MostVisited,
 
-      this.addEventListener('carddeselected', this.handleCardDeselected_);
-      this.addEventListener('cardselected', this.handleCardSelected_);
-    },
-
-    /**
-     * Create blank (filler) tiles.
-     * @private
-     */
-    createTiles_: function() {
-      for (var i = 0; i < THUMBNAIL_COUNT; i++) {
-        this.appendTile(new MostVisited());
-      }
-    },
-
-    /**
-     * Update the tiles after a change to |data_|.
-     */
-    updateTiles_: function() {
-      for (var i = 0; i < THUMBNAIL_COUNT; i++) {
-        var page = this.data_[i];
-        var tile = this.mostVisitedTiles_[i];
-
-        if (i >= this.data_.length)
-          tile.reset();
-        else
-          tile.updateForData(page);
-      }
-    },
-
-    /**
-     * Handles the 'card deselected' event (i.e. the user clicked to another
-     * pane).
-     * @param {Event} e The CardChanged event.
-     */
-    handleCardDeselected_: function(e) {
-      if (!document.documentElement.classList.contains('starting-up')) {
-        chrome.send('mostVisitedAction',
-                    [ntp.NtpFollowAction.CLICKED_OTHER_NTP_PANE]);
-      }
-    },
+    initialize: function() {
+      ThumbnailPage.prototype.initialize.apply(this, arguments);
 
-    /**
-     * Handles the 'card selected' event (i.e. the user clicked to select the
-     * Most Visited pane).
-     * @param {Event} e The CardChanged event.
-     */
-    handleCardSelected_: function(e) {
-      if (!document.documentElement.classList.contains('starting-up'))
-        chrome.send('mostVisitedSelected');
+      this.classList.add('most-visited-page');
     },
 
-    /**
-     * Array of most visited data objects.
-     * @type {Array}
-     */
-    get data() {
-      return this.data_;
-    },
     set data(data) {
       var startTime = Date.now();
 
       // The first time data is set, create the tiles.
       if (!this.data_) {
-        this.createTiles_();
         this.data_ = data.slice(0, THUMBNAIL_COUNT);
+        this.createTiles_(this.data_.length);

[jeremycho_google, 2012/08/03 20:51:24]

Any reason why this line was moved?

[pedrosimonetti2, 2012/08/03 22:02:39]

I forgot to update my comment but I end up fixing the problem that was showing
up 8 thumbnais regardless of how many data we had. The problem was that
createTiles_ was being called before the data_ object was set, so createTiles_
had no idea how many Tiles should've been drawn. So, right now we're passing the
number of Tiles that should be rendered to this function.

On 2012/08/03 20:51:24, jeremycho wrote:

       } else {
         this.data_ = refreshData(this.data_, data);
       }
@@ -365,14 +156,6 @@ cr.define('ntp', function() {
       this.updateTiles_();
       logEvent('mostVisited.layout: ' + (Date.now() - startTime));
     },
-
-    /** @inheritDoc */
-    shouldAcceptDrag: function(e) {
-      return false;
-    },
-
-    /** @inheritDoc */
-    heightForWidth: heightForWidth,
   };
 
   /**