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

3 files changed, 58 insertions, 8 deletions

diff --git a/chrome/browser/resources/new_new_tab.html b/chrome/browser/resources/new_new_tab.html
index fa4b320..e94bf7b 100644
--- a/chrome/browser/resources/new_new_tab.html
+++ b/chrome/browser/resources/new_new_tab.html
@@ -144,6 +144,7 @@ if ('mode' in hashParams) {
       <p id="apps-promo-text1" i18n-content="appspromotext1"></p>
       <p id="apps-promo-text2" i18n-content="appspromotext2"></p>
     </div>
+    <div id="apps-content"></div>
   </div>
   <div class="maxiview" id="most-visited-maxiview"></div>
 
diff --git a/chrome/browser/resources/ntp/apps.css b/chrome/browser/resources/ntp/apps.css
index c92c7a9..3e2f8f9 100644
--- a/chrome/browser/resources/ntp/apps.css
+++ b/chrome/browser/resources/ntp/apps.css
@@ -1,5 +1,27 @@
 /* Apps */
 
+#apps-content {
+  position: relative;
+  width: intrinsic;
+  max-width: 780px;  /* (124 + margin * 2) * 6 */
+}
+
+html.apps-promo-visible #apps-content {
+  max-width: 650px; /* (124 + margin * 2) * 5 */
+}
+
+/* small */
+@media (max-width: 940px) {
+  /*
+  We don't need to do anything for html.apps-promo-visible because there is
+  enough extra space in the small grid layout.
+  */
+  #apps-content,
+  html.apps-promo-visible #apps-content {
+    max-width: 520px;  /* (124 + margin * 2) * 4 */
+  }
+}
+
 .app,
 .app[new=installed] {
   -webkit-box-sizing: border-box;
@@ -133,14 +155,32 @@ html[dir=rtl] #apps-promo-hide {
 }
 
 html.apps-promo-visible .app[app-id=web-store-entry] {
-  left: 25px;
+  position: absolute;
+  left: 100%;
+  top: 0;
+  -webkit-margin-start: 22px;
 }
 
 html.apps-promo-visible[dir=rtl] .app[app-id=web-store-entry] {
-  right: 25px;
+  right: 100%;
 }
 
 html.apps-promo-visible .app[app-id=web-store-entry] a {
   font-weight: bold;
 }
 
+/*
+We position the web store entry all by its lonesome in the top of the rightmost
+column when there is at least one full row of apps. Note that this is similar,
+but different than its position during promo (html.apps-promo-visible), so we
+never set .loner while the promo is running.
+*/
+.app[app-id=web-store-entry].loner {
+  position: absolute;
+  left: 100%;
+  top: 0;
+}
+
+html[dir=rtl] .app[app-id=web-store-entry].loner {
+  right: 100%;
+}
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();
   }