[NTP] Adds a pill under MD icons text for themes.

Addresses the visibility of NTP icon text by adding a white pill underneath the text. Also, because we no longer need the textshadow, we use the css function to implement the ellipsis instead of writing our own function.

Before:
https://screenshot.googleplex.com/8N6m2yLinvo.png
https://screenshot.googleplex.com/3uCW3TsFzyN.png
After:
https://screenshot.googleplex.com/SbwT1GmCR5W.png
https://screenshot.googleplex.com/xrMjBTji41t.png

The setting doesn't affect the older version mv-tiles:
https://screenshot.googleplex.com/DWtC5dUPqW5.png

Bug: 850718
Change-Id: I002bc972edf2a69d4092b37193ee2fe932ab66f2
Reviewed-on: https://chromium-review.googlesource.com/1148891Reviewed-by: Mathieu Perreault <mathp@chromium.org>
Commit-Queue: Weilun Shi <sweilun@chromium.org>
Cr-Commit-Position: refs/heads/master@{#578549}

chrome/browser/resources/local_ntp/local_ntp.js

@@ -340,7 +340,6 @@ function sendThemeInfoToMostVisitedIframe() {
 
   var message = {cmd: 'updateTheme'};
   message.isThemeDark = isThemeDark;
-  message.hasBackgroundImage = !!info.imageUrl;
 
   var titleColor = NTP_DESIGN.titleColor;
   if (!info.usingDefaultTheme && info.textColorRgba) {

chrome/browser/resources/local_ntp/most_visited_single.css

@@ -14,7 +14,7 @@ html {
   --md-menu-size: 12px;
   --md-tile-height: 112px;
   --md-tile-margin: 16px;
-  --md-tile-padding-horizontal: 8px;
+  --md-tile-padding-horizontal: 4px;
   --md-tile-padding-vertical: 16px;
   --md-tile-width: 112px;
   --md-title-font-size: 12px;
@@ -500,6 +500,13 @@ body.background-image .md-tile:active .md-title {
   width: var(--md-favicon-size);
 }
 
+.md-title-container {
+  background-color: white;
+  border-radius: 12px;
+  height: 24px;
+  padding: 4px;
+}
+
 .md-title {
   color: rgba(33, 32, 36, 0.86);
   font-family: 'Roboto', arial, sans-serif;
@@ -507,20 +514,15 @@ body.background-image .md-tile:active .md-title {
   font-weight: 500;
   height: var(--md-title-height);
   line-height: var(--md-title-height);
+  overflow: hidden;
   text-align: center;
-  width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 96px;
   word-break: break-word;
   word-wrap: break-word;
 }
 
-body.dark-theme .md-title {
-  color: rgb(248, 249, 250);
-}
-
-body.background-image .md-title {
-  text-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
-}
-
 .md-menu {
   background-color: transparent;
   border: none;

chrome/browser/resources/local_ntp/most_visited_single.js

@@ -250,7 +250,6 @@ var showTiles = function(info) {
 var updateTheme = function(info) {
   document.body.style.setProperty('--tile-title-color', info.tileTitleColor);
   document.body.classList.toggle('dark-theme', info.isThemeDark);
-  document.body.classList.toggle('background-image', info.hasBackgroundImage);
 };
 
 
@@ -316,11 +315,6 @@ var swapInNewTiles = function() {
   // Add new tileset.
   cur.id = 'mv-tiles';
   parent.appendChild(cur);
-  if (isMDEnabled) {
-    // Called after appending to document so that css styles are active.
-    truncateTitleText(
-        parent.lastChild.querySelectorAll('.' + CLASSES.MD_TITLE));
-  }
   // getComputedStyle causes the initial style (opacity 0) to be applied, so
   // that when we then set it to 1, that triggers the CSS transition.
   if (fadeIn) {
@@ -334,27 +328,6 @@ var swapInNewTiles = function() {
 };
 
 
-/**
- * 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 > el.offsetHeight && truncatedTitle.length > 0) {
-      el.innerText = (truncatedTitle = truncatedTitle.slice(0, -1)) + '...';
-    }
-    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.