Make the 'recently closed' section uncollapseable by adding a

'nocollapse' feature to the sections.

screencap:
http://aaronboodman.com/z_dropbox/cr3141046/ntp5.png

BUG=53248

Review URL: http://codereview.chromium.org/3141046

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@57640 0039d316-1c4b-4281-b951-d872f2087c98

4 files changed, 79 insertions, 93 deletions

diff --git a/chrome/browser/resources/new_new_tab.css b/chrome/browser/resources/new_new_tab.css
index fe76ed2..edf9612 100644
--- a/chrome/browser/resources/new_new_tab.css
+++ b/chrome/browser/resources/new_new_tab.css
@@ -194,41 +194,10 @@ html[dir=rtl] .item {
   -webkit-box-orient: horizontal;
 }
 
-#recently-closed {
-  white-space: nowrap;
-  overflow-x: hidden;
-}
-
-#recently-closed > span > 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;
-}
-
-#recently-closed > span,
-#recently-closed .nav {
-  max-width: none !important;
-}
-
 #most-visited {
   margin-bottom: 20px;
 }
 
-.nav > a {
-  /* no icon */
-  padding: 0;
-}
-
-.nav > a:after {
-  content: '\00bb'; /* raque gets flipped automatically in rtl */
-  font-size: 115%;
-  -webkit-padding-start: 2px;
-}
-
 #sync-status {
   display: none;
   border-radius: 6px;
@@ -356,6 +325,10 @@ html[dir=rtl] #option-menu > [command=hide]:before {
   margin: 0;
 }
 
+.section > * {
+  font-size: 12px;
+}
+
 .section.disabled {
   display: none !important;
 }
@@ -368,7 +341,6 @@ html[dir=rtl] #option-menu > [command=hide]:before {
   background-position: 0 center;
   background-repeat: no-repeat;
   -webkit-background-size: 100% 26px;
-  cursor: pointer;
   display: block;
   font-family: Helvetica, Arial, sans-serif;
   font-size: 16px;
@@ -377,6 +349,10 @@ html[dir=rtl] #option-menu > [command=hide]:before {
   -webkit-margin-collapse: separate;
 }
 
+.section:not([noexpand]) > h2 {
+  cursor: pointer;
+}
+
 .section > h2 > img {
   margin-left:-13px;
   padding-right:4px;
@@ -390,32 +366,36 @@ html[dir=rtl] #option-menu > [command=hide]:before {
   padding-right: 4px;
 }
 
