[New Tab Page] Change color format used by NTP_DESIGN.

NTP_DESIGN has 3 colors that were specified in RRGGBBAA format. These
values were injected into title.html iframe via query param. The recent
fast local NTP takes rgba(r,g,b,a) format. Rather than writing converter
from RRGBBAA to 4-component, we simply store NTP_DESIGN colors in
4-component (like themes), and use existing converters in old NTP
and fast NTP where needed. Also fixing title color bug in fast NTP.

BUG=

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

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

chrome/browser/resources/local_ntp/local_ntp.js

@@ -340,15 +340,15 @@ function renderTheme() {
   var isThemeDark = getIsThemeDark(info);
   ntpContents.classList.toggle(CLASSES.DARK, isThemeDark);
   if (!info) {
-    titleColor = NTP_DESIGN.titleColor;
+    titleColor = convertToRRGGBBAAColor(NTP_DESIGN.titleColor);
     return;
   }
 
   if (!info.usingDefaultTheme && info.textColorRgba) {
     titleColor = convertToRRGGBBAAColor(info.textColorRgba);
   } else {
-    titleColor = isThemeDark ?
-        NTP_DESIGN.titleColorAgainstDark : NTP_DESIGN.titleColor;
+    titleColor = convertToRRGGBBAAColor(isThemeDark ?
+        NTP_DESIGN.titleColorAgainstDark : NTP_DESIGN.titleColor);
   }
 
   var background = [convertToRGBAColor(info.backgroundColorRgba),
@@ -646,11 +646,12 @@ function getMostVisitedTitleIframeUrl(rid, position) {
 function getMostVisitedThumbnailIframeUrl(rid, position) {
   var url = 'chrome-search://most-visited/' +
       encodeURIComponent(MOST_VISITED_THUMBNAIL_IFRAME);
+  var colorString = convertToRRGGBBAAColor(NTP_DESIGN.thumbnailTextColor);
   var params = [
       'rid=' + encodeURIComponent(rid),
       'f=' + encodeURIComponent(NTP_DESIGN.fontFamily),
       'fs=' + encodeURIComponent(NTP_DESIGN.fontSize),
-      'c=' + encodeURIComponent(NTP_DESIGN.thumbnailTextColor),
+      'c=' + encodeURIComponent(colorString),
       'pos=' + encodeURIComponent(position)];
   if (NTP_DESIGN.thumbnailFallback)
     params.push('etfb=1');

chrome/browser/resources/local_ntp/local_ntp_design.js

@@ -18,13 +18,14 @@
  * fontSize: Font size to use for the iframes, in px.
  * tileWidth: The width of each suggestion tile, in px.
  * tileMargin: Spacing between successive tiles, in px.
- * titleColor: The RRGGBBAA color of title text.
- * titleColorAgainstDark: The RRGGBBAA color of title text against a dark theme.
+ * titleColor: The 4-component color of title text.
+ * titleColorAgainstDark: The 4-component color of title text against a dark
+ *   theme.
  * titleTextAlign: (Optional) The alignment of title text. If unspecified, the
  *   default value is 'center'.
  * titleTextFade: (Optional) The number of pixels beyond which title
  *   text begins to fade. This overrides the default ellipsis style.
- * thumbnailTextColor: The RRGGBBAA color that thumbnail iframe may use to
+ * thumbnailTextColor: The 4-component color that thumbnail iframe may use to
  *   display text message in place of missing thumbnail.
  * thumbnailFallback: (Optional) A value in THUMBNAIL_FALLBACK to specify the
  *   thumbnail fallback strategy. If unassigned, then the thumbnail.html
@@ -50,10 +51,10 @@ var NTP_DESIGN = {
   fontSize: 12,
   tileWidth: 156,
   tileMargin: 16,
-  titleColor: '323232ff',
-  titleColorAgainstDark: 'd2d2d2ff',
+  titleColor: [50, 50, 50, 255],
+  titleColorAgainstDark: [210, 210, 210, 255],
   titleTextAlign: 'inherit',
   titleTextFade: 122 - 36,  // 112px wide title with 32 pixel fade at end.
-  thumbnailTextColor: '323232ff',  // Unused.
+  thumbnailTextColor: [50, 50, 50, 255],
   thumbnailFallback: THUMBNAIL_FALLBACK.DOT
 };

chrome/browser/resources/local_ntp/local_ntp_fast.js

@@ -241,9 +241,9 @@ function renderTheme() {
 
   var titleColor = NTP_DESIGN.titleColor;
   if (!info.usingDefaultTheme && info.textColorRgba) {
-    titleColor = convertToRRGGBBAAColor(info.textColorRgba);
+    themeinfo.tileTitleColor = info.textColorRgba;
   } else if (isThemeDark) {
-    NTP_DESIGN.titleColorAgainstDark;
+    titleColor = NTP_DESIGN.titleColorAgainstDark;
   }
   themeinfo.tileTitleColor = convertToRGBAColor(titleColor);