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..076df68180aade2b54fc7b82198506f86939dc07
--- /dev/null
+++ b/Source/devtools/front_end/security/SecurityPanel.js
@@ -0,0 +1,98 @@
+// 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}

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

You don't need this.

+ */
+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);

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

Will you have security for different frames or workers? Perhaps, you should call
SecurityModel.fromTarget(WebInspector.targetManager.mainTarget()) and listen to
that particular instance.

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

We might someday, but it's fine not to have them for now.
I tried
WebInspector.SecurityModel.fromTarget(WebInspector.targetManager.mainTarget()),
but it appears that WebInspector.targetManager.mainTarget() is null here if the
SecurityPanel is the current panel when DevTools is brought up. This breaks the
panel and makes the linter sad. Is there a more robust alternative?

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

Oh, I see. Then you should bring back TargetManager.Observer, grab the first
target in targetAdded notification and work with it. Don't forget to cleanup in
targetRemoved.

+
+    this.element.appendChild(this._createSecurityStateSection());

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

I'd inline it here.

+}
+
+WebInspector.SecurityPanel.prototype = {
+    _updateSecurityState: function (newSecurityState)

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

No space after "function" anywhere, please.

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

JSDoc please.

+    {
+        // Remove old state.
+        // It's safe to call this even when this.securityState is undefined.
+        this.lockIcon.classList.remove(this.securityState);
+
+        // Add new state.
+        this.securityState = newSecurityState;

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

this._securityState

+        this.lockIcon.classList.add(this.securityState);
+        this.securityStateText.textContent = this.securityState;
+    },
+
+    _onSecurityStateChanged: function (event)

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

JSDoc please.

+    {
+        this._updateSecurityState(event.data);
+    },
+
+    _createSecurityStateSection: function()

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

JSDoc please.

+    {
+        var securityStateSection = createElement("div");
+
+        this.lockIcon = createElementWithClass("div", "lock-icon");

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

this._lockIcon since it's private.

+        securityStateSection.appendChild(this.lockIcon);

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

Shortcut code: |this._lockIcon = securityStateSection.createChild("div",
"lock-icon")|.

+
+        this.securityStateText = createElementWithClass("div", "security-state");

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

this._securityStateText

+        securityStateSection.appendChild(this.securityStateText);

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

createChild

+
+        this._updateSecurityState("unknown");

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

Better move the default "unknown" state into model, and ask it explicitly here.

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

Sounds like a good use for a securityState() getter in the manager, so I've done
that. :-)

+
+        return securityStateSection;
+    },
+
+    /**
+      * @override
+      * @param {!WebInspector.Target} target
+      */
+    targetAdded: function(target)

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

Remove.

+    {
+    },
+
+    /**
+      * @override
+      * @param {!WebInspector.Target} target
+      */
+    targetRemoved: function(target)

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

Remove.

+    {
+    },
+
+    __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();
+    }
+}