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

chrome/browser/resources/ntp4/new_tab.js

 // Copyright (c) 2012 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.
 
 /**
  * @fileoverview New tab page
  * This is the main code for the new tab page used by touch-enabled Chrome
  * browsers.  For now this is still a prototype.
  */
 
@@ skipping 35 matching lines @@
    */
   var loginBubble;
 
   /**
    * true if |loginBubble| should be shown.
    * @type {Boolean}
    */
   var shouldShowLoginBubble = false;
 
   /**
+   * The 'other-sessions-menu-button' element.
+   * @type {!Element|undefined}
+   */
+  var otherSessionsButton;
+
+  /**
    * The time in milliseconds for most transitions.  This should match what's
    * in new_tab.css.  Unfortunately there's no better way to try to time
    * something to occur until after a transition has completed.
    * @type {number}
    * @const
    */
   var DEFAULT_TRANSITION_TIME = 500;
 
   /**
    * Creates a NewTabView object. NewTabView extends PageListView with
@@ skipping 40 matching lines @@
     newTabView = new NewTabView();
 
     notificationContainer = getRequiredElement('notification-container');
     notificationContainer.addEventListener(
         'webkitTransitionEnd', onNotificationTransitionEnd);
 
     cr.ui.decorate($('recently-closed-menu-button'), ntp.RecentMenuButton);
     chrome.send('getRecentlyClosedTabs');
 
     if (templateData.showOtherSessionsMenu) {
-      cr.ui.decorate($('other-sessions-menu-button'),
-                     ntp.OtherSessionsMenuButton);
+      otherSessionsButton = getRequiredElement('other-sessions-menu-button');
+      cr.ui.decorate(otherSessionsButton, ntp.OtherSessionsMenuButton);
+      otherSessionsButton.initialize(templateData.isUserSignedIn);
     }
 
     var mostVisited = new ntp.MostVisitedPage();
     // Move the footer into the most visited page if we are in "bare minimum"
     // mode.
     if (document.body.classList.contains('bare-minimum'))
       mostVisited.appendFooter(getRequiredElement('footer'));
     newTabView.appendTilePage(mostVisited,
                               localStrings.getString('mostvisited'),
                               false);
@@ skipping 64 matching lines @@
 
       var learnMoreLink = infoBubble.querySelector('a');
       learnMoreLink.href = localStrings.getString('ntp4_intro_url');
       learnMoreLink.onclick = infoBubble.hide.bind(infoBubble);
 
       infoBubble.show();
       chrome.send('introMessageSeen');
     }
 
     var loginContainer = getRequiredElement('login-container');
-    loginContainer.addEventListener('click', function() {
-      var rect = loginContainer.getBoundingClientRect();
-      chrome.send('showSyncLoginUI',
-                  [rect.left, rect.top, rect.width, rect.height]);
-    });
+    loginContainer.addEventListener('click', showSyncLoginUI);
     chrome.send('initializeSyncLogin');
 
     doWhenAllSectionsReady(function() {
       // Tell the slider about the pages.
       newTabView.updateSliderCards();
       // Mark the current page.
       newTabView.cardSlider.currentCardValue.navigationDot.classList.add(
           'selected');
 
       var promo = localStrings.getString('serverpromo');
@@ skipping 271 matching lines @@
       node.stripeColor = color;
   }
 
   /**
    * Updates the text displayed in the login container. If there is no text then
    * the login container is hidden.
    * @param {string} loginHeader The first line of text.
    * @param {string} loginSubHeader The second line of text.
    * @param {string} iconURL The url for the login status icon. If this is null
         then the login status icon is hidden.
+   * @param {boolean} isUserSignedIn Indicates if the user is signed in or not.
    */
