Sync Promo: Transition learn more / hide clicks on info on promo page.

R=sail@chromium.org,jhawkins@chromium.org
BUG=99802
TEST=Click "Learn more" and involuntarily say "Ooooh".


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

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

3 files changed, 56 insertions, 10 deletions

diff --git a/chrome/browser/resources/sync_promo.css b/chrome/browser/resources/sync_promo.css
index f4d2464..7f5d744 100644
--- a/chrome/browser/resources/sync_promo.css
+++ b/chrome/browser/resources/sync_promo.css
@@ -86,3 +86,19 @@ h1 {
   font-size: 85%;
   margin: 0 10px;
 }
+
+#promo-info-pane {
+  height: 186px;
+  position: relative;
+}
+
+#promo-info-pane > * {
+  -webkit-transition: opacity .2s linear;
+  opacity: 1;
+  position: absolute;
+}
+
+#promo-info-pane > [hidden] {
+  display: inline-block; /* Override default user-agent styles. */
+  opacity: 0;
+}
diff --git a/chrome/browser/resources/sync_promo.js b/chrome/browser/resources/sync_promo.js
index 7eeba6f..a324ee3 100644
--- a/chrome/browser/resources/sync_promo.js
+++ b/chrome/browser/resources/sync_promo.js
@@ -132,17 +132,45 @@ cr.define('sync_promo', function() {
       };
       $('confirm-everything-cancel').addEventListener('click', cancelFunc);
       $('choose-datatypes-cancel').addEventListener('click', cancelFunc);
+
+      this.infographic_ = $('promo-infographic');
+      this.learnMore_ = $('promo-information');
+
+      this.infographic_.addEventListener('webkitTransitionEnd',
+                                         this.toggleHidden_.bind(this));
+      this.learnMore_.addEventListener('webkitTransitionEnd',
+                                       this.toggleHidden_.bind(this));
+    },
+
+    /**
+     * Remove the [hidden] attribute from the node that was not previously
+     * transitioning.
+     * @param {Event} e A -webkit-transition end event.
+     * @private
+     */
+    toggleHidden_: function(e) {
+      // Only show the other element if the target of this event was hidden
+      // (showing also triggers a transition end).
+      if (e.target.hidden) {
+        if (e.target === this.infographic_)
+          this.learnMore_.hidden = false;
+        else
+          this.infographic_.hidden = false;
+      }
     },
 
-    // Shows or hides the sync information.
-    // @param {Boolean} show True if sync information should be shown, false
-    //     otherwise.
-    // @private
+    /**
+     * Shows or hides the sync information.
+     * @param {Boolean} show True if sync information should be shown, false
+     *     otherwise.
+     * @private
+     */
     showLearnMore_: function(show) {
       $('promo-learn-more-show').hidden = show;
       $('promo-learn-more-hide').hidden = !show;
-      $('promo-infographic').hidden = show;
-      $('promo-information').hidden = !show;
+      // Setting [hidden] triggers a transition, which (when ended) will trigger
+      // this.toggleHidden_.
+      (show ? this.infographic_ : this.learnMore_).hidden = true;
     },
 
     /** @inheritDoc */
diff --git a/chrome/browser/resources/sync_setup_overlay.html b/chrome/browser/resources/sync_setup_overlay.html
index ac07234..179409d 100644
--- a/chrome/browser/resources/sync_setup_overlay.html
+++ b/chrome/browser/resources/sync_setup_overlay.html
@@ -12,10 +12,12 @@
         <a id="promo-learn-more-hide" i18n-content="promoLearnMoreHide"
             href="#" hidden> </a>
       </div>
-      <img id="promo-infographic"
-          src="chrome://theme/IRD_SYNC_PROMO_INFO_GRAPHIC">
-      <div id="promo-information" i18n-values=".innerHTML:promoInformation"
-          hidden>
+      <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>