DevTools: Update styles for full text search drawer panel

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

 // Copyright 2014 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.
 
 /**
  * @constructor
  * @extends {WebInspector.VBox}
  */
 WebInspector.AdvancedSearchView = function()
 {
     WebInspector.VBox.call(this, true);
     this.setMinimumSize(0, 40);
     this.registerRequiredCSS("sources/sourcesSearch.css");
 
     this._searchId = 0;
 
     this.contentElement.classList.add("search-view");
 
     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);
     this._ignoreCaseCheckbox = this._ignoreCaseLabel.checkboxElement;
     this._ignoreCaseCheckbox.classList.add("search-config-checkbox");
 
     this._regexLabel = createCheckboxLabel(WebInspector.UIString("Regular expression"));
     this._regexLabel.classList.add("search-config-label");
     this._searchPanelElement.appendChild(this._regexLabel);
     this._regexCheckbox = this._regexLabel.checkboxElement;
@@ skipping 51 matching lines @@
     {
         this._isIndexing = true;
         if (this._progressIndicator)
             this._progressIndicator.done();
         this._progressIndicator = new WebInspector.ProgressIndicator();
         this._searchMessageElement.textContent = WebInspector.UIString("Indexing\u2026");
         this._progressIndicator.show(this._searchProgressPlaceholderElement);
         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
      */
     _onSearchResult: function(searchId, searchResult)
     {
         if (searchId !== this._searchId || !this._progressIndicator)
             return;
         if (this._progressIndicator && this._progressIndicator.isCanceled()) {
             this._onIndexingFinished();
@@ skipping 162 matching lines @@
      */
     _onKeyDown: function(event)
     {
         switch (event.keyCode) {
         case WebInspector.KeyboardShortcut.Keys.Enter.code:
             this._onAction();
             break;
         }
     },
 
+    _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());
     },
 
     _load: function()
     {
         var searchConfig = WebInspector.SearchConfig.fromPlainObject(this._advancedSearchConfig.get());
         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()
     {
         var searchConfig = this._buildSearchConfig();
         if (!searchConfig.query() || !searchConfig.query().length)
             return;
 
         this._save();
         this._startSearch(searchConfig);
@@ skipping 120 matching lines @@
     performIndexing: function(progress) { },
 
     stopSearch: function() { },
 
     /**
      * @param {!WebInspector.ProjectSearchConfig} searchConfig
      * @return {!WebInspector.SearchResultsPane}
      */
     createSearchResultsPane: function(searchConfig) { }
 }