Update the web store promo to be clearer and configurable at run-time.

chrome/browser/resources/ntp/apps.js

 // Copyright (c) 2011 The Chromium Authors. All rights reserved.
 // 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');
 
   // In the case of prefchange-triggered updates, we don't receive this flag.
   // Just leave it set as it was before in that case.
   if ('showPromo' in data)
     apps.showPromo = data.showPromo;
 
   var appsSection = $('apps');
   var appsSectionContent = $('apps-content');
   var appsMiniview = appsSection.getElementsByClassName('miniview')[0];
   var appsPromo = $('apps-promo');
+  var appsPromoLink = $('apps-promo-link');
   var appsPromoPing = APP_LAUNCH_URL.PING_WEBSTORE + '+' + apps.showPromo;
   var webStoreEntry, webStoreMiniEntry;
 
   // Hide menu options that are not supported on the OS or windowing system.
 
   // The "Launch as Window" menu option.
   $('apps-launch-type-window-menu-item').hidden = data.disableAppWindowLaunch;
 
   // The "Create App Shortcut" menu option.
   $('apps-create-shortcut-command-menu-item').hidden =
@@ skipping 10 matching lines @@
     return a.app_launch_index - b.app_launch_index;
   });
 
   // Determines if the web store link should be detached and place in the
   // top right of the screen.
   apps.detachWebstoreEntry =
       !apps.showPromo && data.apps.length >= MAX_APPS_PER_ROW[layoutMode];
 
   markNewApps(data.apps);
   apps.data = data.apps;
-  if (!apps.detachWebstoreEntry)
-    apps.data.push('web-store-entry');
 
   clearClosedMenu(apps.menu);
 
   // We wait for the app icons to load before displaying them, but never wait
   // longer than 200ms.
   apps.loadedImages = 0;
   apps.imageTimer = setTimeout(apps.showImages.bind(apps), 200);
 
   data.apps.forEach(function(app) {
     appsSectionContent.appendChild(apps.createElement(app));
   });
 
-  webStoreEntry = apps.createWebStoreElement();
-  webStoreEntry.querySelector('a').setAttribute('ping', appsPromoPing);
-  appsSectionContent.appendChild(webStoreEntry);
+  if (data.showPromo) {
+    // Add the promo content...
+    $('apps-promo-heading').textContent = data.promoHeader;
+    appsPromoLink.href = data.promoLink;
+    appsPromoLink.textContent = data.promoButton;
+    appsPromoLink.ping = appsPromoPing;
+    $('apps-promo-hide').textContent = data.promoExpire;
+
+    // ... then display the promo.
+    document.documentElement.classList.add('apps-promo-visible');
+  } else {
+    document.documentElement.classList.remove('apps-promo-visible');
+  }
+
+  // Only show the web store entry if there are apps installed, since the promo
+  // is sufficient otherwise.
+  if (data.apps.length > 0) {
+    webStoreEntry = apps.createWebStoreElement();
+    webStoreEntry.querySelector('a').ping = appsPromoPing;
+    appsSectionContent.appendChild(webStoreEntry);
+    if (apps.detachWebstoreEntry) {
+      webStoreEntry.classList.add('loner');
+    } else {
+      webStoreEntry.classList.remove('loner');
+      apps.data.push('web-store-entry');
+    }
+  }
 
   data.apps.slice(0, MAX_MINIVIEW_ITEMS).forEach(function(app) {
     appsMiniview.appendChild(apps.createMiniviewElement(app));
     addClosedMenuEntryWithLink(apps.menu, apps.createClosedMenuElement(app));
   });
   if (data.apps.length < MAX_MINIVIEW_ITEMS) {
     webStoreMiniEntry = apps.createWebStoreMiniElement();
-    webStoreEntry.querySelector('a').setAttribute('ping', appsPromoPing);
+    webStoreMiniEntry.querySelector('a').ping = appsPromoPing;
     appsMiniview.appendChild(webStoreMiniEntry);
     addClosedMenuEntryWithLink(apps.menu,
                                apps.createWebStoreClosedMenuElement());
   }
 
   if (!data.showLauncher)
     hideSection(Section.APPS);
   else
     appsSection.classList.remove('disabled');
 
   addClosedMenuFooter(apps.menu, 'apps', MENU_APPS, Section.APPS);
 
   apps.loaded = true;
-  if (apps.showPromo)
-    document.documentElement.classList.add('apps-promo-visible');
-  else
-    document.documentElement.classList.remove('apps-promo-visible');
 
-  var appsPromoLink = $('apps-promo-link');
   if (appsPromoLink)
-    appsPromoLink.setAttribute('ping', appsPromoPing);
+    appsPromoLink.ping = appsPromoPing;
   maybeDoneLoading();
 
   // Disable the animations when the app launcher is being (re)initailized.
   apps.layout({disableAnimations:true});
 
