[New Tab Page] Reset default parameters for NTP title.html, adding param for multiline.

http://crrev.com/1047223004 added experimental icon NTP support and
changed default "white-space: nowrap" to "white-space: pre-wrap", then
make current Material Design select the old one. This is broke 3rd-party
NTPs that don't have the same setting. This CL changes the defaults back,
and adds a new "ntl" to signal intent of having multiline titles. Also
updated single-iframe NTP to match.

BUG=474164

Review URL: https://codereview.chromium.org/1061163003

Cr-Commit-Position: refs/heads/master@{#324097}

chrome/browser/resources/local_ntp/local_ntp.js

@@ -637,6 +637,8 @@ function getMostVisitedTitleIframeUrl(rid, position) {
     params.push('ta=' + encodeURIComponent(NTP_DESIGN.titleTextAlign));
   if (NTP_DESIGN.titleTextFade)
     params.push('tf=' + encodeURIComponent(NTP_DESIGN.titleTextFade));
+  if (NTP_DESIGN.numTitleLines > 1)
+    params.push('ntl=' + NTP_DESIGN.numTitleLines);
   return url + '?' + params.join('&');
 }
 

chrome/browser/resources/local_ntp/local_ntp_design.js

@@ -20,6 +20,7 @@
  * fontFamily: Font family to use for title and thumbnail iframes.
  * fontSize: Font size to use for the iframes, in px.
  * mainClass: Class applied to #ntp-contents to control CSS.
+ * numTitleLines: Number of lines to display in titles.
  * showFavicon: Whether to show favicon.
  * thumbnailTextColor: The 4-component color that thumbnail iframe may use to
  *   display text message in place of missing thumbnail.
@@ -41,6 +42,7 @@
  *   fontFamily: string,
  *   fontSize: number,
  *   mainClass: string,
+ *   numTitleLines: number,
  *   showFavicon: boolean,
  *   thumbnailTextColor: string,
  *   thumbnailFallback: string|null|undefined,
@@ -57,6 +59,7 @@ var NTP_DESIGN = {
   fontFamily: 'arial, sans-serif',
   fontSize: 12,
   mainClass: 'thumb-ntp',
+  numTitleLines: 1,
   showFavicon: true,
   thumbnailTextColor: [50, 50, 50, 255],
   thumbnailFallback: THUMBNAIL_FALLBACK.DOT,
@@ -75,6 +78,7 @@ var NTP_DESIGN = {
 function modifyNtpDesignForIcons() {
   NTP_DESIGN.fakeboxWingSize = 132;
   NTP_DESIGN.mainClass = 'icon-ntp';
+  NTP_DESIGN.numTitleLines = 2;
   NTP_DESIGN.showFavicon = false;
   NTP_DESIGN.thumbnailFallback = null;
   NTP_DESIGN.tileWidth = 48 + 2 * 18;

chrome/browser/resources/local_ntp/local_ntp_fast.js

@@ -772,6 +772,8 @@ function init() {
     args.push('rtl=1');
   if (window.configData.useIcons)
     args.push('icons=1');
+  if (NTP_DESIGN.numTitleLines > 1)
+    args.push('ntl=' + NTP_DESIGN.numTitleLines);
 
   args.push('removeTooltip=' +
       encodeURIComponent(configData.translatedStrings.removeThumbnailTooltip));

chrome/browser/resources/local_ntp/most_visited_single.css

@@ -142,6 +142,11 @@ a:visited {
   text-overflow: clip;
 }
 
+.mv-title.multiline {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
 .thumb-ntp .mv-title {
   -webkit-mask-image:
     linear-gradient(to right, #000, #000, 100px, transparent);
@@ -180,7 +185,6 @@ html[dir=rtl] .thumb-ntp .mv-title[style*='direction: rtl'] {
   right: auto;
   text-align: center;
   top: 76px;
-  white-space: pre-wrap;
   width: 100%;
   z-index: 5;
 }

chrome/browser/resources/local_ntp/most_visited_single.js

@@ -47,18 +47,25 @@ var LOG_TYPE = {
 
 
 /**
- * Whether to use icons instead of thumbnails.
+ * Total number of tiles to show at any time. If the host page doesn't send
+ * enough tiles, we fill them blank.
  * @const {number}
  */
+var NUMBER_OF_TILES = 8;
+
+
+/**
+ * Whether to use icons instead of thumbnails.
+ * @type {boolean}
+ */
 var USE_ICONS = false;
 
 
 /**
- * Total number of tiles to show at any time. If the host page doesn't send
- * enough tiles, we fill them blank.
- * @const {number}
+ * Number of lines to display in titles.
+ * @type {number}
  */
-var NUMBER_OF_TILES = 8;
+var NUM_TITLE_LINES = 1;
 
 
 /**
@@ -345,6 +352,9 @@ var renderTile = function(data) {
   var title = tile.querySelector('.mv-title');
   title.innerText = data.title;
   title.style.direction = data.direction || 'ltr';
+  if (NUM_TITLE_LINES > 1) {
+    title.classList.add('multiline');
+  }
 
   var hasIcon = USE_ICONS && data.largeIconUrl;
   var hasThumb = !USE_ICONS && data.thumbnailUrl;
@@ -427,6 +437,12 @@ var init = function() {
 
   // Apply class for icon NTP, if specified.
   USE_ICONS = queryArgs['icons'] == '1';
+  if ('ntl' in queryArgs) {
+    var ntl = parseInt(queryArgs['ntl'], 10);
+    if (isFinite(ntl))
+      NUM_TITLE_LINES = ntl;
+  }
+
   // Duplicating NTP_DESIGN.mainClass.
   document.querySelector('#most-visited').classList.add(
       USE_ICONS ? 'icon-ntp' : 'thumb-ntp');

chrome/browser/resources/local_ntp/most_visited_title.css

@@ -15,8 +15,14 @@ a {
   line-height: 117%;
   overflow: hidden;
   text-align: center;  /* Can be overridden in JS. */
-  text-overflow: clip;  /* Can be overridden in JS. */
-  white-space: pre-wrap;  /* Can be overridden in JS. */
+  text-overflow: ellipsis;  /* Can be overridden in JS. */
+  white-space: nowrap;  /* Can be overridden in JS. */
+}
+
+a.multiline {
+  text-overflow: clip;
+  white-space: pre-wrap;
+  word-wrap: break-word;
 }
 
 a:focus {

chrome/browser/resources/local_ntp/most_visited_util.js

@@ -118,10 +118,11 @@ function createMostVisitedLink(params, href, title, text, direction, provider) {
     // The fading length in pixels is passed by the caller.
     var mask = 'linear-gradient(' + dir + ', rgba(0,0,0,1), rgba(0,0,0,1) ' +
         styles.textFadePos + 'px, rgba(0,0,0,0))';
-    link.style.lineHeight = 'auto';
     link.style.textOverflow = 'clip';
     link.style.webkitMask = mask;
-    link.style.whiteSpace = 'nowrap';
+  }
+  if (styles.numTitleLines && styles.numTitleLines > 1) {
+    link.classList.add('multiline');
   }
 
   link.href = href;
@@ -130,8 +131,12 @@ function createMostVisitedLink(params, href, title, text, direction, provider) {
   // Include links in the tab order.  The tabIndex is necessary for
   // accessibility.
   link.tabIndex = '0';
-  if (text)
-    link.textContent = text;
+  if (text) {
+    // Wrap text with span so ellipsis will appear at the end of multiline.
+    var spanWrap = document.createElement('span');
+    spanWrap.textContent = text;
+    link.appendChild(spanWrap);
+  }
   link.addEventListener('mouseover', function() {
     var ntpApiHandle = chrome.embeddedSearch.newTabPage;
     ntpApiHandle.logEvent(NTP_LOGGING_EVENT_TYPE.NTP_MOUSEOVER);
@@ -224,7 +229,8 @@ function getTextColor(params, isTitle) {
  * - f: font-family.
  * - fs: font-size as a number in pixels.
  * - ta: text-align property, as a string.
- * - tf: specifying a text fade starting position, in pixels.
+ * - tf: text fade starting position, in pixels.
+ * - ntl: number of lines in the title.
  * @param {Object<string, string>} params URL parameters specifying style.
  * @param {boolean} isTitle if the style is for the Most Visited Title.
  * @return {Object} Styles suitable for CSS interpolation.
@@ -246,6 +252,11 @@ function getMostVisitedStyles(params, isTitle) {
     if (isFinite(tf))
       styles.textFadePos = tf;
   }
+  if ('ntl' in params) {
+    var ntl = parseInt(params.ntl, 10);
+    if (isFinite(ntl))
+      styles.numTitleLines = ntl;
+  }
   return styles;
 }