NTP: Fix startup visual state ...

chrome/browser/resources/new_new_tab.css

Index: chrome/browser/resources/new_new_tab.css
===================================================================
--- chrome/browser/resources/new_new_tab.css	(revision 29178)
+++ chrome/browser/resources/new_new_tab.css	(working copy)
@@ -39,15 +39,13 @@
 
 .thumbnail-container {
   position: absolute;
-  -webkit-transition: top .15s, left .15s;
   color: black;
   text-decoration: none;
-  -webkit-transition: left .15s, top .15s;
+  -webkit-transition: left .15s, right .15s, top .15s;
 }
 
 .list > .thumbnail-container {
-  -webkit-transition: left .15s, top .15s, width .15s;
-  overflow: hidden;
+    overflow: hidden;
 }
 
 /* hide outline in thumbnail view */
@@ -294,6 +292,11 @@
   visibility: hidden !important;
 }
 
+.collapsed {
+  height: 0 !important;
+  opacity: 0;
+}
+
 @-webkit-keyframes 'fade-in' {
   0% {
     opacity: 0;
@@ -666,35 +669,14 @@
   background-image: url(chrome://theme/newtab_checkbox_white);
 }
 
-/* Hard code thumbnail positions to improve initial layout speed */
-#t0, #t4,
-html[dir='rtl'] #t3,
-html[dir='rtl'] #t7 {
-  left: 0;
+#most-visited.list {
+  height: 294px;
 }
 
-#t1, #t5,
-html[dir='rtl'] #t2,
-html[dir='rtl'] #t6 {
-  left: 235px;
+.list > .thumbnail-container {
+  max-width: 920px;
 }
 
-#t2, #t6,
-html[dir='rtl'] #t1,
-html[dir='rtl'] #t5 {
-  left: 470px;
-}
-
-#t3, #t7,
-html[dir='rtl'] #t0,
-html[dir='rtl'] #t4 {
-  left: 705px;
-}
-
-#t4, #t5, #t6, #t7 {
-  top: 183px;
-}
-
 /* tip line */
 #tip-line {
   margin: 10px 0;
@@ -743,6 +725,10 @@
     -webkit-background-size: 150px 93px;
   }
 
+  .list > .thumbnail-container {
+    max-width: 692px;
+  }
+
   #notification > * {
     max-width: 300px;
   }
@@ -750,32 +736,4 @@
   #notification > span > .blacklist-title {
     max-width: 15ex;
   }
-
-  #t0, #t4,
-  html[dir='rtl'] #t3,
-  html[dir='rtl'] #t7 {
-    left: 0;
-  }
-
-  #t1, #t5,
-  html[dir='rtl'] #t2,
-  html[dir='rtl'] #t6 {
-    left: 178px;
-  }
-
-  #t2, #t6,
-  html[dir='rtl'] #t1,
-  html[dir='rtl'] #t5 {
-    left: 356px;
-  }
-
-  #t3, #t7,
-  html[dir='rtl'] #t0,
-  html[dir='rtl'] #t4 {
-    left: 534px;
-  }
-
-  #t4, #t5, #t6, #t7 {
-    top: 147px;
-  }
 }