Revert changes in css files to hide rows of MV tiles.

This reverts to a pre crrev.com/c/726079 state, while ensuring that changes related to interactive doodles, the one google bar, using css variables, etc are not affected.

Bug: 812065
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I336351f35077cacecf4682bddfa47322db882eba
Reviewed-on: https://chromium-review.googlesource.com/950105
Commit-Queue: Ramya Nagarajan <ramyan@chromium.org>
Reviewed-by: Marc Treib <treib@chromium.org>
Cr-Commit-Position: refs/heads/master@{#542521}

chrome/browser/resources/local_ntp/local_ntp.css

@@ -26,17 +26,9 @@ html {
   --logo-iframe-height: var(--logo-height);
   --logo-iframe-resize-duration: 150ms;
   --logo-iframe-width: 500px;
-
   --tile-height: 128px;
   --tile-margin: 16px;
   --tile-width: 154px;
-  /* Two rows of tiles, margin between the rows, and 4px/8px of margin on top
-   * and bottom respectively. If you change this, also change the corresponding
-   * values in most_visited_single.css. */
-  --mv-tiles-height: calc(
-      4px + var(--tile-height) + var(--tile-margin) + var(--tile-height) + 8px);
-  /* Base height 16px, plus 8px each of padding on top and bottom. */
-  --mv-notice-height: calc(8px + 16px + 8px);
 
   --mv-notice-time: 10s;
 
@@ -89,6 +81,9 @@ button {
 }
 
 #ntp-contents {
+/*  margin: 0 auto;
+  text-align: -webkit-center;
+  width: var(--content-width);*/
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -100,7 +95,9 @@ button {
 }
 
 .non-google-page #ntp-contents {
-  justify-content: center;
+  left: calc(50% - var(--content-width)/2);
+  position: absolute;
+  top: calc(50% - 155px);
 }
 
 body.hide-fakebox-logo #logo,
@@ -398,10 +395,7 @@ body.fakebox-focused #fakebox-cursor {
 }
 
 #most-visited {
-  height: 100%;
   margin-top: 56px;
-  max-height: calc(var(--mv-tiles-height) + var(--mv-notice-height));
-  overflow: hidden;
   text-align: -webkit-center;
   user-select: none;
 }
@@ -412,10 +406,11 @@ body.fakebox-focused #fakebox-cursor {
 }
 
 #mv-tiles {
-  height: var(--mv-tiles-height);
+  /* Two rows of tiles of 128px each, 16px of spacing between the rows, and
+   * 4px/8px of margin on top and bottom respectively. If you change this, also
+   * change the corresponding values in most_visited_single.css. */
+  height: calc(2*var(--tile-height) + var(--tile-margin)  + 4px + 8px);
   margin: 0;
-  /* Clamp to the remaining window height minus space for #mv-notice. */
-  max-height: calc(100% - var(--mv-notice-height));
   position: relative;
   text-align: -webkit-auto;
   width: var(--content-width);
@@ -457,7 +452,7 @@ html[dir=rtl] #mv-notice-x {
   font-size: 12px;
   font-weight: bold;
   opacity: 1;
-  padding: 8px 0;
+  padding: 10px 0;
 }
 
 #mv-notice span {

chrome/browser/resources/local_ntp/most_visited_single.css

@@ -74,58 +74,23 @@ a:visited {
   width: var(--tile-width);
 }
 
-/* Min height for showing 1 row: 4px + 128px + 8px
-   Min height for showing 2 rows: 4px + 128px + 16px + 128px + 8px
-   In both cases, give it half a px of tolerance, because otherwise rounding
-   errors at some zoom levels break this and a row sometimes doesn't show up.
-*/
-
-/* Minimal layout: 1 row, 2 columns; only first 2 tiles are visible. */
-@media (min-height: 139.5px) {
-  .mv-tile:nth-child(-n+2),
-  .mv-empty-tile:nth-child(-n+2) {
-    display: inline-block;
-  }
+/* Minimal layout: 2 columns; only first 4 tiles are visible. */
+.mv-tile:nth-child(-n+4),
+.mv-empty-tile:nth-child(-n+4) {
+  display: inline-block;
 }
 
 /* width >= (3 cols * (16px + 154px))
- * 1 row, 3 columns; first 3 tiles are visible. */
-@media (min-height: 139.5px) and (min-width: 510px) {
-  .mv-tile:nth-child(-n+3),
-  .mv-empty-tile:nth-child(-n+3) {
-    display: inline-block;
-  }
-}
-
-/* width >= (4 cols * (16px + 154px))
- * 1 row, 4 columns; first 4 tiles are visible. */
-@media (min-height: 139.5px) and (min-width: 680px) {
-  .mv-tile:nth-child(-n+4),
-  .mv-empty-tile:nth-child(-n+4) {
-    display: inline-block;
-  }
-}
-
-/* 2 rows, 2 columns; only first 4 tiles are visible. */
-@media (min-height: 283.5px) {
-  .mv-tile:nth-child(-n+4),
-  .mv-empty-tile:nth-child(-n+4) {
-    display: inline-block;
-  }
-}
-
-/* width >= (3 cols * (16px + 154px))
- * 2 rows, 3 columns; first 6 tiles are visible. */
-@media (min-height: 283.5px) and (min-width: 510px) {
+ * 3 columns; first 6 tiles are visible. */
+@media (min-width: 510px) {
   .mv-tile:nth-child(-n+6),
   .mv-empty-tile:nth-child(-n+6) {
     display: inline-block;
   }
 }
-
 /* width >= (4 cols * (16px + 154px))
- * 2 rows, 4 columns; first 8 tiles are visible. */
-@media (min-height: 283.5px) and (min-width: 680px) {
+ * 4 columns; first 8 tiles are visible. */
+@media (min-width: 680px) {
   .mv-tile:nth-child(-n+8),
   .mv-empty-tile:nth-child(-n+8) {
     display: inline-block;