Fix layout glitches in NTP. Also, lots of naming cleanup.

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;
@@ skipping 317 matching lines @@
   -webkit-transition: top .15s;
 }
 
 #login-container {
   display: none;
   margin-top: 5px;
   position: fixed;
   text-align: end;
 }
 
-.section.disabled,
-#closed-sections-bar .disabled {
+/* A section in menu mode doesn't display its contents at all. Instead it is
+rendered as a menu along the bottom of the screen. We have a separate class for
+this so that when a hidden section is unhidden it can go back to its previous
+collapsed state. */
+.section.menu {
   display: none !important;
 }
 
+/* A disabled section is not rendered in the UI in any way. Examples of this
+state include the 'recently closed' section when we have no data for it, or this
+'sync status' section, when there is no status to display. We have a separate
+class for this so that when a section is enabled, it can go back to its previous
+menu and collapsed state. */
+.section.disabled {
+  display: none !important;
+}
+
 .section > h2 {
   font-family: Helvetica, Arial, sans-serif;
   font-size: 133%;
   font-weight: normal;
   margin: 0;
   position: relative;
 }
 
 .section:not([noexpand]) > h2 {
   cursor: pointer;
 }
 
 .section > h2 > .disclosure {
   position: absolute;
   left: -15px;
   margin-top: 50%;
   top: -5px;
 }
 
 html[dir=rtl] .section > h2 > .disclosure {
   left: auto;
   right: -15px;
   -webkit-transform: rotate(180deg);
 }
 
 html[anim=true] .section > h2 > .disclosure {
   -webkit-transition: -webkit-transform .15s;
 }
 
-.section:not(.hidden) > h2 > .disclosure {
+.section:not(.collapsed) > h2 > .disclosure {
   -webkit-transform: rotate(90deg);
 }
 
 .section > h2 .back {
   position: absolute;
   left: 0;
   top: 0.56em;
   width: 100%;
   height: 1.5em;
   z-index: 1;
@@ skipping 43 matching lines @@
 
 #closed-sections-bar:not([chromeos]) {
   bottom: 5px;
 }
 
 #closed-sections-bar[chromeos] {
   padding-top: 0.56em;
 }
 
 #closed-sections-bar > button {
+  /* We hide all these buttons by default and turn them on when needed. */
+  display: none;
+
   -webkit-appearance: none;
   background: none;
   border: 0;
   cursor: pointer;
   font: inherit;
   margin: 0;
   margin-right: 1.5em;
   padding: 2px 0 0 0;
 
   /* Note: The font here should end up the same as .section > h2. A different
@@ skipping 14 matching lines @@
   padding: 5px 0 30px;
   position: absolute;
   -webkit-mask-attachment: fixed;
   opacity: 0;
 }
 
 .maxiview.opaque {
   opacity: 1;
 }
 
-.maxiview.hiding {
+.maxiview.collapsing {
   opacity: 0;
 }
 
-.maxiview.hidden {
+.maxiview.collapsed {
   display: none;
   opacity: 0;
 }
 
 html[anim=true][enable-section-animations=true] .maxiview {
   -webkit-transition: opacity .10s, top .15s;
 }
 
 html[anim=true][enable-section-animations=true] .miniview {
   -webkit-transition: opacity .15s;
 }
 
 .section > .miniview {
   display: none;
   margin: 10px 0 30px;
   white-space: nowrap;
   overflow-x: hidden;
 }
 
-.section.hidden > * {
+.section.collapsed > * {
   display: none;
 }
 
-.section.hidden > h2 {
+.section.collapsed > h2 {
   display: block;
 }
 
-.section.hidden > .miniview {
+.section.collapsed > .miniview {
   display: block;
   opacity: 0;
 }
 
-.section.hidden > .miniview.opaque {
+.section.collapsed > .miniview.opaque {
   opacity: 1;
 }
 
-.section.hidden > h2 {
+.section.collapsed > h2 {
   margin-right: 0;
 }
 
 .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%;
@@ skipping 29 matching lines @@
   }
 }
 
 /* Ensure we have at least 10px horizontal marging. */
 @media (max-width: 712px) {
   #main {
     margin-left: 10px;
     margin-right: 10px;
   }
 }