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 12 matching lines @@
     /**
      * Whether a search operation is in progress or previous search results are
      * being displayed.
      * @private {boolean}
      */
     inSearchMode: {
       type: Boolean,
       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() {
     this.scroller = this.domHost ? this.domHost.parentNode : document.body;
   },
 
   /**
    * Remove the is-animating attribute once the animation is complete.
    * This may catch animations finishing more often than needed, which is not
    * known to cause any issues (e.g. when animating from a shallower page to a
@@ skipping 36 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.shouldHideContainer = true;
+      setTimeout(function() {
+        this.shouldHideContainer = false;
+        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

[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);
 
     // 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);
+        promise = this.expandSection_(currentSection, immediate);
       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);
       promise = this.$$('#advancedPageTemplate').get();
@@ skipping 42 matching lines @@
     // Immediately finish the current collapse animation so that can happen.
     this.currentAnimation_.finish();
   },
 
   /**
    * 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) {
+  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) {
         setTimeout(resolve);
       });
     }
 
     // Save the scroller position before freezing it.
     this.origScrollTop_ = this.scroller.scrollTop;
     this.fire('freeze-scroll', true);
@@ skipping 122 matching lines @@
     return /** @type {?SettingsSectionElement} */(
         this.$$('settings-section[section="' + section + '"]'));
   },
 };
 
 /** @polymerBehavior */
 var MainPageBehavior = [
   settings.RouteObserverBehavior,
   MainPageBehaviorImpl,
 ];