Add a minimal Security panel to DevTools (behind a hidden experiment).

Source/devtools/front_end/security/securityPanel.css

Index: Source/devtools/front_end/security/securityPanel.css
diff --git a/Source/devtools/front_end/security/securityPanel.css b/Source/devtools/front_end/security/securityPanel.css
new file mode 100644
index 0000000000000000000000000000000000000000..dce4a18a426b61022bcc9da8ee6cfca4ff216fa1
--- /dev/null
+++ b/Source/devtools/front_end/security/securityPanel.css
@@ -0,0 +1,35 @@
+/* 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.panel {
+  margin: 1em;

[dgozman, 2015/06/15 16:58:42]

4 spaces everywhere.

+}
+
+.security.panel .lock-icon, .security.panel .security-state {

[dgozman, 2015/06/15 16:58:42]

One selector per line.

+  display: inline-block;
+  margin: 0.2em;
+  vertical-align: middle;
+}
+
+.security.panel .lock-icon {
+    width: 16px;
+    height: 16px;
+    border-radius: 2px;
+    background-image: url(Images/securityStateHttp.png);

[dgozman, 2015/06/15 16:58:42]

Don't use default one.

[lgarron, 2015/06/15 22:38:08]

What do you recommend instead?

- No background
- CSS background fallback
- Fallback icon
- Create an icon for "unknown" and also use it for fallback?

[dgozman, 2015/06/16 13:42:58]

No background. It should always have a valid class though.

+    background-size: cover;
+}
+.security.panel .lock-icon.unknown  {background-image: url(Images/securityStateHttp.png);}

[dgozman, 2015/06/15 16:58:42]

Use "lock-icon-unknown" and similar to prevent clashes with other places.

+.security.panel .lock-icon.http     {background-image: url(Images/securityStateHttp.png);}

[dgozman, 2015/06/15 16:58:42]

Please format as other rules.

+.security.panel .lock-icon.insecure {background-image: url(Images/securityStateInsecure.png);}
+.security.panel .lock-icon.warning  {background-image: url(Images/securityStateWarning.png);}
+.security.panel .lock-icon.secure   {background-image: url(Images/securityStateSecure.png);}
+
+@media (-webkit-min-device-pixel-ratio: 1.5) {
+  .security.panel .lock-icon.unknown  {background-image: url(Images/securityStateHttp_2x.png);}
+  .security.panel .lock-icon.http     {background-image: url(Images/securityStateHttp_2x.png);}
+  .security.panel .lock-icon.insecure {background-image: url(Images/securityStateInsecure_2x.png);}
+  .security.panel .lock-icon.warning  {background-image: url(Images/securityStateWarning_2x.png);}
+  .security.panel .lock-icon.secure   {background-image: url(Images/securityStateSecure_2x.png);}
+}