Add webui handler for promotions on Android NTP.

chrome/browser/resources/ntp_android/ntp_android.js

Index: chrome/browser/resources/ntp_android/ntp_android.js
diff --git a/chrome/browser/resources/ntp_android/ntp_android.js b/chrome/browser/resources/ntp_android/ntp_android.js
index cfed89423df0139563ff4c62c1e0cf704a6a99d9..0b05ed199ba77331ed3e430b88549b381b850475 100644
--- a/chrome/browser/resources/ntp_android/ntp_android.js
+++ b/chrome/browser/resources/ntp_android/ntp_android.js
@@ -214,6 +214,36 @@ cr.define('ntp', function() {
    */
   var promoIsAllowed = false;
 
+  /**
+   * Whether promo should be shown on Most Visited page (externally set).
+   * @type {boolean}
+   */
+  var promoIsAllowedOnMostVisited = false;
+
+  /**
+   * Whether promo should be shown on Open Tabs page (externally set).
+   * @type {boolean}
+   */
+  var promoIsAllowedOnOpenTabs = false;
+
+  /**
+   * Whether promo should show a virtual computer on Open Tabs (externally set).
+   * @type {boolean}
+   */
+  var promoIsAllowedAsVirtualComputer = false;
+
+  /**
+   * Promo-injected title of a virtual computer on an open tabs pane.
+   * @type {string}
+   */
+  var promoInjectedComputerTitleText = '';
+
+  /**
+   * Promo-injected last synced text of a virtual computer on an open tabs pane.
+   * @type {string}
+   */
+  var promoInjectedComputerLastSyncedText = '';
+
   function setIncognitoMode(incognito) {
     isIncognito = incognito;
   }
@@ -231,6 +261,7 @@ cr.define('ntp', function() {
     FOREIGN_SESSION: 5,
     FOREIGN_SESSION_HEADER: 6,
     SNAPSHOTS: 7,
+    PROMO_VC_SESSION_HEADER: 8,
     UNKNOWN: 100,
   };
 
@@ -255,6 +286,8 @@ cr.define('ntp', function() {
     RECENTLY_CLOSED_REMOVE: 22,
 
     FOREIGN_SESSIONS_REMOVE: 30,
+
+    PROMO_VC_SESSION_REMOVE: 40,
   };
 
   /**
@@ -278,7 +311,7 @@ cr.define('ntp', function() {
     WAITING_FOR_DATA: 1,
     DISPLAYING_LOADING: 2,
     DISPLAYED_LOADING: 3,
-    LOADED: 3,
+    LOADED: 4,
   };
 
   /**
@@ -398,6 +431,9 @@ cr.define('ntp', function() {
     for (var i = 0, len = titleScrollers.length; i < len; i++)
       initializeTitleScroller(titleScrollers[i]);
 
+    // Initialize virtual computers for the sync promo.
+    createPromoVirtualComputers();
+
     chrome.send('getMostVisited');
     chrome.send('getRecentlyClosedTabs');
     chrome.send('getForeignSessions');
@@ -827,11 +863,15 @@ cr.define('ntp', function() {
 
     var title = createDiv('session-name');
     title.textContent = item.title;
+    if (item.titleId)
+      title.id = item.titleId;

[Dan Beam, 2012/08/25 00:48:20]

nit: title.id = item.titleId || '';
(shorter and equivalent, or just item.titleId if it's a blank string)

[aruslan, 2012/08/27 22:19:51]

Done.

     sessionInnerDiv.appendChild(title);
 
     var lastSynced = createDiv('session-last-synced');
     lastSynced.textContent =
         templateData.opentabslastsynced + ': ' + item.userVisibleTimestamp;
+    if (item.userVisibleTimestampId)
+      lastSynced.id = item.userVisibleTimestampId;
     sessionInnerDiv.appendChild(lastSynced);
 
     sessionOuterDiv.addEventListener('click', function(evt) {
@@ -848,7 +888,7 @@ cr.define('ntp', function() {
    */
   function setNumberOfMostVisitedPages(n) {
     numberOfMostVisitedPages = n;
-    promoSetVisibility();
+    updatePromoVisibility();
   }
 
   /**
@@ -857,7 +897,7 @@ cr.define('ntp', function() {
    */
   function setHasRecentlyClosedTabs(anyTabs) {
     hasRecentlyClosedTabs = anyTabs;
-    promoSetVisibility();
+    updatePromoVisibility();
   }
 
   /**
@@ -967,7 +1007,7 @@ cr.define('ntp', function() {
    * @return {boolean} Whether the promo should be shown on most_visited.
    */
   function shouldPromoBeShownOnMostVisited() {
-    return promoIsAllowed &&
+    return promoIsAllowed && promoIsAllowedOnMostVisited &&
         (numberOfMostVisitedPages >= 2) &&
         (!hasRecentlyClosedTabs);

[Dan Beam, 2012/08/25 00:48:20]

nit: the style guide says don't use extra (), these technically are extra, so
use judgement if removing them wouldn't hurt the readability of the code

[aruslan, 2012/08/27 22:19:51]

Done.

   }
@@ -980,7 +1020,7 @@ cr.define('ntp', function() {
     var snapshotsCount =
         currentSnapshots == null ? 0 : currentSnapshots.length;
     var sessionsCount = currentSessions == null ? 0 : currentSessions.length;
-    return promoIsAllowed &&
+    return promoIsAllowed && promoIsAllowedOnOpenTabs &&
         (snapshotsCount + sessionsCount != 0);
   }
 
@@ -988,11 +1028,11 @@ cr.define('ntp', function() {
    * Checks if promo is allowed and SyncPromo requirements are satisfied.
    * @return {boolean} Whether the promo should be shown on sync_promo.
    */
-  function shouldPromoBeShownOnSyncPromo() {
+  function shouldPromoBeShownOnSync() {
     var snapshotsCount =
         currentSnapshots == null ? 0 : currentSnapshots.length;
     var sessionsCount = currentSessions == null ? 0 : currentSessions.length;
-    return promoIsAllowed &&
+    return promoIsAllowed && promoIsAllowedOnOpenTabs &&
         (snapshotsCount + sessionsCount == 0);
   }
 
@@ -1001,31 +1041,39 @@ cr.define('ntp', function() {
    * @param {string} section Active section name to check.
    */
   function promoUpdateImpressions(section) {
-    if (section == 'most_visited' && shouldPromoBeShownOnMostVisited()) {
+    if (section == 'most_visited' && shouldPromoBeShownOnMostVisited())
       chrome.send('recordImpression', ['most_visited']);
-    } else if (section == 'open_tabs' && shouldPromoBeShownOnOpenTabs()) {
+    else if (section == 'open_tabs' && shouldPromoBeShownOnOpenTabs())
       chrome.send('recordImpression', ['open_tabs']);
-    } else if (section == 'open_tabs' && shouldPromoBeShownOnSyncPromo()) {
+    else if (section == 'open_tabs' && shouldPromoBeShownOnSync())
       chrome.send('recordImpression', ['sync_promo']);
-    }
   }
 
   /**
-   * Sets the visibility on all promo-related items as necessary.
+   * Updates the visibility on all promo-related items as necessary.
    */
-  function promoSetVisibility() {
-    var mostVisited = $('promo_message_on_most_visited');
-    var openTabs = $('promo_message_on_open_tabs');
-    if (shouldPromoBeShownOnMostVisited()) {
-      mostVisited.style.display = 'block';
-    } else {
-      mostVisited.style.display = 'none';
-    }
-    if (shouldPromoBeShownOnOpenTabs()) {
-      openTabs.style.display = 'block';
-    } else {
-      openTabs.style.display = 'none';
-    }
+  function updatePromoVisibility() {
+    var mostVisitedEl = $('promo_message_on_most_visited');
+    var openTabsVCEl = $('promo_vc_list');
+    var syncPromoLegacyEl = $('promo_message_on_sync_promo_legacy');
+    var syncPromoReceivedEl = $('promo_message_on_sync_promo_received');
+    mostVisitedEl.style.display =

[Dan Beam, 2012/08/25 00:48:20]

mostVisitedEl.hidden = !shouldPromoBeShownOnMostVisited();

[aruslan, 2012/08/27 22:19:51]

The rest of the code uses style.display, and there is no reason for the promo
code to be inconsistent; let me find out whether this was an accident or the
intent, so that I could clean it up in a subsequent CL.

[Dan Beam, 2012/08/28 00:32:31]

it's probably not intentional, either way it's fine that we change later, I just
worry about how many times something has been added in the same way with
intention to possibly change later but have instead helped reinforce the
convention, ;)

+        shouldPromoBeShownOnMostVisited() ? 'block' : 'none';
+    syncPromoReceivedEl.style.display =
+        shouldPromoBeShownOnSync() ? 'block' : 'none';
+    syncPromoLegacyEl.style.display =
+        shouldPromoBeShownOnSync() ? 'none' : 'block';
+    openTabsVCEl.style.display =
+        (shouldPromoBeShownOnOpenTabs() && promoIsAllowedAsVirtualComputer) ?
+            'block' : 'none';
+  }
+
+  /**
+   * Called from native.
+   * Clears the promotion.
+   */
+  function clearPromotions() {
+    setPromotions({});
   }
 
   /**
@@ -1036,24 +1084,40 @@ cr.define('ntp', function() {
    * @param {Object} promotions Dictionary used to fill-in the text.
    */
   function setPromotions(promotions) {
-    var mostVisited = $('promo_message_on_most_visited');
-    var openTabs = $('promo_message_on_open_tabs');
-    var syncPromoLegacy = $('promo_message_on_sync_promo_legacy');
-    mostVisited.innerHTML = promotions['promoMessage'];
-    openTabs.innerHTML = promotions['promoMessage'];
-    if (promotions['promoMessageLong']) {
-      syncPromoLegacy.innerHTML = promotions['promoMessageLong'];
-    }
+    var mostVisitedEl = $('promo_message_on_most_visited');
+    var openTabsEl = $('promo_message_on_open_tabs');
+    var syncPromoReceivedEl = $('promo_message_on_sync_promo_received');
+
     promoIsAllowed = promotions['promoIsAllowed'] === true;

[Dan Beam, 2012/08/25 00:48:20]

you should use . notation instead of [''] notation if possible

[aruslan, 2012/08/27 22:19:51]

Done.

+    promoIsAllowedOnMostVisited =
+        promotions['promoIsAllowedOnMostVisited'] === true;
+    promoIsAllowedOnOpenTabs = promotions['promoIsAllowedOnOpenTabs'] === true;
+    promoIsAllowedAsVirtualComputer = promotions['promoIsAllowedAsVC'] === true;
+
+    mostVisitedEl.innerHTML = promotions['promoMessage'] || '';

[Dan Beam, 2012/08/25 00:48:20]

this is bad if there's a <script> in the message, can we just use .textContent
instead? if not, the NTP has something that parses stuff and looks for only
certain nodes and certain attributes which would probably be best to use
<http://goo.gl/ju0fH>.

[aruslan, 2012/08/27 22:19:51]

Done.

+    if (openTabsEl)
+      openTabsEl.innerHTML = promotions['promoMessage'] || '';
+    syncPromoReceivedEl.innerHTML = promotions['promoMessageLong'] || '';
+
+    promoInjectedComputerTitleText = promotions['promoVCTitle'] || '';
+    promoInjectedComputerLastSyncedText = promotions['promoVCLastSynced'] || '';
+    var openTabsVCTitleEl = $('promo_vc_title');
+    if (openTabsVCTitleEl)
+      openTabsVCTitleEl.textContent = promoInjectedComputerTitleText;
+    var openTabsVCLastSyncEl = $('promo_vc_lastsync');
+    if (openTabsVCLastSyncEl)
+      openTabsVCLastSyncEl.textContent = promoInjectedComputerLastSyncedText;
+
     if (promoIsAllowed) {
-      var promoTargets =
-          document.getElementsByClassName('promo-action-target');
-      for (var i = 0, len = promoTargets.length; i < len; i++) {
-        promoTargets[i].href = 'javascript:void(0)';
-        promoTargets[i].onclick = promoAction;
+      var promoButtonEls =
+          document.getElementsByClassName('promo-button');
+      for (var i = 0, len = promoButtonEls.length; i < len; i++) {
+        promoButtonEls[i].href = 'javascript:void(0)';

[Dan Beam, 2012/08/25 00:48:20]

hmm, why is this necessary? why not just '#' and do e.preventDefault(); in the
onclick handler?

[aruslan, 2012/08/27 22:19:51]

Done -- thanks!

+        promoButtonEls[i].onclick = executePromoAction;
+        addActiveTouchListener(promoButtonEls[i], 'promo-button-active');
       }
     }
-    promoSetVisibility();
+    updatePromoVisibility();
   }
 
   /**
@@ -1061,7 +1125,7 @@ cr.define('ntp', function() {
    * Performs the promo action "send email".
    * @param {Object} evt User interface event that triggered the action.
    */
-  function promoAction(evt) {
+  function executePromoAction(evt) {
     if (evt.preventDefault)
       evt.preventDefault();
     evt.returnValue = false;
@@ -1122,6 +1186,10 @@ cr.define('ntp', function() {
         }
         break;
 
+      case ContextMenuItemIds.PROMO_VC_SESSION_REMOVE:
+        chrome.send('promoDisabled');
+        break;
+
       default:
         log.error('Unknown context menu selected id=' + itemId);
         break;
@@ -1349,6 +1417,7 @@ cr.define('ntp', function() {
       } else {
         localStorage.removeItem(SYNC_ENABLED_KEY);
       }
+      updatePromoVisibility();
 
       if (bookmarkData) {
         // Bookmark data can now be displayed (or needs to be refiltered)
@@ -1428,7 +1497,7 @@ cr.define('ntp', function() {
       openTabsList.style.display = sessionsCount == 0 ? 'none' : 'block';
       snapshotsList.style.display = snapshotsCount == 0 ? 'none' : 'block';
     }
-    promoSetVisibility();
+    updatePromoVisibility();
   }
 
   /**
@@ -1539,6 +1608,38 @@ cr.define('ntp', function() {
   }
 
   /**
+   * Initializes the promo_vc_list div to look like a foreign session
+   * with a desktop.
+   */
+  function createPromoVirtualComputers() {
+    var list = findList('promo_vc');

[Dan Beam, 2012/08/25 00:48:20]

I'm scared of code without newlines :(

[aruslan, 2012/08/27 22:19:51]

Done.

+    list.innerHTML = '';
+    var sessionEl = createDiv();
+    list.appendChild(sessionEl);
+    var sessionHeader = createDiv('session-header');
+    sessionEl.appendChild(sessionHeader);
+    var sessionChildren = createDiv('session-children-container');
+    var promoMessage = createDiv('promo-message');
+    promoMessage.id = 'promo_message_on_open_tabs';
+    sessionChildren.appendChild(promoMessage);
+    sessionEl.appendChild(sessionChildren);
+    var expando = createDiv();
+    var expandoFunction = createExpandoFunction(expando, sessionChildren);
+
+    var headerList = [{
+      'title': promoInjectedComputerTitleText,
+      'titleId': 'promo_vc_title',
+      'userVisibleTimestamp': promoInjectedComputerLastSyncedText,
+      'userVisibleTimestampId': 'promo_vc_lastsync',
+      'iconStyle': 'laptop'
+    }];
+
+    populateData(sessionHeader, SectionType.PROMO_VC_SESSION_HEADER, headerList,
+        makeForeignSessionListEntry, expandoFunction);
+    sessionHeader.appendChild(expando);
+  }
+
+  /**
    * Called externally when updated synced sessions data is available.
    *
    * @param {Object} data The snapshot data
@@ -1754,6 +1855,8 @@ cr.define('ntp', function() {
         return 'recently_closed';
       case SectionType.SYNCED_DEVICES:
         return 'synced_devices';
+      case SectionType.PROMO_VC_SESSION_HEADER:

[Dan Beam, 2012/08/25 00:48:20]

I'm slightly confused by this, why can't this just be a map instead of a switch?
 also, you can switch on strings in JS...

[aruslan, 2012/08/27 22:19:51]

Done -- as this is not an enum, changed it to be strings everywhere.

+        return 'promo_vc_session_header';
       case SectionType.UNKNOWN:
       default:
         return 'unknown';
@@ -2328,6 +2431,11 @@ cr.define('ntp', function() {
           [ContextMenuItemIds.FOREIGN_SESSIONS_REMOVE,
               templateData.elementremove]
       ]);
+    } else if (section == SectionType.PROMO_VC_SESSION_HEADER) {
+      chrome.send('showContextMenu', [

[Dan Beam, 2012/08/25 00:48:20]

this is super repetitive, why not do something like:

  var details;

  // bajillion if statements, hopefully setting details to something useful

  if (details)
    chrome.send('showContextMenu', details);

[aruslan, 2012/08/27 22:19:51]

Done.

+          [ContextMenuItemIds.PROMO_VC_SESSION_REMOVE,
+              templateData.elementremove]
+      ]);
     }
     return false;
   }
@@ -2336,11 +2444,12 @@ cr.define('ntp', function() {
   return {
     bookmarks: bookmarks,
     bookmarkChanged: bookmarkChanged,
-    setForeignSessions: setForeignSessions,
+    clearPromotions: clearPromotions,
     init: init,
     onCustomMenuSelected: onCustomMenuSelected,
     openSection: openSection,
     setFaviconDominantColor: setFaviconDominantColor,
+    setForeignSessions: setForeignSessions,
     setIncognitoMode: setIncognitoMode,
     setMostVisitedPages: setMostVisitedPages,
     setPromotions: setPromotions,