Add webui handler for promotions on Android NTP.

chrome/browser/resources/ntp_android/ntp_android.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.
 
 // File Description:
 //     Contains all the necessary functions for rendering the NTP on mobile
 //     devices.
 
 /**
  * The event type used to determine when a touch starts.
@@ skipping 196 matching lines @@
    * @type {boolean}
    */
   var hasRecentlyClosedTabs = false;
 
   /**
    * Whether promo is not allowed or not (external to NTP).
    * @type {boolean}
    */
   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;
   }
 
   /**
    * The different sections that are displayed.
    * @enum {number}
    */
   var SectionType = {
     BOOKMARKS: 0,
     INCOGNITO: 1,
     MOST_VISITED: 2,
     RECENTLY_CLOSED: 3,
     SYNCED_DEVICES: 4,
     FOREIGN_SESSION: 5,
     FOREIGN_SESSION_HEADER: 6,
     SNAPSHOTS: 7,
+    PROMO_VC_SESSION_HEADER: 8,
     UNKNOWN: 100,
   };
 
   /**
    * The different ids used of our custom context menu. Sent to the ChromeView
    * and sent back when a menu is selected.
    * @enum {number}
    */
   var ContextMenuItemIds = {
     BOOKMARK_EDIT: 0,
     BOOKMARK_DELETE: 1,
     BOOKMARK_OPEN_IN_NEW_TAB: 2,
     BOOKMARK_OPEN_IN_INCOGNITO_TAB: 3,
     BOOKMARK_SHORTCUT: 4,
 
     MOST_VISITED_OPEN_IN_NEW_TAB: 10,
     MOST_VISITED_OPEN_IN_INCOGNITO_TAB: 11,
     MOST_VISITED_REMOVE: 12,
 
     RECENTLY_CLOSED_OPEN_IN_NEW_TAB: 20,
     RECENTLY_CLOSED_OPEN_IN_INCOGNITO_TAB: 21,
     RECENTLY_CLOSED_REMOVE: 22,
 
     FOREIGN_SESSIONS_REMOVE: 30,
+
+    PROMO_VC_SESSION_REMOVE: 40,
   };
 
   /**
    * The URL of the element for the context menu.
    * @type {string}
    */
   var contextMenuUrl = null;
 
   var contextMenuItem = null;
 
   var currentSnapshots = null;
 
   var currentSessions = null;
 
   /**
    * The possible states of the sync section
    * @enum {number}
    */
   var SyncState = {
     INITIAL: 0,
     WAITING_FOR_DATA: 1,
     DISPLAYING_LOADING: 2,
     DISPLAYED_LOADING: 3,
-    LOADED: 3,
+    LOADED: 4,
   };
 
   /**
    * The current state of the sync section.
    */
   var syncState = SyncState.INITIAL;
 
   /**
    * Whether or not sync is enabled. It will be undefined until
    * setSyncEnabled() is called.
@@ skipping 99 matching lines @@
     // incognito NTPs have a bookmarks section.
     if (getPaneIndexFromHash() < 0)
       document.location.hash = '#bookmarks';
 
     // Initialize common widgets.
     var titleScrollers =
         document.getElementsByClassName('section-title-wrapper');
     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');
     chrome.send('getPromotions');
 
     setCurrentBookmarkFolderData(
         localStorage.getItem(DEFAULT_BOOKMARK_FOLDER_KEY));
 
     addMainSection('incognito');
     addMainSection('most_visited');
@@ skipping 409 matching lines @@
 
     var titleContainer = createElement('span', 'title');
     sessionOuterDiv.appendChild(titleContainer);
 
     // Extra container to allow title & last-sync time to stack vertically.
     var sessionInnerDiv = createDiv(null);
     titleContainer.appendChild(sessionInnerDiv);
 
     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) {
       var clickCallback =
           opt_clickCallback ? opt_clickCallback : itemShortcutClickHandler;
       clickCallback(item, evt);
     });
     return sessionOuterDiv;
   }
 
   /**
    * Saves the number of most visited pages and updates promo visibility.
    * @param {number} n Number of most visited pages.
    */
   function setNumberOfMostVisitedPages(n) {
     numberOfMostVisitedPages = n;
-    promoSetVisibility();
+    updatePromoVisibility();
   }
 
   /**
    * Saves the recently closed tabs flag and updates promo visibility.
    * @param {boolean} anyTabs Whether there are any recently closed tabs.
    */
   function setHasRecentlyClosedTabs(anyTabs) {
     hasRecentlyClosedTabs = anyTabs;
-    promoSetVisibility();
+    updatePromoVisibility();
   }
 
   /**
    * Updates the most visited pages.
    *
    * @param {Array.<Object>} List of data for displaying the list of most
    *     visited pages (see C++ handler for model description).
    * @param {boolean} hasBlacklistedUrls Whether any blacklisted URLs are
    *     present.
    */
