[NTP] Adjust custom link title style for better truncation and large font sizes

Replace "text-shadow" with "filter: drop-shadow()". This lets us remove
the manual title truncation and use "text-overflow: ellipsis" instead.

Also increase the title container height to 24px in order to allow for
larger font sizes.

Screencast: https://screencast.googleplex.com/cast/NDgyOTcwNjE2MzU4NTAyNHwyOTk3MzhjZi1iNw

Bug: 894000
Change-Id: Ibe46ea6ed269615fb6bf59044ccccce10fd91721
Reviewed-on: https://chromium-review.googlesource.com/c/1337431
Commit-Queue: Kristi Park <kristipark@chromium.org>
Reviewed-by: Ramya Nagarajan <ramyan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#610941}

chrome/browser/resources/local_ntp/most_visited_single.css

@@ -15,11 +15,13 @@ html {
   --md-menu-size: 12px;
   --md-tile-height: 112px;
   --md-tile-margin: 16px;
+  --md-tile-padding-bottom: 10px;
   --md-tile-padding-horizontal: 4px;
-  --md-tile-padding-vertical: 16px;
+  --md-tile-padding-top: 16px;
   --md-tile-width: 112px;
   --md-title-font-size: 12px;
-  --md-title-height: 16px;
+  --md-title-height: 24px;
+
 
   /* Constants. */
   --tile-height: 128px;
@@ -392,8 +394,7 @@ html[dir=rtl] .mv-favicon {
   opacity: 1;
   position: relative;
   transition-property:
-      background, background-color, border-color, box-shadow, opacity,
-      text-shadow;
+      background, background-color, border-color, box-shadow, opacity, filter;
   width: var(--md-tile-width);
 }
 
@@ -411,12 +412,8 @@ html[dir=rtl] .mv-favicon {
 
 .md-tile {
   cursor: pointer;
-  padding: var(--md-tile-padding-vertical) var(--md-tile-padding-horizontal);
-}
-
-body.using-theme .md-tile-container .md-tile {
-  /* The theme title pill adds 2*4px of vertical padding. */
-  padding-bottom: calc(var(--md-tile-padding-vertical) - 2*4px);
+  padding: var(--md-tile-padding-top) var(--md-tile-padding-horizontal)
+    var(--md-tile-padding-bottom);
 }
 
 .md-empty-tile {
@@ -512,10 +509,11 @@ body.dark-theme:not(.reordering) .md-tile-container:active + .md-menu::after {
   font-weight: 500;
   height: var(--md-title-height);
   line-height: var(--md-title-height);
+  overflow: hidden;
   text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   width: 96px;
-  word-break: break-word;
-  word-wrap: break-word;
 }
 
 /* Font weight on Mac and ChromeOS looks heavier on default background and
@@ -527,19 +525,20 @@ body.mac-chromeos .md-title {
 /* Apply when a custom background is set */
 body.dark-theme .md-tile-container:not(.reorder) .md-title {
   color: rgb(248, 249, 250);
-  text-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
+  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.35));
 }
 
 /* Apply only when a theme is installed */
 body.using-theme .md-title-container {
   background-color: white;
-  border-radius: 12px;
-  padding: 4px;
+  /* Necessary for a "pill" shape. Using 50% creates an oval. */
+  border-radius: 500px;
+  padding: 0 4px;
 }
 
 body.using-theme .md-tile-container:not(.reorder) .md-title {
   color: rgba(33, 32, 36, 0.86);
-  text-shadow: unset;
+  filter: unset;
 }
 
 .md-menu {

chrome/browser/resources/local_ntp/most_visited_single.js

@@ -170,13 +170,6 @@ const MD_NUM_TILES_ALWAYS_VISIBLE = 6;
 var NUM_TITLE_LINES = 1;
 
 
-/**
- * Largest minimum font size in settings.
- * @const {number}
- */
-const LARGEST_MINIMUM_FONT_SIZE = 24;
-
-
 /**
  * The origin of this request, i.e. 'https://www.google.TLD' for the remote NTP,
  * or 'chrome-search://local-ntp' for the local NTP.
@@ -467,10 +460,6 @@ var swapInNewTiles = function() {
   // If this is Material Design, re-balance the tiles if there are more than
   // |MD_MAX_TILES_PER_ROW| in order to make even rows.
   if (isMDEnabled) {
-    // Called after appending to document so that css styles are active.
-    truncateTitleText(
-        parent.lastChild.querySelectorAll('.' + CLASSES.MD_TITLE));
-
     if (cur.childNodes.length > MD_MAX_TILES_PER_ROW) {
       cur.style.maxWidth = 'calc(var(--md-tile-width) * ' +
           Math.ceil(cur.childNodes.length / 2) + ')';
@@ -511,28 +500,6 @@ function updateTileVisibility() {
 }
 
 
-/**
- * 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++) {
-    let el = titles[i];
-    const originalTitle = el.innerText;
-    let truncatedTitle = el.innerText;
-    while (el.scrollHeight > LARGEST_MINIMUM_FONT_SIZE
-    && truncatedTitle.length > 0) {
-      el.innerText = (truncatedTitle = truncatedTitle.slice(0, -1)) + '\u2026';
-    }
-    if (truncatedTitle.length === 0) {
-      console.error('Title truncation failed: ' + originalTitle);
-    }
-  }
-}
-
-
 /**
  * Handler for the 'show' message from the host page, called when it wants to
  * add a suggestion tile.