With the recent NNTP changes, we change the way themes work - they're now closer to NTP1 theming - ntp_section_* is used to control the display of the light blue sections, and we've added ntp_header that controls the dark blue hover color, ntp_header falls back to ntp_section if provided.

Also fix a minor bug where the default theme was saving theme data - we were generating colors before saving the provided colors.

BUG=18720,18722
TEST=Install a theme and verify that the recently closed section is themed correctly.

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

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

5 files changed, 64 insertions, 32 deletions

diff --git a/chrome/browser/browser_theme_provider.cc b/chrome/browser/browser_theme_provider.cc
index ff33e43..f9aa52b 100644
--- a/chrome/browser/browser_theme_provider.cc
+++ b/chrome/browser/browser_theme_provider.cc
@@ -44,6 +44,7 @@ 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::kColorNTPHeader = "ntp_header";
 const char* BrowserThemeProvider::kColorNTPSection = "ntp_section";
 const char* BrowserThemeProvider::kColorNTPSectionText = "ntp_section_text";
 const char* BrowserThemeProvider::kColorNTPSectionLink = "ntp_section_link";
@@ -105,12 +106,14 @@ const SkColor BrowserThemeProvider::kDefaultColorNTPText =
     SkColorSetRGB(0, 0, 0);
 const SkColor BrowserThemeProvider::kDefaultColorNTPLink =
     SkColorSetRGB(0, 0, 0);
-const SkColor BrowserThemeProvider::kDefaultColorNTPSection =
+const SkColor BrowserThemeProvider::kDefaultColorNTPHeader =
     SkColorSetRGB(75, 140, 220);
+const SkColor BrowserThemeProvider::kDefaultColorNTPSection =
+    SkColorSetRGB(229, 239, 254);
 const SkColor BrowserThemeProvider::kDefaultColorNTPSectionText =
-    SkColorSetRGB(255, 255, 255);
+    SkColorSetRGB(0, 0, 0);
 const SkColor BrowserThemeProvider::kDefaultColorNTPSectionLink =
-    SkColorSetRGB(127, 148, 173);
+    SkColorSetRGB(16, 50, 105);
 const SkColor BrowserThemeProvider::kDefaultColorControlBackground = NULL;
 const SkColor BrowserThemeProvider::kDefaultColorButtonBackground = NULL;
 
