Make NTP look good with themes.

BUG=52913
TEST=Visual inspection.

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

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

7 files changed, 130 insertions, 99 deletions

diff --git a/chrome/browser/dom_ui/ntp_resource_cache.cc b/chrome/browser/dom_ui/ntp_resource_cache.cc
index 8fd21f4..56b1290 100644
--- a/chrome/browser/dom_ui/ntp_resource_cache.cc
+++ b/chrome/browser/dom_ui/ntp_resource_cache.cc
@@ -459,15 +459,12 @@ void NTPResourceCache::CreateNewTabCSS() {
   subst2.push_back(SkColorToRGBAString(
       color_section_header_text_hover)); // $$9
 
-  // A fully transparent version of the background color --- used for gradients.
+  subst3.push_back(SkColorToRGBAString(color_section_header_rule));  // $$$1
   subst3.push_back(SkColorToRGBAString(
-      SkColorSetA(color_background, 0)));  // $$$1
-
-  // TODO(aa): It seems we could generate sensible defaults for all these colors
-  // for better backward compat with old themes.
-  subst3.push_back(SkColorToRGBAString(color_section_header_rule));  // $$$2
+      color_section_header_rule_light));  // $$$2
   subst3.push_back(SkColorToRGBAString(
-      color_section_header_rule_light));  // $$$3
+      SkColorSetA(color_section_header_rule, 0)));  // $$$3
+
 
   // Get our template.
   static const base::StringPiece new_tab_theme_css(
diff --git a/chrome/browser/resources/new_new_tab.css b/chrome/browser/resources/new_new_tab.css
index 8987445..ba2c150 100644
--- a/chrome/browser/resources/new_new_tab.css
+++ b/chrome/browser/resources/new_new_tab.css
@@ -31,6 +31,15 @@ html[mode=app-launcher] #main {
   min-height: 50px;
 }
 
+#top-spacer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 5px;
+  z-index: 2;
+}
+
 html[anim=false] *,
 .no-anim, .no-anim *,
 .loading * {
@@ -178,7 +187,7 @@ html[dir=rtl] .item {
   pointer-events: none;
   border: 1px solid rgb(118, 118, 118);
   border-radius: 3px;
-  padding: 0px 3px;
+  padding: 0 3px;
   background: -webkit-gradient(linear, left top, left bottom,
                                from(white),
                                to(rgb(228, 229, 240)));
@@ -306,67 +315,80 @@ html[dir=rtl] #option-menu > [command=hide]:before {
 
 #apps-section-content {
   /* This one is special because the app buttons already have a lot of empty
-  space around them. */
+     space around them. */
   margin-top: -5px;
   padding-bottom: 5px;
 }
 
 .section > h2 {
-  display: block;
   font-family: Helvetica, Arial, sans-serif;
   font-size: 16px;
   font-weight: normal;
   margin: 0;
-  padding: 15px 0;
   position: fixed;
   z-index: 2;
 }
 
-.section:not(.hidden) > h2 {
-  background-position: 0 0, 0 100%;
-  background-repeat: no-repeat;
-  background-size: 100% 39px, 100% 10px;
-}
-
-.section:not(.hidden) + .section > h2 {
-  background-position: 0 0, 0 100%;
-  background-repeat: no-repeat;
-  background-size: 100% 10px, 100% 39px;
-}
-
 .section:not([noexpand]) > h2 {
   cursor: pointer;
 }
 
 .section > h2 > .disclosure {
-  margin-left: -13px;
-  padding-right: 4px;
+  position: absolute;
+  left: -15px;
+  top: 19px;
 }
 
 .section:not(.hidden) > h2 > .disclosure {
   -webkit-transform:rotate(90deg);
 }
 
-.section > h2 > .back {
+.section > h2 > .mask {
+  padding: 15px 0;
+}
+
+.section:not(.hidden) > h2 > .mask {
+  /* NOTE: 0.75 ~= 29/39 (for 10px of gradient) */
+  -webkit-mask-image: 
+      -webkit-gradient(linear, 0% 0%, 0% 100%, from(black),
+                       color-stop(0.75, black), to(transparent));
+}
+
+.section:not(.hidden) + .section > h2 > .mask {
+  /* NOTE: 0.25 ~= 10/39 (for 10px of gradient) */
+  -webkit-mask-image: 
+      -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent),
+                       color-stop(0.25, black), to(black));
+}
+
+.section > h2 .back {
   position: absolute;
-  bottom: 5px;
   left: 0;
+  top: 24px;
   width: 100%;
-  height: 19px;
-  background-repeat: no-repeat;
+  height: 24px;
   z-index: 1;
 }
 
