[NTP] pill under MD icons text only show on theme

Create a new class use-theme for the most-visited iframe to
differentiate whether is custom-background or use theme. Apply pill
under MD icons text only on when using theme but not for the
custom-background.

Screenshot:
https://screenshot.googleplex.com/Et8oFFtMgXb.png
https://screenshot.googleplex.com/ix4meSKVW5W.png

Bugs: 850718
Change-Id: I9416a44d9e2fc3dfd64fcf4198139d1f388ae9c3
Reviewed-on: https://chromium-review.googlesource.com/1156062
Commit-Queue: Weilun Shi <sweilun@chromium.org>
Reviewed-by: Kristi Park <kristipark@chromium.org>
Cr-Commit-Position: refs/heads/master@{#579649}

chrome/browser/resources/local_ntp/local_ntp.js

@@ -359,6 +359,8 @@ function sendThemeInfoToMostVisitedIframe() {
 
   var message = {cmd: 'updateTheme'};
   message.isThemeDark = isThemeDark;
+  message.isUsingTheme =
+      !info.customBackgroundConfigured && !info.usingDefaultTheme;
 
   var titleColor = NTP_DESIGN.titleColor;
   if (!info.usingDefaultTheme && info.textColorRgba) {

chrome/browser/resources/local_ntp/most_visited_single.css

@@ -485,13 +485,6 @@ body.dark-theme .md-tile:active .md-menu::after {
   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;
@@ -499,15 +492,31 @@ body.dark-theme .md-tile: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;
 }
 
+/* Apply when a custom background is set */
+body.dark-theme .md-title {
+  color: rgb(248, 249, 250);
+  text-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
+}
+
+/* Apply only when a theme is installed */
+body.using-theme .md-title-container {
+  background-color: white;
+  border-radius: 12px;
+  height: 24px;
+  padding: 4px;
+}
+
+body.using-theme .md-title {
+  color: rgba(33, 32, 36, 0.86);
+  text-shadow: unset;
+}
+
 .md-menu {
   background-color: transparent;
   border: none;

chrome/browser/resources/local_ntp/most_visited_single.js

@@ -276,6 +276,7 @@ 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('using-theme', info.isUsingTheme);
 };
 
 
@@ -345,6 +346,10 @@ 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);
@@ -363,6 +368,25 @@ var swapInNewTiles = function() {
   tiles = document.createElement('div');
 };
 
+/**
+ * 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