@@ -282,6 +285,8 @@ const std::string BrowserThemeProvider::GetColorKey(int id) {
       return kColorNTPText;
     case COLOR_NTP_LINK:
       return kColorNTPLink;
+    case COLOR_NTP_HEADER:
+      return kColorNTPHeader;
     case COLOR_NTP_SECTION:
       return kColorNTPSection;
     case COLOR_NTP_SECTION_TEXT:
@@ -322,6 +327,8 @@ SkColor BrowserThemeProvider::GetDefaultColor(int id) {
       return kDefaultColorNTPText;
     case COLOR_NTP_LINK:
       return kDefaultColorNTPLink;
+    case COLOR_NTP_HEADER:
+      return kDefaultColorNTPHeader;
     case COLOR_NTP_SECTION:
       return kDefaultColorNTPSection;
     case COLOR_NTP_SECTION_TEXT:
@@ -341,6 +348,16 @@ SkColor BrowserThemeProvider::GetDefaultColor(int id) {
 SkColor BrowserThemeProvider::GetColor(int id) {
   DCHECK(CalledOnValidThread());
 
+  // Special-case NTP header - if the color isn't provided, we fall back to
+  // the section color.
+  if (id == COLOR_NTP_HEADER) {
+    if (colors_.find(kColorNTPHeader) != colors_.end())
+      return colors_[kColorNTPHeader];
+    else if (colors_.find(kColorNTPSection) != colors_.end())
+      return colors_[kColorNTPSection];
+    return GetDefaultColor(id);
+  }
+
   // 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())
@@ -426,9 +443,6 @@ void BrowserThemeProvider::SetTheme(Extension* extension) {
   SetTintData(extension->GetThemeTints());
   SetDisplayPropertyData(extension->GetThemeDisplayProperties());
   raw_data_.clear();
-  GenerateFrameColors();
-  GenerateFrameImages();
-  GenerateTabImages();
 
   SaveImageData(extension->GetThemeImages());
   SaveColorData();
@@ -436,6 +450,10 @@ void BrowserThemeProvider::SetTheme(Extension* extension) {
   SaveDisplayPropertyData();
   SaveThemeID(extension->id());
 
+  GenerateFrameColors();
+  GenerateFrameImages();
+  GenerateTabImages();
+
   NotifyThemeChanged();
   UserMetrics::RecordAction(L"Themes_Installed", profile_);
 }
diff --git a/chrome/browser/browser_theme_provider.h b/chrome/browser/browser_theme_provider.h
index a1db2ff..0b4eecb 100644
--- a/chrome/browser/browser_theme_provider.h
+++ b/chrome/browser/browser_theme_provider.h
@@ -38,6 +38,7 @@ class BrowserThemeProvider : public base::RefCounted<BrowserThemeProvider>,
   static const char* kColorNTPBackground;
   static const char* kColorNTPText;
   static const char* kColorNTPLink;
+  static const char* kColorNTPHeader;
   static const char* kColorNTPSection;
   static const char* kColorNTPSectionText;
   static const char* kColorNTPSectionLink;
@@ -83,6 +84,7 @@ class BrowserThemeProvider : public base::RefCounted<BrowserThemeProvider>,
   static const SkColor kDefaultColorNTPBackground;
   static const SkColor kDefaultColorNTPText;
   static const SkColor kDefaultColorNTPLink;
+  static const SkColor kDefaultColorNTPHeader;
   static const SkColor kDefaultColorNTPSection;
   static const SkColor kDefaultColorNTPSectionText;
   static const SkColor kDefaultColorNTPSectionLink;
@@ -114,6 +116,7 @@ class BrowserThemeProvider : public base::RefCounted<BrowserThemeProvider>,
     COLOR_NTP_BACKGROUND,
     COLOR_NTP_TEXT,
     COLOR_NTP_LINK,
+    COLOR_NTP_HEADER,
     COLOR_NTP_SECTION,
     COLOR_NTP_SECTION_TEXT,
     COLOR_NTP_SECTION_LINK,
diff --git a/chrome/browser/dom_ui/dom_ui_theme_source.cc b/chrome/browser/dom_ui/dom_ui_theme_source.cc
index a66d1df..b7f5aab 100644
--- a/chrome/browser/dom_ui/dom_ui_theme_source.cc
+++ b/chrome/browser/dom_ui/dom_ui_theme_source.cc
@@ -106,12 +106,23 @@ void DOMUIThemeSource::SendNewTabCSS(int request_id) {
   SkColor color_section_link =
       tp->GetColor(BrowserThemeProvider::COLOR_NTP_SECTION_LINK);
 
-  // Generate a lighter color.
-  skia::HSL section_lighter;
-  skia::SkColorToHSL(color_section, section_lighter);
-  section_lighter.l += (1 - section_lighter.l) * 0.33;
-  SkColor color_section_lighter =
-      skia::HSLToSkColor(SkColorGetA(color_section), section_lighter);
+  SkColor color_header =
+      tp->GetColor(BrowserThemeProvider::COLOR_NTP_HEADER);
+  // Generate a lighter color for the header gradients.
+  skia::HSL header_lighter;
+  skia::SkColorToHSL(color_header, header_lighter);
+  header_lighter.l += (1 - header_lighter.l) * 0.33;
+  SkColor color_header_gradient_light =
+      skia::HSLToSkColor(SkColorGetA(color_header), header_lighter);
+
+  // Generate section border color from the header color. See
+  // BookmarkBarView::Paint for how we do this for the bookmark bar
+  // borders.
+  SkColor color_section_border =
+      SkColorSetARGB(80,
+                     SkColorGetR(color_header),
+                     SkColorGetG(color_header),
+                     SkColorGetB(color_header));
 
   // Generate the replacements.
   std::vector<string16> subst;
@@ -128,13 +139,15 @@ void DOMUIThemeSource::SendNewTabCSS(int request_id) {
   subst.push_back(UTF8ToUTF16(GetNewTabBackgroundCSS(false)));  // $3
   subst.push_back(UTF8ToUTF16(GetNewTabBackgroundCSS(true)));  // $4
   subst.push_back(UTF8ToUTF16(GetNewTabBackgroundTilingCSS()));  // $5
-  subst.push_back(SkColorToRGBAString(color_section));  // $6
-  subst.push_back(SkColorToRGBAString(color_section_lighter));  // $7
+  subst.push_back(SkColorToRGBAString(color_header));  // $6
+  subst.push_back(SkColorToRGBAString(color_header_gradient_light));  // $7
   subst.push_back(SkColorToRGBAString(color_text));  // $8
   subst.push_back(SkColorToRGBAString(color_link));  // $9
 
-  subst2.push_back(SkColorToRGBAString(color_section_text));  // $$1
-  subst2.push_back(SkColorToRGBAString(color_section_link));  // $$2
+  subst2.push_back(SkColorToRGBAString(color_section));  // $$1
+  subst2.push_back(SkColorToRGBAString(color_section_border));  // $$2
+  subst2.push_back(SkColorToRGBAString(color_section_text));  // $$3
+  subst2.push_back(SkColorToRGBAString(color_section_link));  // $$4
 
   // 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 01b93ad..071439f 100644
--- a/chrome/browser/resources/new_new_tab.css
+++ b/chrome/browser/resources/new_new_tab.css
@@ -458,7 +458,7 @@ html[dir='rtl'] .item {
   -webkit-transition: opacity .15s;
   background-color: hsla(213, 60%, 92%, .4);
   border: 1px solid hsl(213, 60%, 92%);
-  -webkit-border-radius: 2px;
+  -webkit-border-radius: 5px;
   padding: 5px 0px;;
   white-space: nowrap;
   overflow-x: hidden;
@@ -478,12 +478,6 @@ html[dir='rtl'] .item {
 #recently-closed .nav {
   max-width: none;
 }
-
-#recently-closed > span {
-  color: hsl(213, 27%, 68%);
-  text-decoration: underline;
-}
-
 .nav > a {
   /* no icon */
   padding: 0;
diff --git a/chrome/browser/resources/new_tab_theme.css b/chrome/browser/resources/new_tab_theme.css
index 12ac86d..b8459aa 100644
--- a/chrome/browser/resources/new_tab_theme.css
+++ b/chrome/browser/resources/new_tab_theme.css
@@ -16,11 +16,14 @@ body {
 #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 .title > div,
 .thumbnail-container > .title {
-  color: $8;
+  color: $9;
 }
 .thumbnail-container:focus .thumbnail,
 .thumbnail-container:hover .thumbnail {
@@ -45,14 +48,15 @@ body {
   background-color: $7;
   color: white;
 }
-.tips-title {
-  color: $$1;
-}
 
-/* TODO(arv): The theme does not have the thumbnail outline color in non hover
-   mode
 #recently-closed {
-  border-color:
-  background-color:
+  border-color: $$2; /* color_section_border */
+  background-color: $$1; /* COLOR_NTP_SECTION */
+  color: $$3; /* COLOR_NTP_SECTION_TEXT */
+}
+#recently-closed span,
+#recently-closed a,
+#recently-closed a:link {
+  color: $$4; /* COLOR_NTP_SECTION_LINK */
+  text-decoration:underline;
 }
-*/