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

4 files changed, 98 insertions, 76 deletions

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 */
 }