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..736cae34241b921aa52d57c6aa292c9f2423fb80 100644
--- a/third_party/WebKit/Source/devtools/front_end/sources/AdvancedSearchView.js
+++ b/third_party/WebKit/Source/devtools/front_end/sources/AdvancedSearchView.js
@@ -24,12 +24,17 @@ WebInspector.AdvancedSearchView = function()
 
     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 \"path:\" to filter by path)");

[lushnikov, 2016/04/22 19:19:08]

Should be "Use "file:" to filter by path

[luoe, 2016/04/23 00:01:57]

Done.

     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._searchClearQueryElement = this._searchPanelElement.createChild("div", "search-cancel-button");
+    this._searchClearQueryElement.classList.add("hidden");

[lushnikov, 2016/04/22 19:19:08]

this._searchClearQueryElemen.hidden = true

[luoe, 2016/04/23 00:01:57]

Done.

+    this._searchClearQueryElement.addEventListener("click", this._onSearchClearQuery.bind(this), false);
+
     this._ignoreCaseLabel = createCheckboxLabel(WebInspector.UIString("Ignore case"));
     this._ignoreCaseLabel.classList.add("search-config-label");
     this._searchPanelElement.appendChild(this._ignoreCaseLabel);
@@ -101,6 +106,11 @@ WebInspector.AdvancedSearchView.prototype = {
         this._searchScope.performIndexing(new WebInspector.ProgressProxy(this._progressIndicator, this._onIndexingFinished.bind(this)));
     },
 
+    _onSearchClearQuery: function()
+    {
+        this._search.value = "";
+    },
+
     /**
      * @param {number} searchId
      * @param {!WebInspector.FileBasedSearchResult} searchResult
@@ -262,6 +272,7 @@ WebInspector.AdvancedSearchView.prototype = {
 
     focus: function()
     {
+        this._searchClearQueryElement.classList.remove("hidden");

[lushnikov, 2016/04/22 19:19:08]

when do you want to show this button? Only for focused input? Only for focused
non-empty input?

[luoe, 2016/04/23 00:01:57]

In patch 4, it only shows up when there is text in the field.

         WebInspector.setCurrentFocusElement(this._search);
         this._search.select();
     },
@@ -294,6 +305,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._searchClearQueryElement.classList.remove("hidden");
     },
 
     _onAction: function()