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..91c93a108d09dfb3bd99d1b101220dac33b14095 100644
--- a/chrome/browser/resources/settings/settings_page/main_page_behavior.js
+++ b/chrome/browser/resources/settings/settings_page/main_page_behavior.js
@@ -30,14 +30,15 @@ var MainPageBehaviorImpl = {
       value: false,
       observer: 'inSearchModeChanged_',
     },
+
+    // Whether to hide parent container during loading state.
+    shouldHideContainer: {type: Boolean, value: false, notify: true},
   },
 
   /** @type {?HTMLElement} The scrolling container. */
   scroller: null,
 
-  listeners: {
-    'neon-animation-finish': 'onNeonAnimationFinish_'
-  },
+  listeners: {'neon-animation-finish': 'onNeonAnimationFinish_'},
 
   /** @override */
   attached: function() {
@@ -94,9 +95,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.shouldHideContainer = true;
+      setTimeout(function() {
+        this.shouldHideContainer = false;
+        this.tryTransitionToSection_(scrollToSection, true);
+      }.bind(this));
+    } else
       this.tryTransitionToSection_(scrollToSection);
   },
 
@@ -120,9 +125,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 +154,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);
+        else
+          promise = this.expandSection_(currentSection);
       else if (scrollToSection)
         currentSection.scrollIntoView();
     } else if (
@@ -158,13 +167,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/03 00:17:36]

Advanced

+      this.shouldHideContainer = true;

[scottchen, 2017/05/01 19:25:07]

I had to add this, since the basic page was still briefly showing up while the
advanced page was being loaded.

[michaelpg, 2017/05/03 00:17:36]

Add a TODO here: Avoid recursion by checking if the Advanced template has been
stamped yet.

(that may help you deal with shouldHideContainer more cleanly)

       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.shouldHideContainer = false;

[scottchen, 2017/05/01 19:25:07]

I had to add this, since the basic page was still briefly showing up while the
advanced page was being loaded.

[michaelpg, 2017/05/03 00:17:36]

I'm hoping we can factor that out the same way as my comment above, after this
CL lands.

+          }.bind(this));
+    }
   },
 
   /**
@@ -206,6 +221,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');

[scottchen, 2017/05/01 19:25:07]

I had to add this, otherwise iron-lists inside of sub-pages would not load
correctly (since the subpage did not have a size when iron-list attached.)

[michaelpg, 2017/05/03 00:17:36]

we do this in a few other places, probably doesn't need the TODO.

Does firing 'iron-resize' instead work? (rather than fake a document resize
event)

+  },
+
+  /**
    * 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 +241,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 +257,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 */

[michaelpg, 2017/05/03 00:17:36]

annotate section

+  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');
   },
 
   /**