[MD settings] side nav routing to page sections

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.
 
 // Fast out, slow in.
 var EASING_FUNCTION = 'cubic-bezier(0.4, 0, 0.2, 1)';
 var EXPAND_DURATION = 350;
 
 /**
  * Provides animations to expand and collapse individual sections in a page.
@@ skipping 291 matching lines @@
       minHeight: card.origHeight_ + 'px',
     }];
     var options = /** @type {!KeyframeEffectOptions} */({
       duration: EXPAND_DURATION
     });
     var promise = this.animateElement('section', card, keyframes, options);
     return promise;
   },
 };
 
+
 /** @polymerBehavior */
 var MainPageBehavior = [
   TransitionBehavior,
   MainPageBehaviorImpl
 ];
 
+
 /**
  * TODO(michaelpg): integrate slide animations.
  * @polymerBehavior RoutableBehavior
  */
 var RoutableBehaviorImpl = {
   properties: {
     /** Contains the current route. */
     currentRoute: {
       type: Object,
       notify: true,
       observer: 'currentRouteChanged_',
     },
   },
 
+  /**
+   * @param {string} section Name of the item to scroll into view.
+   */
+  scrollToSection: function(section) {
+    if (section) {
+      // TODO(dschuyler): Determine whether this setTimeout can be removed.
+      // See also: https://github.com/Polymer/polymer/issues/3629
+      setTimeout(function() {
+        this.getSection_(section).scrollIntoView();
+      }.bind(this));
+    }
+  },
+
   /** @private */
   currentRouteChanged_: function(newRoute, oldRoute) {
-    // route.section is only non-empty when the user is within a subpage.
-    // When the user is not in a subpage, but on the Basic page, route.section
-    // is an empty string.
-    var newRouteIsSubpage = newRoute && newRoute.section;
-    var oldRouteIsSubpage = oldRoute && oldRoute.section;
+    var newRouteIsSubpage = newRoute && newRoute.subpage.length;
+    var oldRouteIsSubpage = oldRoute && oldRoute.subpage.length;
 
     if (!oldRoute && newRouteIsSubpage) {
       // Allow the page to load before expanding the section. TODO(michaelpg):
       // Time this better when refactoring settings-animated-pages.
       setTimeout(function() {
         var section = this.getSection_(newRoute.section);
         if (section)
           this.expandSection(section);
       }.bind(this));
       return;
     }
 
     if (!newRouteIsSubpage && oldRouteIsSubpage) {
       var section = this.getSection_(oldRoute.section);
       if (section)
         this.collapseSection(section);
     } else if (newRouteIsSubpage &&
                (!oldRouteIsSubpage || newRoute.section != oldRoute.section)) {
       var section = this.getSection_(newRoute.section);
       if (section)
         this.expandSection(section);
+    } else if (newRoute && newRoute.section) {
+      this.scrollToSection(newRoute.section);
     }
   },
 
   /**
    * Helper function to get a section from the local DOM.
    * @param {string} section Section name of the element to get.
    * @return {?SettingsSectionElement}
    * @private
    */
   getSection_: function(section) {
     return /** @type {?SettingsSectionElement} */(
         this.$$('[section=' + section + ']'));
   },
 };
 
+
 /** @polymerBehavior */
 var RoutableBehavior = [
   MainPageBehavior,
   RoutableBehaviorImpl
 ];