ntp4: sprucing up bookmarks

BUG=95707
TEST=see bug


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

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

chrome/browser/resources/ntp4/apps_page.js

@@ -545,6 +545,9 @@ cr.define('ntp4', function() {
     minTileWidth: 64 / APP_IMG_SIZE_FRACTION,
     // The biggest a tile can be.
     maxTileWidth: 128 / APP_IMG_SIZE_FRACTION,
+
+    // The padding between tiles, as a fraction of the tile width.
+    tileSpacingFraction: 1 / 8,
   };
   TilePage.initGridValues(appsPageGridValues);
 

chrome/browser/resources/ntp4/bookmarks_page.js

@@ -214,6 +214,9 @@ cr.define('ntp4', function() {
     minTileWidth: 64,
     // The biggest a tile can be.
     maxTileWidth: 96,
+
+    // The padding between tiles, as a fraction of the tile width.
+    tileSpacingFraction: 1 / 2,
   };
   TilePage.initGridValues(bookmarksPageGridValues);
 

chrome/browser/resources/ntp4/most_visited_page.js

@@ -252,6 +252,9 @@ cr.define('ntp4', function() {
     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);
 

chrome/browser/resources/ntp4/new_tab.html

@@ -136,19 +136,19 @@ <h3 class="apps-promo-heading"></h3>
 
 <!-- Bookmarks Top Link -->
 <div id="bookmarks-top-link-wrapper" hidden>
-  <a i18n-content="bookmarksManagerLinkTitle"></a>
+  <a i18n-content="bookmarksManagerLinkTitle" class="link-color"></a>
 </div>
 
 <!-- Bookmarks Bottom Link -->
 <div id="bookmarks-bottom-link-wrapper" hidden>
-  <a i18n-content="bookmarksShowAllLinkTitle"></a>
+  <a i18n-content="bookmarksShowAllLinkTitle" class="link-color"></a>
 </div>
 
 <!-- Bookmarks Import Data Link -->
 <div id="bookmarks-import-data-link-template"
      class="bookmarks-import-data-link-wrapper" hidden>
   <a href="chrome://settings/importData"
-     i18n-content="importDataLinkTitle"></a>
+     i18n-content="importDataLinkTitle" class="link-color"></a>
 </div>
 
 </html>

chrome/browser/resources/ntp4/new_tab_theme.css

@@ -18,12 +18,11 @@ body {
   overflow: auto;
 }
 
-#attribution, .link-color {
+#attribution, a.link-color {
   color: $9; /* COLOR_NTP_LINK */
 }
 
-.app span,
-.link span {
+.app span {
   color: $8; /* COLOR_NTP_TEXT */
 }
 

chrome/browser/resources/ntp4/tile_page.js

@@ -286,23 +286,26 @@ cr.define('ntp4', function() {
   /**
    * Gives the proportion of the row width that is devoted to a single icon.
    * @param {number} rowTileCount The number of tiles in a row.
+   * @param {number} tileSpacingFraction The proportion of the tile width which
+   *     will be used as spacing between tiles.
    * @return {number} The ratio between icon width and row width.
    */
-  function tileWidthFraction(rowTileCount) {
-    return rowTileCount +
-        (rowTileCount - 1) * TILE_SPACING_FRACTION;
+  function tileWidthFraction(rowTileCount, tileSpacingFraction) {
+    return rowTileCount + (rowTileCount - 1) * tileSpacingFraction;
   }
 
   /**
    * Calculates an assortment of tile-related values for a grid with the
    * given dimensions.
    * @param {number} width The pixel width of the grid.
    * @param {number} numRowTiles The number of tiles in a row.
+   * @param {number} tileSpacingFraction The proportion of the tile width which
+   *     will be used as spacing between tiles.
    * @return {Object} A mapping of pixel values.
    */
-  function tileValuesForGrid(width, numRowTiles) {
-    var tileWidth = width / tileWidthFraction(numRowTiles);
-    var offsetX = tileWidth * (1 + TILE_SPACING_FRACTION);
+  function tileValuesForGrid(width, numRowTiles, tileSpacingFraction) {
+    var tileWidth = width / tileWidthFraction(numRowTiles, tileSpacingFraction);
+    var offsetX = tileWidth * (1 + tileSpacingFraction);
     var interTileSpacing = offsetX - tileWidth;
 
     return {
@@ -312,10 +315,6 @@ cr.define('ntp4', function() {
     };
   }
 
-  // The proportion of the tile width which will be used as spacing between
-  // tiles.
-  var TILE_SPACING_FRACTION = 1 / 8;
-
   // The smallest amount of horizontal blank space to display on the sides when
   // displaying a wide arrangement. There is an additional 26px of margin from
   // the tile page padding.
@@ -347,19 +346,24 @@ cr.define('ntp4', function() {
     // The amount of space we need to display a narrow grid (all narrow grids
     // are this size).
     grid.narrowWidth =
-        grid.minTileWidth * tileWidthFraction(grid.minColCount);
+        grid.minTileWidth * tileWidthFraction(grid.minColCount,
+                                              grid.tileSpacingFraction);
     // The minimum amount of space we need to display a wide grid.
     grid.minWideWidth =
-        grid.minTileWidth * tileWidthFraction(grid.maxColCount);
+        grid.minTileWidth * tileWidthFraction(grid.maxColCount,
+                                              grid.tileSpacingFraction);
     // The largest we will ever display a wide grid.
     grid.maxWideWidth =
-        grid.maxTileWidth * tileWidthFraction(grid.maxColCount);
+        grid.maxTileWidth * tileWidthFraction(grid.maxColCount,
+                                              grid.tileSpacingFraction);
     // Tile-related pixel values for the narrow display.
     grid.narrowTileValues = tileValuesForGrid(grid.narrowWidth,
-                                              grid.minColCount);
+                                              grid.minColCount,
+                                              grid.tileSpacingFraction);
     // Tile-related pixel values for the minimum narrow display.
     grid.wideTileValues = tileValuesForGrid(grid.minWideWidth,
-                                            grid.maxColCount);
+                                            grid.maxColCount,
+                                            grid.tileSpacingFraction);
   };
 
   TilePage.prototype = {
@@ -392,8 +396,7 @@ cr.define('ntp4', function() {
       // Div that holds the tiles.
       this.tileGrid_ = this.ownerDocument.createElement('div');
       this.tileGrid_.className = 'tile-grid';
-      this.tileGrid_.style.minWidth = (this.gridValues_.minColCount *
-          tileWidthFraction(this.gridValues_.minTileWidth)) + 'px';
+      this.tileGrid_.style.minWidth = this.gridValues_.narrowWidth + 'px';
       this.content_.appendChild(this.tileGrid_);
 
       // Ordered list of our tiles.
@@ -543,7 +546,8 @@ cr.define('ntp4', function() {
           Math.min(Math.max(availableSpace, grid.minWideWidth),
                    grid.maxWideWidth) :
           grid.narrowWidth;
-      var realTileValues = tileValuesForGrid(effectiveGridWidth, numRowTiles);
+      var realTileValues = tileValuesForGrid(effectiveGridWidth, numRowTiles,
+                                             grid.tileSpacingFraction);
 
       // leftMargin centers the grid within the avaiable space.
       var minMargin = wide ? MIN_WIDE_MARGIN : 0;