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..54bd729972a338e71db9ecbf72e0b10eb0e030c3 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,19 @@ var MainPageBehaviorImpl = {
       value: false,
       observer: 'inSearchModeChanged_',
     },
+
+    // Controls to show or hide parent container during loading state.

[michaelpg, 2017/04/27 20:00:20]

nit: "Whether to hide parent container..."

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

Done.

+    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 +99,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);
   },
 
@@ -122,7 +131,7 @@ var MainPageBehaviorImpl = {
    * @param {boolean} scrollToSection

[michaelpg, 2017/04/27 20:00:20]

document immediate

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

Done.

    * @private
    */
-  tryTransitionToSection_: function(scrollToSection) {
+  tryTransitionToSection_: function(scrollToSection, immediate) {
     var currentRoute = settings.getCurrentRoute();
     var currentSection = this.getSection(currentRoute.section);
 
@@ -148,7 +157,7 @@ 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);
+        promise = this.expandSection_(currentSection, immediate);
       else if (scrollToSection)
         currentSection.scrollIntoView();
     } else if (
@@ -211,9 +220,19 @@ var MainPageBehaviorImpl = {
    * @return {!Promise} Resolved when the transition is finished or canceled.
    * @private
    */
-  expandSection_: function(section) {
+  expandSection_: function(section, immediate) {
     assert(this.scroller);
 
+    if (immediate) {

[michaelpg, 2017/04/27 20:00:20]

how about making this a separate function, instead of introducing a parameter?
then invoke in tryTransitionToSection_:

if (currentRoute.isSubpage()) {
  if (immediate)
    this.expandSectionImmediate_(currentSection);
  else
    promise = ....

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

Done.

+      section.immediateExpand(this.scroller);
+
+      this.classList.add('showing-subpage');

[michaelpg, 2017/04/27 20:00:20]

if so, we could create a helper method for the common stuff in these lines and
the lines beginning on 254

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

Done.

+      this.toggleOtherSectionsHidden_(section.section, true);
+      // Notify that the page is fully expanded.
+      this.fire('subpage-expand');
+      return;
+    }
+
     if (!section.canAnimateExpand()) {
       // Try to wait for the section to be created.
       return new Promise(function(resolve, reject) {