[Local NTP] Implement style updates for Material Design

chrome/browser/resources/local_ntp/most_visited_util.js

 // Copyright 2013 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 
 /**
  * @fileoverview Utilities for rendering most visited thumbnails and titles.
  */
 
 <include src="instant_iframe_validation.js">
@@ skipping 144 matching lines @@
       ntpApiHandle.navigateContentWindow(href, getDispositionFromEvent(e));
     }
     // Else follow <a> normally, so transition type would be LINK.
   });
 
   return link;
 }
 
 
 /**
+ * Returns the color to display string with, depending on whether title is
+ * displayed, the current theme, and URL parameters.
+ * @param {Object.<string, string>} params URL parameters specifying style.
+ * @param {boolean} isTitle if the style is for the Most Visited Title.
+ * @return {string} The color to use.

[Mathieu, 2014/08/27 14:54:53]

nit: can you mention output format

[huangs, 2014/08/27 18:13:52]

Done.

+ */
+function getTextColor(params, isTitle) {
+  // 'RRGGBBAA' color format overrides everything.
+  if ('c' in params && params.c.match(/^[0-9A-Fa-f]{8}$/)) {
+    // Extract the 4 pairs of hex digits, map to number, then form rgba().
+    var t = params.c.match(/(..)(..)(..)(..)/).slice(1).map(function(s) {
+      return parseInt(s, 16);
+    });
+    return 'rgba(' + t[0] + ',' + t[1] + ',' + t[2] + ',' + t[3] / 255 + ')';
+  }
+
+  // For backward compatibility with server-side NTP, look at themes directly

[Mathieu, 2014/08/27 14:54:53]

nit: have you tested with server ntp to make sure this works well?

[huangs, 2014/08/27 18:13:52]

Yeah it's easy to test.

+  // and use param.c for non-title or as fallback.
+  var apiHandle = chrome.embeddedSearch.newTabPage;
+  var themeInfo = apiHandle.themeBackgroundInfo;
+  var c = '#777';
+  if (isTitle && themeInfo && !themeInfo.usingDefaultTheme) {
+    // read from theme directly
+    c = convertArrayToRGBAColor(themeInfo.textColorRgba) || c;
+  } else if ('c' in params) {
+    c = convertToHexColor(parseInt(params.c, 16)) || c;
+  }
+  return c;
+}
+
+
+/**
  * Decodes most visited styles from URL parameters.
  * - c: A hexadecimal number interpreted as a hex color code.
  * - 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.
  * @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.
  */
 function getMostVisitedStyles(params, isTitle) {
   var styles = {
-    color: '#777',
+    color: getTextColor(params, isTitle),  // Handles 'c' in params.
     fontFamily: '',
     fontSize: 11
   };
-  var apiHandle = chrome.embeddedSearch.newTabPage;
-  var themeInfo = apiHandle.themeBackgroundInfo;
-  if (isTitle && themeInfo && !themeInfo.usingDefaultTheme) {
-    styles.color = convertArrayToRGBAColor(themeInfo.textColorRgba) ||
-        styles.color;
-  } else if ('c' in params) {
-    styles.color = convertToHexColor(parseInt(params.c, 16)) || styles.color;
-  }
   if ('f' in params && /^[-0-9a-zA-Z ,]+$/.test(params.f))
     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;
@@ skipping 55 matching lines @@
   if (navigator.sendBeacon) {
     navigator.sendBeacon(url);
   } else {
     // if sendBeacon is not enabled, we fallback for "a ping".
     var a = document.createElement('a');
     a.href = '#';
     a.ping = url;
     a.click();
   }
 }