Different approach to NTP layout

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%;
+}
+
+#main,
+.section,
+.maxiview {
   width: 920px;
 }
 
 html[dir=rtl] #main {
   background-position-x: 100%;
 }
 
 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 * {
   -webkit-transition: none !important;
   -webkit-animation: none !important;
 }
 
 :link,
 :visited,
 .link {
@@ skipping 140 matching lines @@
                                to(rgb(228, 229, 240)));
   width: auto;
   max-width: 300px;
 }
 
 .hbox {
   display: -webkit-box;
   -webkit-box-orient: horizontal;
 }
 
-#sync-status {
-  display: none;
+#sync-status > div {
   border-radius: 6px;
   padding: 5px 0;
-  margin: 10px 0;
+  margin: 10px 0 20px;
   white-space: nowrap;
   overflow-x: hidden;
 }
 
-#sync-status > * {
+#sync-status > div > * {
   display: inline-block;
   max-width: none;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   font-size: 100%;
   margin: 0 10px;
 }
 
 .notification.hidden {
@@ skipping 70 matching lines @@
 }
 
 #debug > h2 {
   color: red;
 }
 
 #debug > div {
   margin: 0;
 }
 
-.section > * {
+.section {
+  position: fixed;
   font-size: 12px;
-  width: 920px;
 }
 
 .section.disabled {
   display: none !important;
 }
 
-.section > div {
-  padding-bottom: 20px;
-}
-
-#apps-section-content {
-  /* This one is special because the app buttons already have a lot of empty
-     space around them. */
-  margin-top: -5px;
-  padding-bottom: 5px;
-}
-
 .section > h2 {
   font-family: Helvetica, Arial, sans-serif;
   font-size: 16px;
   font-weight: normal;
   margin: 0;
-  position: fixed;
-  z-index: 2;
+  position: relative;
 }
 
 .section:not([noexpand]) > h2 {
   cursor: pointer;
 }
 
 .section > h2 > .disclosure {
   position: absolute;
   left: -15px;
-  top: 19px;
+  top: 4px;
 }
 
 .section:not(.hidden) > h2 > .disclosure {
   -webkit-transform:rotate(90deg);
 }
 
-.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;
   left: 0;
-  top: 24px;
+  top: 9px;
   width: 100%;
   height: 24px;
   z-index: 1;
 }
 
 .section > h2 span {
   padding-right: 5px;
   position: relative;
   z-index: 2;
 }
 
 .section > h2 .settings-wrapper {
   position: absolute;
-  top: 13px;
+  top: -1px;
   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
   a gear would be better. */
   background-image: url(chrome://theme/IDR_BALLOON_WRENCH);
   background-position: center center;
   background-repeat: no-repeat;
   background-size: 100%;
 }
 
 .section.hidden > h2 .settings-wrapper {
   display: none;
 }
 
-.section > .maxiview {
+.maxiview {
+  padding: 5px 0 30px;
   position: absolute;
+  -webkit-mask-attachment: fixed;
 }
 
 .section > .miniview {
   display: none;
-  position: fixed;
-  z-index: 2;
+  height: 24px;
+  margin: 10px 0 30px;
+  overflow: hidden;
 }
 
 .section.hidden > * {
   display: none;
 }
 
 .section.hidden > h2,
 .section.hidden > .miniview {
   display: block;
 }
 
 .section.hidden > h2 {
   margin-right: 0;
 }
 
-.miniview {
-  white-space: nowrap;
-  overflow-x: hidden;
+.maxiview.hidden {
+  display: none;
 }
 
 .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;
 }
 
 .miniview > span:last-child {
   margin-right: 0;
 }
 
 /* small */
 
 @media (max-width: 940px) {
 
   #main,
-  .section > * {
+  .section,
+  .maxiview {
     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;
   }
 }