-  function updateLogin(loginHeader, loginSubHeader, iconURL) {
+  function updateLogin(loginHeader, loginSubHeader, iconURL, isUserSignedIn) {
     if (loginHeader || loginSubHeader) {
       $('login-container').hidden = false;
       $('login-status-header').innerHTML = loginHeader;
       $('login-status-sub-header').innerHTML = loginSubHeader;
       $('card-slider-frame').classList.add('showing-login-area');
 
       if (iconURL) {
         $('login-status-header-container').style.backgroundImage = url(iconURL);
         $('login-status-header-container').classList.add('login-status-icon');
       } else {
         $('login-status-header-container').style.backgroundImage = 'none';
         $('login-status-header-container').classList.remove(
             'login-status-icon');
       }
     } else {
       $('login-container').hidden = true;
       $('card-slider-frame').classList.remove('showing-login-area');
     }
     if (shouldShowLoginBubble) {
       window.setTimeout(loginBubble.show.bind(loginBubble), 0);
       chrome.send('loginMessageSeen');
       shouldShowLoginBubble = false;
     } else if (loginBubble) {
       loginBubble.reposition();
     }
+    if (otherSessionsButton)
+      otherSessionsButton.updateSignInState(isUserSignedIn);
   }
 
   /**
+   * Show the sync login UI.
+   * @param {Event} e The click event.
+   */
+  function showSyncLoginUI(e) {
+    var rect = e.currentTarget.getBoundingClientRect();
+    chrome.send('showSyncLoginUI',
+                [rect.left, rect.top, rect.width, rect.height]);
+  }
+
+  /**
    * Wrappers to forward the callback to corresponding PageListView member.
    */
   function appAdded() {
     return newTabView.appAdded.apply(newTabView, arguments);
   }
 
   function appMoved() {
     return newTabView.appMoved.apply(newTabView, arguments);
   }
 
   function appRemoved() {
     return newTabView.appRemoved.apply(newTabView, arguments);
   }
 
   function appsPrefChangeCallback() {
     return newTabView.appsPrefChangedCallback.apply(newTabView, arguments);
   }
 
   function appsReordered() {
     return newTabView.appsReordered.apply(newTabView, arguments);
   }
 
   function enterRearrangeMode() {
     return newTabView.enterRearrangeMode.apply(newTabView, arguments);
   }
 
-  function foreignSessions(sessionList) {
-    $('other-sessions-menu-button').sessions = sessionList;
+  function setForeignSessions(sessionList, isTabSyncEnabled) {
+    if (otherSessionsButton)
+      otherSessionsButton.setForeignSessions(sessionList, isTabSyncEnabled);
   }
 
   function getAppsCallback() {
     return newTabView.getAppsCallback.apply(newTabView, arguments);
   }
 
   function getAppsPageIndex() {
     return newTabView.getAppsPageIndex.apply(newTabView, arguments);
   }
 
@@ skipping 13 matching lines @@
     newTabView.highlightAppId = appId;
   }
 
   // Return an object with all the exports
   return {
     appAdded: appAdded,
     appMoved: appMoved,
     appRemoved: appRemoved,
     appsPrefChangeCallback: appsPrefChangeCallback,
     enterRearrangeMode: enterRearrangeMode,
-    foreignSessions: foreignSessions,
     getAppsCallback: getAppsCallback,
     getAppsPageIndex: getAppsPageIndex,
     getCardSlider: getCardSlider,
     onLoad: onLoad,
     leaveRearrangeMode: leaveRearrangeMode,
     saveAppPageName: saveAppPageName,
     setAppToBeHighlighted: setAppToBeHighlighted,
     setBookmarkBarAttached: setBookmarkBarAttached,
+    setForeignSessions: setForeignSessions,
     setMostVisitedPages: setMostVisitedPages,
     setSuggestionsPages: setSuggestionsPages,
     setRecentlyClosedTabs: setRecentlyClosedTabs,
     setStripeColor: setStripeColor,
     showNotification: showNotification,
     themeChanged: themeChanged,
     updateLogin: updateLogin
   };
 });
 
 document.addEventListener('DOMContentLoaded', ntp.onLoad);