-.section > h2 > span {
+.section > h2 span {
   padding-right: 5px;
   position: relative;
   z-index: 2;
 }
 
-.section > h2 > .settings {
+.section > h2 .settings-wrapper {
   position: absolute;
-  top: 18px;
+  top: 13px;
   right: 0;
+  width: 21px;
+  height: 21px;
+  z-index: 3;
+}
+
+.section > h2 .settings {
+  position: absolute;
+  left: 5px;
+  top: 5px;
   width: 11px;
   height: 11px;
   /* TODO(aa): Need a better image. This one is semi-transparent. Also, I think
@@ -375,12 +397,9 @@ html[dir=rtl] #option-menu > [command=hide]:before {
   background-position: center center;
   background-repeat: no-repeat;
   background-size: 100%;
-  border-style: solid;
-  border-width: 0 5px 0 6px;
-  z-index: 2;
 }
 
-.section.hidden > h2 > .settings {
+.section.hidden > h2 .settings-wrapper {
   display: none;
 }
 
@@ -404,7 +423,7 @@ html[dir=rtl] #option-menu > [command=hide]:before {
 }
 
 .section.hidden > h2 {
-  margin-right: 0px;
+  margin-right: 0;
 }
 
 .miniview {
diff --git a/chrome/browser/resources/new_new_tab.html b/chrome/browser/resources/new_new_tab.html
index ae85056..71e796b 100644
--- a/chrome/browser/resources/new_new_tab.html
+++ b/chrome/browser/resources/new_new_tab.html
@@ -129,19 +129,31 @@ if ('mode' in hashParams) {
     <span class="link"><span class="link-color"></span></span>
   </div>
 
+  <div id="top-spacer"></div>
+
   <div class="sections">
     <!-- Start disabled. We only enable if we have at least one app. -->
     <div class="section disabled" section="APPS" id="apps-section">
-      <h2><img class="disclosure" img src="ntp/ntp_disclosure_triangle.png"
-        ><span i18n-content="apps"></span><div class="back"></div></h2>
+      <h2>
+        <img class="disclosure" img src="ntp/ntp_disclosure_triangle.png">
+        <div class="mask">
+          <div class="back"></div>
+          <span i18n-content="apps"></span>
+        </div>
+      </h2>
       <div class="maxiview" id="apps-section-content"></div>
       <div class="miniview"></div>
     </div>
 
     <div id="most-visited-section" class="section" section="THUMB">
-      <h2><img class="disclosure" src="ntp/ntp_disclosure_triangle.png"
-        ><span i18n-content="mostvisited"></span
-        ><div class="settings"></div><div class="back"></div></h2>
+      <h2>
+        <img class="disclosure" src="ntp/ntp_disclosure_triangle.png">
+        <div class="mask">
+          <div class="back"></div>
+          <span i18n-content="mostvisited"></span>
+          <div class="settings-wrapper"><div class="settings"></div></div>
+        </div>
+      </h2>
       <div class="maxiview" id="most-visited"></div>
       <div class="miniview"></div>
     </div>
@@ -150,8 +162,12 @@ if ('mode' in hashParams) {
          silly without any. -->
     <div id="recently-closed" class="section hidden disabled" section="RECENT"
         noexpand="true">
-      <h2><span i18n-content="recentlyclosed"></span
-        ><div class="back"></div></h2>
+      <h2>
+        <div class="mask">
+          <div class="back"></div>
+          <span i18n-content="recentlyclosed"></span>
+        </div>
+      </h2>
       <div class="miniview"></div>
     </div>
 
diff --git a/chrome/browser/resources/new_new_tab.js b/chrome/browser/resources/new_new_tab.js
index 89297c5c..a5e7b76 100644
--- a/chrome/browser/resources/new_new_tab.js
+++ b/chrome/browser/resources/new_new_tab.js
@@ -720,7 +720,7 @@ OptionMenu.prototype = {
 };
 
 var optionMenu = new OptionMenu(
-    document.querySelector('#most-visited-section h2 .settings'),
+    document.querySelector('#most-visited-section h2 .settings-wrapper'),
     $('option-menu'));
 optionMenu.commands = {
   'clear-all-blacklisted' : function() {
diff --git a/chrome/browser/resources/new_tab_theme.css b/chrome/browser/resources/new_tab_theme.css
index 790516a..8c60877 100644
--- a/chrome/browser/resources/new_tab_theme.css
+++ b/chrome/browser/resources/new_tab_theme.css
@@ -1,11 +1,22 @@
-html {
-  background-image: url(chrome://theme/IDR_THEME_NTP_BACKGROUND?$1);
+html,
+#top-spacer,
+.miniview,
+.section > h2 .mask,
+.section > h2 .settings-wrapper,
+.section > h2 span {
+  background-attachment: fixed;
   background-color: $2; /* COLOR_NTP_BACKGROUND */
+  background-image: url(chrome://theme/IDR_THEME_NTP_BACKGROUND?$1);
   background-position: $3;
   background-repeat: $5;
 }
 
-html[bookmarkbarattached='true'] {
+html[bookmarkbarattached='true'],
+html[bookmarkbarattached='true'] #top-spacer,
+html[bookmarkbarattached='true'] .miniview,
+html[bookmarkbarattached='true'] .section > h2 .mask,
+html[bookmarkbarattached='true'] .section > h2 .settings-wrapper,
+html[bookmarkbarattached='true'] .section > h2 span {
   background-position: $4;
 }
 
@@ -69,12 +80,12 @@ body {
   color: $8; /* COLOR_NTP_TEXT */
 }
 
-.miniview > span > span {
+.miniview > span {
   color: $$6; /* COLOR_NTP_LINK_UNDERLINE */
   text-decoration: underline;
 }
 
-.miniview > span > span > .item {
+.miniview > span > .item {
   color: $9; /* COLOR_NTP_LINK */
   text-decoration: none;
 }
@@ -99,48 +110,28 @@ body {
   color: $$6; /* COLOR_NTP_LINK_UNDERLINE */
 }
 
-.section > h2 {
-  background-color: $2; /* COLOR_NTP_BACKGROUND */
-  color: $$8; /* COLOR_NTP_SECTION_HEADER_TEXT */
-}
-
-.section:not(.hidden) > h2 {
-  background-color: transparent;
-  background-image:
-      -webkit-gradient(linear, 0% 0%, 0% 100%, from($2), to($2)),
-      -webkit-gradient(linear, 0% 0%, 0% 100%, from($2), to($$$1));
+.section:not(.hidden) > h2 > .mask {
   color: $$9;
 }
 
-.section:not(.hidden) + .section > h2 {
-  background-color: transparent;
-  background-image:
-      -webkit-gradient(linear, 0% 0%, 0% 100%, from($$$1), to($2)),
-      -webkit-gradient(linear, 0% 0%, 0% 100%, from($2), to($2));
-}
-
-.section.hidden:not([noexpand]) > h2:hover {
+.section.hidden:not([noexpand]) > h2:hover > .mask {
   color: $$9;
 }
 
-.section > h2 > span {
-  background: $2; /* COLOR_NTP_BACKGROUND */
-}
-
-.section > h2 > .back {
+.section > h2 .back {
   background-image:
       -webkit-gradient(radial, 50% -1753, 1750, 50% -1753, 1770,
-                       from($$$2), to($$$1));
-  border-top: 1px solid $$$2; /* COLOR_NTP_SECTION_HEADER_RULE */
+                       from($$$1), to($$$3));
+  border-top: 1px solid $$$1; /* COLOR_NTP_SECTION_HEADER_RULE */
 }
 
-.section.hidden > h2 > .back {
+.section.hidden > h2 .back {
   background: none;
-  border-color-top: $$$3; /* COLOR_NTP_SECTION_HEADER_RULE_LIGHT */
+  border-color-top: $$$2; /* COLOR_NTP_SECTION_HEADER_RULE_LIGHT */
 }
 
-.section.hidden:hover > h2 > .back {
-  border-color-top: $$$2; /* COLOR_NTP_SECTION_HEADER_RULE */
+.section.hidden:hover > h2 .back {
+  border-color-top: $$$1; /* COLOR_NTP_SECTION_HEADER_RULE */
 }
 
 .section > h2 > .settings {
@@ -148,10 +139,6 @@ body {
   border-color: $2; /* COLOR_NTP_BACKGROUND */
 }
 
-.section > .miniview {
-  background: $2; /* COLOR_NTP_BACKGROUND */
-}
-
 #apps-section .app a {
   color: $8; /* COLOR_NTP_TEXT */
 }
diff --git a/chrome/browser/themes/browser_theme_provider.cc b/chrome/browser/themes/browser_theme_provider.cc
index 04075a8..7283a71 100644
--- a/chrome/browser/themes/browser_theme_provider.cc
+++ b/chrome/browser/themes/browser_theme_provider.cc
@@ -43,6 +43,13 @@ SkColor TintForUnderline(SkColor input) {
   return SkColorSetA(input, SkColorGetA(input) / 3);
 }
 
+SkColor IncreaseLightness(SkColor color, double percent) {
+  color_utils::HSL result;
+  color_utils::SkColorToHSL(color, &result);
+  result.l += (1 - result.l) * percent;
+  return color_utils::HSLToSkColor(result, SkColorGetA(color));
+}
+
 // Default colors.
 const SkColor kDefaultColorFrame = SkColorSetRGB(66, 116, 201);
 const SkColor kDefaultColorFrameInactive = SkColorSetRGB(161, 182, 228);
@@ -79,10 +86,6 @@ const SkColor kDefaultColorNTPHeader = SkColorSetRGB(75, 140, 220);
 const SkColor kDefaultColorNTPSection = SkColorSetRGB(229, 239, 254);
 const SkColor kDefaultColorNTPSectionText = SK_ColorBLACK;
 const SkColor kDefaultColorNTPSectionLink = SkColorSetRGB(6, 55, 116);
-const SkColor kDefaultColorNTPSectionHeaderText = SkColorSetRGB(76, 76, 76);
-const SkColor kDefaultColorNTPSectionHeaderRule = SkColorSetRGB(179, 179, 179);
-const SkColor kDefaultColorNTPSectionHeaderRuleLight =
-    SkColorSetRGB(220, 220, 220);
 const SkColor kDefaultColorControlBackground = SkColorSetARGB(0, 0, 0, 0);
 const SkColor kDefaultColorButtonBackground = SkColorSetARGB(0, 0, 0, 0);
 #if defined(OS_MACOSX)
@@ -224,6 +227,19 @@ SkColor BrowserThemeProvider::GetColor(int id) const {
   if (theme_pack_.get() && theme_pack_->GetColor(id, &color))
     return color;
 
+  // For backward compat with older themes, some newer colors are generated from
+  // older ones if they are missing.
+  switch (id) {
+    case COLOR_NTP_SECTION_HEADER_TEXT:
+      return IncreaseLightness(GetColor(COLOR_NTP_TEXT), 0.30);
+    case COLOR_NTP_SECTION_HEADER_TEXT_HOVER:
+      return GetColor(COLOR_NTP_TEXT);
+    case COLOR_NTP_SECTION_HEADER_RULE:
+      return IncreaseLightness(GetColor(COLOR_NTP_TEXT), 0.70);
+    case COLOR_NTP_SECTION_HEADER_RULE_LIGHT:
+      return IncreaseLightness(GetColor(COLOR_NTP_TEXT), 0.86);
+  }
+
   return GetDefaultColor(id);
 }
 
@@ -448,14 +464,6 @@ SkColor BrowserThemeProvider::GetDefaultColor(int id) {
       return kDefaultColorNTPSectionLink;
     case COLOR_NTP_SECTION_LINK_UNDERLINE:
       return TintForUnderline(kDefaultColorNTPSectionLink);
-    case COLOR_NTP_SECTION_HEADER_TEXT:
-      return kDefaultColorNTPSectionHeaderText;
-    case COLOR_NTP_SECTION_HEADER_TEXT_HOVER:
-      return kDefaultColorNTPText;
-    case COLOR_NTP_SECTION_HEADER_RULE:
-      return kDefaultColorNTPSectionHeaderRule;
-    case COLOR_NTP_SECTION_HEADER_RULE_LIGHT:
-      return kDefaultColorNTPSectionHeaderRuleLight;
     case COLOR_CONTROL_BACKGROUND:
       return kDefaultColorControlBackground;
     case COLOR_BUTTON_BACKGROUND:
diff --git a/chrome/browser/themes/browser_theme_provider.h b/chrome/browser/themes/browser_theme_provider.h
index dddffa7..d2b75bf 100644
--- a/chrome/browser/themes/browser_theme_provider.h
+++ b/chrome/browser/themes/browser_theme_provider.h
@@ -72,15 +72,19 @@ class BrowserThemeProvider : public NonThreadSafe,
     COLOR_NTP_LINK_UNDERLINE,
     COLOR_NTP_HEADER,
     COLOR_NTP_SECTION,
-    COLOR_NTP_SECTION_HEADER_TEXT,
-    COLOR_NTP_SECTION_HEADER_TEXT_HOVER,
-    COLOR_NTP_SECTION_HEADER_RULE,
-    COLOR_NTP_SECTION_HEADER_RULE_LIGHT,
     COLOR_NTP_SECTION_TEXT,
     COLOR_NTP_SECTION_LINK,
     COLOR_NTP_SECTION_LINK_UNDERLINE,
     COLOR_CONTROL_BACKGROUND,
     COLOR_BUTTON_BACKGROUND,
+
+    // These colors don't have constant default values. They are derived from
+    // the runtime value of other colors.
+    COLOR_NTP_SECTION_HEADER_TEXT,
+    COLOR_NTP_SECTION_HEADER_TEXT_HOVER,
+    COLOR_NTP_SECTION_HEADER_RULE,
+    COLOR_NTP_SECTION_HEADER_RULE_LIGHT,
+
     TINT_BUTTONS,
     TINT_FRAME,
     TINT_FRAME_INACTIVE,