[New Tab Page] Change which elements get focused during tab ordering

chrome/browser/resources/local_ntp/local_ntp.css

Index: chrome/browser/resources/local_ntp/local_ntp.css
diff --git a/chrome/browser/resources/local_ntp/local_ntp.css b/chrome/browser/resources/local_ntp/local_ntp.css
index 9cdab2eacacb7f0b8951ec1aafddd29ff974b630..96d0f1bd8eb9d80990f8352cad0a0c8f19cbe935 100644
--- a/chrome/browser/resources/local_ntp/local_ntp.css
+++ b/chrome/browser/resources/local_ntp/local_ntp.css
@@ -304,18 +304,19 @@ body[dir=rtl] #mv-tiles {
 }
 
 .default-theme.classical .mv-page-ready:hover .mv-mask,
-.default-theme.classical .mv-page-ready:focus .mv-mask {
+.default-theme.classical .mv-focused ~ .mv-mask {

[huangs, 2014/09/11 20:31:41]

Would
.mv-page-ready .mv-focused
work?

[Mathieu, 2014/09/11 20:54:10]

Done.

   border-color: #7f7f7f;
 }
 
 .default-theme.md.old-hover .mv-page-ready:hover .mv-mask,
-.default-theme.md.old-hover .mv-page-ready:focus .mv-mask {
+.default-theme.md.old-hover .mv-focused ~ .mv-mask {
   border-color: #999;
 }
 
 .default-theme.md.dark .mv-page-ready:hover .mv-mask,
-.default-theme.md.dark .mv-page-ready:focus .mv-mask,
-.default-theme.md.old-hover.dark .mv-page-ready:hover .mv-mask {
+.default-theme.md.dark .mv-focused ~ .mv-mask,
+.default-theme.md.old-hover.dark .mv-page-ready:hover .mv-mask,
+.default-theme.md.old-hover.dark .mv-focused ~ .mv-mask {
   border-color: #888;
 }
 
@@ -323,24 +324,26 @@ body[dir=rtl] #mv-tiles {
 .default-theme.md .mv-page-ready .mv-mask {
   -webkit-transition: box-shadow 200ms, border 200ms;
 }
-.default-theme.md .mv-page-ready:hover .mv-mask {
+
+.default-theme.md .mv-page-ready:hover .mv-mask,
+.default-theme.md .mv-focused ~ .mv-mask {
   box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 4px 8px 0 rgba(0,0,0,0.2);
 }
 
-.default-theme..md.dark .mv-page-ready:hover .mv-mask,
-.default-theme..md.old-hover .mv-page-ready:hover .mv-mask {
+.default-theme.md.dark .mv-page-ready:hover .mv-mask,
+.default-theme.md.old-hover .mv-page-ready:hover .mv-mask {
   box-shadow: none;
 }
 
 /* Styling background. */
-.classical .mv-page:focus .mv-mask {
+.classical .mv-focused ~ .mv-mask {

[huangs, 2014/09/11 20:31:41]

I'd prefer .mv-page .mv-focused ~
for consistency (though it's a bit redundant).

[Mathieu, 2014/09/11 20:54:10]

Done.

   -webkit-transition: background-color 100ms ease-in-out;
   background: linear-gradient(rgba(255, 255, 255, 0),
     rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0.9));
   background-color: rgba(0, 0, 0, 0.35);
 }
 
-.md .mv-page:focus .mv-mask {
+.md .mv-focused ~ .mv-mask {
   -webkit-transition: box-shadow 200ms, border 200ms,
       background-color 100ms ease-in-out;
   background: rgba(0, 0, 0, 0.3);