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

Source/devtools/front_end/ui/checkboxTextLabel.css

Index: Source/devtools/front_end/ui/checkboxTextLabel.css
diff --git a/Source/devtools/front_end/ui/checkboxTextLabel.css b/Source/devtools/front_end/ui/checkboxTextLabel.css
index 88090795486e7f3733cc08f68e653d407c7d766e..a5cf41fec7afc144818cb095e8cd2dee2ce324b6 100644
--- a/Source/devtools/front_end/ui/checkboxTextLabel.css
+++ b/Source/devtools/front_end/ui/checkboxTextLabel.css
@@ -12,13 +12,20 @@
     align-items: center !important;
 }
 
-::content > .dt-checkbox-button {
+input.dt-checkbox-button {
     height: 12px;
     width: 12px;
-    margin: 1px 3px 2px 2px;
     flex-shrink: 0;
 }
 
-::content > .dt-checkbox-text {
-    line-height: 15px;
+input.dt-checkbox-colored {
+    -webkit-appearance: none;
+    border: 1px solid;
+    border-radius: 3px;
+}
+
+input.dt-checkbox-colored:checked {
+    background-image: url(Images/toolbarButtonGlyphs.png);
+    background-size: 352px 144px;
+    background-position: -128px -110px;
 }