Add a sidebar to the DevTools Security panel.

Source/devtools/front_end/security/lockIcon.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.
+ */
+
+.lock-icon {
+    background-size: cover;
+    height: 16px;
+    width: 16px;
+}
+
+.lock-icon-unknown {
+    background-image: url(Images/securityStateHttp.png);
+}
+
+.lock-icon-http {
+    background-image: url(Images/securityStateHttp.png);
+}
+
+.lock-icon-insecure {
+    background-image: url(Images/securityStateInsecure.png);
+}
+
+.lock-icon-warning {
+    background-image: url(Images/securityStateWarning.png);
+}
+
+.lock-icon-secure {
+    background-image: url(Images/securityStateSecure.png);
+}
+
+
+@media (-webkit-min-device-pixel-ratio: 1.5) {
+    .lock-icon-unknown {
+        background-image: url(Images/securityStateHttp_2x.png);
+    }
+
+    .lock-icon-http {
+        background-image: url(Images/securityStateHttp_2x.png);
+    }
+
+    .lock-icon-insecure {
+        background-image: url(Images/securityStateInsecure_2x.png);
+    }
+
+    .lock-icon-warning {
+        background-image: url(Images/securityStateWarning_2x.png);
+    }
+
+    .lock-icon-secure {
+        background-image: url(Images/securityStateSecure_2x.png);
+    }
+}
+
+.sidebar-tree-item .lock-icon {
+    float: left;
+    margin-right: 2px;
+}