Setting Router Refactor: Implement RouteObserverBehavior.

chrome/browser/resources/settings/route.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.
 
 cr.define('settings', function() {
   /**
    * Class for navigable routes. May only be instantiated within this file.
    * @constructor
    * @param {string} path
    * @private
@@ skipping 239 matching lines @@
   r.RESET = r.ADVANCED.createSection('/reset', 'reset');
 
 <if expr="chromeos">
   r.INPUT_METHODS =
       r.LANGUAGES.createChild('/inputMethods', 'manage-input-methods');
   r.DETAILED_BUILD_INFO =
       r.ABOUT.createChild('/help/details', 'detailed-build-info');
   r.DETAILED_BUILD_INFO.section = 'about';
 </if>
 
-  /**
-   * Use this function (and only this function) to navigate within Settings.
-   * This function is set by settings-router once it is created.
-   * @type {?function(!settings.Route):void}
-   */
-  var navigateTo = null;
+  var routeObservers_ = new Set();
+
+  /** @polymerBehavior */
+  var RouteObserverBehavior = {
+    /** @override */
+    attached: function() {
+      assert(!routeObservers_.has(this));
+      routeObservers_.add(this);
+    },
+
+    /** @override */
+    detached: function() {
+      assert(routeObservers_.delete(this));
+    },
+
+    /** @abstract */
+    currentRouteChanged: assertNotReached,
+  };
 
   /**
    * Returns the matching canonical route, or null if none matches.
    * @param {string} path
    * @return {?settings.Route}
    * @private
    */
   var getRouteForPath = function(path) {
     // TODO(tommycli): Use Object.values once Closure compilation supports it.
     var matchingKey = Object.keys(Route).find(function(key) {
       return Route[key].path == path;
     });
 
-    if (!matchingKey)
-      return null;
+    return Route[matchingKey] || null;
+  };
 
-    return Route[matchingKey];
+  /**
+   * The current active route. This may only be updated via the global
+   * function settings.navigateTo.
+   * @private {!settings.Route}
+   */
+  var currentRoute_ = getRouteForPath(window.location.pathname) || Route.BASIC;
+
+  /**
+   * Helper function to set the current route and notify all observers.
+   * @param {!settings.Route} route
+   */
+  var setCurrentRoute = function(route) {
+    currentRoute_ = route;
+    for (var observer of routeObservers_)
+      observer.currentRouteChanged();
   };
 
+  /** @return {!settings.Route} */
+  var getCurrentRoute = function() { return currentRoute_; };
+
+  /**
+   * Navigates to a canonical route and pushes a new history entry.
+   * @param {!settings.Route} route
+   * @private
+   */
+  var navigateTo = function(route) {
+    if (assert(route) == currentRoute_)
+      return;
+
+    window.history.pushState(undefined, document.title, route.path);
+    setCurrentRoute(route);
+  };
+
+  window.addEventListener('popstate', function(event) {
+    // On pop state, do not push the state onto the window.history again.
+    setCurrentRoute(getRouteForPath(window.location.pathname) || Route.BASIC);
+  });
+
   return {
     Route: Route,
+    RouteObserverBehavior: RouteObserverBehavior,
+    getRouteForPath: getRouteForPath,
+    getCurrentRoute: getCurrentRoute,
     navigateTo: navigateTo,
-    getRouteForPath: getRouteForPath,
   };
 });