[Most Visited] Support two additional parameters in the iframes

To support the redesign, support two new parameters: ta and tf, which stand for text-align and text fade. For text fade, a linear gradient is created to gently fade the text overflow.

BUG=400332,400341
TBR=jered
TEST=manual

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

Cr-Commit-Position: refs/heads/master@{#288234}
git-svn-id: svn://svn.chromium.org/chrome/trunk/src@288234 0039d316-1c4b-4281-b951-d872f2087c98

chrome/browser/resources/local_ntp/most_visited_thumbnail.js

@@ -24,7 +24,8 @@ window.addEventListener('DOMContentLoaded', function() {
     }
     function showDomainElement() {
       var link = createMostVisitedLink(
-          params, data.url, data.title, undefined, data.provider);
+          params, data.url, data.title, undefined, data.direction,
+          data.provider);
       var domain = document.createElement('div');
       domain.textContent = data.domain;
       link.appendChild(domain);
@@ -34,7 +35,8 @@ window.addEventListener('DOMContentLoaded', function() {
     // externally by the page itself.
     function showEmptyTile() {
       displayLink(createMostVisitedLink(
-          params, data.url, data.title, undefined, data.provider));
+          params, data.url, data.title, undefined, data.direction,
+          data.provider));
     }
     // Creates and adds an image.
     function createThumbnail(src) {
@@ -43,7 +45,8 @@ window.addEventListener('DOMContentLoaded', function() {
         var shadow = document.createElement('span');
         shadow.className = 'shadow';
         var link = createMostVisitedLink(
-            params, data.url, data.title, undefined, data.provider);
+            params, data.url, data.title, undefined, data.direction,
+            data.provider);
         link.appendChild(shadow);
         link.appendChild(image);
         displayLink(link);

chrome/browser/resources/local_ntp/most_visited_title.css

@@ -7,7 +7,7 @@ body {
 
 a {
   overflow: hidden;
-  text-align: center;
-  text-overflow: ellipsis;
+  text-align: center;  /* Can be overridden in JS. */
+  text-overflow: ellipsis; /* Can be overridden in JS. */
   white-space: nowrap;
 }

chrome/browser/resources/local_ntp/most_visited_title.js

@@ -13,6 +13,7 @@ window.addEventListener('DOMContentLoaded', function() {
   fillMostVisited(window.location, function(params, data) {
     document.body.appendChild(
         createMostVisitedLink(
-            params, data.url, data.title, data.title, data.provider));
+            params, data.url, data.title, data.title, data.direction,
+            data.provider));
   });
 });

chrome/browser/resources/local_ntp/most_visited_util.js

@@ -96,18 +96,29 @@ function parseQueryParams(location) {
  * @param {string} href The destination for the link.
  * @param {string} title The title for the link.
  * @param {string|undefined} text The text for the link or none.
+ * @param {string|undefined} direction The text direction.
  * @param {string|undefined} provider A provider name (max 8 alphanumeric
  *     characters) used for logging. Undefined if suggestion is not coming from
  *     the server.
  * @return {HTMLAnchorElement} A new link element.
  */
-function createMostVisitedLink(params, href, title, text, provider) {
+function createMostVisitedLink(params, href, title, text, direction, provider) {
   var styles = getMostVisitedStyles(params, !!text);
   var link = document.createElement('a');
   link.style.color = styles.color;
   link.style.fontSize = styles.fontSize + 'px';
   if (styles.fontFamily)
     link.style.fontFamily = styles.fontFamily;
+  if (styles.textAlign)
+    link.style.textAlign = styles.textAlign;
+  if (styles.textFadePos) {
+    var dir = /^rtl$/i.test(direction) ? 'to left' : 'to right';
+    // 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.textOverflow = 'clip';
+    link.style.webkitMask = mask;
+  }
 
   link.href = href;
   link.title = title;
@@ -152,8 +163,10 @@ function createMostVisitedLink(params, href, title, text, provider) {
 
 /**
  * Decodes most visited styles from URL parameters.
- * - f: font-family
+ * - 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.
  * - c: A hexadecimal number interpreted as a hex color code.
  * @param {Object.<string, string>} params URL parameters specifying style.
  * @param {boolean} isTitle if the style is for the Most Visited Title.
@@ -177,6 +190,13 @@ function getMostVisitedStyles(params, isTitle) {
     styles.fontFamily = params.f;
   if ('fs' in params && isFinite(parseInt(params.fs, 10)))
     styles.fontSize = parseInt(params.fs, 10);
+  if ('ta' in params && /^[-0-9a-zA-Z ,]+$/.test(params.ta))
+    styles.textAlign = params.ta;
+  if ('tf' in params) {
+    var tf = parseInt(params.tf, 10);
+    if (isFinite(tf))
+      styles.textFadePos = tf;
+  }
   return styles;
 }