DevTools: unify theming for checkbox components.

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 a5cf41fec7afc144818cb095e8cd2dee2ce324b6..544bdf0815ec84b27ca6e2a8dbf6d44274195188 100644
--- a/Source/devtools/front_end/ui/checkboxTextLabel.css
+++ b/Source/devtools/front_end/ui/checkboxTextLabel.css
@@ -12,20 +12,45 @@
     align-items: center !important;
 }
 
-input.dt-checkbox-button {
+input {
     height: 12px;
     width: 12px;
     flex-shrink: 0;
 }
 
-input.dt-checkbox-colored {
+input.dt-checkbox-themed {
     -webkit-appearance: none;
-    border: 1px solid;
+    margin: 0 5px auto 2px;
+    border: 1px solid rgb(45, 45, 45);
     border-radius: 3px;
+    background-color: rgb(102, 102, 102);
+    position: relative;
+    top: 1px;
 }
 
-input.dt-checkbox-colored:checked {
-    background-image: url(Images/toolbarButtonGlyphs.png);
-    background-size: 352px 144px;
-    background-position: -128px -110px;
+input.dt-checkbox-themed:after {
+    content: '';
+    line-height: 10px;
+    position: absolute;
+    cursor: pointer;
+    width: 12px;
+    height: 12px;
+    background: none;
 }
+
+input.dt-checkbox-themed:checked:after {
+    background-color: #333;
+}
+
+input.dt-checkbox-themed:after {
+    -webkit-mask-image: url(Images/toolbarButtonGlyphs.png);
+    -webkit-mask-size: 352px 144px;
+    -webkit-mask-position: -128px -110px;
+}
+
+@media (-webkit-min-device-pixel-ratio: 1.5) {
+input.dt-checkbox-themed:after {
+    -webkit-mask-image: url(Images/toolbarButtonGlyphs_2x.png);
+}
+
+} /* media */