ntp4: more Most Visited.

support pinning, sort of support blacklisting, add page title + favicon (on top of the thumbnail), support non-square tiles in TilePage, add fade effect on top of thumbnail.

BUG=none
TEST=manual (with multiple themes)

Review URL: http://codereview.chromium.org/6878045

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@82146 0039d316-1c4b-4281-b951-d872f2087c98

4 files changed, 156 insertions, 31 deletions

diff --git a/chrome/browser/resources/ntp4/most_visited_page.css b/chrome/browser/resources/ntp4/most_visited_page.css
index 44741b1..4575ae2 100644
--- a/chrome/browser/resources/ntp4/most_visited_page.css
+++ b/chrome/browser/resources/ntp4/most_visited_page.css
@@ -18,17 +18,6 @@
   outline: none;
 }
 
-.most-visited > .title {
-  font-size: 100%;
-  font-weight: normal;
-  height: 16px;
-  line-height: 16px;
-  margin: 0;
-  margin-top: 4px;
-  opacity: 1;
-  padding: 0 3px;
-}
-
 .edit-mode-border {
   display: -webkit-box;
   -webkit-box-orient: vertical;
@@ -145,25 +134,33 @@
   background-image: url('../ntp/ntp_close_p.png');
 }
 
-.most-visited > .title {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.most-visited .title {
   background: no-repeat 0 50%;
   background-size: 16px;
-  /* We cannot use -webkit-padding-start here because even if we set the
-     direction we always want the icon on the same side. */
-  padding-left: 20px;
-  padding-right: 0;
+  bottom: 5px;
+  display: block;
+  left: 0;
+  overflow: hidden;
+  position: absolute;
+  right: 0;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  -webkit-margin-start: 5px;
+  -webkit-padding-end: 0;
+  -webkit-padding-start: 20px;
 }
 
 .thumbnail {
   background: no-repeat;
-  background-size: 100%;
+  /* The extra 2% hides the scrollbar in the screenshot. */
+  background-size: 102%;
   border-radius: 5px;
 }
 
 .filler .thumbnail {
+  /* TODO(estade): there seems to be a webkit bug where this border is not
+   * always removed when it should be. Investigate. */
   border: 1px solid;
   visibility: visible;
 }
@@ -187,7 +184,8 @@
   visibility: visible;
 }
 
