[uber page] Fixed for the 'advanced section' in settings.

- Prevent advanced section controls from gaining focus when hidden.
- Allow advanced section to change height due to dynamic content or font changes.
- Fix padding at the top of the advanced section.

BUG=116587,116588,116876
Review URL: https://chromiumcodereview.appspot.com/9664011

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

3 files changed, 59 insertions, 21 deletions

diff --git a/chrome/browser/resources/options2/browser_options.css b/chrome/browser/resources/options2/browser_options.css
index 30cf6dd..98c5bfa 100644
--- a/chrome/browser/resources/options2/browser_options.css
+++ b/chrome/browser/resources/options2/browser_options.css
@@ -328,7 +328,11 @@ input[type='range'] {
 }
 
 #advanced-settings {
-  -webkit-transition: height 500ms;
   height: 0;
+  margin-top: 8px;
   overflow: hidden;
 }
+
+#advanced-settings.sliding {
+  -webkit-transition: height 500ms linear;
+}
diff --git a/chrome/browser/resources/options2/browser_options.html b/chrome/browser/resources/options2/browser_options.html
index ded931f..82fb26c 100644
--- a/chrome/browser/resources/options2/browser_options.html
+++ b/chrome/browser/resources/options2/browser_options.html
@@ -250,7 +250,7 @@
     </div>
   </section>
 </if>
-<div id="advanced-settings">
+<div id="advanced-settings" hidden>
 <div id="advanced-settings-container">
 <if expr="pp_ifdef('chromeos')">
   <section>
diff --git a/chrome/browser/resources/options2/browser_options.js b/chrome/browser/resources/options2/browser_options.js
index 4567a05..c85b52b 100644
--- a/chrome/browser/resources/options2/browser_options.js
+++ b/chrome/browser/resources/options2/browser_options.js
@@ -45,6 +45,8 @@ cr.define('options', function() {
 
       $('advanced-settings-expander').onclick =
           this.toggleAdvancedSettings_.bind(this);
+      $('advanced-settings').addEventListener('webkitTransitionEnd',
+          this.advancedSettingsTransitionEnded_.bind(this));
 
       // Sync (Sign in) section.
       this.updateSyncState_(templateData.syncData);
@@ -437,31 +439,63 @@ cr.define('options', function() {
      * @private
      */
     toggleAdvancedSettings_: function() {
-      if ($('advanced-settings').style.height == '')
-        this.showAdvancedSettings_();
-      else
-        this.hideAdvancedSettings_();
+      var advancedSettings = $('advanced-settings');
+      var advancedSettingsContainer = $('advanced-settings-container');
+
+      if (advancedSettings.style.height == '') {
+        // Unhide the advanced settings section.
+        advancedSettings.hidden = false;
+
+        // Delay starting the transition so that hidden change will be
+        // processed.
+        setTimeout(function() {
+          // Reveal the advanced settings section using a WebKit transition.
+          advancedSettings.classList.add('sliding');
+          advancedSettings.style.height =
+              advancedSettingsContainer.offsetHeight + 'px';
+        }, 0);
+      } else {
+        // Before we start hiding the advanced settings section, we need to set
+        // the height to a pixel value.
+        advancedSettings.style.height =
+            advancedSettingsContainer.offsetHeight + 'px';
+
+        // Delay starting the transition so that the height change will be
+        // processed.
+        setTimeout(function() {
+          // Hide the advanced settings section using a WebKit transition.
+          advancedSettings.classList.add('sliding');
+          advancedSettings.style.height = '';
+        }, 0);
+      }
     },
 
     /**
-     * Show advanced settings.
+     * Called after the advanced settings transition has ended.
      * @private
      */
-    showAdvancedSettings_: function() {
-      $('advanced-settings').style.height =
-          $('advanced-settings-container').offsetHeight + 20 + 'px';
-      $('advanced-settings-expander').textContent =
-          localStrings.getString('hideAdvancedSettings');
-    },
+    advancedSettingsTransitionEnded_: function(event) {
+      if (event.propertyName != 'height')
+        return;
 
-    /**
-     * Hide advanced settings.
-     * @private
-     */
-    hideAdvancedSettings_: function() {
-      $('advanced-settings').style.height = '';
-      $('advanced-settings-expander').textContent =
-          localStrings.getString('showAdvancedSettings');
+      var expander = $('advanced-settings-expander');
+      var advancedSettings = $('advanced-settings');
+
+      // Disable WebKit transitions.
+      advancedSettings.classList.remove('sliding');
+
+      if (advancedSettings.style.height == '') {
+        // Hide the advanced settings content so it can't get tab focus.
+        advancedSettings.hidden = true;
+
+        expander.textContent = localStrings.getString('showAdvancedSettings');
+      } else {
+        // Set the advanced section height to 'auto' to allow for size changes
+        // (due to font change or dynamic content).
+        advancedSettings.style.height = 'auto';
+
+        expander.textContent = localStrings.getString('hideAdvancedSettings');
+      }
     },
 
     /**