NNTP: Fix link and link underline colors

The fall back color for the link underline is the link color with the alpha channel set to 1/3 of the link color.

BUG=20697

TEST=All links on the NTP should have different underline color. Also,
try with different themes.

Review URL: http://codereview.chromium.org/194004

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@25318 0039d316-1c4b-4281-b951-d872f2087c98

7 files changed, 125 insertions, 34 deletions

diff --git a/chrome/browser/browser_theme_provider.cc b/chrome/browser/browser_theme_provider.cc
index 4d1e2d2..29adcc0 100644
--- a/chrome/browser/browser_theme_provider.cc
+++ b/chrome/browser/browser_theme_provider.cc
@@ -47,10 +47,13 @@ const char* BrowserThemeProvider::kColorBookmarkText = "bookmark_text";
 const char* BrowserThemeProvider::kColorNTPBackground = "ntp_background";
 const char* BrowserThemeProvider::kColorNTPText = "ntp_text";
 const char* BrowserThemeProvider::kColorNTPLink = "ntp_link";
+const char* BrowserThemeProvider::kColorNTPLinkUnderline = "ntp_link_underline";
 const char* BrowserThemeProvider::kColorNTPHeader = "ntp_header";
 const char* BrowserThemeProvider::kColorNTPSection = "ntp_section";
 const char* BrowserThemeProvider::kColorNTPSectionText = "ntp_section_text";
 const char* BrowserThemeProvider::kColorNTPSectionLink = "ntp_section_link";
+const char* BrowserThemeProvider::kColorNTPSectionLinkUnderline =
+    "ntp_section_link_underline";
 const char* BrowserThemeProvider::kColorControlBackground =
     "control_background";
 const char* BrowserThemeProvider::kColorButtonBackground = "button_background";
@@ -108,7 +111,7 @@ const SkColor BrowserThemeProvider::kDefaultColorNTPBackground =
 const SkColor BrowserThemeProvider::kDefaultColorNTPText =
     SkColorSetRGB(0, 0, 0);
 const SkColor BrowserThemeProvider::kDefaultColorNTPLink =
-    SkColorSetRGB(0, 0, 0);
+    SkColorSetRGB(6, 55, 116);
 const SkColor BrowserThemeProvider::kDefaultColorNTPHeader =
     SkColorSetRGB(75, 140, 220);
 const SkColor BrowserThemeProvider::kDefaultColorNTPSection =
@@ -116,7 +119,7 @@ const SkColor BrowserThemeProvider::kDefaultColorNTPSection =
 const SkColor BrowserThemeProvider::kDefaultColorNTPSectionText =
     SkColorSetRGB(0, 0, 0);
 const SkColor BrowserThemeProvider::kDefaultColorNTPSectionLink =
-    SkColorSetRGB(0, 0, 204);
+    SkColorSetRGB(6, 55, 116);
 const SkColor BrowserThemeProvider::kDefaultColorControlBackground = NULL;
 const SkColor BrowserThemeProvider::kDefaultColorButtonBackground = NULL;
 
