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

Source/devtools/front_end/security/SecurityPanel.js

Index: Source/devtools/front_end/security/SecurityPanel.js
diff --git a/Source/devtools/front_end/security/SecurityPanel.js b/Source/devtools/front_end/security/SecurityPanel.js
new file mode 100644
index 0000000000000000000000000000000000000000..a522e2e484b83a861466e78ae579aab244e99418
--- /dev/null
+++ b/Source/devtools/front_end/security/SecurityPanel.js
@@ -0,0 +1,89 @@
+// Copyright 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.
+
+/**
+ * @constructor
+ * @extends {WebInspector.Panel}
+ * @implements {WebInspector.TargetManager.Observer}
+ */
+WebInspector.SecurityPanel = function() {
+    WebInspector.Panel.call(this, "security");
+    this.registerRequiredCSS("security/securityPanel.css");
+
+    WebInspector.targetManager.addModelListener(WebInspector.SecurityManager, WebInspector.SecurityManager.EventTypes.SecurityStateChanged, this._onSecurityStateChanged, this);
+
+    this.element.appendChild(this.createSecurityStateSection());
+}
+
+WebInspector.SecurityPanel.prototype = {
+    _onSecurityStateChanged: function (event)
+    {
+        document.getElementById("lock-icon").className = "";

[dgozman, 2015/06/03 10:12:35]

Instead of lookup, just save elements to a field.

[lgarron, 2015/06/11 22:54:47]

Done.

+        document.getElementById("lock-icon").classList.add(event.data);
+
+        document.getElementById("security-state").innerHTML = event.data;
+    },
+
+    createSecurityStateSection: function()
+    {
+        var securityStateSection = document.createElement("div");
+
+        var lockIcon = document.createElement("div");

[dgozman, 2015/06/03 10:12:35]

Do not use |document|. Lookup utility method in platform/DOMExtensions.js.

[lgarron, 2015/06/11 22:54:47]

Done.

+        lockIcon.id = "lock-icon";
+        lockIcon.classList.add("HTTP");
+        securityStateSection.appendChild(lockIcon);
+
+        var securityState = document.createElement("div");
+        securityState.innerHTML = "N/A";

[dgozman, 2015/06/03 10:12:35]

No innerHTML, use textContent.

[lgarron, 2015/06/11 22:54:47]

Cool, that's what I was looking for. Done.

+        securityState.id = "security-state";
+        securityStateSection.appendChild(securityState);
+
+        return securityStateSection;
+    },
+
+    /**
+      * @override
+      * @param {!WebInspector.Target} target
+      */
+    targetAdded: function(target)
+    {
+    },
+
+    __proto__: WebInspector.Panel.prototype
+}
+
+
+WebInspector.SecurityPanel.show = function()

[dgozman, 2015/06/03 10:12:35]

You don't need this.

[lgarron, 2015/06/11 22:54:47]

Done.

+{
+    WebInspector.inspectorView.setCurrentPanel(WebInspector.SecurityPanel._instance());
+}
+
+/**
+ * @return {!WebInspector.SecurityPanel}
+ */
+WebInspector.SecurityPanel._instance = function()
+{
+    if (!WebInspector.SecurityPanel._instanceObject)
+        WebInspector.SecurityPanel._instanceObject = new WebInspector.SecurityPanel();
+    return WebInspector.SecurityPanel._instanceObject;
+}
+
+/**
+ * @constructor
+ * @implements {WebInspector.PanelFactory}
+ */
+WebInspector.SecurityPanelFactory = function()
+{
+}
+
+WebInspector.SecurityPanelFactory.prototype = {
+    /**
+     * @override
+     * @return {!WebInspector.Panel}
+     */
+    createPanel: function()
+    {
+        return WebInspector.SecurityPanel._instance();
+    }
+}