MD Settings: Implement search URLs.

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

 // Copyright 2015 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.
 
 /**
  * @fileoverview
  * 'settings-ui' implements the UI for the Settings page.
  *
  * Example:
  *
  *    <settings-ui prefs="{{prefs}}"></settings-ui>
  */
 cr.exportPath('settings');
 assert(!settings.defaultResourceLoaded,
        'settings_ui.js run twice. You probably have an invalid import.');
 /** Global defined when the main Settings script runs. */
 settings.defaultResourceLoaded = true;
 
 Polymer({
   is: 'settings-ui',
 
+  behaviors: [settings.RouteObserverBehavior],
+
   properties: {
     /**
      * Preferences state.
      */
     prefs: Object,
 
     /** @type {?settings.DirectionDelegate} */
     directionDelegate: {
       observer: 'directionDelegateChanged_',
       type: Object,
@@ skipping 11 matching lines @@
     toolbarSpinnerActive_: {
       type: Boolean,
       value: false,
     },
 
     /**
      * Dictionary defining page visibility.
      * @private {!GuestModePageVisibility}
      */
     pageVisibility_: Object,
+
+    /**
+     * The latest search query. Setting this value triggers a search via binding
+     * with <settings-main> element.
+     * @private
+     */
+    searchQuery_: {
+      type: String,
+      value: '',
+    },
   },
 
   /** @override */
   created: function() {
     settings.initializeRouteFromUrl();
   },
 
   /**
    * @override
    * @suppress {es5Strict} Object literals cannot contain duplicate keys in ES5
    *     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() {
       this.$.drawerTemplate.if = true;
     }.bind(this));
 
     window.addEventListener('popstate', function(e) {
       drawer.close();
     }.bind(this));
 
@@ skipping 29 matching lines @@
     }
   },
 
   /** @override */
   attached: function() {
     // Preload bold Roboto so it doesn't load and flicker the first time used.
     document.fonts.load('bold 12px Roboto');
     settings.setGlobalScrollTarget(this.$.headerPanel.scroller);
   },
 
+  /** @param {!settings.Route} route */
+  currentRouteChanged: function(route) {
+    // When navigating into a subpage, search highlights have already been
+    // applied (if any), no further action should be taken.

[tommycli, 2016/11/01 21:05:26]

optional: may also be worth pointing out that all new searches take place on the
BASIC route anyways, so any navigations into subpages are either non-searches,
or continuations of an existing search.

[dpapad, 2016/11/01 22:02:02]

Rephrased the comment per your suggestion. Also added a TODO describing the
corner case that is not being addressed, the one we've talked about before.

+    if (route.isSubpage())
+      return;
+
+    var urlSearchQuery = settings.getQueryParameters().get('search') || '';
+    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 */);
+    }
+
+    // Trigger search via data binding.
+    this.searchQuery_ = urlSearchQuery;

[tommycli, 2016/11/01 21:05:26]

Yeah the more I look at it, the more I think we can eliminate two properties and
just use this.$.main.searchContents. Will also let you eliminate that clause for
the observer initialization too...

[dpapad, 2016/11/01 22:02:02]

Done.

+  },
+
+  /**
+   * 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
    */
   onIronActivate_: function(event) {
     if (event.detail.item.id != 'advancedPage')
       this.$$('app-drawer').close();
   },
 
   /** @private */
   onMenuButtonTap_: function() {
     this.$$('app-drawer').toggle();
   },
 
   /** @private */
   directionDelegateChanged_: function() {
     this.$$('app-drawer').align = this.directionDelegate.isRtl() ?
         'right' : 'left';
   },
 });