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._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 \"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);
     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)));
     },
 
+    _onSearchClearQuery: function()
+    {
+        this._search.value = "";
+    },
+
     /**
      * @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 141 matching lines @@
     /**
      * @param {boolean} finished
      */
     _searchFinished: function(finished)
     {
         this._searchMessageElement.textContent = finished ? WebInspector.UIString("Search finished.") : WebInspector.UIString("Search interrupted.");
     },
 
     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();
     },
 
     willHide: function()
     {
         this._stopSearch();
     },
 
     /**
@@ skipping 12 matching lines @@
     {
         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._searchClearQueryElement.classList.remove("hidden");
     },
 
     _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) { }
 }