[uber page] Make sub-page navigation smoother on page load

R=estade@chromium.org
BUG=112382
TEST=Uber page loads perceptibly faster.


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

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

6 files changed, 45 insertions, 38 deletions

diff --git a/chrome/browser/resources/options2/options.js b/chrome/browser/resources/options2/options.js
index c1f3f74..757b965 100644
--- a/chrome/browser/resources/options2/options.js
+++ b/chrome/browser/resources/options2/options.js
@@ -244,8 +244,13 @@ function load() {
 
   if (navigator.plugins['Shockwave Flash'])
     document.documentElement.setAttribute('hasFlashPlugin', '');
+
+  window.setTimeout(function() {
+    document.documentElement.classList.remove('loading');
+  });
 }
 
+document.documentElement.classList.add('loading');
 document.addEventListener('DOMContentLoaded', load);
 
 /**
diff --git a/chrome/browser/resources/options2/options_page.js b/chrome/browser/resources/options2/options_page.js
index 0482f70..24a8a46 100644
--- a/chrome/browser/resources/options2/options_page.js
+++ b/chrome/browser/resources/options2/options_page.js
@@ -114,8 +114,9 @@ cr.define('options', function() {
       if (!page.parentPage && isRootPageLocked)
         continue;
       if (page.willHidePage && name != pageName &&
-          !page.isAncestorOfPage(targetPage))
+          !page.isAncestorOfPage(targetPage)) {
         page.willHidePage();
+      }
     }
 
     // Update visibilities to show only the hierarchy of the target page.
@@ -140,9 +141,10 @@ cr.define('options', function() {
       var page = this.registeredPages[name];
       if (!page.parentPage && isRootPageLocked)
         continue;
-      if (!targetPageWasVisible && page.didShowPage && (name == pageName ||
-          page.isAncestorOfPage(targetPage)))
+      if (!targetPageWasVisible && page.didShowPage &&
+          (name == pageName || page.isAncestorOfPage(targetPage))) {
         page.didShowPage();
+      }
     }
   };
 
@@ -660,27 +662,17 @@ cr.define('options', function() {
     this.handleScroll_();
 
     // Shake the dialog if the user clicks outside the dialog bounds.
-    $('overlay').onclick = this.shakeDialog_;
-  };
-
-  /**
-   * Sets and resets the shake class to perform the shake animation.
-   * @private
-   */
-  OptionsPage.shakeDialog_ = function(e) {
-    // Only shake if the non-page part of the overlay is clicked.
-    if (e.target != this)
-      return;
-
-    // Query the visible overlay page.
-    var page = this.querySelector('.page:not([hidden])');
+    var overlay = $('overlay');
 
-    // Shake it.
-    page.classList.add('shake');
+    overlay.onclick = function(e) {
+      // Only shake if the overlay was the target of the click.
+      if (e.target == overlay)
+        overlay.querySelector('.page:not([hidden])').classList.add('shake');
+    };
 
-    // Bake it.
-    page.addEventListener('webkitAnimationEnd', function() {
-      page.classList.remove('shake');
+    overlay.addEventListener('webkitAnimationEnd', function(e) {
+      if (e.target.classList.contains('page'))
+        e.target.classList.remove('shake');
     });
   };
 
@@ -1011,17 +1003,21 @@ cr.define('options', function() {
 
       if (visible) {
         container.hidden = false;
-        if (isSubpage) {
-          var computedStyle = window.getComputedStyle(container);
-          container.style.WebkitPaddingStart =
-              parseInt(computedStyle.WebkitPaddingStart, 10) + 100 + 'px';
-        }
-        // Separate animating changes from the removal of display:none.
-        window.setTimeout(function() {
+        if (document.documentElement.classList.contains('loading')) {
           container.classList.remove('transparent');
-          if (isSubpage)
-            container.style.WebkitPaddingStart = '';
-        });
+        } else {
+          if (isSubpage) {
+            var computedStyle = window.getComputedStyle(container);
+            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.WebkitPaddingStart = '';
+          });
+        }
       } else {
         var self = this;
         container.addEventListener('webkitTransitionEnd', function f(e) {
diff --git a/chrome/browser/resources/shared/css/chrome_shared2.css b/chrome/browser/resources/shared/css/chrome_shared2.css
index a34cac9..4092a0f 100644
--- a/chrome/browser/resources/shared/css/chrome_shared2.css
+++ b/chrome/browser/resources/shared/css/chrome_shared2.css
@@ -14,6 +14,11 @@
   display: none !important;
 }
 
+html.loading * {
+  -webkit-transition-delay: 0 !important;
+  -webkit-transition-duration: 0 !important;
+}
+
 body {
   cursor: default;
   margin: 0;
diff --git a/chrome/browser/resources/uber/uber.css b/chrome/browser/resources/uber/uber.css
index 3e013ad..c04f376 100644
--- a/chrome/browser/resources/uber/uber.css
+++ b/chrome/browser/resources/uber/uber.css
@@ -2,11 +2,6 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
-html.loading * {
-  -webkit-transition-delay: 0 !important;
-  -webkit-transition-duration: 0 !important;
-}
-
 #navigation {
   height: 100%;
   left: 0;
diff --git a/chrome/browser/resources/uber/uber.js b/chrome/browser/resources/uber/uber.js
index e9fd4a9..d454d0b 100644
--- a/chrome/browser/resources/uber/uber.js
+++ b/chrome/browser/resources/uber/uber.js
@@ -36,6 +36,12 @@ cr.define('uber', function() {
     window.setTimeout(function() {
       document.documentElement.classList.remove('loading');
     }, 0);
+
+    // HACK(dbeam): This makes the assumption that any second part to a path
+    // will result in needing background navigation. We shortcut it to avoid
+    // flicker on load.
+    if (params.path && window.location.pathname.indexOf('settings') == 0)
+      backgroundNavigation();
   }
 
   /**
diff --git a/chrome/browser/resources/uber/uber_frame.css b/chrome/browser/resources/uber/uber_frame.css
index 31d869f..6d775ea 100644
--- a/chrome/browser/resources/uber/uber_frame.css
+++ b/chrome/browser/resources/uber/uber_frame.css
@@ -19,7 +19,7 @@ ul {
 }
 
 li {
-  -webkit-border-start: 6px solid white;
+  -webkit-border-start: 6px solid transparent;
   -webkit-padding-start: 18px;
   color: #999;
   cursor: pointer;