Add the collapsed 'miniview' to the apps and most visisted sections. Also, fix the bug where the wrench disappears on hover.

BUG=53248,52199

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

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

8 files changed, 64 insertions, 16 deletions

diff --git a/chrome/browser/resources/extension_default_icon.png b/chrome/browser/resources/extension_default_icon.png
deleted file mode 100644
index 31aaf05..0000000
--- a/chrome/browser/resources/extension_default_icon.png
+++ /dev/null
diff --git a/chrome/browser/resources/new_new_tab.css b/chrome/browser/resources/new_new_tab.css
index edf9612..5f27622 100644
--- a/chrome/browser/resources/new_new_tab.css
+++ b/chrome/browser/resources/new_new_tab.css
@@ -134,7 +134,6 @@ html[anim=false] *,
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  text-decoration: none;
   font-size: 100%;
 }
 
@@ -194,10 +193,6 @@ html[dir=rtl] .item {
   -webkit-box-orient: horizontal;
 }
 
-#most-visited {
-  margin-bottom: 20px;
-}
-
 #sync-status {
   display: none;
   border-radius: 6px;
@@ -334,7 +329,13 @@ html[dir=rtl] #option-menu > [command=hide]:before {
 }
 
 .section > div {
-  margin-bottom: 10px;
+  margin-bottom: 15px;
+}
+
+#apps-section-content {
+  /* This one is special because the app buttons already have a lot of empty
+  space around them. */
+  margin-bottom: 5px;
 }
 
 .section > h2 {
@@ -368,6 +369,9 @@ html[dir=rtl] #option-menu > [command=hide]:before {
 
 .section > .miniview {
   display: none;
+  /* Because the items have 10px horizontal margins. */
+  margin-left:-10px;
+  margin-right:-10px;
 }
 
 .section.hidden > * {
diff --git a/chrome/browser/resources/new_new_tab.html b/chrome/browser/resources/new_new_tab.html
index 6b60be9..cf93d2d 100644
--- a/chrome/browser/resources/new_new_tab.html
+++ b/chrome/browser/resources/new_new_tab.html
@@ -144,12 +144,14 @@ if ('mode' in hashParams) {
       <h2><img src="ntp/ntp_disclosure_triangle.png"
         ><span i18n-content="apps"></span></h2>
       <div id="apps-section-content"></div>
+      <div class="miniview"></div>
     </div>
 
     <div id="most-visited-section" class="section" section="THUMB">
       <h2><img src="ntp/ntp_disclosure_triangle.png"
         ><span i18n-content="mostvisited"></span></h2>
       <div id="most-visited"></div>
+      <div class="miniview"></div>
     </div>
 
     <!-- Start this section disabled because it might not have data, and looks
diff --git a/chrome/browser/resources/new_new_tab.js b/chrome/browser/resources/new_new_tab.js
index a03969a..2255005 100644
--- a/chrome/browser/resources/new_new_tab.js
+++ b/chrome/browser/resources/new_new_tab.js
@@ -2,6 +2,10 @@
 // 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;
+
 var loading = true;
 
 function updateSimpleSection(id, section) {
@@ -872,9 +876,11 @@ function fixLinkUnderline(el) {
 
 updateAttribution();
 
-var mostVisited = new MostVisited($('most-visited'),
-                                  useSmallGrid(),
-                                  shownSections & Section.THUMB);
+var mostVisited = new MostVisited(
+    $('most-visited'),
+    $('most-visited-section').getElementsByClassName('miniview')[0],
+    useSmallGrid(),
+    shownSections & Section.THUMB);
 
 function mostVisitedPages(data, firstRun) {
   logEvent('received most visited pages');
diff --git a/chrome/browser/resources/new_tab_theme.css b/chrome/browser/resources/new_tab_theme.css
index d37693a..40225de 100644
--- a/chrome/browser/resources/new_tab_theme.css
+++ b/chrome/browser/resources/new_tab_theme.css
@@ -124,7 +124,7 @@ body {
   background: $2; /* COLOR_NTP_BACKGROUND */
 }
 
-#apps-section a {
+#apps-section .app a {
   color: $8; /* COLOR_NTP_TEXT */
 }
 
diff --git a/chrome/browser/resources/ntp/apps.css b/chrome/browser/resources/ntp/apps.css
index 3acaedd..5398044 100644
--- a/chrome/browser/resources/ntp/apps.css
+++ b/chrome/browser/resources/ntp/apps.css
@@ -65,7 +65,7 @@
 
 .app > .front > .flip:hover {
   -webkit-transition: none;
-  background-image: url(chrome://theme/IDR_BALLOON_WRENCH_HOVER);
+  background-image: url(chrome://theme/IDR_BALLOON_WRENCH_H);
 }
 
 .app:hover > .front > .flip,
@@ -122,7 +122,7 @@
   -webkit-transition: opacity .5s;
 }
 
-#web-store-entry {
+a[app_id=web-store-entry] {
   background-image: url("web_store_icon.png");
 }
 
diff --git a/chrome/browser/resources/ntp/apps.js b/chrome/browser/resources/ntp/apps.js
index 64b490f..61712e4 100644
--- a/chrome/browser/resources/ntp/apps.js
+++ b/chrome/browser/resources/ntp/apps.js
@@ -6,13 +6,19 @@ function getAppsCallback(data) {
   logEvent('recieved apps');
   var appsSection = $('apps-section');
   var appsSectionContent = $('apps-section-content');
+  var appsMiniview = appsSection.getElementsByClassName('miniview')[0];
   appsSectionContent.textContent = '';
+  appsMiniview.textContent = '';
 
   data.apps.forEach(function(app) {
     appsSectionContent.appendChild(apps.createElement(app));
   });
 
   appsSectionContent.appendChild(apps.createWebStoreElement());
+
+  data.apps.slice(0, MAX_MINIVIEW_ITEMS).forEach(function(app) {
+    appsMiniview.appendChild(apps.createMiniviewElement(app));
+  });
 }
 
 var apps = {
@@ -41,7 +47,7 @@ var apps = {
     var left = rect.left + ((rect.width - width) >> 1);  // Integer divide by 2.
     var top = rect.top + parseInt(cs.backgroundPositionY, 10);
 
-    chrome.send('launchApp', [this.id, launchType,
+    chrome.send('launchApp', [this.getAttribute("app_id"), launchType,
                               String(left), String(top),
                               String(width), String(height)]);
     return false;
@@ -55,7 +61,7 @@ var apps = {
     front.className = 'front';
 
     var a = front.appendChild(document.createElement('a'));
-    a.id = app['id'];
+    a.setAttribute('app_id', app['id']);
     a.xtitle = a.textContent = app['name'];
     a.href = app['launch_url'];
 
@@ -68,7 +74,7 @@ var apps = {
     var a = front.firstChild;
 
     a.onclick = apps.handleClick_;
-    a.style.backgroundImage = url(app['icon']);
+    a.style.backgroundImage = url(app['icon_big']);
     if (hashParams['app-id'] == app['id']) {
       div.setAttribute('new', 'new');
       // Delay changing the attribute a bit to let the page settle down a bit.
@@ -111,6 +117,20 @@ var apps = {
     return div;
   },
 
+  createMiniviewElement: function(app) {
+    var span = document.createElement('span');
+    var a = span.appendChild(document.createElement('a'));
+
+    a.setAttribute('app_id', app['id']);
+    a.textContent = app['name'];
+    a.href = app['launch_url'];
+    a.onclick = apps.handleClick_;
+    a.style.backgroundImage = url(app['icon_small']);
+    a.className = 'item';
+    span.appendChild(a);
+    return span;
+  },
+
   createWebStoreElement: function() {
     return this.createElement_({
       'id': 'web-store-entry',
diff --git a/chrome/browser/resources/ntp/most_visited.js b/chrome/browser/resources/ntp/most_visited.js
index 23ea4b2..acb0200 100644
--- a/chrome/browser/resources/ntp/most_visited.js
+++ b/chrome/browser/resources/ntp/most_visited.js
@@ -41,8 +41,9 @@ var MostVisited = (function() {
     return Array.prototype.indexOf.call(nodes, el);
   }
 
-  function MostVisited(el, useSmallGrid, visible) {
+  function MostVisited(el, miniview, useSmallGrid, visible) {
     this.element = el;
+    this.miniview = miniview;
     this.useSmallGrid_ = useSmallGrid;
     this.visible_ = visible;
 
@@ -501,6 +502,7 @@ var MostVisited = (function() {
       // On setting we need to update the items
       this.data_ = data;
       this.updateMostVisited_();
+      this.updateMiniview_();
     },
 
     updateMostVisited_: function() {
@@ -555,6 +557,20 @@ var MostVisited = (function() {
       }
     },
 
+    updateMiniview_: function() {
+      this.miniview.textContent = '';
+      var data = this.data.slice(0, MAX_MINIVIEW_ITEMS);
+      for (var i = 0, item; item = data[i]; i++) {
+        var span = document.createElement('span');
+        var a = span.appendChild(document.createElement('a'));
+        a.href = item.url;
+        a.textContent = item.title;
+        a.style.backgroundImage = url('chrome://favicon/' + item.url);
+        a.className = 'item';
+        this.miniview.appendChild(span);
+      }
+    },
+
     handleClick_: function(e) {
       var target = e.target;
       if (target.classList.contains('pin')) {