[ntp4] More UI refinements.

chrome/browser/resources/ntp4/most_visited_page.css

Index: chrome/browser/resources/ntp4/most_visited_page.css
===================================================================
--- chrome/browser/resources/ntp4/most_visited_page.css	(revision 98657)
+++ chrome/browser/resources/ntp4/most_visited_page.css	(working copy)
@@ -62,11 +62,11 @@
 
 .most-visited .favicon {
   background: no-repeat 5px 50%;
-  background-size: 32px;
+  background-size: 16px;

[Evan Stade, 2011/08/29 21:28:53]

I think you can do background-size 100% maybe

[csilv, 2011/08/29 22:56:52]

Wouldn't that display the globe icon at 32x32?  In the meeting we decided to
contraint to 16px

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

or just leave it off
we want to request the 16x16 globe icon anyway so we don't have to scale

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

Done.

   bottom: 7px;
   box-sizing: border-box;
   display: block;
-  height: 32px;
+  height: 16px;
   position: absolute;
   width: 100%;
 }
@@ -75,9 +75,8 @@
   border-bottom-left-radius: 3px 3px;
   border-bottom-right-radius: 3px 3px;
   /* Matches height of title.  */
-  bottom: 23px;
+  bottom: 31px;
   height: 3px;
-  opacity: 0.5;
   position: absolute;
   width: 100%;
   z-index: 100;
@@ -88,6 +87,7 @@
   height: 23px;
   line-height: 23px;
   overflow: hidden;
+  padding-top: 8px;

[Evan Stade, 2011/08/29 21:28:53]

just add this to line height. And then you'll need to update the JS
heightForWidth function.

[csilv, 2011/08/29 22:56:52]

line-height doesn't quite work because the text will be aligned to the vertical
center.  We'd have to add 16 to the line-height in order to add 8px to the
spacing.  However, that would give us unwanted padding on the bottom.

I've fixed the implementaiton for heightForWidth and added a similar function
for bookmarks.

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

if that's the case then I'm sure we can either bottom-align the text or we
should remove the line-height property altogether and adjust padding-top as
appropriate.

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

There's not a general CSS way to make text align to the bottom putting the text
into a sub-element.  I've taken your advice and got rid of the line-height
attribute since it's not really necessary.

   text-align: center;
   text-overflow: ellipsis;
   white-space: nowrap;