-  if (apps.detachWebstoreEntry)
-    webStoreEntry.classList.add('loner');
-  else
-    webStoreEntry.classList.remove('loner');
-
   if (isDoneLoading()) {
     updateMiniviewClipping(appsMiniview);
     layoutSections();
   }
 }
 
 function markNewApps(data) {
   var oldData = apps.data;
   data.forEach(function(app) {
     if (hashParams['app-id'] == app['id']) {
@@ skipping 51 matching lines @@
     if (opt_mouseEvent) {
       // Launch came from a click - add details of the click
       // Otherwise it came from a 'command' event from elsewhere in the UI.
       args.push(opt_mouseEvent.altKey, opt_mouseEvent.ctrlKey,
                 opt_mouseEvent.metaKey, opt_mouseEvent.shiftKey,
                 opt_mouseEvent.button);
     }
     chrome.send('launchApp', args);
   }
 
+  function isAppSectionMaximized() {
+    return getAppLaunchType() == APP_LAUNCH.NTP_APPS_MAXIMIZED &&
+      !$('apps').classList.contains('disabled');
+  }
+
   function isAppsMenu(node) {
     return node.id == 'apps-menu';
   }
 
   function getAppLaunchType() {
     // We determine if the apps section is maximized, collapsed or in menu mode
     // based on the class of the apps section.
     if ($('apps').classList.contains('menu'))
       return APP_LAUNCH.NTP_APPS_MENU;
     else if ($('apps').classList.contains('collapsed'))
@@ skipping 21 matching lines @@
   };
 
   // Keep in sync with LaunchContainer in extension_constants.h
   var LaunchContainer = {
     LAUNCH_WINDOW: 0,
     LAUNCH_PANEL: 1,
     LAUNCH_TAB: 2
   };
 
   var currentApp;
+  var promoHasBeenSeen = false;
 
   function addContextMenu(el, app) {
     el.addEventListener('contextmenu', cr.ui.contextMenuHandler);
     el.addEventListener('keydown', cr.ui.contextMenuHandler);
     el.addEventListener('keyup', cr.ui.contextMenuHandler);
 
     Object.defineProperty(el, 'contextMenu', {
       get: function() {
         currentApp = app;
 
@@ skipping 111 matching lines @@
 
     visible_: true,
     get visible() {
       return this.visible_;
     },
     set visible(visible) {
       this.visible_ = visible;
       this.invalidate_();
     },
 
+    maybePingPromoSeen_: function() {
+      if (promoHasBeenSeen || !this.showPromo || !isAppSectionMaximized())
+        return;
+
+      promoHasBeenSeen = true;
+      chrome.send('promoSeen', []);
+    },
+
     // DragAndDropDelegate
 
     dragContainer: $('apps-content'),
     transitionsDuration: 200,
 
     get dragItem() { return this.dragItem_; },
     set dragItem(dragItem) {
       if (this.dragItem_ != dragItem) {
         this.dragItem_ = dragItem;
         this.invalidate_();
@@ skipping 197 matching lines @@
           // We need to re-enable animations asynchronously, so that the
           // animations are still disabled for this layout update.
           setTimeout(function() {
             container.setAttribute('launcher-animations', true);
           }, 0);
         }
       }
     },
 
     layoutImpl_: function() {
-      var apps = this.data;
+      var apps = this.data || [];
       var rects = this.getLayoutRects_(apps.length);
       var appsContent = this.dragContainer;
 
+      // Ping the PROMO_SEEN histogram only when the promo is maximized, and
+      // maximum once per NTP load.
+      this.maybePingPromoSeen_();
+
       if (!this.visible)
         return;
 
       for (var i = 0; i < apps.length; i++) {
         var app = appsContent.querySelector('[app-id='+apps[i]+']').parentNode;
 
         // If the node is being dragged, don't try to place it in the grid.
         if (app == this.dragItem)
           continue;
 
@@ skipping 63 matching lines @@
     showImages: function() {
       $('apps-content').classList.add('visible');
       clearTimeout(this.imageTimer);
     },
 
     createElement: function(app) {
       var div = createElement(app);
       var a = div.firstChild;
 
       a.onclick = handleClick;
-      a.setAttribute('ping',
-          getAppPingUrl('PING_BY_ID', this.showPromo, 'NTP_APPS_MAXIMIZED'));
+      a.ping = getAppPingUrl(
+          'PING_BY_ID', this.showPromo, 'NTP_APPS_MAXIMIZED');
       a.style.backgroundImage = url(app['icon_big']);
       if (app.isNew) {
         div.setAttribute('new', 'new');
         // Delay changing the attribute a bit to let the page settle down a bit.
         setTimeout(function() {
           // Make sure the new icon is scrolled into view.
           document.body.scrollTop = document.body.scrollHeight;
 
           // This will trigger the 'bounce' animation defined in apps.css.
           div.setAttribute('new', 'installed');
@@ skipping 18 matching lines @@
     },
 
     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 = handleClick;
-      a.setAttribute('ping',
-          getAppPingUrl('PING_BY_ID', this.showPromo, 'NTP_APPS_COLLAPSED'));
+      a.ping = getAppPingUrl(
+          'PING_BY_ID', this.showPromo, 'NTP_APPS_COLLAPSED');
       a.style.backgroundImage = url(app['icon_small']);
       a.className = 'item';
       span.appendChild(a);
 
       addContextMenu(span, app);
 
       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.setAttribute('ping',
-          getAppPingUrl('PING_BY_ID', this.showPromo, 'NTP_APPS_MENU'));
+      a.ping = getAppPingUrl(
+          'PING_BY_ID', this.showPromo, 'NTP_APPS_MENU');
       a.style.backgroundImage = url(app['icon_small']);
       a.className = 'item';
 
       addContextMenu(a, app);
 
       return a;
     },
 
     createWebStoreElement: function() {
       var elm = createElement({
@@ skipping 17 matching lines @@
       a.href = localStrings.getString('web_store_url');
       a.style.backgroundImage = url('chrome://theme/IDR_PRODUCT_LOGO_16');
       a.className = 'item';
       return a;
     }
   };
 })();
 
 // Enable drag and drop reordering of the app launcher.
 var appDragAndDrop = new DragAndDropController(apps);