Reserve right-most column of apps grid for web store icon.

When there is less than one complete row of apps, position the
web store icon naturally in the grid, to the right of the other
apps.

Once there is at least one complete row, position the web store
icon at the top of the right-most column.

BUG=58857
TEST=Install a few apps. Web store icon should be in top row
directly to the right of the other apps. Install more apps.
Once you have more than one row, web store icon should stay
in top right corner by itself. No other apps should go below
it.

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

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

1 files changed, 15 insertions, 6 deletions

diff --git a/chrome/browser/resources/ntp/apps.js b/chrome/browser/resources/ntp/apps.js
index da91af7..a3ba154 100644
--- a/chrome/browser/resources/ntp/apps.js
+++ b/chrome/browser/resources/ntp/apps.js
@@ -2,17 +2,20 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+var MAX_APPS_PER_ROW = [];
+MAX_APPS_PER_ROW[LayoutMode.SMALL] = 4;
+MAX_APPS_PER_ROW[LayoutMode.NORMAL] = 6;
+
 function getAppsCallback(data) {
   logEvent('received apps');
   var appsSection = $('apps');
-  var appsSectionContent = $('apps-maxiview');
+  var appsSectionContent = $('apps-content');
   var appsMiniview = appsSection.getElementsByClassName('miniview')[0];
   var appsPromo = $('apps-promo');
+  var webStoreEntry;
 
   appsMiniview.textContent = '';
-  while (appsSectionContent.lastChild != appsPromo) {
-    appsSectionContent.removeChild(appsSectionContent.lastChild);
-  }
+  appsSectionContent.textContent = '';
 
   data.apps.sort(function(a,b) {
     return a.app_launch_index - b.app_launch_index
@@ -24,10 +27,11 @@ function getAppsCallback(data) {
     layoutSections();
   } else {
     data.apps.forEach(function(app) {
-        appsSectionContent.appendChild(apps.createElement(app));
+      appsSectionContent.appendChild(apps.createElement(app));
     });
 
-    appsSectionContent.appendChild(apps.createWebStoreElement());
+    webStoreEntry = apps.createWebStoreElement();
+    appsSectionContent.appendChild(webStoreEntry);
 
     data.apps.slice(0, MAX_MINIVIEW_ITEMS).forEach(function(app) {
       appsMiniview.appendChild(apps.createMiniviewElement(app));
@@ -48,6 +52,11 @@ function getAppsCallback(data) {
   maybeDoneLoading();
 
   if (data.apps.length > 0 && isDoneLoading()) {
+    if (!data.showPromo && data.apps.length >= MAX_APPS_PER_ROW[layoutMode])
+      webStoreEntry.classList.add('loner');
+    else
+      webStoreEntry.classList.remove('loner');
+
     updateMiniviewClipping(appsMiniview);
     layoutSections();
   }