NNTP: Lots of small tweaks

* Remove focus outline for buttons
* Thumbnail links should not have underline (and be black)
* Make the edit bar animation slide up from the thumbnail
* Make animations a lot faster
* Fix issue where a thumbnail got stuck in hover mode after DnD.
* Make the thumbnails come first when tabbing
* Remove focus outline for the buttons and clean up focus outline in the list mode.

BUG=16061, 16449, 16342, 16542

TEST=See bugs


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

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

3 files changed, 70 insertions, 84 deletions

diff --git a/chrome/browser/resources/new_new_tab.css b/chrome/browser/resources/new_new_tab.css
index 9af5a32..8dbc68f 100644
--- a/chrome/browser/resources/new_new_tab.css
+++ b/chrome/browser/resources/new_new_tab.css
@@ -12,7 +12,7 @@ body {
   position: relative;
   margin: 0 auto;
   width: 940px;
-  -webkit-transition: width .5s;
+  -webkit-transition: width .15s;
 }
 
 html[dir='rtl'] #main {
@@ -34,66 +34,32 @@ html[anim='false'] *,
   margin-bottom: 34px;
   height: 372px;
   -webkit-user-select: none;
-  -webkit-transition: height .5s, opacity .5s;
-}
-
-@-webkit-keyframes 'thumbnail-enter' {
-  /* 2.5s */
-  0%, 20% {
-    -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, .5);
-    -webkit-border-radius: 4px;
-  }
-
-  100% {
-    -webkit-border-top-left-radius: 0;
-    -webkit-border-top-right-radius: 0;
-    -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0);
-  }
-}
-
-@-webkit-keyframes 'edit-mode-border-enter' {
-  /* 2.5s */
-  0%, 20% {
-    background-color: hsla(213, 66%, 57%, 0);
-    -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0);
-  }
-
-  100% {
-    background-color: hsla(213, 66%, 57%, 1);
-    -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, .5);
-  }
-}
-
-@-webkit-keyframes 'edit-bar-enter' {
-  /* 2.5s */
-  0%, 20% {
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  100% {
-    opacity: 1;
-    pointer-events: inherit;
-  }
+  -webkit-transition: height .15s, opacity .15s;
 }
 
 .thumbnail-container {
   position: absolute;
-  -webkit-transition: top .5s, left .5s;
+  -webkit-transition: top .15s, left .15s;
   color: black;
   text-decoration: none;
-  -webkit-transition: left .5s, top .5s;
+  -webkit-transition: left .15s, top .15s;
 }
 
 .list > .thumbnail-container {
-  -webkit-transition: left .5s, top .5s, width .5s;
+  -webkit-transition: left .15s, top .15s, width .15s;
+  overflow: hidden;
+}
+
+/* hide outline in thumbnail view */
+:not(.list) > .thumbnail-container:focus {
+  outline: none;
 }
 
 .thumbnail,
 .thumbnail-container > .title {
   width: 212px; /* natural size is 196 */
   height: 132px; /* 136 */
-  -webkit-transition: width .5s, height .5s;
+  -webkit-transition: width .15s, height .15s;
 }
 
 .thumbnail-wrapper {
@@ -102,7 +68,8 @@ html[anim='false'] *,
   background: no-repeat 4px 4px;
   background-color: white;
   -webkit-border-radius: 5px;
-  -webkit-transition: -webkit-background-size .5s;
+  -webkit-transition: -webkit-background-size .15s;
+  position: relative;
 }
 
 .filler * {
@@ -128,23 +95,22 @@ html[anim='false'] *,
 }
 
 .edit-bar {
-  opacity: 0;
-  pointer-events: none;
   display: -webkit-box;
   -webkit-box-orient: horizontal;
   -webkit-box-align: stretch;
   padding: 3px;
   padding-bottom: 0;
   height: 17px; /* 23 - 2 * 3 */
-  -webkit-transition: opacity .5s;
   cursor: move;
   font-size: 100%;
   line-height: 17px;
-  background-image: -webkit-gradient(linear, left top, left bottom,
-                                     from(hsl(213, 87%, 67%)),
-                                     to(hsl(213, 66%, 57%)));
+  background: hsl(213, 54%, 95%);
   -webkit-border-top-left-radius: 4px;
   -webkit-border-top-right-radius: 4px;
+  position: relative;
+  margin-top: 21px;
+  margin-bottom: -21px;
+  -webkit-transition: margin .15s, background .15s;
 }
 
 .edit-bar > * {
@@ -152,10 +118,17 @@ html[anim='false'] *,
   position: relative;
 }
 
+.thumbnail-container:focus .edit-bar,
 .thumbnail-container:hover .edit-bar {
-  -webkit-animation: 'edit-bar-enter' 2.5s;
-  opacity: 1;
-  pointer-events: inherit;
+  margin-top: 0;
+  margin-bottom: 0;
+  -webkit-transition-delay: .5s, 0s;
+
+  /* We need background-color as well to get the fade out animation correct */
+  background-color: hsl(213, 66%, 57%);
+  background-image: -webkit-gradient(linear, left top, left bottom,
+                                     from(hsl(213, 87%, 67%)),
+                                     to(hsl(213, 66%, 57%)));
 }
 
 .edit-bar > .spacer {
@@ -214,16 +187,20 @@ html[anim='false'] *,
   color: hsl(213, 90%, 24%);
 }
 
+.thumbnail-container {
+  text-decoration: none;
+}
+
 .thumbnail-container > .title {
   line-height: 16px;
   height: 16px;
   margin: 0;
   margin-top: 4px;
   font-size: 100%;
-  font-weight:normal;
+  font-weight: normal;
   padding: 0 3px;
   opacity: 1;
-  -webkit-transition: opacity .5s, width .5s;
+  -webkit-transition: opacity .15s, width .15s;
   color: black;
 }
 
@@ -248,13 +225,13 @@ html[dir=rtl] .thumbnail-container > .title > div {
 }
 
 .thumbnail {
-  border: 3px solid hsla(213, 63%, 93%, 1);
+  border: 3px solid hsl(213, 63%, 93%);
   padding: 1px;
   -webkit-border-radius: 5px;
   display: block;
   -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0);
-  -webkit-transition: width .5s, height .5s, border-color .5s,
-      -webkit-border-radius .5s, -webkit-box-shadow .5s;
+  -webkit-transition: width .15s, height .15s, border-color .15s,
+      -webkit-border-radius .15s, -webkit-box-shadow .15s;
 }
 
 .edit-mode-border {
@@ -262,9 +239,9 @@ html[dir=rtl] .thumbnail-container > .title > div {
   background-color: hsla(213, 54%, 95%, 0);
 }
 
+.thumbnail-container:focus .thumbnail,
 .thumbnail-container:hover .thumbnail {
-  -webkit-animation: 'thumbnail-enter' 2.5s;
-  border-color: hsla(213, 66%, 57%, 1);
+  border-color: hsl(213, 66%, 57%);
   -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0);
   -webkit-border-top-left-radius: 0;
   -webkit-border-top-right-radius: 0;
@@ -274,11 +251,14 @@ html[dir=rtl] .thumbnail-container > .title > div {
     color-stop(0.85, hsla(0, 0%, 47%, 0)),
     to(hsla(0, 0%, 47%, 0.2))
     );
+
+  /* delay border radius transition as much as the edit bar slide delay */
+  -webkit-transition-delay: 0, 0, 0, .5s, 0;
 }
 
