Surface lock icon explanations in the DevTools Security panel.

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}
  * @implements {WebInspector.TargetManager.Observer}
  */
 WebInspector.SecurityPanel = function() {
     WebInspector.Panel.call(this, "security");
     this.registerRequiredCSS("security/securityPanel.css");
 
     // Create security state section.
     var securityStateSection = this.element.createChild("div");
     this._lockIcon = securityStateSection.createChild("div", "lock-icon");
     this._securityStateText = securityStateSection.createChild("div", "security-state");
+    securityStateSection.createChild("hr");

[dgozman, 2015/06/18 10:50:49]

This is ok for now, but as you add more content we should switch from flow
layout with <hr> and similar to box layout with flex.

[lgarron, 2015/06/18 18:16:18]

Acknowledged.
(I tried a few ideas like div borders, but this was simple, and looked good
enough.)

+    this._securityExplanations = securityStateSection.createChild("div", "security-explanations");
 
     WebInspector.targetManager.observeTargets(this);
 }
 
 WebInspector.SecurityPanel.prototype = {
+
+    _addExplanation: function(explanation) {

[dgozman, 2015/06/18 10:50:49]

JSDoc please.

[lgarron, 2015/06/18 18:16:18]

Done.

+        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<!WebInspector.SecurityModel.SecurityStateExplanation>} explanations
      */
-    _updateSecurityState: function(newSecurityState)
+    _updateSecurityState: function(newSecurityState, explanations)
     {
         // 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;
+        this._securityStateText.textContent = "Page security state: " + this._securityState;

[dgozman, 2015/06/18 10:50:49]

Wrap all user-visible text in WebInspector.UIString. For example,
WebInspector.UIString("Page security state: %s", this._securityState).

[lgarron, 2015/06/18 18:16:18]

Done.
(We have our own [vs]printf? Awesome! 😎)

+
+        this._securityExplanations.removeChildren();
+        explanations.map(this._addExplanation.bind(this));

[dgozman, 2015/06/18 10:50:49]

We usually use for..of for this.

[lgarron, 2015/06/18 18:16:18]

Done.
(I did not know that for...of was introduced in ES 6. That's awesome; I've
wanted it since... I've ever programmed Javascript.)

     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _onSecurityStateChanged: function(event)
     {
-        var securityState = /** @type {!SecurityAgent.SecurityState} */ (event.data);
-        this._updateSecurityState(securityState);
+        var eventData = /** @type {!WebInspector.SecurityDispatcher.SecurityStateChangedEvent} */ (event.data);
+        this._updateSecurityState(eventData.securityState, eventData.explanations);
     },
 
     /**
      * @override
      * @param {!WebInspector.Target} target
      */
     targetAdded: function(target)
     {
         if (!this._target) {
             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(), []);
         }
     },
 
     /**
      * @override
      * @param {!WebInspector.Target} target
      */
     targetRemoved: function(target)
     {
         if (target === this._target) {
             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"), []);
         }
     },
 
     __proto__: WebInspector.Panel.prototype
 }
 
 /**
  * @return {!WebInspector.SecurityPanel}
  */
 WebInspector.SecurityPanel._instance = function()
@@ skipping 14 matching lines @@
 WebInspector.SecurityPanelFactory.prototype = {
     /**
      * @override
      * @return {!WebInspector.Panel}
      */
     createPanel: function()
     {
         return WebInspector.SecurityPanel._instance();
     }
 }