[ntp4] More UI refinements.

* Constraint favicon size for bookmarks & most-visited to 16x16.
* Make color strip on bookmarks and most-visited full opacity.
* Set padding space between icon and title for bookmarks & most-visited to 8px.
Review URL: http://codereview.chromium.org/7794005

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

chrome/browser/resources/ntp4/bookmarks_page.css

@@ -46,9 +46,11 @@ html[dir=rtl] .bookmark .close-button {
 .bookmark .color-stripe {
   border-bottom-left-radius: 3px 3px;
   border-bottom-right-radius: 3px 3px;
-  bottom: 33px;
+  /* Matches height of title. */
+  bottom: 23px;
   height: 3px;
-  opacity: 0.5;
+  /* Matches padding-top of the title. */
+  margin-bottom: 8px;
   position: absolute;
   width: 100%;
   z-index: 100;
@@ -58,9 +60,8 @@ html[dir=rtl] .bookmark .close-button {
   cursor: pointer;
   display: block;
   height: 23px;
-  line-height: 23px;
   overflow: hidden;
-  padding-top: 10px;
+  padding-top: 8px;
   text-align: center;
   text-decoration: none;
   text-overflow: ellipsis;
@@ -76,7 +77,7 @@ html[dir=rtl] .bookmark .close-button {
   position: relative;
   z-index: 5;
   -webkit-box-flex: 1;
-  -webkit-transition: background-color .15s;  
+  -webkit-transition: background-color .15s;
 }
 
 .bookmark:hover .button {

chrome/browser/resources/ntp4/bookmarks_page.js

@@ -59,11 +59,10 @@ cr.define('ntp4', function() {
       var faviconDiv = this.querySelector('.favicon');
       var faviconUrl;
       if (this.data.url) {
-        faviconUrl = 'chrome://favicon/size/32/' + this.data.url;
+        faviconUrl = 'chrome://favicon/size/16/' + this.data.url;
         chrome.send('getFaviconDominantColor',
                     [faviconUrl, id, 'ntp4.setBookmarksFaviconDominantColor']);
       } else {
-        // TODO(csilv): We need a large (32px) icon for this URL.
         faviconUrl = 'chrome://theme/IDR_BOOKMARK_BAR_FOLDER';
         // TODO(csilv): Should we vary this color by platform?
         this.stripeColor = '#919191';
@@ -89,8 +88,11 @@ 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.right = x + 'px';
       this.style.top = y + 'px';
     },
 
@@ -172,6 +174,16 @@ cr.define('ntp4', function() {
   };
   TilePage.initGridValues(bookmarksPageGridValues);
 
+  /**
+   * Calculates the height for a bookmarks tile for a given width. The size
+   * is based on a desired size of 96x72 ratio.
+   * @return {number} The height.
+   */
+  function heightForWidth(width) {
+    // The 2s are for borders, the 31 is for the title.
+    return (width - 2) * 72 / 96 + 2 + 31;
+  }
+
   /**
    * Creates a new BookmarksPage object.
    * @constructor
@@ -275,6 +287,9 @@ cr.define('ntp4', function() {
       return false;
     },
 
+    /** @inheritDoc */
+    heightForWidth: heightForWidth,
+
     /**
      * Invoked before a batch import begins.  We will ignore added/changed
      * notifications while the operation is in progress.

chrome/browser/resources/ntp4/most_visited_page.css

@@ -62,11 +62,10 @@ html[dir=rtl] .most-visited .close-button {
 
 .most-visited .favicon {
   background: no-repeat 5px 50%;
-  background-size: 32px;
   bottom: 7px;
   box-sizing: border-box;
   display: block;
-  height: 32px;
+  height: 16px;
   position: absolute;
   width: 100%;
 }
@@ -77,7 +76,8 @@ html[dir=rtl] .most-visited .close-button {
   /* Matches height of title.  */
   bottom: 23px;
   height: 3px;
-  opacity: 0.5;
+  /* Matches padding-top of the title. */
+  margin-bottom: 8px;
   position: absolute;
   width: 100%;
   z-index: 100;
@@ -86,8 +86,8 @@ html[dir=rtl] .most-visited .close-button {
 .most-visited .title {
   display: block;
   height: 23px;
-  line-height: 23px;
   overflow: hidden;
+  padding-top: 8px;
   text-align: center;
   text-overflow: ellipsis;
   white-space: nowrap;

chrome/browser/resources/ntp4/most_visited_page.js

@@ -91,7 +91,7 @@ cr.define('ntp4', function() {
 
       var faviconDiv = this.querySelector('.favicon');
       var faviconUrl = data.faviconUrl ||
-          'chrome://favicon/size/32/' + data.url;
+          'chrome://favicon/size/16/' + data.url;
       faviconDiv.style.backgroundImage = url(faviconUrl);
       faviconDiv.dir = data.direction;
       if (data.faviconDominantColor) {
@@ -259,8 +259,8 @@ cr.define('ntp4', function() {
    * @return {number} The height.
    */
   function heightForWidth(width) {
-    // The 2s are for borders, the 23 is for the title.
-    return (width - 2) * 132 / 212 + 2 + 23;
+    // The 2s are for borders, the 31 is for the title.
+    return (width - 2) * 132 / 212 + 2 + 31;
   }
 
   var THUMBNAIL_COUNT = 8;