Add a sign-in promo message to the Other Devices menu.

chrome/browser/resources/ntp4/other_sessions.js

Index: chrome/browser/resources/ntp4/other_sessions.js
diff --git a/chrome/browser/resources/ntp4/other_sessions.js b/chrome/browser/resources/ntp4/other_sessions.js
index ccd693d67b8f1385a813ace1e3733ac51e0199bf..cd110161a32408454bc33b07e3bc538df51db833 100644
--- a/chrome/browser/resources/ntp4/other_sessions.js
+++ b/chrome/browser/resources/ntp4/other_sessions.js
@@ -24,6 +24,8 @@ cr.define('ntp', function() {
   };
   var HISTOGRAM_EVENT_LIMIT = HISTOGRAM_EVENT.LINK_RIGHT_CLICKED + 1;
 
+  var isUserSignedIn = false;
+
   OtherSessionsMenuButton.prototype = {
     __proto__: MenuButton.prototype,
 
@@ -36,12 +38,33 @@ cr.define('ntp', function() {
                                  this.onContextMenu_.bind(this), true);
       document.body.appendChild(this.menu);
 
+      // Put the promo content (hidden by default) into the menu.
+      var messageContent = $('other-sessions-promo-message');
+      messageContent.parentNode.removeChild(messageContent);
+      this.menu.appendChild(messageContent);

[Dan Beam, 2012/03/26 17:08:34]

I think appendChild() will implicitly remove the node from the DOM anyways... so
you probably don't need to removeChild() it first.

[Patrick Dubroy, 2012/03/26 19:36:46]

Done.

+
       this.sessions_ = [];
       this.anchorType = cr.ui.AnchorType.ABOVE;
       this.invertLeftRight = true;
 
-      chrome.send('getForeignSessions');
       this.recordUmaEvent_(HISTOGRAM_EVENT.INITIALIZED);
+      this.classList.remove('invisible');
+    },
+
+    /**
+     * Initialize the menu.

[Dan Beam, 2012/03/26 17:08:34]

may want to be more specific of which menu or just remove this comment

[Patrick Dubroy, 2012/03/26 19:36:46]

Done.

+     * @param {boolean} signedIn Is the current user signed in?
+     * @param {function} signInCallback A function to open the sign-in UI.
+     */
+    initialize: function(signedIn, signInCallback) {
+      var promo = $('other-sessions-promo-message');

[Dan Beam, 2012/03/26 17:08:34]

nit: why not document.querySelector('#other-sessions-promo-message .link-span')
and is this always there?

[Patrick Dubroy, 2012/03/26 19:36:46]

This code is gone.

+      promo.querySelector('.link-span').addEventListener('click',
+                                                         signInCallback);
+
+      // Always show the promo, because getForeignSessions can be a no-op.
+      this.showPromo_();
+      if (signedIn)
+        chrome.send('getForeignSessions');

[Dan Beam, 2012/03/26 17:08:34]

replace this code with:
  
  this.updateSignInState_(signedIn);

[Patrick Dubroy, 2012/03/26 19:36:46]

Done.

     },
 
     /**
@@ -76,6 +99,16 @@ cr.define('ntp', function() {
     },
 
     /**
+     * Reset the menu to the default state.
+     */
+    resetMenu_: function() {
+      var promoContent = $('other-sessions-promo-message');
+      this.menu.innerHTML = '';
+      this.menu.appendChild(promoContent);
+      promoContent.hidden = true;
+    },
+
+    /**
      * Create a custom click handler for a link, so that clicking on a link
      * restores the session (including back stack) rather than just opening
      * the URL.
@@ -122,13 +155,12 @@ cr.define('ntp', function() {
     },
 
     /**
-     * Create the UI for the promo and place it inside the menu.
-     * The promo is shown instead of foreign session data when tab sync is
-     * not enabled for a profile.
+     * Show a promo message inside the menu.
+     * The promo is shown when there is no foreign session data available.
      */
     showPromo_: function() {
-      var message = localStrings.getString('otherSessionsEmpty');
-      this.menu.appendChild(this.ownerDocument.createTextNode(message));
+      this.resetMenu_();
+      $('other-sessions-promo-message').hidden = false;

[Dan Beam, 2012/03/26 17:08:34]

nit: you seem to do this a couple times (toggle this node's hidden state),
personally I'd change to:

  /**
   * Show or hide the other sessions promo message based on |visible|.
   * @param {boolean} visible Whether the message should be shown.
   */
  setOtherSessionsPromoHidden_: function(visible) {
    $('other-sessions-promo-message').hidden = !visible;
  },

or something to that effect, but that's up to you (I like to update code in as
little places as possible)

[Patrick Dubroy, 2012/03/26 19:36:46]

Done.

     },
 
     /**
@@ -137,20 +169,29 @@ cr.define('ntp', function() {
      * from other devices.

[Dan Beam, 2012/03/26 17:08:34]

nit: +4\s before from

[Patrick Dubroy, 2012/03/26 19:36:46]

Done.

      */
     set sessions(sessionList) {
-      // Clear the current contents of the menu.
-      this.menu.innerHTML = '';
-
-      // Rebuild the menu with the new data.
-      for (var i = 0; i < sessionList.length; i++) {
-        this.addSession_(sessionList[i]);
+      this.sessions_ = sessionList;
+      if (sessionList.length == 0) {
+        this.showPromo_();
+      } else {
+        this.resetMenu_();
+
+        // Rebuild the menu with the new data.
+        for (var i = 0; i < sessionList.length; i++) {
+          this.addSession_(sessionList[i]);
+        }
+        $('other-sessions-promo-message').hidden = true;

[Dan Beam, 2012/03/26 17:08:34]

this .hidden = true; seems redundant now that it's done in resetMenu_(), eh?

[Patrick Dubroy, 2012/03/26 19:36:46]

Done.

       }
+    },
 
-      if (sessionList.length == 0)
-        this.classList.add('invisible');
-      else
-        this.classList.remove('invisible');
-
-      this.sessions_ = sessionList;
+    /**
+     * Called from the new tab page when the user's signed in state changes.
+     * @param {boolean} signedIn Is the user currently signed in?
+     */
+    updateSignInState: function(signedIn) {
+      // Always show the promo, because getForeignSessions can be a no-op.
+      this.showPromo_();
+      if (signedIn)
+        chrome.send('getForeignSessions');
     },
   };