-.section.hidden {
-  border: 0;
+.section > .miniview {
+  display: none;
 }
 
-.section.hidden > :not(h2) {
-  display: none !important;
+.section.hidden > * {
+  display: none;
 }
 
-.section.hidden > h2 {
-  margin-right: 0px;
+.section.hidden > h2,
+.section.hidden > .miniview {
+  display: block;
 }
 
-.section.hidden:last-child {
-  border-right: 0;
+.section.hidden > h2 {
+  margin-right: 0px;
 }
 
-.section:last-child {
-  border-bottom: 0;
+.miniview {
+  white-space: nowrap;
+  overflow-x: hidden;
 }
 
-.section .nav {
+.miniview > span  {
   display: inline-block;
-}
-
-.section > * {
-  font-size: 12px;
+  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;
 }
 
 /* small */
diff --git a/chrome/browser/resources/new_new_tab.html b/chrome/browser/resources/new_new_tab.html
index 0c04940..6b60be9 100644
--- a/chrome/browser/resources/new_new_tab.html
+++ b/chrome/browser/resources/new_new_tab.html
@@ -152,9 +152,12 @@ if ('mode' in hashParams) {
       <div id="most-visited"></div>
     </div>
 
-    <div id="recently-closed" class="section" section="RECENT">
+    <!-- Start this section disabled because it might not have data, and looks
+         silly without any. -->
+    <div id="recently-closed" class="section hidden disabled" section="RECENT"
+        noexpand="true">
       <h2><span i18n-content="recentlyclosed"></span></h2>
-      <span class="nav"></span>
+      <div class="miniview"></div>
     </div>
 
     <div id="debug" class="section disabled" section="DEBUG">
@@ -174,9 +177,9 @@ if ('mode' in hashParams) {
   </div>
 
   <script>
-    updateSimpleSection('recently-closed', Section.RECENT);
-    updateSimpleSection('most-visited-section', Section.THUMB);
     updateSimpleSection('apps-section', Section.APPS);
+    updateSimpleSection('most-visited-section', Section.THUMB);
+    updateSimpleSection('recently-closed', Section.RECENT);
     updateSimpleSection('debug', Section.DEBUG);
   </script>
 
diff --git a/chrome/browser/resources/new_new_tab.js b/chrome/browser/resources/new_new_tab.js
index c0f32bf..a03969a 100644
--- a/chrome/browser/resources/new_new_tab.js
+++ b/chrome/browser/resources/new_new_tab.js
@@ -111,9 +111,6 @@ function showSection(section) {
         mostVisited.visible = true;
         mostVisited.layout();
         break;
-      case Section.RECENT:
-        renderRecentlyClosed();
-        break;
     }
   }
 }
@@ -127,9 +124,6 @@ function hideSection(section) {
         mostVisited.visible = false;
         mostVisited.layout();
         break;
-      case Section.RECENT:
-        renderRecentlyClosed();
-        break;
     }
 
     var el = getSectionElement(section);
@@ -154,26 +148,28 @@ function setShownSections(newShownSections) {
 // Recently closed
 
 function layoutRecentlyClosed() {
-  var recentShown = shownSections & Section.RECENT;
-
-  if (recentShown) {
-    var recentElement = $('recently-closed');
-    // We cannot use clientWidth here since the width has a transition.
-    var availWidth = useSmallGrid() ? 692 : 920;
-    var parentEl = recentElement.lastElementChild;
-
-    // Now go backwards and hide as many elements as needed.
-    var elementsToHide = [];
-    for (var el = parentEl.lastElementChild; el;
-         el = el.previousElementSibling) {
-      if (el.offsetLeft + el.offsetWidth > availWidth) {
-        elementsToHide.push(el);
-      }
+  var recentElement = $('recently-closed');
+  // We cannot use clientWidth here since the width has a transition.
+  var availWidth = useSmallGrid() ? 692 : 920;
+  var parentEl = recentElement.lastElementChild;
+
+  // Now go backwards and hide as many elements as needed.
+  var elementsToHide = [];
+  for (var el = parentEl.lastElementChild; el;
+       el = el.previousElementSibling) {
+    if (el.offsetLeft + el.offsetWidth > availWidth) {
+      elementsToHide.push(el);
     }
+  }
 
-    elementsToHide.forEach(function(el) {
-      parentEl.removeChild(el);
-    });
+  elementsToHide.forEach(function(el) {
+    parentEl.removeChild(el);
+  });
+
+  if (parentEl.hasChildNodes()) {
+    recentElement.classList.remove('disabled');
+  } else {
+    recentElement.classList.add('disabled');
   }
 }
 
@@ -615,16 +611,22 @@ $('main').addEventListener('click', function(e) {
     p = p.parentNode;
   }
 
-  if (p) {
-    p = p.parentNode;
-    var section = p.getAttribute('section');
-    if (section) {
-      if (shownSections & Section[section])
-        hideSection(Section[section]);
-      else
-        showSection(Section[section]);
-      saveShownSections();
-    }
+  if (!p) {
+    return;
+  }
+
+  p = p.parentNode;
+  if (p.noexpand) {
+    return;
+  }
+
+  var section = p.getAttribute('section');
+  if (section) {
+    if (shownSections & Section[section])
+      hideSection(Section[section]);
+    else
+      showSection(Section[section]);
+    saveShownSections();
   }
 });
 
diff --git a/chrome/browser/resources/new_tab_theme.css b/chrome/browser/resources/new_tab_theme.css
index 7597812..d37693a 100644
--- a/chrome/browser/resources/new_tab_theme.css
+++ b/chrome/browser/resources/new_tab_theme.css
@@ -71,16 +71,16 @@ body {
   -webkit-mask-image: url(chrome://theme/IDR_NEWTAB_MENU_MASK);
 }
 
-#recently-closed {
+.miniview {
   color: $8; /* COLOR_NTP_TEXT */
 }
 
-#recently-closed > span > span {
+.miniview > span > span {
   color: $$6; /* COLOR_NTP_LINK_UNDERLINE */
   text-decoration: underline;
 }
 
-#recently-closed > span > span > .item {
+.miniview > span > span > .item {
   color: $9; /* COLOR_NTP_LINK */
   text-decoration: none;
 }
@@ -106,19 +106,20 @@ body {
 }
 
 .section > h2 {
+  color: $$9;
+  background-image: url(chrome://theme/IDR_NEWTAB_SECTION_HEADER_BACKGROUND_A);
+}
+
+.section.hidden > h2 {
   color: $$8; /* COLOR_NTP_SECTION_HEADER_TEXT */
   background-image: url(chrome://theme/IDR_NEWTAB_SECTION_HEADER_BACKGROUND);
 }
 
-.section > h2:hover {
+.section.hidden:not([noexpand]) > h2:hover {
   color: $$9;
   background-image: url(chrome://theme/IDR_NEWTAB_SECTION_HEADER_BACKGROUND_H);
 }
 
-.section:not(.hidden) > h2 {
-  background-image: url(chrome://theme/IDR_NEWTAB_SECTION_HEADER_BACKGROUND_A);
-}
-
 .section > h2 > span {
   background: $2; /* COLOR_NTP_BACKGROUND */
 }