MD History/Downloads: Update toolbar and background color

chrome/browser/resources/md_downloads/crisper.js

Index: chrome/browser/resources/md_downloads/crisper.js
diff --git a/chrome/browser/resources/md_downloads/crisper.js b/chrome/browser/resources/md_downloads/crisper.js
index fd55c01426ca04c5d948e0ecae992dde784afb11..6403fee470944f25cd950e862f74a869b7d73a16 100644
--- a/chrome/browser/resources/md_downloads/crisper.js
+++ b/chrome/browser/resources/md_downloads/crisper.js
@@ -10314,6 +10314,122 @@ Polymer({
         }
       }
     });
+// 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.
+
+/** @interface */
+var SearchFieldDelegate = function() {};
+
+SearchFieldDelegate.prototype = {
+  /**
+   * @param {string} value
+   */
+  onSearchTermSearch: assertNotReached,
+};
+
+/**
+ * Implements an incremental search field which can be shown and hidden.
+ * Canonical implementation is <cr-search-field>.
+ * @polymerBehavior
+ */
+var CrSearchFieldBehavior = {
+  properties: {
+    label: {
+      type: String,
+      value: '',
+    },
+
+    clearLabel: {
+      type: String,
+      value: '',
+    },
+
+    showingSearch: {
+      type: Boolean,
+      value: false,
+      notify: true,
+      observer: 'showingSearchChanged_',
+      reflectToAttribute: true
+    },
+
+    hasSearchText: Boolean,
+  },
+
+  /**
+   * @return {string} The value of the search field.
+   */
+  getValue: function() {
+    return this.$.searchInput.value;
+  },
+
+  /**
+   * Sets the value of the search field, if it exists.
+   * @param {string} value
+   */
+  setValue: function(value) {
+    // Use bindValue when setting the input value so that changes propagate
+    // correctly.
+    this.$.searchInput.bindValue = value;
+    this.hasSearchText = value != '';
+  },
+
+  /** @param {SearchFieldDelegate} delegate */
+  setDelegate: function(delegate) {
+    this.delegate_ = delegate;
+  },
+
+  /** @return {!Promise<boolean>} */
+  showAndFocus: function() {
+    this.showingSearch = true;
+    return this.focus_();
+  },
+
+  /**
+   * @return {!Promise<boolean>}
+   * @private
+   */
+  focus_: function() {
+    return new Promise(function(resolve) {
+      this.async(function() {
+        if (this.showingSearch) {
+          this.$.searchInput.focus();
+        }
+        resolve(this.showingSearch);
+      });
+    }.bind(this));
+  },
+
+  /** @private */
+  onSearchTermSearch_: function() {
+    this.hasSearchText = this.getValue() != '';
+    if (this.delegate_)
+      this.delegate_.onSearchTermSearch(this.getValue());
+  },
+
+  /** @private */
+  onSearchTermKeydown_: function(e) {
+    if (e.key == 'Escape')
+      this.showingSearch = false;
+  },
+
+  /** @private */
+  showingSearchChanged_: function() {
+    if (this.showingSearch) {
+      this.focus_();
+      return;
+    }
+
+    this.setValue('');
+    this.$.searchInput.blur();
+    this.onSearchTermSearch_();
+  },
+
+  /** @private */
+  toggleShowingSearch_: function() {
+    this.showingSearch = !this.showingSearch;
+  },
+};
 (function() {
       'use strict';
 
@@ -11079,123 +11195,9 @@ Polymer({
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-/** @interface */
-var SearchFieldDelegate = function() {};
-
-SearchFieldDelegate.prototype = {
-  /**
-   * @param {string} value
-   */
-  onSearchTermSearch: assertNotReached,
-};
-
 var SearchField = Polymer({
   is: 'cr-search-field',
-
-  properties: {
-    label: {
-      type: String,
-      value: '',
-    },
-
-    clearLabel: {
-      type: String,
-      value: '',
-    },
-
-    showingSearch_: {
-      type: Boolean,
-      value: false,
-      observer: 'showingSearchChanged_',
-    },
-  },
-
-  /**
-   * Returns the value of the search field.
-   * @return {string}
-   */
-  getValue: function() {
-    var searchInput = this.getSearchInput_();
-    return searchInput ? searchInput.value : '';
-  },
-
-  /**
-   * Sets the value of the search field, if it exists.
-   * @param {string} value
-   */
-  setValue: function(value) {
-    var searchInput = this.getSearchInput_();
-    if (searchInput)
-      searchInput.value = value;
-  },
-
-  /** @param {SearchFieldDelegate} delegate */
-  setDelegate: function(delegate) {
-    this.delegate_ = delegate;
-  },
-
-  /** @return {Promise<boolean>} */
-  showAndFocus: function() {
-    this.showingSearch_ = true;
-    return this.focus_();
-  },
-
-  /**
-   * @return {Promise<boolean>}
-   * @private
-   */
-  focus_: function() {
-    return new Promise(function(resolve) {
-      this.async(function() {
-        if (this.showingSearch_) {
-          var searchInput = this.getSearchInput_();
-          if (searchInput)
-            searchInput.focus();
-        }
-        resolve(this.showingSearch_);
-      });
-    }.bind(this));
-  },
-
-  /**
-   * @return {?Element}
-   * @private
-   */
-  getSearchInput_: function() {
-    return this.$$('#search-input');
-  },
-
-  /** @private */
-  onSearchTermSearch_: function() {
-    if (this.delegate_)
-      this.delegate_.onSearchTermSearch(this.getValue());
-  },
-
-  /** @private */
-  onSearchTermKeydown_: function(e) {
-    if (e.keyIdentifier == 'U+001B')  // Escape.
-      this.showingSearch_ = false;
-  },
-
-  /** @private */
-  showingSearchChanged_: function() {
-    if (this.showingSearch_) {
-      this.focus_();
-      return;
-    }
-
-    var searchInput = this.getSearchInput_();
-    if (!searchInput)
-      return;
-
-    searchInput.value = '';
-    this.onSearchTermSearch_();
-  },
-
-  /** @private */
-  toggleShowingSearch_: function() {
-    this.showingSearch_ = !this.showingSearch_;
-  },
+  behaviors: [CrSearchFieldBehavior]
 });
 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be