@@ skipping 89 matching lines @@
 
     // update the shadows on the  breadcrumb bar
     computeDynamicLayout();
   }
 
   /**
    * Checks if promo is allowed and MostVisited requirements are satisfied.
    * @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.

   }
 
   /**
    * Checks if promo is allowed and OpenTabs requirements are satisfied.
    * @return {boolean} Whether the promo should be shown on open_tabs.
    */
   function shouldPromoBeShownOnOpenTabs() {
     var snapshotsCount =
         currentSnapshots == null ? 0 : currentSnapshots.length;
     var sessionsCount = currentSessions == null ? 0 : currentSessions.length;
-    return promoIsAllowed &&
+    return promoIsAllowed && promoIsAllowedOnOpenTabs &&
         (snapshotsCount + sessionsCount != 0);
   }
 
   /**
    * 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);
   }
 
   /**
    * Records a promo impression on a given section if necessary.
    * @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({});
+  }
+
+  /**
    * Called from native.
    * Sets the text for all promo-related items, updates
    * promo-send-email-target items to send email on click and
    * updates the visibility of items.
    * @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();
   }
 
   /**
    * On-click handler for promo email targets.
    * 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;
     chrome.send('promoActionTriggered');
   }
 
   /**
    * Called by the browser when a context menu has been selected.
    *
    * @param {number} itemId The id of the item that was selected, as specified
@@ skipping 40 matching lines @@
         break;
 
       case ContextMenuItemIds.FOREIGN_SESSIONS_REMOVE:
         if (contextMenuItem != null) {
           chrome.send(
               'deleteForeignSession', [contextMenuItem.sessionTag]);
           chrome.send('getForeignSessions');
         }
         break;
 
+      case ContextMenuItemIds.PROMO_VC_SESSION_REMOVE:
+        chrome.send('promoDisabled');
+        break;
+
       default:
         log.error('Unknown context menu selected id=' + itemId);
         break;
     }
   }
 
   /**
    * Generates the full bookmark folder hierarchy and populates the scrollable
    * title element.
    *
@@ skipping 207 matching lines @@
       syncEnabled = enabled;
 
       if (enabled) {
         if (!localStorage.getItem(SYNC_ENABLED_KEY)) {
           localStorage.setItem(SYNC_ENABLED_KEY, 'true');
           setCurrentBookmarkFolderData('0');
         }
       } else {
         localStorage.removeItem(SYNC_ENABLED_KEY);
       }
+      updatePromoVisibility();
 
       if (bookmarkData) {
         // Bookmark data can now be displayed (or needs to be refiltered)
         bookmarks(bookmarkData);
       }
 
       updateSyncEmptyState();
     } catch (e) {}
   }
 
@@ skipping 59 matching lines @@
     if (!syncEnabled) {
       syncEnableSync.style.display = '-webkit-box';
       centerEmptySections(syncEnableSync);
     } else if (sessionsCount + snapshotsCount == 0) {
       syncPromo.style.display = '-webkit-box';
       centerEmptySections(syncPromo);
     } else {
       openTabsList.style.display = sessionsCount == 0 ? 'none' : 'block';
       snapshotsList.style.display = snapshotsCount == 0 ? 'none' : 'block';
     }
-    promoSetVisibility();
+    updatePromoVisibility();
   }
 
   /**
    * Called externally when updated snapshot data is available.
    *
    * @param {Object} data The snapshot data
    */
   function snapshots(data) {
     var list = findList('snapshots');
     list.innerHTML = '';
@@ skipping 90 matching lines @@
         }, 0);
         expando.className = 'expando closed';
       } else {
         element.style.height = element.expandedHeight;
         expando.className = 'expando open';
       }
     }
   }
 
   /**
+   * 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
    */
   function setForeignSessions(data, tabSyncEnabled) {
     var list = findList('open_tabs');
     list.innerHTML = '';
 
     currentSessions = data;
     updateSyncEmptyState();
@@ skipping 195 matching lines @@
   function getSectionTypeString(section) {
     switch (section) {
       case SectionType.BOOKMARKS:
         return 'bookmarks';
       case SectionType.MOST_VISITED:
         return 'most_visited';
       case SectionType.RECENTLY_CLOSED:
         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';
     }
   }
 
   /**
    * Render the given data into the given list, and hide or show the entire
    * container based on whether there are any elements.  The decorator function
    * is used to create the element to be inserted based on the given data
@@ skipping 554 matching lines @@
           [ContextMenuItemIds.RECENTLY_CLOSED_OPEN_IN_INCOGNITO_TAB,
               templateData.elementopeninincognitotab],
           [ContextMenuItemIds.RECENTLY_CLOSED_REMOVE,
               templateData.elementremove]
       ]);
     } else if (section == SectionType.FOREIGN_SESSION_HEADER) {
       chrome.send('showContextMenu', [
           [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;
   }
 
   // Return an object with all the exports
   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,
     setRecentlyClosedTabs: setRecentlyClosedTabs,
     setSyncEnabled: setSyncEnabled,
     snapshots: snapshots
   };
 });
 
 /////////////////////////////////////////////////////////////////////////////
@@ skipping 125 matching lines @@
 // NTP Entry point.
 /////////////////////////////////////////////////////////////////////////////
 
 /*
  * Handles initializing the UI when the page has finished loading.
  */
 window.addEventListener('DOMContentLoaded', function(evt) {
   ntp.init();
   $('content-area').style.display = 'block';
 });