+.thumbnail-container:focus > .edit-mode-border,
 .thumbnail-container:hover > .edit-mode-border {
-  -webkit-animation: 'edit-mode-border-enter' 2.5s;
-  background-color: hsla(213, 66%, 57%, 1);
+  background-color: hsl(213, 66%, 57%);
   -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, .5);
 }
 
@@ -310,7 +290,7 @@ html[dir=rtl] .thumbnail-container > .title > div {
 }
 
 .fade-in {
-  -webkit-animation: 'fade-in' 2.5s;
+  -webkit-animation: 'fade-in' .15s;
 }
 
 /* Notification */
@@ -359,11 +339,10 @@ html[dir=rtl] .thumbnail-container > .title > div {
 }
 
 .list > .thumbnail-container > .title {
-  font-size: 140%;
+  font-size: 160%;
   line-height: 40px;
   height: 40px;
   color: hsl(213, 27%, 68%);
-  text-decoration: underline;
   width: 100%;
 }
 
@@ -448,7 +427,7 @@ html[dir='rtl'] .item {
   width: 157px;
   left: 0;
   white-space: nowrap;
-  z-index: 1;
+  z-index: 2;
   padding: 1px;
   cursor: default;
 }
@@ -488,7 +467,7 @@ html[dir='rtl'] .item {
 }
 
 #recent-activities {
-  -webkit-transition: width .5s, opacity .5s;
+  -webkit-transition: width .15s, opacity .15s;
 }
 
 .section {
@@ -518,17 +497,19 @@ html[dir='rtl'] #view-toolbar {
   padding: 0;
   vertical-align: top;
   -webkit-margin-start: 5px;
+  /* Do not show focus outline */
+  outline: none;
 }
 
 #lower-sections {
   position: relative;
   overflow: hidden;
