Add button to clear filter in network tab

Add a button to clear the filter in the toolbar of the network panel.
Such a button already exists for other filters in DevTools but has been
missing so far for the network panel filter.

Fixed: chromium:1056666
Change-Id: I3df9e2e4add71b6dbd68fb8360e318c06207605f
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2083312
Reviewed-by: Sigurd Schneider <sigurds@chromium.org>
Commit-Queue: Wolfgang Beyer <wolfi@chromium.org>

front_end/ui/FilterBar.js

@@ -32,6 +32,7 @@ import * as Common from '../common/common.js';
 import * as Host from '../host/host.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
+import {Icon} from './Icon.js';
 import {KeyboardShortcut, Modifiers} from './KeyboardShortcut.js';
 import {bindCheckbox} from './SettingsUI.js';
 import {Suggestions} from './SuggestBox.js';  // eslint-disable-line no-unused-vars
@@ -198,7 +199,8 @@ export class TextFilterUI extends Common.ObjectWrapper.ObjectWrapper {
     this._filterElement = createElement('div');
     this._filterElement.className = 'filter-text-filter';
 
-    this._filterInputElement = this._filterElement.createChild('span', 'filter-input-field');
+    const container = this._filterElement.createChild('div', 'filter-input-container');
+    this._filterInputElement = container.createChild('span', 'filter-input-field');
 
     this._prompt = new TextPrompt();
     this._prompt.initialize(this._completions.bind(this), ' ');
@@ -209,6 +211,14 @@ export class TextFilterUI extends Common.ObjectWrapper.ObjectWrapper {
 
     /** @type {?function(string, string, boolean=):!Promise<!Suggestions>} */
     this._suggestionProvider = null;
+
+    const clearButton = container.createChild('div', 'filter-input-clear-button');
+    clearButton.appendChild(Icon.create('mediumicon-gray-cross-hover', 'filter-cancel-button'));
+    clearButton.addEventListener('click', () => {
+      this.clear();
+      this.focus();
+    });
+    this._updateEmptyStyles();
   }
 
   /**
@@ -268,6 +278,11 @@ export class TextFilterUI extends Common.ObjectWrapper.ObjectWrapper {
 
   _valueChanged() {
     this.dispatchEventToListeners(FilterUI.Events.FilterChanged, null);
+    this._updateEmptyStyles();
+  }
+
+  _updateEmptyStyles() {
+    this._filterElement.classList.toggle('filter-text-empty', !this._prompt.text());
   }
 
   clear() {

front_end/ui/filter.css

@@ -115,27 +115,46 @@
 }
 
 .filter-input-field {
-    margin: 0 3px;
     padding-left: 3px;
-    width: 163px;
+    width: 147px;
     height: 18px;
     line-height: 20px;
     display: inline-block;
-    background: #FFF;
     overflow: hidden;
     white-space: nowrap;
     cursor: auto;
 }
 
-.filter-input-field:hover {
+.filter-input-container {
+    margin: 0 3px;
+    display: flex;
+    background: #FFF;
+    width: 163px;
+}
+
+.filter-input-container:hover {
     box-shadow: var(--focus-ring-inactive-shadow);
 }
 
-.filter-input-field:focus,
-.filter-input-field:not(:empty) {
+.filter-text-filter:not(.filter-text-empty) .filter-input-container,
+.filter-input-container:focus-within {
     box-shadow: var(--focus-ring-active-shadow);
 }
 
+.filter-text-empty .filter-input-clear-button {
+    display: none;
+}
+
+.filter-input-clear-button {
+    opacity: 0.7;
+    height: 16px;
+    margin-top: 1px;
+}
+
+.filter-input-clear-button:hover {
+    opacity: .99;
+}
+
 @media (forced-colors: active) {
     .filter-bitset-filter span:hover,
     .filter-bitset-filter span.selected,
@@ -144,14 +163,14 @@
         background: Highlight;
         color: HighlightText;
     }
-    .filter-input-field {
+    .filter-input-container {
         forced-color-adjust: none;
         background: ButtonFace;
         box-shadow: var(--focus-ring-inactive-shadow);
     }
-    .filter-input-field:hover,
-    .filter-input-field:focus,
-    .filter-input-field:not(:empty) {
+    .filter-input-container:hover,
+    .filter-input-container:focus-within,
+    .filter-text-filter:not(.filter-text-empty) .filter-input-container {
         box-shadow: var(--focus-ring-active-shadow);
     }
 }