Make it possible to hide "most visited" on nnnnnnntp

chrome/browser/resources/new_new_tab.js

 // Copyright (c) 2010 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 // To avoid creating tons of unnecessary nodes. We assume we cannot fit more
 // than this many items in the miniview.
 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);
   if (shownSections & section) {
     $(id).classList.remove('hidden');
     if (maxiview)
       maxiview.classList.remove('hidden');
   } else {
     $(id).classList.add('hidden');
     if (maxiview)
       maxiview.classList.add('hidden');
   }
 }
 
 function recentlyClosedTabs(data) {
   logEvent('received recently closed tabs');
   // We need to store the recent items so we can update the layout on a resize.
   recentItems = data;
   renderRecentlyClosed();
   layoutSections();
 }
 
 var recentItems = [];
 
 function renderRecentlyClosed() {
   // Remove all existing items and create new items.
   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();
 }
 
 function createRecentItem(data) {
   var isWindow = data.type == 'window';
   var el;
   if (isWindow) {
     el = document.createElement('span');
     el.className = 'item link window';
     el.tabItems = data.tabs;
     el.tabIndex = 0;
     el.textContent = formatTabsText(data.tabs.length);
   } else {
     el = document.createElement('a');
     el.className = 'item';
     el.href = data.url;
     el.style.backgroundImage = url('chrome://favicon/' + data.url);
     el.dir = data.direction;
     el.textContent = data.title;
   }
   el.sessionId = data.sessionId;
   el.xtitle = data.title;
   var wrapperEl = document.createElement('span');
   wrapperEl.appendChild(el);
   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)]);
 }
 
 var LayoutMode = {
   SMALL: 1,
   NORMAL: 2
 };
 
 var layoutMode = useSmallGrid() ? LayoutMode.SMALL : LayoutMode.NORMAL;
@@ skipping 112 matching lines @@
       i++;
       break;
     }
   }
 
   // Calculate the height of the fixed elements below the expanded section, if
   // any.
   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
   // height. Otherwise, we use the intrinsic height of the expanded section.
   var expandedSectionHeight;
   if (expandedSection) {
     var flexHeight = window.innerHeight - headerHeight - footerHeight;
     if (flexHeight < expandedSection.scrollingHeight) {
       expandedSectionHeight = flexHeight;
 
@@ skipping 83 matching lines @@
           document.querySelector('.section[section=' + key + ']');
     }
   }
   return sectionToElementMap[section];
 }
 
 function getSectionMaxiview(section) {
   return $(section.id + '-maxiview');
 }
 
+// You usually want to call |showOnlySection()| instead of this.
 function showSection(section) {
   if (!(section & shownSections)) {
     shownSections |= section;
     var el = getSectionElement(section);
     if (el) {
       el.classList.remove('hidden');
 
       var maxiview = getSectionMaxiview(el);
       if (maxiview) {
         maxiview.classList.remove('hiding');
         maxiview.classList.remove('hidden');
       }
     }
 
     switch (section) {
       case Section.THUMB:
         mostVisited.visible = true;
         mostVisited.layout();
         break;
     }
   }
 }
 
+// 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;
 
     switch (section) {
       case Section.THUMB:
         mostVisited.visible = false;
         mostVisited.layout();
         break;
     }
@@ skipping 26 matching lines @@
  * Callback when the shown sections changes in another NTP.
  * @param {number} newShownSections Bitmask of the shown sections.
  */
 function setShownSections(newShownSections) {
   for (var key in Section) {
     if (newShownSections & Section[key])
       showSection(Section[key]);
     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();
 }
 
 // Recently closed
 
 function layoutRecentlyClosed() {
   var recentElement = $('recently-closed');
   var miniview = recentElement.getElementsByClassName('miniview')[0];
 
   updateMiniviewClipping(miniview);
 
   if (miniview.hasChildNodes()) {
-    recentElement.classList.remove('disabled');
+    if (!(shownSections & MINIMIZED_RECENT)) {
+      recentElement.classList.remove('disabled');
+    }
   } else {
     recentElement.classList.add('disabled');
   }
 }
 
 /**
  * This function is called by the backend whenever the sync status section
  * needs to be updated to reflect recent sync state changes. The backend passes
  * the new status information in the newMessage parameter. The state includes
  * the following:
@@ skipping 278 matching lines @@
     return;
 
   // It looks better to return the scroll to the top when toggling sections.
   document.body.scrollTop = 0;
 
   // We set it back in webkitTransitionEnd.
   document.documentElement.setAttribute('enable-section-animations', 'true');
   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();
 }
 
 function handleIfEnterKey(f) {
   return function(e) {
     if (e.keyIdentifier == 'Enter')
       f(e);
   };
@@ skipping 217 matching lines @@
     span.appendChild(el.firstChild);
   }
   el.appendChild(span);
 }
 
 updateAttribution();
 
 var mostVisited = new MostVisited(
     $('most-visited-maxiview'),
     document.querySelector('#most-visited .miniview'),
+    $('most-visited-menu'),
     useSmallGrid(),
     shownSections & Section.THUMB);
 
 function mostVisitedPages(data, firstRun, hasBlacklistedUrls) {
   logEvent('received most visited pages');
 
   mostVisited.updateSettingsLink(hasBlacklistedUrls);
   mostVisited.data = data;
   mostVisited.layout();
   layoutSections();
@@ skipping 12 matching lines @@
 }
 
 function maybeDoneLoading() {
   if (mostVisited.data && apps.loaded)
     document.body.classList.remove('loading');
 }
 
 function isDoneLoading() {
   return !document.body.classList.contains('loading');
 }