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

chrome/browser/resources/ntp_search/thumbnail_page.js

Index: chrome/browser/resources/ntp_search/thumbnail_page.js
diff --git a/chrome/browser/resources/ntp_search/thumbnail_page.js b/chrome/browser/resources/ntp_search/thumbnail_page.js
index 8b005b93a45cfa1f297943308c6adc8f5ed1b5fd..f8ccdc03675b30fe54e8a8bd057ce71a228d513f 100644
--- a/chrome/browser/resources/ntp_search/thumbnail_page.js
+++ b/chrome/browser/resources/ntp_search/thumbnail_page.js
@@ -5,7 +5,8 @@
 cr.define('ntp', function() {
   'use strict';
 
-  var TilePage = ntp.TilePage;
+  var Tile = ntp.Tile2;
+  var TilePage = ntp.TilePage2;
 
   /**
    * A counter for generating unique tile IDs.
@@ -17,18 +18,22 @@ cr.define('ntp', function() {
    * @constructor

[jeremycho_google, 2012/08/02 03:00:49]

@param

[pedrosimonetti2, 2012/08/03 18:14:12]

Done.

    * @extends {HTMLAnchorElement}
    */
-  function MostVisited() {
+  function Thumbnail(gridValues) {
     var el = cr.doc.createElement('a');
-    el.__proto__ = MostVisited.prototype;
-    el.initialize();
+    el.__proto__ = Thumbnail.prototype;
+    el.initialize(gridValues);
 
     return el;
   }
 
-  MostVisited.prototype = {
+  Thumbnail.prototype = Tile.subclass({
     __proto__: HTMLAnchorElement.prototype,
 
-    initialize: function() {
+    // TODO(pedrosimonetti): document
+    isRemovable: true,
+
+    initialize: function(gridValues) {
+      Tile.prototype.initialize.apply(this, arguments);
       this.reset();
 
       this.addEventListener('click', this.handleClick_);
@@ -49,21 +54,26 @@ cr.define('ntp', function() {
      * for a blank thumbnail.
      */
     reset: function() {
-      this.className = 'most-visited filler real';
+      this.className = 'tile-content most-visited real';
       this.innerHTML =
           '<span class="thumbnail-wrapper fills-parent">' +
-            '<div class="close-button"></div>' +
+            (this.isRemovable ? '<div class="close-button"></div>' : '') +
             '<span class="thumbnail fills-parent">' +
+              // TODO(pedrosimonetti): remove all references (HTML+CSS+JS)
               // thumbnail-shield provides a gradient fade effect.
-              '<div class="thumbnail-shield fills-parent"></div>' +
+              //'<div class="thumbnail-shield fills-parent"></div>' +
             '</span>' +
-            '<span class="favicon"></span>' +
+            // TODO(pedrosimonetti): remove all references (HTML+CSS+JS)
+            //'<span class="favicon"></span>' +
           '</span>' +
-          '<div class="color-stripe"></div>' +
+          // TODO(pedrosimonetti): remove all references (HTML+CSS+JS)
+          //'<div class="color-stripe"></div>' +
           '<span class="title"></span>';
 
-      this.querySelector('.close-button').title =
-          loadTimeData.getString('removethumbnailtooltip');
+      if (this.isRemovable) {
+        this.querySelector('.close-button').title =
+            loadTimeData.getString('removethumbnailtooltip');
+      }
 
       this.tabIndex = -1;
       this.data_ = null;
@@ -89,14 +99,16 @@ cr.define('ntp', function() {
       }
 
       var id = tileID++;
+      // TODO(pedrosimonetti): refactor
       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]);
+      // TODO(pedrosimonetti): remove all references (HTML+CSS+JS)
+      //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;
@@ -105,7 +117,7 @@ cr.define('ntp', function() {
       // Sets the tooltip.
       this.title = data.title;
 
-      var thumbnailUrl = 'chrome://thumb/' + data.url;
+      var thumbnailUrl = ntp.getThumbnailUrl(data.url);
       this.querySelector('.thumbnail').style.backgroundImage =
           url(thumbnailUrl);
 
@@ -118,15 +130,17 @@ cr.define('ntp', function() {
      * 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;
-    },
+    // TODO(xci) delete
+    //set stripeColor(color) {
+    //  this.querySelector('.color-stripe').style.backgroundColor = color;
+    //},
 
     /**
      * Handles a click on the tile.
      * @param {Event} e The click event.
      */
     handleClick_: function(e) {
+      debugger;
       if (e.target.classList.contains('close-button')) {
         this.blacklist_();
         e.preventDefault();
@@ -140,7 +154,7 @@ cr.define('ntp', function() {
                      ntp.APP_LAUNCH.NTP_MOST_VISITED]);
         // Records the index of this tile.
         chrome.send('metricsHandler:recordInHistogram',
-                    ['NewTabPage.MostVisited', this.index, 8]);
+                    ['NewTabPage.Thumbnail', this.index, 8]);
         chrome.send('mostVisitedAction',

[jeremycho_google, 2012/08/02 03:00:49]

This is MostVisited specific.  Should handleClick_ be virtual?

[pedrosimonetti2, 2012/08/03 18:14:12]

handleClick_ is not implemented in the Thumbnail class anymore.

On 2012/08/02 03:00:49, jeremycho wrote:

                     [ntp.NtpFollowAction.CLICKED_TILE]);
       }
@@ -161,9 +175,9 @@ cr.define('ntp', function() {
      */
     blacklist_: function() {
       this.showUndoNotification_();
-      chrome.send('blacklistURLFromMostVisited', [this.data_.url]);
+      chrome.send('blacklistURLFromThumbnail', [this.data_.url]);
       this.reset();
-      chrome.send('getMostVisited');
+      chrome.send('getThumbnail');
       this.classList.add('blacklisted');
     },
 
@@ -171,7 +185,7 @@ cr.define('ntp', function() {
       var data = this.data_;
       var self = this;
       var doUndo = function() {
-        chrome.send('removeURLsFromMostVisitedBlacklist', [data.url]);
+        chrome.send('removeURLsFromThumbnailBlacklist', [data.url]);
         self.updateForData(data);
       }
 
@@ -182,7 +196,7 @@ cr.define('ntp', function() {
 
       var undoAll = {
         action: function() {
-          chrome.send('clearMostVisitedURLsBlacklist');
+          chrome.send('clearThumbnailURLsBlacklist');
         },
         text: loadTimeData.getString('restoreThumbnailsShort'),
       };
@@ -193,29 +207,13 @@ 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;
+      return this.isRemovable;
     },
 
     /**
@@ -238,56 +236,51 @@ cr.define('ntp', function() {
      * Called when a drag is starting on the tile. Updates dataTransfer with
      * data for this tile (for dragging outside of the NTP).
      */
+    // TODO(xci) delete
     setDragData: function(dataTransfer) {
       dataTransfer.setData('Text', this.data_.title);
       dataTransfer.setData('URL', this.data_.url);
     },
-  };
-
-  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);
+  var THUMBNAIL_COUNT = 8; // TODO(xci)
 
   /**
-   * 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;
-
-  /**
-   * Creates a new MostVisitedPage object.
+   * Creates a new ThumbnailPage object.
    * @constructor
    * @extends {TilePage}
    */
-  function MostVisitedPage() {
-    var el = new TilePage(mostVisitedPageGridValues);
-    el.__proto__ = MostVisitedPage.prototype;
+  function ThumbnailPage() {
+    var el = new TilePage();
+    el.__proto__ = ThumbnailPage.prototype;
     el.initialize();
 
     return el;
   }
 
-  MostVisitedPage.prototype = {
+  ThumbnailPage.prototype = {
     __proto__: TilePage.prototype,
 
+    gridValues_: {
+      tileWidth: 130,
+      tileHeight: 78,
+      tileHorMargin: 18, // TODO margin with CSS. There's no margin in first col
+      tileVerMargin: 22,
+      tileBorderWidth: 1,
+      bottomPanelHorMargin: 100,
+
+      tileCount: 10, // debug
+      tileClassName: 'thumbnail',
+      reinforceStyles: true,
+
+      // debug
+      slowFactor: 1,
+      debug: false
+    },
+
+    // TODO(pedrosimonetti): document
+    ThumbnailClass: Thumbnail,
+
     initialize: function() {
       this.classList.add('most-visited-page');

[jeremycho_google, 2012/08/02 03:00:49]

most-visited

[pedrosimonetti2, 2012/08/03 18:14:12]

I renamed it to 'thumbnail-page' and overrided the
MostVisited.prototype.initialize to include the 'most-visited' class too.

       this.data_ = null;
@@ -303,7 +296,7 @@ cr.define('ntp', function() {
      */
     createTiles_: function() {
       for (var i = 0; i < THUMBNAIL_COUNT; i++) {
-        this.appendTile(new MostVisited());
+        this.appendTile(new this.ThumbnailClass(this.gridValues_));
       }
     },
 
@@ -315,6 +308,11 @@ cr.define('ntp', function() {
         var page = this.data_[i];
         var tile = this.mostVisitedTiles_[i];
 
+        // TODO(pedrosimonetti): what do we do when there's no tile here?
+        if (!tile) {
+          return;
+        }
+
         if (i >= this.data_.length)
           tile.reset();
         else
@@ -370,9 +368,6 @@ cr.define('ntp', function() {
     shouldAcceptDrag: function(e) {
       return false;
     },
-
-    /** @inheritDoc */
-    heightForWidth: heightForWidth,
   };
 
   /**
@@ -380,7 +375,9 @@ cr.define('ntp', function() {
    * shown or not. If it is shown, the 'mostVisitedSelected' message is sent
    * to the C++ code, to record the fact that the user has seen this pane.
    */
-  MostVisitedPage.onLoaded = function() {
+  // TODO(pedrosimonetti) is it possible to keep this inside Thumbnail class?
+   /*
+  ThumbnailPage.onLoaded = function() {
     if (ntp.getCardSlider() &&
         ntp.getCardSlider().currentCardValue &&
         ntp.getCardSlider().currentCardValue.classList
@@ -388,83 +385,11 @@ cr.define('ntp', function() {
       chrome.send('mostVisitedSelected');
     }
   }
-
-  /**
-   * We've gotten additional Most Visited data. Update our old data with the
-   * new data. The ordering of the new data is not important, except when a
-   * page is pinned. Thus we try to minimize re-ordering.
-   * @param {Array} oldData The current Most Visited page list.
-   * @param {Array} newData The new Most Visited page list.
-   * @return {Array} The merged page list that should replace the current page
-   *     list.
-   */
-  function refreshData(oldData, newData) {
-    oldData = oldData.slice(0, THUMBNAIL_COUNT);
-    newData = newData.slice(0, THUMBNAIL_COUNT);
-
-    // Copy over pinned sites directly.
-    for (var j = 0; j < newData.length; j++) {
-      if (newData[j].pinned) {
-        oldData[j] = newData[j];
-        // Mark the entry as 'updated' so we don't try to update again.
-        oldData[j].updated = true;
-        // Mark the newData page as 'used' so we don't try to re-use it.
-        newData[j].used = true;
-      }
-    }
-
-    // Look through old pages; if they exist in the newData list, keep them
-    // where they are.
-    for (var i = 0; i < oldData.length; i++) {
-      if (!oldData[i] || oldData[i].updated)
-        continue;
-
-      for (var j = 0; j < newData.length; j++) {
-        if (newData[j].used)
-          continue;
-
-        if (newData[j].url == oldData[i].url) {
-          // The background image and other data may have changed.
-          oldData[i] = newData[j];
-          oldData[i].updated = true;
-          newData[j].used = true;
-          break;
-        }
-      }
-    }
-
-    // Look through old pages that haven't been updated yet; replace them.
-    for (var i = 0; i < oldData.length; i++) {
-      if (oldData[i] && oldData[i].updated)
-        continue;
-
-      for (var j = 0; j < newData.length; j++) {
-        if (newData[j].used)
-          continue;
-
-        oldData[i] = newData[j];
-        oldData[i].updated = true;
-        newData[j].used = true;
-        break;
-      }
-
-      if (oldData[i] && !oldData[i].updated)
-        oldData[i] = null;
-    }
-
-    // Clear 'updated' flags so this function will work next time it's called.
-    for (var i = 0; i < THUMBNAIL_COUNT; i++) {
-      if (oldData[i])
-        oldData[i].updated = false;
-    }
-
-    return oldData;
-  };
+  */
 
   return {
-    MostVisitedPage: MostVisitedPage,
-    refreshData: refreshData,
+    Thumbnail: Thumbnail,
+    ThumbnailPage: ThumbnailPage
   };
 });
 
-document.addEventListener('ntpLoaded', ntp.MostVisitedPage.onLoaded);