MD Settings: Implement search URLs.

chrome/browser/resources/settings/settings_ui/settings_ui.js

Index: chrome/browser/resources/settings/settings_ui/settings_ui.js
diff --git a/chrome/browser/resources/settings/settings_ui/settings_ui.js b/chrome/browser/resources/settings/settings_ui/settings_ui.js
index f14a509792380ed6a0957c0fc8c11ef4853aaabd..c2b378aca4c6ccec8608cb973dd4c4426cd55b3e 100644
--- a/chrome/browser/resources/settings/settings_ui/settings_ui.js
+++ b/chrome/browser/resources/settings/settings_ui/settings_ui.js
@@ -19,6 +19,8 @@ settings.defaultResourceLoaded = true;
 Polymer({
   is: 'settings-ui',
 
+  behaviors: [settings.RouteObserverBehavior],
+
   properties: {
     /**
      * Preferences state.
@@ -63,9 +65,8 @@ Polymer({
    *     strict mode.
    */
   ready: function() {
-    this.$$('cr-toolbar').addEventListener('search-changed', function(e) {
-      this.$$('settings-main').searchContents(e.detail);
-    }.bind(this));
+    this.$$('cr-toolbar').addEventListener(
+        'search-changed', this.onSearchChanged_.bind(this));

[Dan Beam, 2016/10/26 01:24:36]

any reason why we can't do on-search-changed="onSearchChanged_" in the HTML?

[dpapad, 2016/10/26 01:31:27]

Yes, I'll add a comment to make this more obvious. cr-toolbar-search-field
unfortunately (probably a bug we should fix), fires an accidental search-changed
event during its initialization, which is hard to ignore if we add the listener
in HTML. Adding the listener in 'ready' works around this issue. 

[Dan Beam, 2016/10/26 20:50:52]

that's a pretty lame work around.  why does triggering with the same value
matter if query == existingQuery no-ops?

[dpapad, 2016/10/26 21:02:57]

Well, you are right that it does not matter anymore, so done. Before it would
trigger an unnecessary search on startup.

 
     // Lazy-create the drawer the first time it is opened or swiped into view.
     var drawer = assert(this.$$('app-drawer'));
@@ -116,6 +117,34 @@ Polymer({
     settings.setGlobalScrollTarget(this.$.headerPanel.scroller);
   },
 
+  /** @param {!settings.Route} newRoute */
+  currentRouteChanged: function(newRoute) {
+    var searchQuery = settings.getQueryParameters().get('search') || '';
+    var toolbar = /** @type {!CrToolbarElement} */ (this.$$('cr-toolbar'));
+    var searchField = /** @type {CrToolbarSearchFieldElement} */ (
+        toolbar.getSearchField());
+    searchField.setValue(searchQuery);
+  },
+
+  /**
+   * @param {!Event} e
+   * @private
+   */
+  onSearchChanged_: function(e) {
+    var query = e.detail;
+
+    // 'search-changed' event was fired only because the search box's value was
+    // updated to reflect the already existing search URL parameter, no need to
+    // navigate again.
+    var existingQuery = settings.getQueryParameters().get('search') || '';
+    if (query == existingQuery)
+      return;
+
+    settings.navigateTo(
+        settings.Route.BASIC,
+        query.length > 0 ? new URLSearchParams(`search=${query}`) : undefined);
+  },
+
   /**
    * @param {Event} event
    * @private