DevTools: Update styles for full text search drawer panel

third_party/WebKit/Source/devtools/front_end/sources/AdvancedSearchView.js

Index: third_party/WebKit/Source/devtools/front_end/sources/AdvancedSearchView.js
diff --git a/third_party/WebKit/Source/devtools/front_end/sources/AdvancedSearchView.js b/third_party/WebKit/Source/devtools/front_end/sources/AdvancedSearchView.js
index df55b94c277f5580936565109e5fb5bea407006a..2ac8903e030cf110abdc424e5a119f9b1dd5b37c 100644
--- a/third_party/WebKit/Source/devtools/front_end/sources/AdvancedSearchView.js
+++ b/third_party/WebKit/Source/devtools/front_end/sources/AdvancedSearchView.js
@@ -18,18 +18,24 @@ WebInspector.AdvancedSearchView = function()
 
     this._searchPanelElement = this.contentElement.createChild("div", "search-drawer-header");
     this._searchPanelElement.addEventListener("keydown", this._onKeyDown.bind(this), false);
+    this._searchPanelElement.addEventListener("keyup", this._onKeyUp.bind(this), false);
 
     this._searchResultsElement = this.contentElement.createChild("div");
     this._searchResultsElement.className = "search-results";
 
     this._search = WebInspector.HistoryInput.create();
     this._searchPanelElement.appendChild(this._search);
-    this._search.placeholder = WebInspector.UIString("Enter query, use `file:` to filter by path");
+    this._search.placeholder = WebInspector.UIString("Search all sources (use \"file:\" to filter by path)");
     this._search.setAttribute("type", "text");
     this._search.classList.add("search-config-search");
     this._search.setAttribute("results", "0");
     this._search.setAttribute("size", 42);
 
+    this._searchPanelElement.createChild("div", "search-icon");
+    this._searchInputClearElement = this._searchPanelElement.createChild("div", "search-cancel-button");
+    this._searchInputClearElement.hidden = true;
+    this._searchInputClearElement.addEventListener("click", this._onSearchInputClear.bind(this), false);
+
     this._ignoreCaseLabel = createCheckboxLabel(WebInspector.UIString("Ignore case"));
     this._ignoreCaseLabel.classList.add("search-config-label");
     this._searchPanelElement.appendChild(this._ignoreCaseLabel);
@@ -101,6 +107,13 @@ WebInspector.AdvancedSearchView.prototype = {
         this._searchScope.performIndexing(new WebInspector.ProgressProxy(this._progressIndicator, this._onIndexingFinished.bind(this)));
     },
 
+    _onSearchInputClear: function()
+    {
+        this._search.value = "";
+        this.focus();
+        this._searchInputClearElement.hidden = true;
+    },
+
     /**
      * @param {number} searchId
      * @param {!WebInspector.FileBasedSearchResult} searchResult
@@ -283,6 +296,14 @@ WebInspector.AdvancedSearchView.prototype = {
         }
     },
 
+    _onKeyUp: function()
+    {
+        if (this._search.value && this._search.value.length)
+            this._searchInputClearElement.hidden = false;
+        else
+            this._searchInputClearElement.hidden = true;
+    },
+
     _save: function()
     {
         this._advancedSearchConfig.set(this._buildSearchConfig().toPlainObject());
@@ -294,6 +315,8 @@ WebInspector.AdvancedSearchView.prototype = {
         this._search.value = searchConfig.query();
         this._ignoreCaseCheckbox.checked = searchConfig.ignoreCase();
         this._regexCheckbox.checked = searchConfig.isRegex();
+        if (this._search.value && this._search.value.length)
+            this._searchInputClearElement.hidden = false;
     },
 
     _onAction: function()