Surface lock icon explanations in the DevTools Security panel.

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
index 9e4b5dbdf04ef5668e6d0f033cc5e3d5e288c3d2..8860145c3f724f5368c565e00bc0e44ae50beecf 100644
--- a/Source/devtools/front_end/security/SecurityPanel.js
+++ b/Source/devtools/front_end/security/SecurityPanel.js
@@ -15,15 +15,32 @@ WebInspector.SecurityPanel = function() {
     var securityStateSection = this.element.createChild("div");
     this._lockIcon = securityStateSection.createChild("div", "lock-icon");
     this._securityStateText = securityStateSection.createChild("div", "security-state");
+    securityStateSection.createChild("hr");
+    this._securityExplanations = securityStateSection.createChild("div", "security-explanations");
 
     WebInspector.targetManager.observeTargets(this);
 }
 
 WebInspector.SecurityPanel.prototype = {
+
+

[dgozman, 2015/06/19 11:33:36]

nit: extra blank lines.

[lgarron, 2015/06/19 17:35:41]

Removed.

+    /**
+     * @param {!SecurityAgent.SecurityStateExplanation} explanation
+     */
+    _addExplanation: function(explanation) {
+        var explanationDiv = this._securityExplanations.createChild("div", "security-explanation");
+
+        var explanationLockIcon = explanationDiv.createChild("div", "lock-icon");
+        explanationLockIcon.classList.add("lock-icon-" + explanation.securityState);
+        explanationDiv.createChild("div", "explanation-title").textContent = explanation.summary;
+        explanationDiv.createChild("div", "explanation-text").textContent = explanation.description;
+    },
+
     /**
      * @param {!SecurityAgent.SecurityState} newSecurityState
+     * @param {!Array<!SecurityAgent.SecurityStateExplanation>} explanations
      */
-    _updateSecurityState: function(newSecurityState)
+    _updateSecurityState: function(newSecurityState, explanations)
     {
         // Remove old state.
         // It's safe to call this even when this._securityState is undefined.
@@ -32,7 +49,12 @@ WebInspector.SecurityPanel.prototype = {
         // Add new state.
         this._securityState = newSecurityState;
         this._lockIcon.classList.add("lock-icon-" + this._securityState);
-        this._securityStateText.textContent = this._securityState;
+        this._securityStateText.textContent = WebInspector.UIString("Page security state: %s", this._securityState);
+
+        this._securityExplanations.removeChildren();
+        for (var explanation of explanations) {

[dgozman, 2015/06/19 11:33:36]

nit: no {} for one-line blocks.

[lgarron, 2015/06/19 17:35:41]

Done.

(Even if I like my unconditional for-braces. :-P)

+            this._addExplanation(explanation);
+        }
     },
 
     /**
@@ -40,8 +62,9 @@ WebInspector.SecurityPanel.prototype = {
      */
     _onSecurityStateChanged: function(event)
     {
-        var securityState = /** @type {!SecurityAgent.SecurityState} */ (event.data);
-        this._updateSecurityState(securityState);
+        var securityState = /** @type {!SecurityAgent.SecurityState} */ (event.data.securityState);
+        var explanations = /** @type {!Array<!SecurityAgent.SecurityStateExplanation>} */ (event.data.explanations);
+        this._updateSecurityState(securityState, explanations);
     },
 
     /**
@@ -54,7 +77,7 @@ WebInspector.SecurityPanel.prototype = {
             this._target = target;
             this._securityModel = WebInspector.SecurityModel.fromTarget(target);
             this._securityModel.addEventListener(WebInspector.SecurityModel.EventTypes.SecurityStateChanged, this._onSecurityStateChanged, this);
-            this._updateSecurityState(this._securityModel.securityState());
+            this._updateSecurityState(this._securityModel.securityState(), []);
         }
     },
 
@@ -68,7 +91,7 @@ WebInspector.SecurityPanel.prototype = {
             this._securityModel.removeEventListener(WebInspector.SecurityModel.EventTypes.SecurityStateChanged, this._onSecurityStateChanged, this);
             delete this._securityModel;
             delete this._target;
-            this._updateSecurityState(/** @type {!SecurityAgent.SecurityState} */ ("unknown"));
+            this._updateSecurityState(/** @type {!SecurityAgent.SecurityState} */ ("unknown"), []);
         }
     },