Sync Promo: Add a way to collapse the sync promo

chrome/browser/resources/new_tab_sync_promo.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.
 
 cr.define('new_tab', function() {
+  // Variable to track if the promo is expanded or collapsed.
+  var isExpanded_ = false;

[James Hawkins, 2011/07/18 02:37:36]

Var name not descriptive enough for the context. isSyncPromoExpanded_ is
probably better.

[sail, 2011/07/20 01:30:46]

Done.

 
   /**
    * NewTabSyncPromo class
    * Subclass of options.SyncSetupOverlay that customizes the sync setup
    * overlay for use in the new tab page.
    * @class
    */
   function NewTabSyncPromo() {
     options.SyncSetupOverlay.call(this, 'syncSetup',
                                   templateData.syncSetupOverlayTitle,
                                   'sync-setup-overlay');
   }
 
   cr.addSingletonGetter(NewTabSyncPromo);
 
   NewTabSyncPromo.prototype = {
     __proto__: options.SyncSetupOverlay.prototype,
 
     showOverlay_: function() {
-      $('sync-setup-overlay').hidden = false;
+      this.expandSyncPromo_(true);
     },
 
     initializePage: function() {
       options.SyncSetupOverlay.prototype.initializePage.call(this);
-      chrome.send('SyncSetupAttachHandler');
+
+      var self = this;
+      $('sync-promo-toggle-button').onclick = function() {

[James Hawkins, 2011/07/18 02:37:36]

onclick = this.onTogglePromo;

[sail, 2011/07/20 01:30:46]

Done.

+        self.onTogglePromo();
+      };
+
+      chrome.send('InitializeSyncPromo');
     },
 
-    showOverlay_: function() {
-      $('sync-setup-overlay').hidden = false;
+    onTogglePromo: function() {

[James Hawkins, 2011/07/18 02:37:36]

Document all functions.

[sail, 2011/07/20 01:30:46]

Done.

+      if (this.isExpanded_) {
+        this.expandSyncPromo_(false);
+        chrome.send('CollapseSyncPromo');
+      } else {
+        chrome.send('ExpandSyncPromo');
+      }
     },
+
+    expandSyncPromo_: function(shouldExpand) {
+      this.isExpanded_ = shouldExpand;
+      if (shouldExpand) {
+        $('sync-promo-login-status').hidden = true;

[James Hawkins, 2011/07/18 02:37:36]

These hide/shows should be animated (specified in the CSS).

[sail, 2011/07/20 01:30:46]

Mind if I do this in a separate change? This UI is going to change slightly in
the next CL and it'll be easier to add animations after that. Thanks

+        $('sync-setup-overlay').hidden = false;
+        $('sync-promo').classList.remove('collapsed');
+      } else {
+        $('sync-promo-login-status').hidden = false;
+        $('sync-setup-overlay').hidden = true;
+        $('sync-promo').classList.add('collapsed');
+      }
+      layoutSections();
+    },
+
+    updateLogin_: function(user_name) {
+      if (user_name) {
+        $('sync-promo-toggle').hidden = true;
+        $('sync-promo-user-name').textContent = user_name;
+        $('sync-promo-not-connected').hidden = true;
+      } else {
+        $('sync-promo-toggle').hidden = false;
+        $('sync-promo-user-name').hidden = true;
+        $('sync-promo-not-connected').hidden = false;
+      }
+      layoutSections();
+    }
   };
 
   NewTabSyncPromo.showErrorUI = function() {
     NewTabSyncPromo.getInstance().showErrorUI_();
   };
 
   NewTabSyncPromo.showSetupUI = function() {
     NewTabSyncPromo.getInstance().showSetupUI_();
   };
 
@@ skipping 10 matching lines @@
   };
 
   NewTabSyncPromo.showStopSyncingUI = function() {
     NewTabSyncPromo.getInstance().showStopSyncingUI_();
   };
 
   NewTabSyncPromo.initialize = function() {
     NewTabSyncPromo.getInstance().initializePage();
   }
 
+  NewTabSyncPromo.showSynPromo = function() {
+    $('sync-promo').hidden = false;

[James Hawkins, 2011/07/18 02:37:36]

Delegate to a private method in NewTabSyncPromo, as above.

[sail, 2011/07/20 01:30:46]

Done.

+  }
+
+  NewTabSyncPromo.updateLogin = function(user_name) {
+    NewTabSyncPromo.getInstance().updateLogin_(user_name);
+  }
+
   // Export
   return {
     NewTabSyncPromo : NewTabSyncPromo
   };
 });
 
 var OptionsPage = options.OptionsPage;
 var SyncSetupOverlay = new_tab.NewTabSyncPromo;
 window.addEventListener('DOMContentLoaded', new_tab.NewTabSyncPromo.initialize);