Add an accordian effect to NTP.

chrome/browser/resources/new_new_tab.css

 html {
   /* This is needed because of chrome://theme/css/new_tab.css */
   height: 100%;
 }
 
 body {
   margin: 0;
   height: 100%;
   overflow: auto;
   -webkit-user-select: none;
   cursor: default;
 }
 
 html[mode=app-launcher] {
   height: auto;
 }
 
 #main {
   -webkit-box-sizing: border-box;
   -webkit-transition: width .15s;
   margin: 0 auto;
   min-height: 100%;
-  padding:10px 0 20px;
-  position: relative;
   width: 920px;
 }
 
 html[dir=rtl] #main {
   background-position-x: 100%;
 }
 
 html[mode=app-launcher] #main {
   min-height: 50px;
 }
@@ skipping 175 matching lines @@
   text-overflow: ellipsis;
   font-size: 100%;
   margin: 0 10px;
 }
 
 .notification.hidden {
   opacity: 0;
   pointer-events: none;
 }
 
-#option-button {
-  -webkit-appearance: none;
-  background-color: transparent;
-  width: 19px;
-  height: 17px;
-  position: absolute;
-  right: 0;
-  left: auto;
-  top: 20px;
-  border: 0;
-  padding: 0;
-  vertical-align: top;
-  -webkit-margin-start: 10px;
-  /* Do not show focus outline */
-  outline: none;
-  background-image: url(chrome://theme/IDR_NEWTAB_OPTION);
-}
-
-#option-button:hover,
-#option-button:focus {
-  background-image: url(chrome://theme/IDR_NEWTAB_OPTION_H);
-}
-
-#option-button:active,
-#option-button.open {
-  background-image: url(chrome://theme/IDR_NEWTAB_OPTION_P);
-}
-
 #option-menu {
   right: 0;
   left: auto;
   min-width: 175px;
+  z-index: 3;
 }
 
 html[dir=rtl] #option-button,
 html[dir=rtl] #option-menu {
   right: auto;
   left: 0;
 }
 
 #option-menu > * {
   /* Work around rendering bug. */
@@ skipping 53 matching lines @@
 #debug > h2 {
   color: red;
 }
 
 #debug > div {
   margin: 0;
 }
 
 .section > * {
   font-size: 12px;
+  width: 920px;
 }
 
 .section.disabled {
   display: none !important;
 }
 
 .section > div {
-  margin-bottom: 15px;
+  padding-bottom: 20px;
 }
 
 #apps-section-content {
   /* This one is special because the app buttons already have a lot of empty
   space around them. */
-  margin-bottom: 5px;
+  margin-top: -5px;
+  padding-bottom: 5px;
 }
 
 .section > h2 {
-  background-position: 0 center;
-  background-repeat: no-repeat;
-  -webkit-background-size: 100% 26px;
   display: block;
   font-family: Helvetica, Arial, sans-serif;
   font-size: 16px;
   font-weight: normal;
-  margin:10px 0;
-  -webkit-margin-collapse: separate;
+  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 > img {
-  margin-left:-13px;
-  padding-right:4px;
+/* The first one is special because we want a little extra space at the top of
+the layout. */
+.section:first-child > h2 {
+  padding-top: 20px;
+  background-size: 100% 44px, 100% 10px;
 }
 
-.section:not(.hidden) > h2 > img {
+.section > h2 > .disclosure {
+  margin-left: -13px;

[arv (Not doing code reviews), 2010/08/31 21:13:59]

-webkit-margin-start: -13px;
-webkit-padding-end: 4px;

+  padding-right: 4px;
+}
+
+.section:not(.hidden) > h2 > .disclosure {
   -webkit-transform:rotate(90deg);
 }
 
+.section > h2 > .back {
+  position: absolute;
+  bottom: 5px;
+  left: 0;
+  width: 100%;
+  height: 19px;
+  background-repeat: no-repeat;
+  z-index: 1;
+}
+
 .section > h2 > span {
-  padding-right: 4px;
+  padding-right: 5px;

[arv (Not doing code reviews), 2010/08/31 21:13:59]

rtl

+  position: relative;
+  z-index: 2;
+}
+
+.section > h2 > .settings {
+  position: absolute;
+  top: 18px;
+  right: 0;

[arv (Not doing code reviews), 2010/08/31 21:13:59]

rtl

Here you need to add another css rule that overrides the right and left

html[dir=rtl] .section > h2 > .settings {
  right: auto;
  left: 0;
}

+  width: 11px;
+  height: 11px;
+  /* TODO(aa): Need a better image. This one is semi-transparent. Also, I think
+  a gear would be better. */
+  background-image: url(chrome://theme/IDR_BALLOON_WRENCH);
+  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 {
+  display: none;
+}
+
+.section > .maxiview {
+  position: absolute;
 }
 
 .section > .miniview {
   display: none;
-  /* Because the items have 10px horizontal margins. */
-  margin-left:-10px;
-  margin-right:-10px;
+  position: fixed;
+  z-index: 2;
 }
 
 .section.hidden > * {
   display: none;
 }
 
 .section.hidden > h2,
 .section.hidden > .miniview {
   display: block;
 }
@@ skipping 10 matching lines @@
 .miniview > span  {
   display: inline-block;
   max-width: 114px; /* Selected so that we can fit 5 items in EN-US */
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   font-size: 100%;
   margin: 0 10px;
 }
 
+.miniview > span:first-child {
+  margin-left: 0;

[arv (Not doing code reviews), 2010/08/31 21:13:59]

rtl?

+}
+
+.miniview > span:last-child {
+  margin-right: 0;
+}
+
 /* small */
 
 @media (max-width: 940px) {
 
-  #main {
+  #main,
+  .section > * {
     width: 692px;
   }
 
   #notification > * {
     max-width: 300px;
   }
 
   #notification > span > .blacklist-title {
     max-width: 15ex;
   }
 }
 
 /* Ensure we have at least 10px horizontal marging. */
 @media (max-width: 712px) {
   #main {
     margin-left: 10px;
     margin-right: 10px;
   }
 }