MD Settings: Remove subpage animation when landing directly on it.

chrome/browser/resources/settings/settings_page/main_page_behavior.js

Index: chrome/browser/resources/settings/settings_page/main_page_behavior.js
diff --git a/chrome/browser/resources/settings/settings_page/main_page_behavior.js b/chrome/browser/resources/settings/settings_page/main_page_behavior.js
index 3886816a9110fcb731267fad86474ae00c3b1cf4..40ce2eff629ea02c25b1021b76b633836a156e02 100644
--- a/chrome/browser/resources/settings/settings_page/main_page_behavior.js
+++ b/chrome/browser/resources/settings/settings_page/main_page_behavior.js
@@ -94,9 +94,13 @@ var MainPageBehaviorImpl = {
 
     // For previously uncreated pages (including on first load), allow the page
     // to render before scrolling to or expanding the section.
-    if (!oldRoute || this.scrollHeight == 0)
-      setTimeout(this.tryTransitionToSection_.bind(this, scrollToSection));
-    else
+    if (!oldRoute || this.scrollHeight == 0) {
+      this.fire('hide-container');

[michaelpg, 2017/05/24 21:29:40]

Can we limit this event to the !oldRoute case? In cases where oldRoute exists
but this.scrollHeight == 0, which might happen when navigating to an Advanced
sub-page IIRC, I don't think we want to hide the container.

So I'm proposing logic that might work like this:

if (!oldRoute || this.scrollHeight == 0) {
  if (!oldRoute) fire hide-container;
  setTimeout(
    if (!oldRoute) fire 'show-container';
    // call tryTransition(immediate = !oldRoute);
  )
} else {
  // call tryTransition;
}

[scottchen, 2017/05/25 19:28:30]

I think at this point it's probably easier to separate !oldRoute and
scrollHeight == 0 logic because they're pretty different.

+      setTimeout(function() {
+        this.fire('show-container');
+        this.tryTransitionToSection_(scrollToSection, true);
+      }.bind(this));
+    } else
       this.tryTransitionToSection_(scrollToSection);
   },
 
