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();
   }