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

Source/devtools/front_end/security/SecurityPanel.js

+// 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}
+ */
+WebInspector.SecurityPanel = function() {
+    WebInspector.Panel.call(this, "security");
+    this.registerRequiredCSS("security/securityPanel.css");
+
+    this._securityModel = WebInspector.SecurityModel.fromTarget(WebInspector.targetManager.mainTarget());
+    this._securityModel.addEventListener(WebInspector.SecurityModel.EventTypes.SecurityStateChanged, this._onSecurityStateChanged, this);
+
+    // Create security state section

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

nit: full stop please.

[lgarron, 2015/06/16 19:25:43]

Done.

+    var securityStateSection = createElement("div");

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

... = this.element.createChild("div");

[lgarron, 2015/06/16 19:25:43]

Done, but won't that mutate the DOM multiple times during construction? I
thought it was best practice to construct it a non-trivial structure off-DOM and
add it at the end.

[dgozman, 2015/06/16 19:43:36]

It will. However, if you don't force layout, it should have the same performance
as constructing detached DOM nodes.

+    this._lockIcon = securityStateSection.createChild("div", "lock-icon");
+    this._securityStateText = securityStateSection.createChild("div", "security-state");
+    this._updateSecurityState(this._securityModel.securityState());
+    this.element.appendChild(securityStateSection);
+}
+
+WebInspector.SecurityPanel.prototype = {
+    /**
+     * @param {!SecurityAgent.SecurityState} newSecurityState
+     */
+    _updateSecurityState: function(newSecurityState)
+    {
+        // Remove old state.
+        // It's safe to call this even when this._securityState is undefined.
+        this._lockIcon.classList.remove("lock-icon-" + this._securityState);
+
+        // Add new state.
+        this._securityState = newSecurityState;
+        this._lockIcon.classList.add("lock-icon-" + this._securityState);
+        this._securityStateText.textContent = this._securityState;
+    },
+
+    /**
+     * @param {!WebInspector.Event} event
+     */
+    _onSecurityStateChanged: function(event)
+    {
+        var securityState = /** @type {!SecurityAgent.SecurityState} */ (event.data);
+        this._updateSecurityState(securityState);
+    },
+
+    __proto__: WebInspector.Panel.prototype
+}
+
+/**
+ * @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();
+    }
+}