Make it possible to hide "most visited" on nnnnnnntp

chrome/browser/resources/new_new_tab.js

Index: chrome/browser/resources/new_new_tab.js
diff --git a/chrome/browser/resources/new_new_tab.js b/chrome/browser/resources/new_new_tab.js
index c201dda05bb3340e319f85152aa2aa12bc320b43..b7e292accaabe82acb0f1b501a652d6a1f1ce26e 100644
--- a/chrome/browser/resources/new_new_tab.js
+++ b/chrome/browser/resources/new_new_tab.js
@@ -9,6 +9,95 @@ var MAX_MINIVIEW_ITEMS = 15;
 // Extra spacing at the top of the layout.
 var LAYOUT_SPACING_TOP = 25;
 
+function getSectionCloseButton(sectionId) {
+  return document.querySelector('#' + sectionId + ' .section-close-button');
+}
+
+function getSectionMenuButton(sectionId) {
+  return $(sectionId + '-button');
+}
+
+function getSectionMenuButtonTextId(sectionId) {
+  return sectionId.replace(/-/g, '');
+}
+
+function setSectionVisible(sectionId, section, visible, hideMask) {
+  if (visible && !(shownSections & hideMask) ||
+      !visible && (shownSections & hideMask))
+    return;
+
+  if (visible) {
+    // Because sections are collapsed when they are minimized, it is not
+    // necessary to restore the maxiview here. It will happen if the section
+    // header is clicked.
+    var el = $(sectionId);
+    el.classList.remove('disabled');
+    el = getSectionMenuButton(sectionId);
+    el.classList.add('disabled');
+    shownSections &= ~hideMask;
+  } else {
+    if (section) {
+      hideSection(section);  // To hide the maxiview.
+    }
+    var el = $(sectionId);
+    el.classList.add('disabled');
+    el = getSectionMenuButton(sectionId);
+    el.classList.remove('disabled');
+    shownSections |= hideMask;
+  }
+  layoutSections();
+}
+
+function clearClosedMenu(menu) {
+  menu.innerHTML = '';
+}
+
+function addClosedMenuEntryWithLink(menu, a) {
+  var span = document.createElement('span');
+  a.className += ' item menuitem';
+  span.appendChild(a);
+  menu.appendChild(span);
+}
+
+function addClosedMenuEntry(menu, url, title, imageUrl) {
+  var a = document.createElement('a');
+  a.href = url;
+  a.textContent = title;
+  a.style.backgroundImage = 'url(' + imageUrl + ')';
+  addClosedMenuEntryWithLink(menu, a);
+}
+
+function addClosedMenuFooter(menu, sectionId, mask, opt_section) {
+  menu.appendChild(document.createElement('hr'));
+
+  var span = document.createElement('span');
+  var a = span.appendChild(document.createElement('a'));
+  a.href = '';
+  a.textContent =
+      localStrings.getString(getSectionMenuButtonTextId(sectionId));
+  a.className = 'item';
+  a.addEventListener(
+      'click',
+      function(e) {
+        getSectionMenuButton(sectionId).hideMenu();
+        e.preventDefault();
+        setSectionVisible(sectionId, opt_section, true, mask);
+        shownSections &= ~mask;
+        saveShownSections();
+      });
+  menu.appendChild(span);
+}
+
+function initializeSection(sectionId, mask, opt_section) {
+  var button = getSectionCloseButton(sectionId);
+  button.addEventListener(
+    'click',
+    function() {
+      setSectionVisible(sectionId, opt_section, false, mask);
+      saveShownSections();
+    });
+}
+
 function updateSimpleSection(id, section) {
   var elm = $(id);
   var maxiview = getSectionMaxiview(elm);
@@ -38,10 +127,14 @@ function renderRecentlyClosed() {
   var recentElement = $('recently-closed');
   var parentEl = recentElement.lastElementChild;
   parentEl.textContent = '';
+  var recentMenu = $('recently-closed-menu');
+  clearClosedMenu(recentMenu);
 
   recentItems.forEach(function(item) {
     parentEl.appendChild(createRecentItem(item));
+    addRecentMenuItem(recentMenu, item);
   });
+  addClosedMenuFooter(recentMenu, 'recently-closed', MINIMIZED_RECENT);
 
   layoutRecentlyClosed();
 }
@@ -70,6 +163,26 @@ function createRecentItem(data) {
   return wrapperEl;
 }
 
+function addRecentMenuItem(menu, data) {
+  var isWindow = data.type == 'window';
+  var a = document.createElement('a');
+  if (isWindow) {
+    a.textContent = formatTabsText(data.tabs.length);
+    a.className = 'window';  // To get the icon from the CSS .window rule.
+    a.href = '';  // To make underline show up.
+  } else {
+    a.href = data.url;
+    a.style.backgroundImage = 'url(chrome://favicon/' + data.url + ')';
+    a.textContent = data.title;
+  }
+  function clickHandler(e) {
+    chrome.send('reopenTab', [String(data.sessionId)]);
+    e.preventDefault();
+  }
+  a.addEventListener('click', clickHandler);
+  addClosedMenuEntryWithLink(menu, a);
+}
+
 function saveShownSections() {
   chrome.send('setShownSections', [String(shownSections)]);
 }
@@ -202,6 +315,9 @@ function layoutSections() {
   for (; section = sections[i]; i++) {
     footerHeight += section.fixedHeight;
   }
+  // Leave room for bottom bar if it's visible.
+  footerHeight += $('closed-sections-bar').offsetHeight;
+
 
   // Determine the height to use for the expanded section. If there isn't enough
   // space to show the expanded section completely, this will be the available
@@ -305,6 +421,7 @@ function getSectionMaxiview(section) {
   return $(section.id + '-maxiview');
 }
 
+// You usually want to call |showOnlySection()| instead of this.
 function showSection(section) {
   if (!(section & shownSections)) {
     shownSections |= section;
@@ -328,6 +445,17 @@ function showSection(section) {
   }
 }
 
+// Show this section and hide all other sections - at most one section can
+// be open at one time.
+function showOnlySection(section) {
+  for (var p in Section) {
+    if (p == section)
+      showSection(Section[p]);
+    else
+      hideSection(Section[p]);
+  }
+}
+
 function hideSection(section) {
   if (section & shownSections) {
     shownSections &= ~section;
@@ -374,6 +502,15 @@ function setShownSections(newShownSections) {
     else
       hideSection(Section[key]);
   }
+  setSectionVisible(
+      'apps', Section.APPS,
+      !(newShownSections & MINIMIZED_APPS), MINIMIZED_APPS);
+  setSectionVisible(
+      'most-visited', Section.THUMB,
+      !(newShownSections & MINIMIZED_THUMB), MINIMIZED_THUMB);
+  setSectionVisible(
+      'recently-closed', undefined,
+      !(newShownSections & MINIMIZED_RECENT), MINIMIZED_RECENT);
   layoutSections();
 }
 
@@ -386,7 +523,9 @@ function layoutRecentlyClosed() {
   updateMiniviewClipping(miniview);
 
   if (miniview.hasChildNodes()) {
-    recentElement.classList.remove('disabled');
+    if (!(shownSections & MINIMIZED_RECENT)) {
+      recentElement.classList.remove('disabled');
+    }
   } else {
     recentElement.classList.add('disabled');
   }
@@ -685,12 +824,7 @@ function toggleSectionVisibilityAndAnimate(section) {
   if (shownSections & Section[section]) {
     hideSection(Section[section]);
   } else {
-    for (var p in Section) {
-      if (p == section)
-        showSection(Section[p]);
-      else
-        hideSection(Section[p]);
-    }
+    showOnlySection(section);
   }
   layoutSections();
   saveShownSections();
@@ -928,6 +1062,7 @@ updateAttribution();
 var mostVisited = new MostVisited(
     $('most-visited-maxiview'),
     document.querySelector('#most-visited .miniview'),
+    $('most-visited-menu'),
     useSmallGrid(),
     shownSections & Section.THUMB);