DevTools: migrate icons in "search across files" to UI.Icon

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.
 /**
  * @unrestricted
  */
 Sources.AdvancedSearchView = class extends UI.VBox {
   constructor() {
     super(true);
     this.setMinimumSize(0, 40);
@@ skipping 11 matching lines @@
     this._searchResultsElement.className = 'search-results';
 
     this._search = UI.HistoryInput.create();
     this._searchPanelElement.appendChild(this._search);
     this._search.placeholder = Common.UIString('Search all sources (use "file:" to filter by path)\u200e');
     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;
+    var searchIcon = UI.Icon.create('smallicon-search', 'search-icon');
+    this._searchPanelElement.appendChild(searchIcon);
+
+    this._searchInputClearElement = UI.Icon.create('smallicon-clear-input', 'search-cancel-button');
+    this._searchInputClearElement.classList.add('hidden');
     this._searchInputClearElement.addEventListener('click', this._onSearchInputClear.bind(this), false);
+    var cancelButtonContainer = this._searchPanelElement.createChild('div', 'search-cancel-button-container');
+    cancelButtonContainer.appendChild(this._searchInputClearElement);
 
     this._ignoreCaseLabel = UI.createCheckboxLabel(Common.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 = UI.createCheckboxLabel(Common.UIString('Regular expression'));
     this._regexLabel.classList.add('search-config-label');
     this._searchPanelElement.appendChild(this._regexLabel);
@@ skipping 79 matching lines @@
     this._progressIndicator = new UI.ProgressIndicator();
     this._searchMessageElement.textContent = Common.UIString('Indexing\u2026');
     this._progressIndicator.show(this._searchProgressPlaceholderElement);
     this._searchScope.performIndexing(
         new Common.ProgressProxy(this._progressIndicator, this._onIndexingFinished.bind(this)));
   }
 
   _onSearchInputClear() {
     this._search.value = '';
     this.focus();
-    this._searchInputClearElement.hidden = true;
+    this._searchInputClearElement.classList.add('hidden');
   }
 
   /**
    * @param {number} searchId
    * @param {!Sources.FileBasedSearchResult} searchResult
    */
   _onSearchResult(searchId, searchResult) {
     if (searchId !== this._searchId || !this._progressIndicator)
       return;
     if (this._progressIndicator && this._progressIndicator.isCanceled()) {
@@ skipping 166 matching lines @@
    */
   _onKeyDown(event) {
     switch (event.keyCode) {
       case UI.KeyboardShortcut.Keys.Enter.code:
         this._onAction();
         break;
     }
   }
 
   _onInput() {
-    if (this._search.value && this._search.value.length)
-      this._searchInputClearElement.hidden = false;
-    else
-      this._searchInputClearElement.hidden = true;
+    var hasText = this._search.value && this._search.value.length;
+    this._searchInputClearElement.classList.toggle('hidden', !hasText);
   }
 
   _save() {
     this._advancedSearchConfig.set(this._buildSearchConfig().toPlainObject());
   }
 
   _load() {
     var searchConfig = Workspace.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;
+      this._searchInputClearElement.classList.remove('hidden');
   }
 
   _onAction() {
     var searchConfig = this._buildSearchConfig();
     if (!searchConfig.query() || !searchConfig.query().length)
       return;
 
     this._save();
     this._startSearch(searchConfig);
   }
@@ skipping 85 matching lines @@
   performIndexing(progress) {},
 
   stopSearch() {},
 
   /**
    * @param {!Workspace.ProjectSearchConfig} searchConfig
    * @return {!Sources.SearchResultsPane}
    */
   createSearchResultsPane(searchConfig) {}
 };