[MD settings] side nav routing to page sections

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

 // Copyright 2015 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.
 
 /**
+ * @typedef {{
+ *   url: string,
+ *   page: string,
+ *   section: string,
+ *   subpage: !Array<string>,
+ * }}
+ */
+var SettingsRoute;
+
+/**
  * @fileoverview
  * 'settings-router' is a simple router for settings. Its responsibilities:
  *  - Update the URL when the routing state changes.
  *  - Initialize the routing state with the initial URL.
  *  - Process and validate all routing state changes.
  *
  * Example:
  *
  *    <settings-router current-route="{{currentRoute}}">
  *    </settings-router>
  */
 Polymer({
   is: 'settings-router',
 
   properties: {
     /**
      * The current active route. This is reflected to the URL. Updates to this
      * property should replace the whole object.
      *
      * currentRoute.page refers to top-level pages such as Basic and Advanced.
      *
      * currentRoute.section is only non-empty when the user is on a subpage. If
      * the user is on Basic, for instance, this is an empty string.
      *
      * currentRoute.subpage is an Array. The last element is the actual subpage
      * the user is on. The previous elements are the ancestor subpages. This
      * enables support for multiple paths to the same subpage. This is used by
      * both the Back button and the Breadcrumb to determine ancestor subpages.
+     * @type {SettingsRoute}
      */
     currentRoute: {
       notify: true,
       observer: 'currentRouteChanged_',
       type: Object,
       value: function() {
         // Take the current URL, find a matching pre-defined route, and
         // initialize the currentRoute to that pre-defined route.
         for (var i = 0; i < this.routes_.length; ++i) {
           var route = this.routes_[i];
           if (route.url == window.location.pathname) {
             return {
+              url: route.url,
               page: route.page,
               section: route.section,
               subpage: route.subpage,
             };
           }
         }
 
         // As a fallback return the default route.
         return this.routes_[0];
       },
     },
 
     /**
      * Page titles for the currently active route. Updated by the currentRoute
      * property observer.
      * @type {{pageTitle: string}}
      */
     currentRouteTitles: {
       notify: true,
       type: Object,
       value: function() {
         return {
           pageTitle: '',
         };
       },
     },
   },
 
 
- /**
-  * @private
-  * The 'url' property is not accessible to other elements.
-  */
- routes_: [
+  /**
+   * @private {!Array<!SettingsRoute>}
+   * The 'url' property is not accessible to other elements.
+   */
+  routes_: [
     {
       url: '/',
       page: 'basic',
       section: '',
       subpage: [],
     },
     {
       url: '/advanced',
       page: 'advanced',
       section: '',
       subpage: [],
     },
 <if expr="chromeos">
     {
+      url: '/internet',
+      page: 'basic',
+      section: 'internet',
+      subpage: [],
+    },
+    {
       url: '/networkDetail',
       page: 'basic',
       section: 'internet',
       subpage: ['network-detail'],
     },
     {
       url: '/knownNetworks',
       page: 'basic',
       section: 'internet',
       subpage: ['known-networks'],
     },
 </if>
     {
+      url: '/appearance',
+      page: 'basic',
+      section: 'appearance',
+      subpage: [],
+    },
+    {
       url: '/fonts',
       page: 'basic',
       section: 'appearance',
       subpage: ['appearance-fonts'],
     },
     {
+      url: '/defaultBrowser',
+      page: 'basic',
+      section: 'defaultBrowser',
+      subpage: [],
+    },
+    {
+      url: '/search',
+      page: 'basic',
+      section: 'search',
+      subpage: [],
+    },
+    {
       url: '/searchEngines',
       page: 'basic',
       section: 'search',
       subpage: ['search-engines'],
     },
     {
       url: '/searchEngines/advanced',
       page: 'basic',
       section: 'search',
       subpage: ['search-engines', 'search-engines-advanced'],
     },
+    {
+      url: '/onStartup',
+      page: 'basic',
+      section: 'onStartup',
+      subpage: [],
+    },
+    {
+      url: '/people',
+      page: 'basic',
+      section: 'people',
+      subpage: [],
+    },
 <if expr="chromeos">
     {
       url: '/changePicture',
       page: 'basic',
       section: 'people',
       subpage: ['changePicture'],
     },
 </if>
 <if expr="not chromeos">
     {
@@ skipping 11 matching lines @@
     },
 <if expr="chromeos">
     {
       url: '/accounts',
       page: 'basic',
       section: 'people',
       subpage: ['users'],
     },
 </if>
     {
+      url: '/advanced',
+      page: 'advanced',
+      section: 'privacy',
+      subpage: [],
+    },
+    {
       url: '/certificates',
       page: 'advanced',
       section: 'privacy',
       subpage: ['manage-certificates'],
     },
     {
       url: '/siteSettings',
       page: 'advanced',
       section: 'privacy',
       subpage: ['site-settings'],
@@ skipping 130 matching lines @@
           'site-details'],
     },
     {
       url: '/clearBrowserData',
       page: 'advanced',
       section: 'privacy',
       subpage: ['clear-browsing-data'],
     },
 <if expr="chromeos">
     {
+      url: '/bluetooth',
+      page: 'advanced',
+      section: 'bluetooth',
+      subpage: [],
+    },
+    {
       url: '/bluetoothAddDevice',
       page: 'advanced',
       section: 'bluetooth',
       subpage: ['bluetooth-add-device'],
     },
     {
       url: '/bluetoothAddDevice/bluetoothPairDevice',
       page: 'advanced',
       section: 'bluetooth',
       subpage: ['bluetooth-add-device', 'bluetooth-pair-device'],
     },
 </if>
     {
       url: '/autofill',
       page: 'advanced',
       section: 'passwordsAndForms',
       subpage: ['manage-autofill'],
     },
     {
+      url: '/pw',  // TODO(dschuyler): find a better url.
+      page: 'advanced',
+      section: 'passwordsAndForms',
+      subpage: [],
+    },
+    {
       url: '/passwords',
       page: 'advanced',
       section: 'passwordsAndForms',
       subpage: ['manage-passwords'],
     },
     {
+      url: '/ln',  // TODO(dschuyler): find a better url.
+      page: 'advanced',
+      section: 'languages',
+      subpage: [],
+    },
+    {
       url: '/languages',
       page: 'advanced',
       section: 'languages',
       subpage: ['manage-languages'],
     },
     {
       url: '/languages/edit',
       page: 'advanced',
       section: 'languages',
       subpage: ['language-detail'],
     },
 <if expr="chromeos">
     {
       url: '/inputMethods',
       page: 'advanced',
       section: 'languages',
       subpage: ['manage-input-methods'],
     },
 </if>
 <if expr="not is_macosx">
     {
       url: '/editDictionary',
       page: 'advanced',
       section: 'languages',
       subpage: ['edit-dictionary'],
     },
 </if>
+    {
+      url: '/downloadsDirectory',
+      page: 'advanced',
+      section: 'downloads',
+      subpage: [],
+    },
+    {
+      url: '/accessibility',
+      page: 'advanced',
+      section: 'a11y',
+      subpage: [],
+    },
+    {
+      url: '/system',
+      page: 'advanced',
+      section: 'system',
+      subpage: [],
+    },
+    {
+      url: '/reset',
+      page: 'advanced',
+      section: 'reset',
+      subpage: [],
+    },
 <if expr="chromeos">
     {
+      url: '/device',
+      page: 'basic',
+      section: 'device',
+      subpage: [],
+    },
+    {
       url: '/pointer-overlay',
       page: 'basic',
       section: 'device',
       subpage: ['touchpad'],
     },
     {
       url: '/keyboard-overlay',
       page: 'basic',
       section: 'device',
       subpage: ['keyboard'],
@@ skipping 11 matching lines @@
    * Sets up a history popstate observer.
    */
   created: function() {
     window.addEventListener('popstate', function(event) {
       if (event.state && event.state.page)
         this.currentRoute = event.state;
     }.bind(this));
   },
 
   /**
-   * @private
    * Is called when another element modifies the route. This observer validates
    * the route change against the pre-defined list of routes, and updates the
    * URL appropriately.
+   * @param {!SettingsRoute} newRoute Where we're headed.
+   * @param {!SettingsRoute|undefined} oldRoute Where we've been.
+   * @private
    */
   currentRouteChanged_: function(newRoute, oldRoute) {
     for (var i = 0; i < this.routes_.length; ++i) {
       var route = this.routes_[i];
       if (route.page == newRoute.page && route.section == newRoute.section &&
           route.subpage.length == newRoute.subpage.length &&
           newRoute.subpage.every(function(value, index) {
             return value == route.subpage[index];
           })) {
 
@@ skipping 25 matching lines @@
           window.history.replaceState(historicState, document.title);
         }
 
         return;
       }
     }
 
     assertNotReached('Route not found: ' + JSON.stringify(newRoute));
   },
 });