DevTools Security Panel: Use the new security indicators.

third_party/WebKit/Source/devtools/front_end/security/lockIcon.css

Index: third_party/WebKit/Source/devtools/front_end/security/lockIcon.css
diff --git a/third_party/WebKit/Source/devtools/front_end/security/lockIcon.css b/third_party/WebKit/Source/devtools/front_end/security/lockIcon.css
index 68f7bdcaead4ec1c98b4e6ccbacc6f3c9c26be97..7dca99bfdbe63af37e6c90b6758babdcf3f91d23 100644
--- a/third_party/WebKit/Source/devtools/front_end/security/lockIcon.css
+++ b/third_party/WebKit/Source/devtools/front_end/security/lockIcon.css
@@ -5,47 +5,66 @@
 
 .lock-icon,
 .security-property {
-    background-size: cover;
     height: 16px;
     width: 16px;
-}
 
-.lock-icon-unknown {
-    background-image: url(Images/securityStateNeutral.svg);
-}
+    -webkit-mask-image: url(Images/securityIcons.png);
+    -webkit-mask-size: 80px 32px;
 
-.lock-icon-neutral {
-    background-image: url(Images/securityStateNeutral.svg);
+    background-color: #888;
 }
 
-.lock-icon-insecure {
-    background-image: url(Images/securityStateInsecure.svg);
+@media (-webkit-min-device-pixel-ratio: 1.5) {
+    .lock-icon,
+    .security-property {
+        -webkit-mask-image: url(Images/securityIcons_2x.png);
+    }
 }
 
 .lock-icon-secure {
-    background-image: url(Images/securityStateSecure.svg);
+    -webkit-mask-position: 0px 0px;
+    background-color: #0B8043;
 }
 
-.security-property-insecure {
-    background-image: url(Images/securityPropertyInsecure.svg);
+.lock-icon-unknown,
+.lock-icon-neutral {
+    -webkit-mask-position: -16px 0px;
+    background-color: #000000; /* Black for clarity on lower DPI screens */
 }
 
-.security-property-neutral {
-    background-image: url(Images/securityPropertyWarning.svg);
+@media (-webkit-min-device-pixel-ratio: 1.5) {
+    .lock-icon-unknown,
+    .lock-icon-neutral {
+        background-color: #5A5A5A; /* Gray for hiDPI screens */
+    }
 }
 
-.security-property-warning {
-    background-image: url(Images/securityPropertyWarning.svg);
+.lock-icon-insecure {
+    -webkit-mask-position: -32px 0px;
+    background-color: #C63626;
 }
 
-.security-property-unknown {
-    background-image: url(Images/securityPropertyUnknown.svg);
+.security-property-secure {
+    -webkit-mask-position: 0px -16px;
+    background-color: #0B8043;
 }
 
-.security-property-secure {
-    background-image: url(Images/securityPropertySecure.svg);
+.security-property-neutral {
+    -webkit-mask-position: -16px -16px;
+    background-color: #C63626;
+}
+
+.security-property-insecure {
+    -webkit-mask-position: -32px -16px;
+    background-color: #C63626;
 }
 
 .security-property-info {
-    background-image: url(Images/securityPropertyInfo.svg);
+    -webkit-mask-position: -48px -16px;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+.security-property-unknown {
+    -webkit-mask-position: -64px -16px;
+    background-color: rgba(0, 0, 0, 0.5);
 }