Settings Router Refactor: Support dynamic parameters

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 274 matching lines @@
   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;
     });
 
     return Route[matchingKey] || null;
   };
 
   /**
-   * The current active route. This may only be updated via the global
-   * function settings.navigateTo.
+   * The current active route. This updated only by settings.navigateTo.
    * @private {!settings.Route}
    */
   var currentRoute_ = (function() {
     var route = getRouteForPath(window.location.pathname);
     if (route)
       return route;
 
     // Reset the URL path to '/' if the user navigates to a nonexistent URL.
-    window.history.replaceState(undefined, '', Route.BASIC.path);
+    window.history.replaceState({}, '', Route.BASIC.path);
     return Route.BASIC;
   })();
 
   /**
+   * The current query parameters. This updated only by settings.navigateTo.
+   * @private {!Object}

[stevenjb, 2016/08/02 22:17:17]

Can/should we type this?

[tommycli, 2016/08/02 22:46:34]

Done. I changed it to use the URLSearchParams type throughout.

+   */
+  var currentQueryParameters_ = (function() {
+    if (window.location.search.length < 2)
+      return {};
+
+    var params = {};
+    window.location.search.substring(1).split('&').forEach(function(pair) {

[Dan Beam, 2016/08/02 21:44:50]

OH NO YOU DI'NT

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
https://cs.chromium.org/chromium/src/ui/webui/resources/js/util.js?q=util.js&...

[tommycli, 2016/08/02 22:46:33]

Thanks! I ended up using the URLSearchParams type throughout.

+      var [key, value] = pair.split('=').map(decodeURIComponent);
+      params[key] = value;
+    });
+    window.history.replaceState(params, '', currentRoute_.path);
+    return params;
+  })();
+
+  /**
    * Helper function to set the current route and notify all observers.
    * @param {!settings.Route} route
+   * @param {!Object} queryParameters
    */
-  var setCurrentRoute = function(route) {
+  var setCurrentRoute = function(route, queryParameters) {
     currentRoute_ = route;
+    currentQueryParameters_ = queryParameters;
     for (var observer of routeObservers_)
       observer.currentRouteChanged();
   };
 
   /** @return {!settings.Route} */
   var getCurrentRoute = function() { return currentRoute_; };
 
+  /** @return {!Object} */
+  var getQueryParameters = function() { return currentQueryParameters_; };
+
   /**
    * Navigates to a canonical route and pushes a new history entry.
    * @param {!settings.Route} route
+   * @param {Object=} opt_dynamicParameters A new history entry is always pushed
+   *     when this parameter is truthy, even when the parameters are unchanged.
    * @private
    */
-  var navigateTo = function(route) {
-    if (assert(route) == currentRoute_)
+  var navigateTo = function(route, opt_dynamicParameters) {
+    if (assert(route) == currentRoute_ && !opt_dynamicParameters)
       return;
 
-    window.history.pushState(undefined, '', route.path);
-    setCurrentRoute(route);
+    var queryString = '';
+    if (opt_dynamicParameters) {
+      queryString = '?' + Object.keys(opt_dynamicParameters).map(function(key) {
+        var value = opt_dynamicParameters[key];
+        assert(typeof value == 'string',
+               'Non-string dynamic parameter values cannot be correctly ' +
+               'serialized and deserialized from the URL query string.');
+
+        return encodeURIComponent(key) + '=' + encodeURIComponent(value);
+      }).join('&');
+    }
+
+    setCurrentRoute(route, opt_dynamicParameters || {});
+    window.history.pushState(
+        currentQueryParameters_, '', route.path + queryString);
   };
 
   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);
+    setCurrentRoute(getRouteForPath(window.location.pathname) || Route.BASIC,
+                    event.state || {});
   });
 
   return {
     Route: Route,
     RouteObserverBehavior: RouteObserverBehavior,
     getRouteForPath: getRouteForPath,
     getCurrentRoute: getCurrentRoute,
+    getQueryParameters: getQueryParameters,
     navigateTo: navigateTo,
   };
 });