@@ -330,6 +333,8 @@ const std::string BrowserThemeProvider::GetColorKey(int id) {
       return kColorNTPText;
     case COLOR_NTP_LINK:
       return kColorNTPLink;
+    case COLOR_NTP_LINK_UNDERLINE:
+      return kColorNTPLinkUnderline;
     case COLOR_NTP_HEADER:
       return kColorNTPHeader;
     case COLOR_NTP_SECTION:
@@ -338,6 +343,8 @@ const std::string BrowserThemeProvider::GetColorKey(int id) {
       return kColorNTPSectionText;
     case COLOR_NTP_SECTION_LINK:
       return kColorNTPSectionLink;
+    case COLOR_NTP_SECTION_LINK_UNDERLINE:
+      return kColorNTPSectionLinkUnderline;
     case COLOR_CONTROL_BACKGROUND:
       return kColorControlBackground;
     case COLOR_BUTTON_BACKGROUND:
@@ -403,6 +410,22 @@ SkColor BrowserThemeProvider::GetColor(int id) {
     return GetDefaultColor(id);
   }
 
+  // Special case the underline colors to use semi transparent in case not
+  // defined.
+  if (id == COLOR_NTP_SECTION_LINK_UNDERLINE) {
+    if (colors_.find(kColorNTPSectionLinkUnderline) != colors_.end())
+      return colors_[kColorNTPSectionLinkUnderline];
+    SkColor color_section_link = GetColor(COLOR_NTP_SECTION_LINK);
+    return SkColorSetA(color_section_link, SkColorGetA(color_section_link) / 3);
+  }
+
+  if (id == COLOR_NTP_LINK_UNDERLINE) {
+    if (colors_.find(kColorNTPLinkUnderline) != colors_.end())
+      return colors_[kColorNTPLinkUnderline];
+    SkColor color_link = GetColor(COLOR_NTP_LINK);
+    return SkColorSetA(color_link, SkColorGetA(color_link) / 3);
+  }
+
   // TODO(glen): Figure out if we need to tint these. http://crbug.com/11578
   ColorMap::iterator color_iter = colors_.find(GetColorKey(id));
   if (color_iter != colors_.end())
diff --git a/chrome/browser/browser_theme_provider.h b/chrome/browser/browser_theme_provider.h
index c37507f..f1475b2 100644
--- a/chrome/browser/browser_theme_provider.h
+++ b/chrome/browser/browser_theme_provider.h
@@ -38,10 +38,12 @@ class BrowserThemeProvider : public base::RefCounted<BrowserThemeProvider>,
   static const char* kColorNTPBackground;
   static const char* kColorNTPText;
   static const char* kColorNTPLink;
+  static const char* kColorNTPLinkUnderline;
   static const char* kColorNTPHeader;
   static const char* kColorNTPSection;
   static const char* kColorNTPSectionText;
   static const char* kColorNTPSectionLink;
+  static const char* kColorNTPSectionLinkUnderline;
   static const char* kColorControlBackground;
   static const char* kColorButtonBackground;
 
@@ -116,10 +118,12 @@ class BrowserThemeProvider : public base::RefCounted<BrowserThemeProvider>,
     COLOR_NTP_BACKGROUND,
     COLOR_NTP_TEXT,
     COLOR_NTP_LINK,
+    COLOR_NTP_LINK_UNDERLINE,
     COLOR_NTP_HEADER,
     COLOR_NTP_SECTION,
     COLOR_NTP_SECTION_TEXT,
     COLOR_NTP_SECTION_LINK,
+    COLOR_NTP_SECTION_LINK_UNDERLINE,
     COLOR_CONTROL_BACKGROUND,
     COLOR_BUTTON_BACKGROUND,
     TINT_BUTTONS,
diff --git a/chrome/browser/dom_ui/dom_ui_theme_source.cc b/chrome/browser/dom_ui/dom_ui_theme_source.cc
index f12dcba..8959b40 100644
--- a/chrome/browser/dom_ui/dom_ui_theme_source.cc
+++ b/chrome/browser/dom_ui/dom_ui_theme_source.cc
@@ -120,12 +120,17 @@ void DOMUIThemeSource::InitNewTabCSS() {
       tp->GetColor(BrowserThemeProvider::COLOR_NTP_BACKGROUND);
   SkColor color_text = tp->GetColor(BrowserThemeProvider::COLOR_NTP_TEXT);
   SkColor color_link = tp->GetColor(BrowserThemeProvider::COLOR_NTP_LINK);
+  SkColor color_link_underline =
+      tp->GetColor(BrowserThemeProvider::COLOR_NTP_LINK_UNDERLINE);
+
   SkColor color_section =
       tp->GetColor(BrowserThemeProvider::COLOR_NTP_SECTION);
   SkColor color_section_text =
       tp->GetColor(BrowserThemeProvider::COLOR_NTP_SECTION_TEXT);
   SkColor color_section_link =
       tp->GetColor(BrowserThemeProvider::COLOR_NTP_SECTION_LINK);
+  SkColor color_section_link_underline =
+      tp->GetColor(BrowserThemeProvider::COLOR_NTP_SECTION_LINK_UNDERLINE);
 
   SkColor color_header =
       tp->GetColor(BrowserThemeProvider::COLOR_NTP_HEADER);
@@ -172,6 +177,8 @@ void DOMUIThemeSource::InitNewTabCSS() {
   subst2.push_back(
       UTF8ToUTF16(tp->HasCustomImage(IDR_THEME_NTP_ATTRIBUTION) ?
           "block" : "none"));  // $$5
+  subst2.push_back(SkColorToRGBAString(color_link_underline));  // $$6
+  subst2.push_back(SkColorToRGBAString(color_section_link_underline));  // $$7
 
   // Get our template.
   static const StringPiece new_tab_theme_css(
diff --git a/chrome/browser/resources/new_new_tab.css b/chrome/browser/resources/new_new_tab.css
index 39d1f67..808acc7 100644
--- a/chrome/browser/resources/new_new_tab.css
+++ b/chrome/browser/resources/new_new_tab.css
@@ -186,13 +186,19 @@ html[anim='false'] *,
 .link {
   cursor: pointer;
   text-decoration: underline;
-  color: hsl(213, 90%, 24%);
+  color: hsl(213, 90%, 24%, 0.33333);
   -webkit-appearance: none;
   border: 0;
   background: none;
 }
 
+.link-color {
+  color: hsl(213, 90%, 24%);
+  text-decoration: none;
+}
+
 .thumbnail-container {
+  color: hsl(213, 90%, 24%);
   text-decoration: none;
 }
 
diff --git a/chrome/browser/resources/new_new_tab.html b/chrome/browser/resources/new_new_tab.html
index 54e136f..5bac6f6 100644
--- a/chrome/browser/resources/new_new_tab.html
+++ b/chrome/browser/resources/new_new_tab.html
@@ -1,4 +1,4 @@
-.<!DOCTYPE html>
+<!DOCTYPE html>
 <html i18n-values="
   dir:textdirection;
   firstview:firstview;
@@ -232,7 +232,9 @@ document.write('<link id="themecss" rel="stylesheet" ' +
   </div>
 
   <div id="set-as-homepage">
-    <button class="link" i18n-content="makethishomepage"></button>
+    <button class="link">
+      <span class="link-color" i18n-content="makethishomepage"></span>
+    </button>
   </div>
 
   <div id="tip-line"></div>
diff --git a/chrome/browser/resources/new_new_tab.js b/chrome/browser/resources/new_new_tab.js
index 448063d..d960b79 100644
--- a/chrome/browser/resources/new_new_tab.js
+++ b/chrome/browser/resources/new_new_tab.js
@@ -119,6 +119,7 @@ function renderTip() {
   // There should always be only one tip.
   tipElement.textContent = '';
   tipElement.appendChild(createTip(tipCache));
+  fixLinkUnderlines(tipElement);
 }
 
 function recentlyClosedTabs(data) {
@@ -765,6 +766,7 @@ function syncMessageChanged(newMessage) {
     }
     el.textContent = newMessage.linktext;
     syncStatusElement.appendChild(el);
+    fixLinkUnderline(el);
   }
 }
 
@@ -1658,4 +1660,26 @@ function parseHtmlSubset(s) {
   return df;
 }
 
+/**
+ * Makes links and buttons support a different underline color.
+ * @param {Node} node The node to search for links and buttons in.
+ */
+function fixLinkUnderlines(node) {
+  var elements = node.querySelectorAll('a,button');
+  Array.prototype.forEach.call(elements, fixLinkUnderline);
+}
+
+/**
+ * Wraps the content of an element in a a link-color span.
+ * @param {Element} el The element to wrap.
+ */
+function fixLinkUnderline(el) {
+  var span = document.createElement('span');
+  span.className = 'link-color';
+  while (el.hasChildNodes()) {
+    span.appendChild(el.firstChild);
+  }
+  el.appendChild(span);
+}
+
 updateAttribution();
diff --git a/chrome/browser/resources/new_tab_theme.css b/chrome/browser/resources/new_tab_theme.css
index 811472e..e5ba17d1 100644
--- a/chrome/browser/resources/new_tab_theme.css
+++ b/chrome/browser/resources/new_tab_theme.css
@@ -1,77 +1,102 @@
 html {
-  background-image:url(chrome://theme/theme_ntp_background?$1);
-  background-color:$2;
-  background-position:$3;
-  background-repeat:$5;
-  overflow:hidden;
+  background-image: url(chrome://theme/theme_ntp_background?$1);
+  background-color: $2; /* COLOR_NTP_BACKGROUND */
+  background-position: $3;
+  background-repeat: $5;
+  overflow: hidden;
 }
+
 html[bookmarkbarattached='true'] {
-  background-position:$4;
+  background-position: $4;
 }
+
 body {
-  color: $8;
-  height:100%;
-  overflow:auto;
+  color: $8; /* COLOR_NTP_TEXT */
+  height: 100%;
+  overflow: auto;
 }
+
 #main {
   background: url(chrome://theme/product_logo?$1) no-repeat 0 8px;
 }
+
 .thumbnail {
   border-color: $$1; /* COLOR_NTP_SECTION */
 }
+
 .thumbnail-container,
-.list > .thumbnail-container > .title,
-.list > .thumbnail-container > .title > div,
-.list .title > div,
 .thumbnail-container > .title {
-  color: $9;
+  color: $8; /* COLOR_NTP_TEXT */
+}
+
+.list > .thumbnail-container > .title {
+  color: $$6; /* COLOR_NTP_LINK_UNDERLINE */
 }
+
+.list > .thumbnail-container > .title > div,
+.list .title > div {
+  color: $9; /* COLOR_NTP_LINK */
+}
+
 .thumbnail-container:focus .thumbnail,
 .thumbnail-container:hover .thumbnail {
-  border-color: $6;
+  border-color: $6; /* COLOR_NTP_HEADER */
 }
+
 .thumbnail-container:focus .edit-bar,
 .thumbnail-container:hover .edit-bar {
-  background-color: $6;
+  background-color: $6; /* COLOR_NTP_HEADER */
   background-image: -webkit-gradient(linear, left top, left bottom,
-                                     from($7),
-                                     to($6));
+                                     from($7), /* color_header_gradient_light */
+                                     to($6)); /* COLOR_NTP_HEADER */
 }
 .thumbnail-container:hover > .edit-mode-border {
-  background-color: $6;
+  background-color: $6; /* COLOR_NTP_HEADER */
 }
 
 #view-toolbar > input {
-  background-color: $7;
+  background-color: $7; /* color_header_gradient_light */
   -webkit-mask-image: url(chrome://theme/newtab_menu_mask);
 }
+
 #option-menu > [selected] {
-  background-color: $7;
+  background-color: $7; /* color_header_gradient_light */
   color: white;
 }
 
 #recently-closed {
-  border-color: $$2; /* color_section_border */
+  border-color: $$2; /* COLOR_NTP_SECTION_BORDER */
   background-color: $$1; /* COLOR_NTP_SECTION */
   color: $$3; /* COLOR_NTP_SECTION_TEXT */
 }
-#recently-closed span,
-#recently-closed a {
+
+#recently-closed > span {
+  color: $$7; /* COLOR_NTP_SECTION_LINK_UNDERLINE */
+  text-decoration: underline;
+}
+
+#recently-closed > span > .item {
   color: $$4; /* COLOR_NTP_SECTION_LINK */
-  text-decoration:underline;
+  text-decoration: none;
 }
 
 #attribution {
-  display : $$5;
-  color: $9;
-  text-align:right;
+  display: $$5;
+  color: $9; /* COLOR_NTP_LINK */
+  text-align: right;
 }
 
 #tip-line {
   color: $8; /* COLOR_NTP_TEXT */
 }
 
-#tip-line a {
+.link-color {
   color: $9; /* COLOR_NTP_LINK */
-  text-decoration: underline;
+}
+
+:link,
+:visited,
+.link,
+.list > .thumbnail-container {
+  color: $$6; /* COLOR_NTP_LINK_UNDERLINE */
 }