Make the Most Visited tile focus state more apparent to match the online NTP.

BUG=245125

Review URL: https://chromiumcodereview.appspot.com/15848006

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

chrome/browser/resources/local_ntp/local_ntp.css

@@ -242,7 +242,8 @@ body.fakebox-focused #cursor {
   border-color: #7f7f7f
 }
 
-.mv-thumb {
+.mv-thumb,
+.mv-mask {
   border: none;
   cursor: pointer;
   height: 83px;
@@ -261,6 +262,17 @@ body.fakebox-focused #cursor {
   width: 140px;
 }
 
+.mv-mask {
+  opacity: 0.35;
+}
+
+.mv-page:focus .mv-mask {
+  -webkit-transition: background-color 100ms ease-in-out;
+  background: -webkit-linear-gradient(rgba(255, 255, 255, 0),
+    rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0.9));
+  background-color: black;
+}
+
 .mv-x-hide .mv-x {
   display: none;
 }

chrome/browser/resources/local_ntp/local_ntp.js

@@ -55,6 +55,7 @@ var CLASSES = {
   SUGGESTION_CONTENTS: 'suggestion-contents',
   SUGGESTIONS_BOX: 'suggestions-box',
   THUMBNAIL: 'mv-thumb',
+  THUMBNAIL_MASK: 'mv-mask',
   // Applied when user types. Makes fakebox non-interactive and hides
   // scrollbars. Removed on ESC.
   USER_TYPED: 'user-typed',
@@ -466,6 +467,10 @@ function createTile(page, position) {
     thumbnailElement.className = CLASSES.THUMBNAIL;
     tileElement.appendChild(thumbnailElement);
 
+    // A mask to darken the thumbnail on focus.
+    var maskElement = createAndAppendElement(
+        tileElement, 'div', CLASSES.THUMBNAIL_MASK);
+
     // The button used to blacklist this page.
     var blacklistButton = createAndAppendElement(
         tileElement, 'div', CLASSES.BLACKLIST_BUTTON);