WebUI Prefs: Animate the subpage slide-in with padding, rather than margin

This makes it much less likely that the animation will cause a flash of scroll bars.

BUG=74869
TEST=Open a subpage; unless the window is only slightly wider than the min page width, there should be no scrollbars.

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

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

2 files changed, 4 insertions, 4 deletions

diff --git a/chrome/browser/resources/options/options_page.css b/chrome/browser/resources/options/options_page.css
index d04e17d..b8a542b 100644
--- a/chrome/browser/resources/options/options_page.css
+++ b/chrome/browser/resources/options/options_page.css
@@ -253,7 +253,7 @@ html.hide-menu #mainview {
 }
 
 .subpage-sheet-container {
-  -webkit-transition: 0.25s opacity, 0.1s margin-left, 0.1s margin-right;
+  -webkit-transition: 0.25s opacity, 0.1s padding-left, 0.1s padding-right;
   box-sizing: border-box;
   min-height: 100%;
   position: absolute;
diff --git a/chrome/browser/resources/options/options_page.js b/chrome/browser/resources/options/options_page.js
index 2afa1dc..e7d43c8 100644
--- a/chrome/browser/resources/options/options_page.js
+++ b/chrome/browser/resources/options/options_page.js
@@ -852,14 +852,14 @@ cr.define('options', function() {
         container.hidden = false;
         if (isSubpage) {
           var computedStyle = window.getComputedStyle(container);
-          container.style.WebkitMarginStart =
-              parseInt(computedStyle.WebkitMarginStart, 10) + 100 + 'px';
+          container.style.WebkitPaddingStart =
+              parseInt(computedStyle.WebkitPaddingStart, 10) + 100 + 'px';
         }
         // Separate animating changes from the removal of display:none.
         window.setTimeout(function() {
           container.classList.remove('transparent');
           if (isSubpage)
-            container.style.WebkitMarginStart = '';
+            container.style.WebkitPaddingStart = '';
         });
       } else {
         var self = this;