Make it possible to hide "most visited" on nnnnnnntp

This implements http://folder/glen/chrome/spec/101_ntp/8_wish&sidebar mocks 2, 5, 6

It's a bit lame to use a bit in the "sections" bitmask to serialize the "should show?" information, but the damage here was done when someone decided to that "THUBMS bit missing" should mean "show a list instead" (instead of adding another bit for that).

BUG=55148
TEST=Hover "Most Visited" bar. Close button should appear. Clicking it should hide "Most Visited" area and add a button at the window edge. That button should have a menu that makes it possible to make the "Most Visited" area visible again. Also do this while multiple NTPs are open; the changes made in the front NTP should be synced to the background NTPs.

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

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

2 files changed, 35 insertions, 2 deletions

diff --git a/chrome/browser/resources/ntp/apps.js b/chrome/browser/resources/ntp/apps.js
index b128f05..4f577db 100644
--- a/chrome/browser/resources/ntp/apps.js
+++ b/chrome/browser/resources/ntp/apps.js
@@ -10,6 +10,7 @@ function getAppsCallback(data) {
   appsSectionContent.textContent = '';
   appsMiniview.textContent = '';
 
+  clearClosedMenu(apps.menu);
   if (data.apps.length == 0) {
     appsSection.classList.add('disabled');
     setShownSections(Section.THUMB);
@@ -22,10 +23,14 @@ function getAppsCallback(data) {
 
     data.apps.slice(0, MAX_MINIVIEW_ITEMS).forEach(function(app) {
       appsMiniview.appendChild(apps.createMiniviewElement(app));
+      addClosedMenuEntryWithLink(apps.menu, apps.createClosedMenuElement(app));
     });
 
-    appsSection.classList.remove('disabled');
+    if (!(shownSections & MINIMIZED_APPS)) {
+      appsSection.classList.remove('disabled');
+    }
   }
+  addClosedMenuFooter(apps.menu, 'apps', MINIMIZED_APPS, Section.APPS);
 
   apps.loaded = true;
   maybeDoneLoading();
@@ -199,6 +204,8 @@ var apps = (function() {
   return {
     loaded: false,
 
+    menu: $('apps-menu'),
+
     createElement: function(app) {
       var div = createElement(app);
       var a = div.firstChild;
@@ -251,6 +258,17 @@ var apps = (function() {
       return span;
     },
 
+    createClosedMenuElement: function(app) {
+      var a = document.createElement('a');
+      a.setAttribute('app-id', app['id']);
+      a.textContent = app['name'];
+      a.href = app['launch_url'];
+      a.onclick = handleClick;
+      a.style.backgroundImage = url(app['icon_small']);
+      a.className = 'item';
+      return a;
+    },
+
     createWebStoreElement: function() {
       return createElement({
         'id': 'web-store-entry',
diff --git a/chrome/browser/resources/ntp/most_visited.js b/chrome/browser/resources/ntp/most_visited.js
index 98f3317..72557ac 100644
--- a/chrome/browser/resources/ntp/most_visited.js
+++ b/chrome/browser/resources/ntp/most_visited.js
@@ -41,9 +41,10 @@ var MostVisited = (function() {
     return Array.prototype.indexOf.call(nodes, el);
   }
 
-  function MostVisited(el, miniview, useSmallGrid, visible) {
+  function MostVisited(el, miniview, menu, useSmallGrid, visible) {
     this.element = el;
     this.miniview = miniview;
+    this.menu = menu;
     this.useSmallGrid_ = useSmallGrid;
     this.visible_ = visible;
 
@@ -536,6 +537,7 @@ var MostVisited = (function() {
       this.data_ = data;
       this.updateMostVisited_();
       this.updateMiniview_();
+      this.updateMenu_();
     },
 
     updateMostVisited_: function() {
@@ -609,6 +611,19 @@ var MostVisited = (function() {
       updateMiniviewClipping(this.miniview);
     },
 
+    updateMenu_: function() {
+      clearClosedMenu(this.menu);
+      var data = this.data.slice(0, MAX_MINIVIEW_ITEMS);
+      for (var i = 0, item; item = data[i]; i++) {
+        if (!item.filler) {
+          addClosedMenuEntry(
+              this.menu, item.url, item.title, 'chrome://favicon/' + item.url);
+        }
+      }
+      addClosedMenuFooter(
+          this.menu, 'most-visited', MINIMIZED_THUMB, Section.THUMB);
+    },
+
     handleClick_: function(e) {
       var target = e.target;
       if (target.classList.contains('pin')) {