DevTools: render category filters in a way that they don't clash.

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;
 }
 
@@ skipping 106 matching lines @@
 
 button.toolbar-item {
     width: 30px;
 }
 
 :host-context(.material) button.toolbar-item {
     width: 32px;
 }
 
 :host-context(.material) button.toolbar-item:hover {
-    background-color: rgba(105, 105, 105, 0.1);
+    background-color: #eee;
 }
 
 button.toolbar-item.toggled-on .glyph {
     background-color: rgb(66, 129, 235) !important;
 }
 
 button.toolbar-item:hover .glyph {
     opacity: 1;
 }
 
@@ skipping 304 matching lines @@
 }
 
 .filter-toolbar-item > .glyph {
     -webkit-mask-position: -32px -48px;
 }
 
 .filter-toolbar-item.toggled-shown .glyph {
     background-color: rgb(66, 129, 235);
 }
 
+.filter-toolbar-item.toggled-shown {
+    background-color: rgba(105, 105, 105, 0.1);
+}
+
 .filter-toolbar-item.toggled-active .glyph {
     background-color: rgb(216, 0, 0);
 }
 
 .waterfall-toolbar-item .glyph {
     -webkit-mask-position: -128px -48px;
 }
 
 .pan-toolbar-item .glyph {
     -webkit-mask-position: -98px -120px;
@@ skipping 48 matching lines @@
 }
 
 .playback-rate-button.toggled-on > .toolbar-button-text {
     color: rgb(66, 129, 235);
 }
 
 button.playback-rate-button {
     width: auto;
     margin-right: 10px;
 }