[NTP] Reduce MV tile titles to one line and adjust MV margins

Screenshots:
https://screenshot.googleplex.com/mWo3G36cOfw.png
https://screenshot.googleplex.com/iBoyPES2wys.png
https://screenshot.googleplex.com/LOeXotyNyc0.png

Bug: 865086
Cq-Include-Trybots: luci.chromium.try:closure_compilation
Change-Id: I5d1737b6b3a1ded99c3518f9c4f4d48e93482df5
Reviewed-on: https://chromium-review.googlesource.com/1142504
Commit-Queue: Kristi Park <kristipark@chromium.org>
Reviewed-by: Mathieu Perreault <mathp@chromium.org>
Cr-Commit-Position: refs/heads/master@{#576441}

chrome/browser/resources/local_ntp/local_ntp.css

@@ -4,8 +4,8 @@
 
 html {
   /* Material Design constants */
-  --md-tile-height: 128px;
-  --md-tile-margin: 8px;
+  --md-tile-height: 112px;
+  --md-tile-margin: 16px;
 
   /* This will be overridden based on the viewport width, see below. */
   --column-count: 2;
@@ -472,8 +472,10 @@ body.fakebox-focused #fakebox-cursor {
   user-select: none;
 }
 
-.md-icons #most-visited {
-  margin-top: 30px;
+#most-visited.md-icons {
+  /* Total of 40px margin between fakebox and MV tiles: 8px fakebox
+   * margin-bottom + 22px here margin-top + 10px MV margin-top */
+  margin-top: 22px;
 }
 
 /* Non-Google pages have no Fakebox, so don't need top margin. */

chrome/browser/resources/local_ntp/most_visited_single.css

@@ -12,13 +12,13 @@ html {
   --md-menu-margin-side: 2px;
   --md-menu-margin-top: 4px;
   --md-menu-size: 12px;
-  --md-tile-height: 128px;
-  --md-tile-margin: 8px;
+  --md-tile-height: 112px;
+  --md-tile-margin: 16px;
   --md-tile-padding-horizontal: 8px;
   --md-tile-padding-vertical: 16px;
-  --md-tile-width: 96px;
+  --md-tile-width: 112px;
   --md-title-font-size: 12px;
-  --md-title-height: 32px;
+  --md-title-height: 16px;
 
   /* Constants. */
   --tile-height: 128px;
@@ -506,7 +506,7 @@ body.background-image .md-tile:active .md-title {
   font-size: var(--md-title-font-size);
   font-weight: 500;
   height: var(--md-title-height);
-  line-height: 1.4em;
+  line-height: var(--md-title-height);
   text-align: center;
   width: 100%;
   word-break: break-word;

chrome/browser/resources/local_ntp/most_visited_single.js

@@ -334,8 +334,10 @@ var swapInNewTiles = function() {
 
 
 /**
- * Truncates titles that are longer than two lines and appends an ellipsis. Text
- * overflow in CSS ("text-overflow: ellipsis") cannot handle multiple lines.
+ * Truncates titles that are longer than one line and appends an ellipsis. Text
+ * overflow in CSS ("text-overflow: ellipsis") requires "overflow: hidden",
+ * which will cut off the title's text shadow. Only used for Material Design
+ * tiles.
  */
 function truncateTitleText(titles) {
   for (let i = 0; i < titles.length; i++) {