Adds the first run banner.

First run is determined by checking if there are no thumbnails. The check for no thumbnails is done on the backend since I need to add code to add some pre populated thumbnails and therefore the most visited pages will not be empty on the client. There is one edge case where the banner can show up again and that is if the user blacklists all his thumbnails and restarts chrome.

Also, updates the look of the fillers to match the latest mocks.

BUG=15079

TEST=Start with a new empty profile. You should see the blue first run banner. Then navigate to some link and come back the NTP. The banner should not be shown again. Also, test that this did not break the yellow notification banner shown when a thumbnail is removed.

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

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

1 files changed, 21 insertions, 15 deletions

diff --git a/chrome/browser/resources/new_new_tab.css b/chrome/browser/resources/new_new_tab.css
index efffb80..f865d70 100644
--- a/chrome/browser/resources/new_new_tab.css
+++ b/chrome/browser/resources/new_new_tab.css
@@ -81,17 +81,15 @@ html[anim='false'] *,
 }
 
 .filler .thumbnail-wrapper {
-  visibility: inherit;
-  border: 1px solid hsl(0, 0%, 90%);
-  background-color: hsl(0, 0%, 95%);
-  -webkit-border-radius: 2px;
-  display: block;
+  visibility: visible;
+  border: 3px solid hsl(213, 60%, 92%);
 }
 
 .filler .thumbnail {
-  visibility: visible;
-  border-color: hsl(0, 0%, 90%);
-  background-color: hsl(0, 0%, 95%);
+  visibility: inherit;
+  border: 1px solid white;
+  padding: 0;
+  background-color: hsl(213, 60%, 92%);
 }
 
 .edit-bar {
@@ -302,18 +300,26 @@ html[dir=rtl] .thumbnail-container > .title > div {
 #notification {
   position: relative;
   background-color: hsl(52, 100%, 80%);
-  -webkit-border-radius: 4px;
-  padding: 8px 16px;
+  -webkit-border-radius: 6px;
+  padding: 7px 15px;
   white-space: nowrap;
   display: table;
   margin: 10px auto;
   font-weight: bold;
   opacity: 0;
-  visibility: hidden;
-  -webkit-transition: opacity 1s;
+  -webkit-transition: opacity .15s;
+  pointer-events: none;
   z-index: 1;
 }
 
+#notification.first-run {
+  padding: 5px 13px; /* subtract the border witdh */
+  border: 2px solid hsl(213, 55%, 75%);
+  background-color: hsl(213, 63%, 93%);
+  -webkit-box-shadow: 2px 2px 3px hsla(0, 0%, 0%, .3);
+  font-weight: normal;
+}
+
 #notification > * {
   display: table-cell;
   max-width: 500px;
@@ -321,10 +327,10 @@ html[dir=rtl] .thumbnail-container > .title > div {
   text-overflow: ellipsis;
 }
 
-#notification:hover,
 #notification.show {
   opacity: 1;
-  visibility: inherit;
+  pointer-events: all;
+  -webkit-transition: opacity 1s;
 }
 
 #notification .link {
@@ -359,7 +365,7 @@ html[dir=rtl] .thumbnail-container > .title > div {
   -webkit-border-radius: 4px;
   white-space: nowrap;
   text-overflow: ellipsis;
-  border: 1px solid hsl(213, 65%, 92%);
+  border: 1px solid hsl(213, 63%, 93%);
   overflow: hidden;
   min-height: 151px; /* height of 5 items plus the header */
   vertical-align: top;