Local NTP: prevent tiles from reloading on resize by moving them into single <div>.

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 33 matching lines @@
   height: 95px;
   margin-bottom: 24px;
   margin-top: 157px;
   width: 269px;
 }
 
 body.alternate-logo #logo {
   background-image: url(images/white_google_logo.png);
 }
 
 #fakebox {

[Jered, 2014/07/28 18:32:50]

Do we now need an extra 10px of margins here, too?

[huangs, 2014/07/29 19:43:45]

The extra 10px is needed in #mv-tiles to accommodate the extra margin of each
tile. It is not needed by #fakebox

   /* Use GPU compositing if available. */
   -webkit-transform: translate3d(0, 0, 0);
   -webkit-transition: -webkit-transform 100ms linear, border-color 100ms linear;
   background-color: #fff;
   border: 1px solid rgb(185, 185, 185);
   border-radius: 1px;
   border-top-color: rgb(160, 160, 160);
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
   cursor: text;
   font-size: 18px;
@@ skipping 65 matching lines @@
   visibility: inherit;
 }
 
 #most-visited {
   -webkit-user-select: none;
   margin-top: 51px;
   text-align: -webkit-center;
 }
 
 #mv-tiles {
-  /* Use GPU compositing if available. */
-  -webkit-transform: translate3d(0, 0, 0);
-  height: 260px;
-  overflow: hidden;
-  padding: 0 1em;
-  white-space: nowrap;
-  width: 304px;
-}
-
-@media only screen and (min-width:660px) {
-  #fakebox {
-    width: 458px;
-  }
-  #mv-tiles {
-    width: 460px;
-  }
-}
-
-@media only screen and (min-width:820px) {
-  #fakebox {
-    width: 618px;
-  }
-  #mv-tiles {
-    width: 620px;
-  }
-}
-
-.mv-row {
-  margin-bottom: 50px;
-}
-
-.mv-row:last-child {
-  margin-bottom: 0;
-}
-
-.mv-tile:first-child {
-  -webkit-margin-start: -1px;
+  height: calc(2 * 138px);
+  line-height: 138px;
+  margin: 0;
+  position: relative;
 }
 
 .mv-tile {
-  -webkit-margin-start: 20px;
-  -webkit-transform: translate3d(0, 0, 0);
   -webkit-transition-duration: 200ms;
   -webkit-transition-property: -webkit-transform, margin, opacity, width;
   background: -webkit-linear-gradient(#f2f2f2, #e8e8e8);
   border: 1px solid transparent;
   border-radius: 3px;
   box-shadow: inset 0 2px 3px rgba(0, 0, 0, .09);
   display: inline-block;
   height: 83px;
+  margin-left: 10px;
+  margin-right: 10px;  /* Total horizontal margins add to TILE_MARGIN. */
+  position: relative;
+  vertical-align: top;
   width: 138px;
 }
 
 /* Class applied to tiles to trigger the blacklist animation. */
 .mv-tile.mv-blacklist {
   -webkit-transform: scale(0.5);
   opacity: 0;
 }
 
 .mv-page-ready {
@@ skipping 165 matching lines @@
   opacity: 0.9;
   padding: 3px;
   position: fixed;
   right: 8px;
 }
 
 body.rtl #attribution,body.rtl #recent-tabs {
   left: 8px;
   right: auto;
 }