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

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

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * Responds to route changes by expanding, collapsing, or scrolling to sections
  * on the page. Expanded sections take up the full height of the container. At
  * most one section should be expanded at any given time.
  * @polymerBehavior MainPageBehavior
  */
@@ skipping 76 matching lines @@
 
     // TODO(dschuyler): This doesn't set the flag in the case of going to or
     // from the main page. It seems sensible to set the flag in those cases,
     // unfortunately bug 708465 happens. Figure out why that is and then set
     // this flag more broadly.
     if (oldRoute && oldRoute.isSubpage() && newRoute.isSubpage())
       this.isSubpageAnimating = true;
 
     // 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);
   },
 
   /**
    * When exiting search mode, we need to make another attempt to scroll to
    * the correct section, since it has just been re-rendered.
    * @private
    */
   inSearchModeChanged_: function(inSearchMode) {
     if (!this.isAttached)
       return;
 
     if (!inSearchMode)
       this.tryTransitionToSection_(!settings.lastRouteChangeWasPopstate());
   },
 
   /**
    * If possible, transitions to the current route's section (by expanding or
    * scrolling to it). If another transition is running, finishes or cancels
    * that one, then schedules this function again. This ensures the current
    * 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);
 
     // If an animation is already playing, try finishing or canceling it.
     if (this.currentAnimation_) {
       this.maybeStopCurrentAnimation_();
       // Either way, this function will be called again once the current
       // animation ends.
       return;
     }
 
     var promise;
     var expandedSection = /** @type {?SettingsSectionElement} */(
         this.$$('settings-section.expanded'));
     if (expandedSection) {
       // If the section shouldn't be expanded, collapse it.
       if (!currentRoute.isSubpage() || expandedSection != currentSection) {
         promise = this.collapseSection_(expandedSection);
       } else {
         // Scroll to top while sliding to another subpage.
         this.scroller.scrollTop = 0;
       }
     } 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 (
         this.tagName == 'SETTINGS-BASIC-PAGE' &&
         settings.Route.ADVANCED.contains(currentRoute) &&
         // Need to exclude routes that correspond to 'non-sectioned' children of
         // 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));
+    }
   },
 
   /**
    * If the current animation is inconsistent with the current route, stops the
    * animation by finishing or canceling it so the new route can be animated to.
    * @private
    */
   maybeStopCurrentAnimation_: function() {
     var currentRoute = settings.getCurrentRoute();
     var animatingSection = /** @type {?SettingsSectionElement} */(
@@ skipping 21 matching lines @@
       this.currentAnimation_.cancel();
       return;
     }
 
     // The current route is a subpage, so that section needs to expand.
     // Immediately finish the current collapse animation so that can happen.
     this.currentAnimation_.finish();
   },
 
   /**
+   * 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.
    * @private
    */
   expandSection_: function(section) {
     assert(this.scroller);
-
     if (!section.canAnimateExpand()) {
       // Try to wait for the section to be created.
       return new Promise(function(resolve, reject) {
         setTimeout(resolve);
       });
     }
 
     // Save the scroller position before freezing it.
     this.origScrollTop_ = this.scroller.scrollTop;
     this.fire('freeze-scroll', true);
 
     // Freeze the section's height so its card can be removed from the flow.
     section.setFrozen(true);
 
     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);
+    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));
+  },
 
-      // Notify that the page is fully expanded.
-      this.fire('subpage-expand');
+  /** @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 = true;
-    }.bind(this), function() {
-      // The animation was canceled; restore the section and scroll position.
-      section.setFrozen(false);
-      this.scroller.scrollTop = this.origScrollTop_;
-
-      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');
   },
 
   /**
    * Animates the card in |section|, collapsing it back into its section.
    * @param {!SettingsSectionElement} section
    * @return {!Promise} Resolved when the transition is finished or canceled.
    */
   collapseSection_: function(section) {
     assert(this.scroller);
     assert(section.classList.contains('expanded'));
@@ skipping 84 matching lines @@
     return /** @type {?SettingsSectionElement} */(
         this.$$('settings-section[section="' + section + '"]'));
   },
 };
 
 /** @polymerBehavior */
 var MainPageBehavior = [
   settings.RouteObserverBehavior,
   MainPageBehaviorImpl,
 ];