[DevTools] Merge filter bar with the main toolbar

third_party/WebKit/Source/devtools/front_end/ui/toolbar.css

 /*
  * Copyright (c) 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.
  */
 
 :host {
     flex: none;
     padding: 0 2px;
 }
@@ skipping 182 matching lines @@
     -webkit-appearance: none;
     border: 0;
     border-radius: 0;
     padding: 0 15px 0 5px;
     margin-right: -10px;
     position: relative;
 }
 
 /* Input */
 
-input.toolbar-item {
+.toolbar-input {
     width: 120px;
     height: 20px;
     padding: 3px;
     margin: 1px 3px;
     background-color: white;
     border: solid 1px #d8d8d8;
 }
 
-input.toolbar-item:focus,
-input.toolbar-item.hover {
+.toolbar-input:focus,
+.toolbar-input.focused,
+.toolbar-input.hover {
     border: solid 1px rgb(202, 202, 202);
 }
 
+.toolbar-input > input {
+    border: none;
+    flex-grow: 1;
+}
+
+.toolbar-input-clear-button {
+    opacity: 0.7;
+    flex-basis: 13px;
+    flex-shrink: 0;
+    height: 13px;
+}
+
+.toolbar-input-clear-button:hover {
+    opacity: 1;
+}
+
 /* Separator */
 
 .toolbar-divider {
     background-color: #ccc;
     width: 1px;
     margin: 5px 4px;
     height: 16px;
 }
 
 .toolbar-spacer {
@@ skipping 21 matching lines @@
     margin-top: -1px;
     width: 28px;
     left: -2px;
 }
 
 span.toolbar-select-container.toolbar-item.warning {
     background: #ffd7d7;
     padding: 0 5px 0 0;
     margin-right: 1px;
 }