Make the filter bar grow responsively

[email protected]

Fixed: 394111299
Change-Id: I960b1cfaf10b5a6a1de12a9692e05ca89ac66399
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6239713
Reviewed-by: Kim-Anh Tran <[email protected]>
Commit-Queue: Yang Guo <[email protected]>
Auto-Submit: Yang Guo <[email protected]>

Author: hashseed

front_end/ui/legacy/FilterBar.ts

@@ -217,7 +217,8 @@ export class TextFilterUI extends Common.ObjectWrapper.ObjectWrapper<FilterUIEve
   constructor() {
     super();
     this.filterElement = document.createElement('div');
-    const filterToolbar = this.filterElement.createChild('devtools-toolbar', 'text-filter');
+    this.filterElement.classList.add('text-filter');
+    const filterToolbar = this.filterElement.createChild('devtools-toolbar');
     // Set the style directly on the element to overwrite parent css styling.
     filterToolbar.style.borderBottom = 'none';
     this.#filter = new ToolbarFilter(undefined, 1, 1, UIStrings.egSmalldUrlacomb, this.completions.bind(this));

front_end/ui/legacy/filter.css

@@ -38,7 +38,9 @@
 }
 
 .text-filter {
-  width: 200px;
+  flex-grow: 1;
+  min-width: var(--sys-size-25);
+  max-width: var(--sys-size-36);
 }
 
 .filter-bitset-filter {