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

chrome/browser/resources/local_ntp/local_ntp.css

 /* Copyright 2013 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. */
 body {
   background-attachment: fixed !important;
   background-color: white;
   cursor: default;
   font-family: arial, sans-serif;
   font-size: small;
   margin: 0;
@@ skipping 286 matching lines @@
 /* Styling border. */
 .classical .mv-page-ready .mv-mask {
   border-style: solid;
 }
 
 .default-theme.classical .mv-page-ready .mv-mask {
   border-color: #c0c0c0;
 }
 
 .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;
 }
 
 /* Styling shadow. */
 .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);
   border-color: rgba(0, 0, 0, 0.3);
 }
 
 .mv-title {
   border: none;
   position: absolute;
 }
@@ skipping 335 matching lines @@
   opacity: 0.9;
   padding: 3px;
   position: fixed;
   right: 8px;
 }
 
 body[dir=rtl] #attribution,body[dir=rtl] #recent-tabs {
   left: 8px;
   right: auto;
 }