DevTools: Unify filtering UI

Source/devtools/front_end/inspector.css

 /*
  * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org>
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
@@ skipping 927 matching lines @@
 }
 
 body.platform-linux .monospace,
 body.platform-linux .source-code {
     font-size: 11px !important;
     font-family: dejavu sans mono, monospace;
 }
 
 .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;
     word-wrap: break-word;
     -webkit-user-select: text;
 }
 
 #console-prompt {
     clear: right;
     position: relative;
@@ skipping 975 matching lines @@
 }
 
 button.enable-toggle-status-bar-item.toggled-on .glyph {
     -webkit-mask-position: -96px -24px;
 }
 
 #console-messages.console-filter-top {
     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,
 .console-debug-level.repeated-message{
     display: -webkit-flex;
 }
 
 .console-user-command-result {
     display: block;
 }
@@ skipping 295 matching lines @@
     margin-left: 7px;
     border-right: 1px solid #CCC;
 }
 
 .storage-application-cache-status,
 .storage-application-cache-connectivity {
     position: relative;
     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;
 }
 
 .delete-storage-status-bar-item .glyph {
     -webkit-mask-position: -128px 0;
 }
 
 .clear-storage-status-bar-item .glyph {
     -webkit-mask-position: -64px 0;
@@ skipping 585 matching lines @@
 }
 
 .progress-bar-container button.status-bar-item {
     border-left: none;
     margin-top: 1px;
 }
 
 .elements-tree-outline li.parent::before {
     top: 0 !important;
 }