Add CSP information to Security Panel.

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

 /* Copyright (c) 2015 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
 
 .security-origin-view {
     overflow-x: hidden;
     overflow-y: scroll;
     display: block;
     -webkit-user-select: text;
@@ skipping 58 matching lines @@
     display: block;
 }
 
 .security-origin-view .truncated-san .truncated-entry {
     display: none;
 }
 
 .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);
+}