DevTools: Unify filtering UI

Source/devtools/front_end/inspector.css

Index: Source/devtools/front_end/inspector.css
diff --git a/Source/devtools/front_end/inspector.css b/Source/devtools/front_end/inspector.css
index c6d40ea8861f2968acb62663f81bf977736f6ec4..d37f09477354046da8520ecb136dffc4d0740bf3 100644
--- a/Source/devtools/front_end/inspector.css
+++ b/Source/devtools/front_end/inspector.css
@@ -945,11 +945,16 @@ body.platform-linux .source-code {
 
 .console-status-bar {
     flex: 0 0 24px;
-    border-bottom: 1px solid rgb(230,230,230);
+    overflow: hidden;
+}
+
+.console-filters-header {
+    flex: 0 0 23px;
     overflow: hidden;
 }
 
 #console-messages {
+    border-top: 1px solid rgb(230,230,230);
     flex: 1 1;
     padding: 2px 0;
     overflow-y: auto;
@@ -1945,55 +1950,6 @@ button.enable-toggle-status-bar-item.toggled-on .glyph {
     margin-top: 23px;
 }
 
-.scope-bar {
-    line-height: 19px;
-    padding-right: 10px;
-    overflow: hidden;
-}
-
-.scope-bar li {
-    display: inline-block;
-    margin: 0 2px;
-    padding: 2px 6px;
-    line-height: 12px;
-    background: transparent;
-    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
-    border-radius: 8px;
-    vertical-align: middle;
-}
-
-.scope-bar-divider {
-    background-color: rgba(0, 0, 0, 0.4);
-    height: 16px;
-    width: 1px;
-    vertical-align: middle;
-    display: inline-block;
-}
-
-.scope-bar li.selected,
-.scope-bar li:hover,
-.scope-bar li:active {
-    color: white;
-    text-shadow: rgba(0, 0, 0, 0.4) 0 1px 0;
-}
-
-.scope-bar li.all {
-    margin: 0 8px;
-}
-
-.scope-bar li:hover {
-    background: rgba(0, 0, 0, 0.2);
-}
-
-.scope-bar li.selected {
-    background: rgba(0, 0, 0, 0.3);
-}
-
-.scope-bar li:active {
-    background: rgba(0, 0, 0, 0.5);
-}
-
-
 .console-warning-level.repeated-message,
 .console-error-level.repeated-message,
 .console-log-level.repeated-message,
@@ -2309,16 +2265,6 @@ body.inactive li.selected .bubble.search-matches {
     top: 4px;
 }
 
-.status-bar-items {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    overflow: hidden;
-    border-left: 1px solid rgb(184, 184, 184);
-    margin-left: -1px;
-}
-
 .node-search-status-bar-item .glyph {
     -webkit-mask-position: -224px -24px;
 }