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..a3778e74496f8737db93d06a044af5313ab530bf 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.
@@ -50,6 +52,12 @@ Polymer({
      * @private {!GuestModePageVisibility}
      */
     pageVisibility_: Object,
+
+    /** @private */
+    lastSearchQuery_: {
+      type: String,
+      value: '',
+    }
   },
 
   /** @override */
@@ -63,10 +71,6 @@ Polymer({
    *     strict mode.
    */
   ready: function() {
-    this.$$('cr-toolbar').addEventListener('search-changed', function(e) {
-      this.$$('settings-main').searchContents(e.detail);
-    }.bind(this));
-
     // Lazy-create the drawer the first time it is opened or swiped into view.
     var drawer = assert(this.$$('app-drawer'));
     listenOnce(drawer, 'track opened-changed', function() {
@@ -116,6 +120,54 @@ Polymer({
     settings.setGlobalScrollTarget(this.$.headerPanel.scroller);
   },
 
+  /** @param {!settings.Route} route */
+  currentRouteChanged: function(route) {
+    // New searches always take place on the BASIC route. Navigations into
+    // subpages are either non-searches, or continuations of an existing search.
+    //
+    // TODO(dpapad): Address corner-case where the user:
+    //  1) Visits a subpage first.
+    //  2) Triggers a search.
+    //  3) Clicks the "back" button.
+    //  Currently nothing happens. Should clear search results and navigate to
+    //  the subpage instead.
+    if (route.isSubpage())
+      return;
+
+    var urlSearchQuery = settings.getQueryParameters().get('search') || '';
+    if (urlSearchQuery == this.lastSearchQuery_)
+      return;
+
+    this.lastSearchQuery_ = urlSearchQuery;
+
+    var toolbar = /** @type {!CrToolbarElement} */ (this.$$('cr-toolbar'));
+    var searchField = /** @type {CrToolbarSearchFieldElement} */ (
+        toolbar.getSearchField());
+
+    // If the search was initiated by directly entering a search URL, need to
+    // sync the URL parameter to the textbox.
+    if (urlSearchQuery != searchField.getValue()) {
+      // Setting the search box value without triggering a 'search-changed'
+      // event, to prevent an unnecessary duplicate entry in |window.history|.
+      searchField.setValue(urlSearchQuery, true /* noEvent */);
+    }
+
+    this.$.main.searchContents(urlSearchQuery);
+  },
+
+  /**
+   * Handles the 'search-changed' event fired from the toolbar.
+   * @param {!Event} e
+   * @private
+   */
+  onSearchChanged_: function(e) {
+    var query = e.detail;
+    settings.navigateTo(
+        settings.Route.BASIC,
+        query.length > 0 ?
+            new URLSearchParams(`search=${query}`) : undefined);
+  },
+
   /**
    * @param {Event} event
    * @private