[ntp4] More UI refinements.

chrome/browser/resources/ntp4/bookmarks_page.js

 // Copyright (c) 2011 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 cr.define('ntp4', function() {
   'use strict';
 
   var localStrings = new LocalStrings;
 
   /**
@@ skipping 71 matching lines @@
     },
 
     /**
      * Set the size and position of the bookmark 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 = this.style.height = size + 'px';
+      this.style.width = size + 'px';
+      this.style.height = bookmarksHeightForWidth(size) + 'px';
+
       this.style.left = x + 'px';
+      this.style.right = x + 'px';
       this.style.top = y + 'px';
     },
 
     /**
      * Invoked when a bookmark is clicked
      * @param {Event} e The click event.
      * @private
      */
     handleClick_: function(e) {
       if (e.target.classList.contains('close-button')) {
@@ skipping 62 matching lines @@
     maxColCount: 6,
 
     // The smallest a tile can be.
     minTileWidth: 150,
     // The biggest a tile can be.
     maxTileWidth: 150,
   };
   TilePage.initGridValues(bookmarksPageGridValues);
 
   /**
+   * Calculates the height for a Most Visited tile for a given width. The size
+   * is based on a desired size of 96x72 ratio.
+   * @return {number} The height.
+   */
+  function bookmarksHeightForWidth(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
    * @extends {TilePage}
    */
   function BookmarksPage() {
     var el = new TilePage(bookmarksPageGridValues);
     el.__proto__ = BookmarksPage.prototype;
     el.initialize();
 
     return el;
@@ skipping 82 matching lines @@
         }
       }
       return false;
     },
 
     /** @inheritDoc */
     shouldAcceptDrag: function(dataTransfer) {
       return false;
     },
 
+    /** @inheritDoc */
+    bookmarksHeightForWidth: bookmarksHeightForWidth,

[Evan Stade, 2011/08/29 23:06:46]

huh? shouldn't this be heightForWidth?

[csilv, 2011/08/30 00:45:29]

Done.

+
     /**
      * Invoked before a batch import begins.  We will ignore added/changed
      * notifications while the operation is in progress.
      */
     bookmarkImportBegan: function() {
       this.importing = true;
     },
 
     /**
      * Invoked after a batch import finishes.  We will reload the bookmarks
@@ skipping 154 matching lines @@
   };
 
   return {
     BookmarksPage: BookmarksPage,
     initBookmarkChevron: initBookmarkChevron,
     setBookmarksFaviconDominantColor: setBookmarksFaviconDominantColor
   };
 });
 
 window.addEventListener('load', ntp4.initBookmarkChevron);