-.most-visited:focus .thumbnail-wrapper,
+/* Filler tiles can't get focused, but focused tiles can become filler. */
+.most-visited:focus:not(.filler) .thumbnail-wrapper,
 .most-visited:hover .thumbnail-wrapper {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
diff --git a/chrome/browser/resources/ntp4/most_visited_page.js b/chrome/browser/resources/ntp4/most_visited_page.js
index 4b682c6..bd57bc4 100644
--- a/chrome/browser/resources/ntp4/most_visited_page.js
+++ b/chrome/browser/resources/ntp4/most_visited_page.js
@@ -25,6 +25,9 @@ cr.define('ntp4', function() {
 
     initialize: function() {
       this.reset();
+
+      this.addEventListener('click', this.handleClick_.bind(this));
+      this.addEventListener('keydown', this.handleKeyDown_.bind(this));
     },
 
     /**
@@ -44,9 +47,12 @@ cr.define('ntp4', function() {
               '</div>' +
             '</div>' +
             '<span class="thumbnail-wrapper fills-parent">' +
-              '<span class="thumbnail fills-parent"></span>' +
+              '<span class="thumbnail fills-parent">' +
+                // thumbnail-shield provides a gradient fade effect.
+                '<div class="thumbnail-shield fills-parent"></div>' +
+              '</span>' +
+              '<span class="title"></span>' +
             '</span>' +
-            '<span class="title"></span>' +
           '</div>';
 
       this.tabIndex = -1;
@@ -62,11 +68,97 @@ cr.define('ntp4', function() {
         return;
       }
 
+      this.data_ = data;
       this.tabIndex = 0;
       this.classList.remove('filler');
+
+      var title = this.querySelector('.title');
+      title.textContent = data.title;
+      var faviconUrl = data.faviconUrl || 'chrome://favicon/' + data.url;
+      title.style.backgroundImage = url(faviconUrl);
+      title.dir = data.direction;
+
       var thumbnailUrl = data.thumbnailUrl || 'chrome://thumb/' + data.url;
       this.querySelector('.thumbnail').style.backgroundImage =
           url(thumbnailUrl);
+
+      this.href = data.url;
+
+      this.updatePinnedState_();
+    },
+
+    /**
+     * Handles a click on the tile.
+     * @param {Event} e The click event.
+     */
+    handleClick_: function(e) {
+      var target = e.target;
+      if (target.classList.contains('pin')) {
+        this.togglePinned_();
+        e.preventDefault();
+      } else if (target.classList.contains('remove')) {
+        this.blacklist_();
+        e.preventDefault();
+      } else {
+        var index = Array.prototype.indexOf.call(this.parentNode.children,
+                                                 this);
+        if (index != -1)
+          chrome.send('metrics', ['NTP_MostVisited' + index]);
+      }
+    },
+
+    /**
+     * Allow blacklisting most visited site using the keyboard.
+     */
+    handleKeyDown_: function(e) {
+      if (!IS_MAC && e.keyCode == 46 || // Del
+          IS_MAC && e.metaKey && e.keyCode == 8) { // Cmd + Backspace
+        this.blacklist_();
+      }
+    },
+
+    /**
+     * Changes the visual state of the page and updates the model.
+     */
+    togglePinned_: function() {
+      var data = this.data_;
+      data.pinned = !data.pinned;
+      if (data.pinned) {
+        chrome.send('addPinnedURL', [
+          data.url,
+          data.title,
+          data.faviconUrl || '',
+          data.thumbnailUrl || '',
+          // TODO(estade): should not need to convert index to string.
+          String(data.index)
+        ]);
+      } else {
+        chrome.send('removePinnedURL', [data.url]);
+      }
+
+      this.updatePinnedState_();
+    },
+
+    /**
+     * Updates the DOM for the current pinned state.
+     */
+    updatePinnedState_: function() {
+      if (this.data_.pinned) {
+        this.classList.add('pinned');
+        this.querySelector('.pin').title = templateData.unpinthumbnailtooltip;
+      } else {
+        this.classList.remove('pinned');
+        this.querySelector('.pin').title = templateData.pinthumbnailtooltip;
+      }
+    },
+
+    /**
+     * Permanently removes a page from Most Visited.
+     */
+    blacklist_: function() {
+      chrome.send('blacklistURLFromMostVisited', [url]);
+      this.reset();
+      // TODO(estade): request a replacement site.
     },
 
     /**
@@ -77,7 +169,8 @@ cr.define('ntp4', function() {
      *     animate.
      */
     setBounds: function(size, x, y) {
-      this.style.width = this.style.height = size + 'px';
+      this.style.width = size + 'px';
+      this.style.height = heightForWidth(size) + 'px';
       this.style.left = x + 'px';
       this.style.top = y + 'px';
     },
@@ -97,6 +190,16 @@ cr.define('ntp4', function() {
   };
   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 (the rest of
+   * the arithmetic accounts for padding).
+   * @return {number} The height.
+   */
+  function heightForWidth(width) {
+    return (width - 6) * 132 / 212 + 29;
+  }
+
   var THUMBNAIL_COUNT = 8;
 
   /**
@@ -139,6 +242,7 @@ cr.define('ntp4', function() {
     updateTiles_: function() {
       for (var i = 0; i < THUMBNAIL_COUNT; i++) {
         var page = this.data_[i];
+        page.index = i;
         var tile = this.mostVisitedTiles_[i];
 
         if (i >= this.data_.length)
@@ -165,6 +269,9 @@ cr.define('ntp4', function() {
       this.data_ = data.slice(0, THUMBNAIL_COUNT);
       this.updateTiles_();
     },
+
+    /** @inheritDoc */
+    heightForWidth: heightForWidth,
   };
 
   return {
diff --git a/chrome/browser/resources/ntp4/new_tab_theme.css b/chrome/browser/resources/ntp4/new_tab_theme.css
index 71cb7a4..8995657 100644
--- a/chrome/browser/resources/ntp4/new_tab_theme.css
+++ b/chrome/browser/resources/ntp4/new_tab_theme.css
@@ -106,7 +106,7 @@ body {
   color: $8; /* COLOR_NTP_TEXT */
 }
 
-.most-visited:focus .thumbnail-wrapper,
+.most-visited:focus:not(.filler) .thumbnail-wrapper,
 .most-visited:hover .thumbnail-wrapper {
   background-color: $6; /* COLOR_NTP_HEADER */
 }
@@ -125,3 +125,9 @@ body {
 .filler .thumbnail {
   border-color: $2; /* COLOR_NTP_BACKGROUND */
 }
+
+.thumbnail-shield {
+  background-image:
+      -webkit-linear-gradient(transparent, transparent 50%,
+                              $2); /* COLOR_NTP_BACKGROUND */
+}
diff --git a/chrome/browser/resources/ntp4/tile_page.js b/chrome/browser/resources/ntp4/tile_page.js
index a490bd8..7cdd9aa 100644
--- a/chrome/browser/resources/ntp4/tile_page.js
+++ b/chrome/browser/resources/ntp4/tile_page.js
@@ -24,11 +24,13 @@ cr.define('ntp4', function() {
    */
   function tileValuesForGrid(width, numRowTiles) {
     var tileWidth = width / tileWidthFraction(numRowTiles);
-    var offset = tileWidth * (1 + TILE_SPACING_FRACTION);
+    var offsetX = tileWidth * (1 + TILE_SPACING_FRACTION);
+    var interTileSpacing = offsetX - tileWidth;
 
     return {
       tileWidth: tileWidth,
-      offset: offset,
+      offsetX: offsetX,
+      interTileSpacing: interTileSpacing,
     };
   }
 
@@ -149,8 +151,9 @@ cr.define('ntp4', function() {
       var numRowTiles = wide ? grid.maxColCount : grid.minColCount;
       var col = index % numRowTiles;
       var row = Math.floor(index / numRowTiles);
-      var animatedX = col * animatedTileValues.offset + animatedLeftMargin;
-      var animatedY = row * animatedTileValues.offset;
+      var animatedX = col * animatedTileValues.offsetX + animatedLeftMargin;
+      var animatedY = row * (this.heightForWidth(animatedTileValues.tileWidth) +
+                             animatedTileValues.interTileSpacing);
 
       // Calculate the final on-screen position for the tile.
       var effectiveGridWidth = wide ?
@@ -163,8 +166,9 @@ cr.define('ntp4', function() {
       var leftMargin =
           Math.max(minMargin,
                    (this.tileGrid_.clientWidth - effectiveGridWidth) / 2);
-      var realX = col * realTileValues.offset + leftMargin;
-      var realY = row * realTileValues.offset;
+      var realX = col * realTileValues.offsetX + leftMargin;
+      var realY = row * (this.heightForWidth(realTileValues.tileWidth) +
+                         realTileValues.interTileSpacing);
 
       var tileWrapper = this.tileElements_[index];
       tileWrapper.style.left = animatedX + 'px';
@@ -189,6 +193,16 @@ cr.define('ntp4', function() {
         this.positionTile_(i);
       }
     },
+
+    /**
+     * Get the height for a tile of a certain width. Override this function to
+     * get non-square tiles.
+     * @param {number} width The pixel width of a tile.
+     * @return {number} The height for |width|.
+     */
+    heightForWidth: function(width) {
+      return width;
+    },
   };
 
   return {