Add CSP information to Security Panel.

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

Index: third_party/WebKit/Source/devtools/front_end/security/originView.css
diff --git a/third_party/WebKit/Source/devtools/front_end/security/originView.css b/third_party/WebKit/Source/devtools/front_end/security/originView.css
index aeb26f6bf376fa253e85233f9a8779119c26968c..1e0a29e5e2ce9de5f5d2d4542788edca502ac2a8 100644
--- a/third_party/WebKit/Source/devtools/front_end/security/originView.css
+++ b/third_party/WebKit/Source/devtools/front_end/security/originView.css
@@ -76,3 +76,94 @@
 .security-certificate-button {
     margin-top: 4px;
 }
+
+.security-origin-view .csp-directive {
+    margin: 6px 0;
+}
+
+.csp-directive {
+    width: 100%;
+}
+
+.csp-directive_hidden {
+    display: none;
+}
+
+.csp-directive .lock-icon {
+    display: inline-block;
+}
+
+.csp-directive tr {
+    display: flex;
+    flex-direction: row;
+}
+
+.csp-directive th {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+    flex-basis: 50%;
+}
+
+.csp-directive th p {
+    display: inline-block;
+    font-weight: 500;
+}
+
+.csp-directive td {
+    flex-basis: 50%;
+}
+
+.csp-directive td p {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.csp-directive td p b {
+    flex-basis: 25%;
+}
+
+.csp-directive td p span {
+    flex-basis: 70%;
+}
+
+.csp-directive .lock-icon-unsafe {
+    background-image: none;
+    background-color: #5a5a5a;
+    -webkit-mask-image: url(Images/securityPropertyInsecure.svg);
+    -webkit-mask-size: cover;
+}
+
+.csp-directive .lock-icon-possibly-unsafe {
+    background-image: none;
+    background-color: #5a5a5a;
+    -webkit-mask-image: url(Images/securityPropertyWarning.svg);
+    -webkit-mask-size: cover;
+}
+
+.csp-rule-heading {
+    display: flex;
+    justify-content: center;
+    border-top: 1px solid rgba(0, 0, 0, 0.2);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+.csp-rule-heading .icon {
+    background-image: none;
+    background-color: #5a5a5a;
+    -webkit-mask-image: url(Images/securityPropertyWarning.svg);
+    -webkit-mask-size: cover;
+    background-size: cover;
+    height: 16px;
+    width: 16px;
+    display: inline-block;
+    margin-left: 6px;
+    pointer-events: none;
+}
+
+.csp-rule-heading.directive-is-hidden .icon {
+    transform: rotate(0.5turn);
+}