Setting Router Refactor: Implement RouteObserverBehavior.

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

Index: chrome/browser/resources/settings/settings_page/settings_router.js
diff --git a/chrome/browser/resources/settings/settings_page/settings_router.js b/chrome/browser/resources/settings/settings_page/settings_router.js
index 65796e59d6b72af906a8503ced97b5bae3e3cc04..bdde44f1ec1b49738467086d1851a2407468aa31 100644
--- a/chrome/browser/resources/settings/settings_page/settings_router.js
+++ b/chrome/browser/resources/settings/settings_page/settings_router.js
@@ -4,69 +4,34 @@
 
 /**
  * @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.
+ * 'settings-router' is only used to propagate route changes to bound elements.
+ * All the real routing is defined within route.js.
+ * TODO(tommycli): Remove once all elements migrated to RouteObserverBehavior.
  *
  * Example:
- *
  *    <settings-router current-route="{{currentRoute}}">
  *    </settings-router>
  */
 Polymer({
   is: 'settings-router',
 
+  behaviors: [settings.RouteObserverBehavior],
+
   properties: {
     /**
-     * The current active route. This may only be updated via the global
-     * function settings.navigateTo.
-     *
-     * 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.
+     * Only used to propagate settings.currentRoute to all the elements bound to
+     * settings-router.
      * @type {!settings.Route}
      */
     currentRoute: {
       notify: true,
       type: Object,
-      value: function() {
-        return (settings.getRouteForPath(window.location.pathname) ||
-                settings.Route.BASIC);
-      },
+      value: function() { return settings.getCurrentRoute(); },
     },
   },
 
-  /**
-   * Sets up a history popstate observer.
-   * @override
-   */
-  created: function() {
-    window.addEventListener('popstate', function(event) {
-      // On pop state, do not push the state onto the window.history again.
-      var historicRoute = settings.getRouteForPath(window.location.pathname);
-      this.currentRoute = historicRoute || settings.Route.BASIC;
-    }.bind(this));
-
-    settings.navigateTo = this.navigateTo_.bind(this);
-  },
-
-  /**
-   * Navigates to a canonical route.
-   * @param {!settings.Route} route
-   * @private
-   */
-  navigateTo_: function(route) {
-    assert(!!route);
-
-    if (route == this.currentRoute)
-      return;
-
-    window.history.pushState(undefined, document.title, route.path);
-    this.currentRoute = route;
+  /** @protected */
+  currentRouteChanged: function() {
+    this.currentRoute = settings.getCurrentRoute();
   },
 });