Print Preview: Fix destinations dialog search issues

- Add a "clear search" button to the print preview search box element.
- Remove unnecessary timeout, since a timeout has subsequently been
added to CrSearchFieldBehavior.

Bug: 954278
Change-Id: I073a991227b71213968ac8dac2994a2a3b3a2873
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1574609
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#652652}

chrome/browser/resources/print_preview/new/print_preview_search_box.html

@@ -2,6 +2,7 @@
 
 <link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_search_field/cr_search_field_behavior.html">
 <link rel="import" href="print_preview_shared_css.html">
@@ -18,13 +19,32 @@
         --cr-input-error-display: none;
       }
 
-      #icon {
-        height: 30px;
+      #icon,
+      #clearSearch {
         margin-inline-end: 0;
         margin-inline-start: 0;
+      }
+
+      #icon {
+        height: 30px;
         width: 30px;
       }
 
+      #clearSearch {
+        --clear-icon-size: 28px;
+        --cr-icon-button-size: var(--clear-icon-size);
+        --cr-icon-button-icon-size: 20px;
+        height: var(--clear-icon-size);
+        position: absolute;
+        right: 0;
+        width: var(--clear-icon-size);
+      }
+
+      :host-context([dir=rtl]) #clearSearch {
+        left: 0;
+        right: auto;
+      }
+
       .search-box-input {
         width: 100%;
       }
@@ -38,6 +58,10 @@
         aria-label$="[[label]]" placeholder="[[label]]"
         autofocus="[[autofocus]]" spellcheck="false">
       <div slot="prefix" id="icon" class="cr-icon icon-search" alt=""></div>
+      <cr-icon-button id="clearSearch" class="icon-cancel"
+          hidden$="[[!hasSearchText]]" slot="suffix" on-click="onClearClick_"
+          title="[[clearLabel]]">
+      </cr-icon-button>
     </cr-input>
   </template>
   <script src="print_preview_search_box.js"></script>

chrome/browser/resources/print_preview/new/print_preview_search_box.js

@@ -28,10 +28,10 @@ Polymer({
   },
 
   /**
-   * Timeout used to delay processing of the input, in ms.
-   * @private {?number}
+   * The last search query.
+   * @private {string}
    */
-  timeout_: null,
+  lastString_: '',
 
   /** @return {!HTMLInputElement} */
   getSearchInput: function() {
@@ -44,16 +44,20 @@ Polymer({
    */
   onSearchChanged_: function(e) {
     const safeQueryString = e.detail.trim().replace(SANITIZE_REGEX, '\\$&');
-    const safeQuery = safeQueryString.length > 0 ?
+    if (safeQueryString === this.lastString_) {
+      return;
+    }
+
+    this.lastString_ = safeQueryString;
+    this.searchQuery = safeQueryString.length > 0 ?
         new RegExp(`(${safeQueryString})`, 'i') :
         null;
-    if (this.timeout_) {
-      clearTimeout(this.timeout_);
-    }
-    this.timeout_ = setTimeout(() => {
-      this.searchQuery = safeQuery;
-      this.timeout_ = null;
-    }, 150);
+  },
+
+  /** @private */
+  onClearClick_: function() {
+    this.setValue('');
+    this.$.searchInput.focus();
   },
 });
 })();