Add an accordian effect to NTP.

chrome/browser/resources/new_tab_theme.css

 html {
   background-image: url(chrome://theme/IDR_THEME_NTP_BACKGROUND?$1);
   background-color: $2; /* COLOR_NTP_BACKGROUND */
   background-position: $3;
   background-repeat: $5;
-  overflow: hidden;
 }
 
 html[bookmarkbarattached='true'] {
   background-position: $4;
 }
 
 body {
   color: $8; /* COLOR_NTP_TEXT */
   height: 100%;
   overflow: auto;
@@ skipping 42 matching lines @@
 .filler .thumbnail-wrapper {
   border: 3px solid $$1; /* COLOR_NTP_SECTION */
   background-color: $2; /* COLOR_NTP_BACKGROUND */
 }
 
 .filler .thumbnail {
   border: 1px solid $2; /* COLOR_NTP_BACKGROUND */
   background-color: $$1; /* COLOR_NTP_SECTION */
 }
 
-#option-button {
-  background-color: $7; /* color_header_gradient_light */
-  -webkit-mask-image: url(chrome://theme/IDR_NEWTAB_MENU_MASK);
-}
-
 .miniview {
   color: $8; /* COLOR_NTP_TEXT */
 }
 
 .miniview > span > span {
   color: $$6; /* COLOR_NTP_LINK_UNDERLINE */
   text-decoration: underline;
 }
 
 .miniview > span > span > .item {
@@ skipping 15 matching lines @@
   color: $9; /* COLOR_NTP_LINK */
 }
 
 :link,
 :visited,
 .link {
   color: $$6; /* COLOR_NTP_LINK_UNDERLINE */
 }
 
 .section > h2 {
-  color: $$9;
-  background-image: url(chrome://theme/IDR_NEWTAB_SECTION_HEADER_BACKGROUND_A);
+  background-color: $2; /* COLOR_NTP_BACKGROUND */
+  color: $$8; /* COLOR_NTP_SECTION_HEADER_TEXT */
 }
 
-.section.hidden > h2 {
-  color: $$8; /* COLOR_NTP_SECTION_HEADER_TEXT */
-  background-image: url(chrome://theme/IDR_NEWTAB_SECTION_HEADER_BACKGROUND);
+.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));
+  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 {
   color: $$9;
-  background-image: url(chrome://theme/IDR_NEWTAB_SECTION_HEADER_BACKGROUND_H);
 }
 
 .section > h2 > span {
   background: $2; /* COLOR_NTP_BACKGROUND */
 }
 
+.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 */
+}
+
+.section.hidden > h2 > .back {
+  background: none;
+  border-color-top: $$$3; /* COLOR_NTP_SECTION_HEADER_RULE_LIGHT */
+}
+
+.section.hidden:hover > h2 > .back {
+  border-color-top: $$$2; /* COLOR_NTP_SECTION_HEADER_RULE */
+}
+
+.section > h2 > .settings {
+  background-color: $2; /* COLOR_NTP_BACKGROUND */
+  border-color: $2; /* COLOR_NTP_BACKGROUND */
+}
+
+.section > .miniview {
+  background: $2; /* COLOR_NTP_BACKGROUND */
+}
+
 #apps-section .app a {
   color: $8; /* COLOR_NTP_TEXT */
 }
 
 #apps-section .app:hover > .front > a,
 #apps-section .app > .back {
   color: $$3; /* COLOR_NTP_SECTION_TEXT */
   background-color: $$1; /* COLOR_NTP_SECTION */;
 }