-  -webkit-transition: height .5s, width .5s, opacity .5s;
+  -webkit-transition: height .15s, width .15s, opacity .15s;
   white-space: nowrap;
 }
 
 #lower-sections > .section {
-  -webkit-transition: width .5s, opacity .5s, left .5s;
+  -webkit-transition: width .15s, opacity .15s, left .15s;
   -webkit-box-sizing: border-box;
   width: 460px; /* Set default size so we don't have to do a js layout at
                    load */
@@ -536,7 +517,7 @@ html[dir='rtl'] #view-toolbar {
 
 #lower-sections .spacer {
   width: 20px;
-  -webkit-transition: width .5s;
+  -webkit-transition: width .15s;
   display: inline-block;
 }
 
@@ -625,7 +606,7 @@ html[dir='rtl'] #option-menu {
 }
 
 #option-menu > [selected] {
-  background-color: hsla(213, 66%, 57%, 1);
+  background-color: hsl(213, 66%, 57%);
   color: white;
 }
 
diff --git a/chrome/browser/resources/new_new_tab.html b/chrome/browser/resources/new_new_tab.html
index cd7b707..affa22b 100644
--- a/chrome/browser/resources/new_new_tab.html
+++ b/chrome/browser/resources/new_new_tab.html
@@ -85,7 +85,7 @@ logEvent('log start');
   </div>
 
   <div id="most-visited" jsskip="true">
-    <a class="thumbnail-container filler" id="t0">
+    <a class="thumbnail-container filler" tabindex="1" id="t0">
       <div class="edit-mode-border">
         <div class="edit-bar">
           <div class="pin"></div>
@@ -101,7 +101,7 @@ logEvent('log start');
       </div>
     </a>
 
-    <a class="thumbnail-container filler" id="t1">
+    <a class="thumbnail-container filler" tabindex="1" id="t1">
       <div class="edit-mode-border">
         <div class="edit-bar">
           <div class="pin"></div>
@@ -117,7 +117,7 @@ logEvent('log start');
       </div>
     </a>
 
-    <a class="thumbnail-container filler" id="t2">
+    <a class="thumbnail-container filler" tabindex="1" id="t2">
       <div class="edit-mode-border">
         <div class="edit-bar">
           <div class="pin"></div>
@@ -133,7 +133,7 @@ logEvent('log start');
       </div>
     </a>
 
-    <a class="thumbnail-container filler" id="t3">
+    <a class="thumbnail-container filler" tabindex="1" id="t3">
       <div class="edit-mode-border">
         <div class="edit-bar">
           <div class="pin"></div>
@@ -149,7 +149,7 @@ logEvent('log start');
       </div>
     </a>
 
-    <a class="thumbnail-container filler" id="t4">
+    <a class="thumbnail-container filler" tabindex="1" id="t4">
       <div class="edit-mode-border">
         <div class="edit-bar">
           <div class="pin"></div>
@@ -165,7 +165,7 @@ logEvent('log start');
       </div>
     </a>
 
-    <a class="thumbnail-container filler" id="t5">
+    <a class="thumbnail-container filler" tabindex="1" id="t5">
       <div class="edit-mode-border">
         <div class="edit-bar">
           <div class="pin"></div>
@@ -181,7 +181,7 @@ logEvent('log start');
       </div>
     </a>
 
-    <a class="thumbnail-container filler" id="t6">
+    <a class="thumbnail-container filler" tabindex="1" id="t6">
       <div class="edit-mode-border">
         <div class="edit-bar">
           <div class="pin"></div>
@@ -197,7 +197,7 @@ logEvent('log start');
       </div>
     </a>
 
-    <a class="thumbnail-container filler" id="t7">
+    <a class="thumbnail-container filler" tabindex="1" id="t7">
       <div class="edit-mode-border">
         <div class="edit-bar">
           <div class="pin"></div>
diff --git a/chrome/browser/resources/new_new_tab.js b/chrome/browser/resources/new_new_tab.js
index 5bebc13..c6e661f 100644
--- a/chrome/browser/resources/new_new_tab.js
+++ b/chrome/browser/resources/new_new_tab.js
@@ -1117,8 +1117,13 @@ var dnd = {
     if (this.canDropOnElement(dropTarget)) {
       dropTarget.style.zIndex = 1;
       mostVisited.swapPosition(this.dragItem, dropTarget);
-      mostVisited.invalidate();
-      mostVisited.layout();
+      // The timeout below is to allow WebKit to see that we turned off
+      // pointer-event before moving the thumbnails so that we can get out of
+      // hover mode.
+      window.setTimeout(function() {
+        mostVisited.invalidate();
+        mostVisited.layout();
+      }, 10);
       e.preventDefault();
       if (this.dragEndTimer) {
         window.clearTimeout(this.dragEndTimer);