DevTools Security Panel: Use the new security indicators.

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

Index: third_party/WebKit/Source/devtools/front_end/security/mainView.css
diff --git a/third_party/WebKit/Source/devtools/front_end/security/mainView.css b/third_party/WebKit/Source/devtools/front_end/security/mainView.css
index df51db5dea5d134b4b39335841b441dbbe22228d..af616ad0f88c9e363bdc32e3d5dd56b283decdaf 100644
--- a/third_party/WebKit/Source/devtools/front_end/security/mainView.css
+++ b/third_party/WebKit/Source/devtools/front_end/security/mainView.css
@@ -20,63 +20,47 @@
 
 .security-summary-section-title {
     font-size: 14px;
-    margin: 12px 24px;
+    margin: 12px 16px;
 }
 
 .lock-spectrum {
-    min-width: 180px;
-    max-width: 240px;
-    margin: 6px 12px;
+    margin: 8px 16px;
     display: flex;
-    align-items: center;
+    align-items: flex-start;
 }
 
 .security-summary .lock-icon {
     flex: none;
-    width: 32px;
-    height: 32px;
-    margin: 0 12px;
-    background-position: center center;
-
-    /* Defaults for dynamic properties. */
-    opacity: 0.5;
+    width: 16px;
+    height: 16px;
+    margin: 0 0;
 }
 
-/* Shrink the margin for the page lock icon. */
+/* Separate the middle icon from the other two. */
 .security-summary .lock-icon-neutral {
-    margin: 0 6px;
-}
-
-.security-summary-secure .lock-icon-secure,
-.security-summary-neutral .lock-icon-neutral,
-.security-summary-insecure .lock-icon-insecure {
-    opacity: 1;
+    margin: 0 16px;
 }
 
-.security-summary-lock-spacer {
-    flex: 1 1 auto;
-    height: 1px;
-    background: rgb(217, 217, 217);
+.security-summary:not(.security-summary-secure) .lock-icon-secure,
+.security-summary:not(.security-summary-neutral) .lock-icon-neutral,
+.security-summary:not(.security-summary-insecure) .lock-icon-insecure {
+    background-color: rgba(90, 90, 90, 0.25);
 }
 
 .triangle-pointer-container {
-    /* Let (lock width) = (horizonal width of 1 lock icon, including both margins) */
-    /* Horizontal margin is (lock width)/2 + (lock-spectrum horizontal margin) */
-    margin: 8px 40px 0px;
-    /* Width is (lock spectrum width) - (lock width) */
-    min-width: 124px;
-    max-width: 184px;
+    margin: 8px 24px 0;
+    padding: 0 0;
 }
 
 .triangle-pointer-wrapper {
     /* Defaults for dynamic properties. */
-    transform: translateX(50%);
+    transform: translateX(0);
     transition: transform 0.3s;
 }
 
 .triangle-pointer {
-    width:  12px;
-    height:  12px;
+    width: 12px;
+    height: 12px;
     margin-bottom: -6px;
     margin-left: -6px;
     transform: rotate(-45deg);
@@ -89,15 +73,15 @@
 }
 
 .security-summary-secure .triangle-pointer-wrapper {
-    transform: translateX(0%);
+    transform: translateX(0px);
 }
 
 .security-summary-neutral .triangle-pointer-wrapper {
-    transform: translateX(50%);
+    transform: translateX(32px);
 }
 
 .security-summary-insecure .triangle-pointer-wrapper {
-    transform: translateX(100%);
+    transform: translateX(64px);
 }
 
 .security-summary-text {
@@ -133,7 +117,7 @@
 }
 
 .security-explanation {
-    padding: 12px;
+    padding: 16px;
     border-bottom: 1px solid rgb(230, 230, 230);
     background-color: #fff;
 
@@ -161,10 +145,9 @@
 
 .security-explanation .security-property {
     flex: none;
-    width: 18px;
-    height: 18px;
-    margin-left: 10px;
-    margin-right: 18px;
+    width: 16px;
+    height: 16px;
+    margin-right: 16px;
 }
 
 .security-explanation-title {