Sync Promo: Only show welcome title for start up page

BUG=99746
TEST=


Review URL: http://codereview.chromium.org/8330005

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@106231 0039d316-1c4b-4281-b951-d872f2087c98

5 files changed, 150 insertions, 120 deletions

diff --git a/chrome/browser/resources/sync_promo.css b/chrome/browser/resources/sync_promo.css
index 9fd6057..6c967b1 100644
--- a/chrome/browser/resources/sync_promo.css
+++ b/chrome/browser/resources/sync_promo.css
@@ -52,12 +52,15 @@ html[dir='rtl'] #sync-setup-login-content-column {
 }
 
 #promo-title {
-  display: block;
   margin-top: 33px;
   margin-bottom: 64px;
   text-align: center;
 }
 
+#promo-title[hidden] + div {
+  margin-top: 30px;
+}
+
 #promo-infographic {
   margin-top: 14px;
 }
diff --git a/chrome/browser/resources/sync_promo.js b/chrome/browser/resources/sync_promo.js
index a324ee3..d387518 100644
--- a/chrome/browser/resources/sync_promo.js
+++ b/chrome/browser/resources/sync_promo.js
@@ -56,7 +56,6 @@ cr.define('sync_promo', function() {
 
       // Hide parts of the login UI and show the promo UI.
       this.hideOuterLoginUI_();
-      $('promo-title').hidden = false;
       $('sync-setup-login-promo-column').hidden = false;
       $('promo-skip').hidden = false;
 
@@ -180,6 +179,16 @@ cr.define('sync_promo', function() {
       options.SyncSetupOverlay.prototype.sendConfiguration_.apply(this,
           arguments);
     },
+
+    /**
+     * Shows or hides the title of the promo page.
+     * @param {Boolean} visible true if the title should be visible, false
+     *     otherwise.
+     * @private
+     */
+    setPromoTitleVisible_: function(visible) {
+      $('promo-title').hidden = !visible;
+    }
   };
 
   SyncPromo.showErrorUI = function() {
@@ -211,6 +220,10 @@ cr.define('sync_promo', function() {
     SyncPromo.getInstance().initializePage();
   };
 
+  SyncPromo.setPromoTitleVisible = function(visible) {
+    SyncPromo.getInstance().setPromoTitleVisible_(visible);
+  }
+
   // Export
   return {
     SyncPromo : SyncPromo
diff --git a/chrome/browser/resources/sync_setup_overlay.html b/chrome/browser/resources/sync_setup_overlay.html
index 4dfba50..da782e8 100644
--- a/chrome/browser/resources/sync_setup_overlay.html
+++ b/chrome/browser/resources/sync_setup_overlay.html
@@ -1,128 +1,130 @@
 <div id="sync-setup-overlay" class="page" hidden>
   <div id="sync-setup-login" hidden>
     <h1 id="promo-title" i18n-content="promoTitle" hidden></h1>
-    <div id="sync-setup-login-content-column">
-      <h1 id="sync-setup-overlay-title"
-          i18n-content="syncSetupOverlayTitle">
-      </h1>
-      <!-- top-blurb-error's reset state is handled differently from most
-           elements. Instead of being [hidden] it is visibility:hidden so it
-           still takes up space. But it is also [hidden] when we display the
-           captcha, so when it is reset, it needs to be shown. -->
-      <div id="top-blurb-error"
-          class="reset-shown reset-visibility-hidden">
-        <span id="error-signing-in" i18n-content="errorSigningIn"></span>
-        <span id="error-custom" hidden></span>
-      </div>
-      <div class="sign-in">
-        <div class="signin-box">
-          <div id="signin-header">
-            <h2 i18n-content="signinHeader"></h2>
-            <div id="signin-header-logo"></div>
-          </div>
-          <form id="gaia-login-form">
-            <div id="email-row" class="reset-shown">
-              <label>
-                <strong class="email-label" i18n-content="emailLabel"></strong>
-                <input id="gaia-email" type="text" name="email" value=""
-                    class="reset-enabled reset-shown reset-value"
-                    autocomplete="off">
-                <div id="email-readonly" class="reset-hidden" hidden></div>
-                <div id="errormsg-0-email" class="errormsg reset-hidden"
-                    i18n-content="cannotBeBlank" hidden></div>
-              </label>
-            </div>
-            <div id="password-row" class="reset-shown">
-              <label>
-                <strong class="password-label" i18n-content="passwordLabel">
-                </strong>
-                <input id="gaia-passwd" type="password" name="passwd"
-                    class="reset-enabled reset-value" autocomplete="off">
-                <div id="errormsg-0-password" class="errormsg reset-hidden"
-                    i18n-content="cannotBeBlank" hidden></div>
-              <label>
-            </div>
-            <div id="access-code-input-row" class="access-code-row reset-hidden"
-                hidden>
-              <label>
-                <strong i18n-content="enterAccessCode"></strong>
-                <a i18n-values="href:getAccessCodeURL"
-                    i18n-content="getAccessCodeHelp" target="_blank"
-                    class="account-link"></a>
-                <input id="access-code" type="password" name="accessCode"
-                    class="reset-enabled reset-value">
-              </label>
-            </div>
-            <div id="errormsg-1-password" class="errormsg reset-hidden" hidden>
-              <span i18n-content="invalidCredentials"></span>
-              <a i18n-values="href:invalidPasswordHelpURL" class="help-link"
-                  target="_blank">?</a>
-            </div>
-            <div id="errormsg-fatal" class="errormsg reset-hidden" hidden>
-              <span i18n-content="unrecoverableError"></span>
-              <a i18n-values="href:unrecoverableErrorHelpURL"
-                  i18n-content="errorLearnMore" target="_blank"></a>
-            </div>
-            <div id="errormsg-0-access-code" class="errormsg reset-hidden"
-                i18n-content="invalidAccessCode" hidden>
-            </div>
-            <div id="asp-warning-div" class="errormsg reset-hidden" hidden>
-              <span i18n-values=".innerHTML:aspWarningText"></span>
+    <div>
+      <div id="sync-setup-login-content-column">
+        <h1 id="sync-setup-overlay-title"
+            i18n-content="syncSetupOverlayTitle">
+        </h1>
+        <!-- top-blurb-error's reset state is handled differently from most
+             elements. Instead of being [hidden] it is visibility:hidden so it
+             still takes up space. But it is also [hidden] when we display the
+             captcha, so when it is reset, it needs to be shown. -->
+        <div id="top-blurb-error"
+            class="reset-shown reset-visibility-hidden">
+          <span id="error-signing-in" i18n-content="errorSigningIn"></span>
+          <span id="error-custom" hidden></span>
+        </div>
+        <div class="sign-in">
+          <div class="signin-box">
+            <div id="signin-header">
+              <h2 i18n-content="signinHeader"></h2>
+              <div id="signin-header-logo"></div>
             </div>
-            <div id="captcha-div" class="reset-hidden" hidden>
-              <div id="captcha-wrapper">
-                <div id="captcha-image"></div>
+            <form id="gaia-login-form">
+              <div id="email-row" class="reset-shown">
+                <label>
+                  <strong class="email-label" i18n-content="emailLabel"></strong>
+                  <input id="gaia-email" type="text" name="email" value=""
+                      class="reset-enabled reset-shown reset-value"
+                      autocomplete="off">
+                  <div id="email-readonly" class="reset-hidden" hidden></div>
+                  <div id="errormsg-0-email" class="errormsg reset-hidden"
+                      i18n-content="cannotBeBlank" hidden></div>
+                </label>
               </div>
-              <div>
+              <div id="password-row" class="reset-shown">
+                <label>
+                  <strong class="password-label" i18n-content="passwordLabel">
+                  </strong>
+                  <input id="gaia-passwd" type="password" name="passwd"
+                      class="reset-enabled reset-value" autocomplete="off">
+                  <div id="errormsg-0-password" class="errormsg reset-hidden"
+                      i18n-content="cannotBeBlank" hidden></div>
                 <label>
-                  <strong i18n-content="captchaInstructions"></strong>
-                  <input id="captcha-value" type="text" name="captchaValue"
-                      value="" class="reset-disabled">
+              </div>
+              <div id="access-code-input-row" class="access-code-row reset-hidden"
+                  hidden>
+                <label>
+                  <strong i18n-content="enterAccessCode"></strong>
+                  <a i18n-values="href:getAccessCodeURL"
+                      i18n-content="getAccessCodeHelp" target="_blank"
+                      class="account-link"></a>
+                  <input id="access-code" type="password" name="accessCode"
+                      class="reset-enabled reset-value">
                 </label>
               </div>
-            </div>
-            <div id="errormsg-0-connection" class="errormsg reset-hidden"
-                i18n-content="couldNotConnect" hidden>
-            </div>
-            <div id="action-area">
-              <input id="sign-in" type="submit" i18n-content="signin">
-              <div id="create-account-div" i18n-values=".innerHTML:createAccountLinkHTML">
+              <div id="errormsg-1-password" class="errormsg reset-hidden" hidden>
+                <span i18n-content="invalidCredentials"></span>
+                <a i18n-values="href:invalidPasswordHelpURL" class="help-link"
+                    target="_blank">?</a>
               </div>
-              <div id="logging-in-throbber" class="throbber"></div>
-            </div>
-            <div id="ga-fprow">
-                <a id="cannot-access-account-link"
-                    i18n-values="href:cannotAccessAccountURL"
-                    target="_blank"
-                    i18n-content="cannotAccessAccount"
-                    class="account-link">
-                </a>
-            </div>
-          </form>
-        </div>
-      </div> <!-- sign-in -->
-      <div id="cancel-space-no-captcha"></div>
-      <div class="action-area">
-        <div class="button-strip">
-          <button id="sync-setup-cancel" type="reset" i18n-content="cancel">
-          </button>
+              <div id="errormsg-fatal" class="errormsg reset-hidden" hidden>
+                <span i18n-content="unrecoverableError"></span>
+                <a i18n-values="href:unrecoverableErrorHelpURL"
+                    i18n-content="errorLearnMore" target="_blank"></a>
+              </div>
+              <div id="errormsg-0-access-code" class="errormsg reset-hidden"
+                  i18n-content="invalidAccessCode" hidden>
+              </div>
+              <div id="asp-warning-div" class="errormsg reset-hidden" hidden>
+                <span i18n-values=".innerHTML:aspWarningText"></span>
+              </div>
+              <div id="captcha-div" class="reset-hidden" hidden>
+                <div id="captcha-wrapper">
+                  <div id="captcha-image"></div>
+                </div>
+                <div>
+                  <label>
+                    <strong i18n-content="captchaInstructions"></strong>
+                    <input id="captcha-value" type="text" name="captchaValue"
+                        value="" class="reset-disabled">
+                  </label>
+                </div>
+              </div>
+              <div id="errormsg-0-connection" class="errormsg reset-hidden"
+                  i18n-content="couldNotConnect" hidden>
+              </div>
+              <div id="action-area">
+                <input id="sign-in" type="submit" i18n-content="signin">
+                <div id="create-account-div" i18n-values=".innerHTML:createAccountLinkHTML">
+                </div>
+                <div id="logging-in-throbber" class="throbber"></div>
+              </div>
+              <div id="ga-fprow">
+                  <a id="cannot-access-account-link"
+                      i18n-values="href:cannotAccessAccountURL"
+                      target="_blank"
+                      i18n-content="cannotAccessAccount"
+                      class="account-link">
+                  </a>
+              </div>
+            </form>
+          </div>
+        </div> <!-- sign-in -->
+        <div id="cancel-space-no-captcha"></div>
+        <div class="action-area">
+          <div class="button-strip">
+            <button id="sync-setup-cancel" type="reset" i18n-content="cancel">
+            </button>
+          </div>
         </div>
       </div>
-    </div>
-    <div id="sync-setup-login-promo-column" hidden>
-      <h2 id="promo-message-title" i18n-content="promoMessageTitle"></h2>
-      <p>
-        <span i18n-values=".innerHTML:promoMessageBody"></span>
-        <a id="promo-learn-more-show" i18n-content="promoLearnMoreShow"
-            href="#"></a>
-        <a id="promo-learn-more-hide" i18n-content="promoLearnMoreHide"
-            href="#" hidden> </a>
-      </p>
-      <div id="promo-info-pane">
-        <img id="promo-infographic"
-            src="chrome://theme/IRD_SYNC_PROMO_INFO_GRAPHIC">
-        <div id="promo-information" i18n-values=".innerHTML:promoInformation"
-            hidden>
+      <div id="sync-setup-login-promo-column" hidden>
+        <h2 id="promo-message-title" i18n-content="promoMessageTitle"></h2>
+        <p>
+          <span i18n-values=".innerHTML:promoMessageBody"></span>
+          <a id="promo-learn-more-show" i18n-content="promoLearnMoreShow"
+              href="#"></a>
+          <a id="promo-learn-more-hide" i18n-content="promoLearnMoreHide"
+              href="#" hidden> </a>
+        </p>
+        <div id="promo-info-pane">
+          <img id="promo-infographic"
+              src="chrome://theme/IRD_SYNC_PROMO_INFO_GRAPHIC">
+          <div id="promo-information" i18n-values=".innerHTML:promoInformation"
+              hidden>
+          </div>
         </div>
       </div>
     </div>
diff --git a/chrome/browser/ui/webui/sync_promo_handler.cc b/chrome/browser/ui/webui/sync_promo_handler.cc
index ac96784..dc57b42 100644
--- a/chrome/browser/ui/webui/sync_promo_handler.cc
+++ b/chrome/browser/ui/webui/sync_promo_handler.cc
@@ -127,10 +127,9 @@ void SyncPromoHandler::ShowSetupUI() {
 void SyncPromoHandler::HandleCloseSyncPromo(const base::ListValue* args) {
   CloseSyncSetup();
 
-  // If there's no previous page on this tab then it means that the promo was
-  // displayed at startup. In this case we want to close the browser tab that
-  // the promo is in.
-  if (!web_ui_->tab_contents()->controller().CanGoBack()) {
+  // If the promo is being used as a welcome page then we want to close the
+  // browser tab that the promo is in.
+  if (IsWelcomePage()) {
     Browser* browser =
         BrowserList::FindBrowserWithTabContents(web_ui_->tab_contents());
     browser->CloseTabContents(web_ui_->tab_contents());
@@ -142,6 +141,10 @@ void SyncPromoHandler::HandleCloseSyncPromo(const base::ListValue* args) {
 }
 
 void SyncPromoHandler::HandleInitializeSyncPromo(const base::ListValue* args) {
+  base::FundamentalValue visible(IsWelcomePage());
+  web_ui_->CallJavascriptFunction("SyncSetupOverlay.setPromoTitleVisible",
+                                  visible);
+
   OpenSyncSetup();
   // We don't need to compute anything for this, just do this every time.
   RecordUserFlowAction(extension_misc::SYNC_PROMO_VIEWED);
@@ -195,3 +198,9 @@ void SyncPromoHandler::RecordUserFlowAction(int action) {
   UMA_HISTOGRAM_ENUMERATION("SyncPromo.UserFlow", action,
                             extension_misc::SYNC_PROMO_BUCKET_BOUNDARY);
 }
+
+bool SyncPromoHandler::IsWelcomePage() {
+  // If there's no previous page on this tab then it means that the promo was
+  // displayed at startup.
+  return !web_ui_->tab_contents()->controller().CanGoBack();
+}
diff --git a/chrome/browser/ui/webui/sync_promo_handler.h b/chrome/browser/ui/webui/sync_promo_handler.h
index 392674c..96822f9 100644
--- a/chrome/browser/ui/webui/sync_promo_handler.h
+++ b/chrome/browser/ui/webui/sync_promo_handler.h
@@ -58,6 +58,9 @@ class SyncPromoHandler : public SyncSetupHandler {
   // Record a user's flow through the promo to our histogram in UMA.
   void RecordUserFlowAction(int action);
 
+  // Returns true if the promo is displayed as a welcome page.
+  bool IsWelcomePage();
+
   // Use this to register for certain notifications (currently when tabs or
   // windows close).
   content::NotificationRegistrar registrar_;