@@ -120,9 +124,10 @@ var MainPageBehaviorImpl = {
    * section is quickly shown, without getting the page into a broken state --
    * if currentRoute changes in between calls, just transition to the new route.
    * @param {boolean} scrollToSection
+   * @param {boolean=} immediate Whether to instantly expand instead of animate.
    * @private
    */
-  tryTransitionToSection_: function(scrollToSection) {
+  tryTransitionToSection_: function(scrollToSection, immediate) {
     var currentRoute = settings.getCurrentRoute();
     var currentSection = this.getSection(currentRoute.section);
 
@@ -148,7 +153,10 @@ var MainPageBehaviorImpl = {
     } else if (currentSection) {
       // Expand the section into a subpage or scroll to it on the main page.
       if (currentRoute.isSubpage())
-        promise = this.expandSection_(currentSection);
+        if (immediate)
+          this.expandSectionImmediate_(currentSection);

[michaelpg, 2017/05/24 21:29:40]

maybe we should [only?] fire show-container after this?

[scottchen, 2017/05/25 19:28:30]

Acknowledged. The new logic in currentRouteChanged should be equivalent to what
you suggested here.

+        else
+          promise = this.expandSection_(currentSection);
       else if (scrollToSection)
         currentSection.scrollIntoView();
     } else if (
@@ -158,13 +166,19 @@ var MainPageBehaviorImpl = {
         // ADVANCED, otherwise tryTransitionToSection_ will recurse endlessly.
         !currentRoute.isNavigableDialog) {
       assert(currentRoute.section);
+      // Hide the container again while Advanecd Page template is being loaded.

[michaelpg, 2017/05/24 21:29:40]

Advanced

[scottchen, 2017/05/25 19:28:30]

Done.

+      this.fire('hide-container');

[michaelpg, 2017/05/24 21:29:40]

does this work under both edge cases?

1. immediately loading some advanced subpage URL
2. loading the basic page, then navigateTo an advanced subpage URL

[scottchen, 2017/05/25 19:28:30]

I tried:
1. going to basic page -> click advanced -> click autofill to go to subpage,
everything stays visible
2. refresh on the autofill subpage, page is correctly hidden until subpage
loads.

So I think in both cases you mentioned it works correctly.

       promise = this.$$('#advancedPageTemplate').get();
     }
 
     // When this animation ends, another may be necessary. Call this function
     // again after the promise resolves.
-    if (promise)
-      promise.then(this.tryTransitionToSection_.bind(this, scrollToSection));
+    if (promise) {
+      promise.then(this.tryTransitionToSection_.bind(this, scrollToSection))
+          .then(function() {
+            this.fire('show-container');

[michaelpg, 2017/05/24 21:29:40]

Do we need this both here *and* in the setTimeout in currentRouteChanged?

[scottchen, 2017/05/25 19:28:30]

This is to re-show the container after hiding it on line 170.

+          }.bind(this));
+    }
   },
 
   /**
@@ -206,6 +220,19 @@ var MainPageBehaviorImpl = {
   },
 
   /**
+   * Immediately expand the card in |section| to fill the page.
+   * @param {!SettingsSectionElement} section
+   * @private
+   */
+  expandSectionImmediate_: function(section) {
+    assert(this.scroller);
+    section.immediateExpand(this.scroller);
+    this.finishedExpanding_(section);
+    // TODO(scottchen): iron-list inside subpages need this to render correctly.
+    this.fire('resize');
+  },
+
+  /**
    * Animates the card in |section|, expanding it to fill the page.
    * @param {!SettingsSectionElement} section
    * @return {!Promise} Resolved when the transition is finished or canceled.
@@ -213,7 +240,6 @@ var MainPageBehaviorImpl = {
    */
   expandSection_: function(section) {
     assert(this.scroller);
-
     if (!section.canAnimateExpand()) {
       // Try to wait for the section to be created.
       return new Promise(function(resolve, reject) {
@@ -230,28 +256,33 @@ var MainPageBehaviorImpl = {
 
     this.currentAnimation_ = section.animateExpand(this.scroller);
 
-    var finished;
-    return this.currentAnimation_.finished.then(function() {
-      // Hide other sections and scroll to the top of the subpage.
-      this.classList.add('showing-subpage');
-      this.toggleOtherSectionsHidden_(section.section, true);
-      this.scroller.scrollTop = 0;
-      section.setFrozen(false);
-
-      // Notify that the page is fully expanded.
-      this.fire('subpage-expand');
+    return this.currentAnimation_.finished
+        .then(
+            function() {
+              this.finishedExpanding_(section);
+            }.bind(this),
+            function() {
+              // The animation was canceled; restore the section and scroll
+              // position.
+              section.setFrozen(false);
+              this.scroller.scrollTop = this.origScrollTop_;
+            }.bind(this))
+        .then(function() {
+          this.fire('freeze-scroll', false);
+          this.currentAnimation_ = null;
+        }.bind(this));
+  },
 
-      finished = true;
-    }.bind(this), function() {
-      // The animation was canceled; restore the section and scroll position.
-      section.setFrozen(false);
-      this.scroller.scrollTop = this.origScrollTop_;
+  /** @private */
+  finishedExpanding_: function(section) {
+    // Hide other sections and scroll to the top of the subpage.
+    this.classList.add('showing-subpage');
+    this.toggleOtherSectionsHidden_(section.section, true);
+    this.scroller.scrollTop = 0;
+    section.setFrozen(false);
 
-      finished = false;
-    }.bind(this)).then(function() {
-      this.fire('freeze-scroll', false);
-      this.currentAnimation_ = null;
-    }.bind(this));
+    // Notify that the page is fully expanded.
+    this.fire('subpage-expand');
   },
 
   /**