Organize security panel main view.

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 0857aa38d924a45f308bac159e7087f551df865c..76d731e359dc91bcfc435ad620a7b45e40f9336e 100644
--- a/Source/devtools/front_end/security/SecurityPanel.js
+++ b/Source/devtools/front_end/security/SecurityPanel.js
@@ -10,7 +10,7 @@
 WebInspector.SecurityPanel = function()
 {
     WebInspector.PanelWithSidebar.call(this, "security");
-    this.registerRequiredCSS("security/securityPanel.css");
+    this.registerRequiredCSS("security/mainView.css");
     this.registerRequiredCSS("security/lockIcon.css");
 
     var sidebarTree = new TreeOutlineInShadow();
@@ -330,11 +330,16 @@ WebInspector.SecurityMainView = function()
     this.element.classList.add("security-main-view");
 
     // 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");
-    this._securityExplanations = securityStateSection.createChild("div", "security-explanations");
+    var summarySection = this.element.createChild("div", "section");
+    summarySection.classList.add("summary");
+
+    this._summarylockIcon = summarySection.createChild("div", "lock-icon");
+
+    var text = summarySection.createChild("div", "text");
+    text.createChild("div", "title").textContent = WebInspector.UIString("Security Overview");
+    this._summaryExplanation = text.createChild("div", "explanation");
+
+    this._securityExplanations = this.element.createChild("div", "security-explanations");
 
 }
 
@@ -344,12 +349,13 @@ WebInspector.SecurityMainView.prototype = {
      */
     _addExplanation: function(explanation)
     {
-        var explanationDiv = this._securityExplanations.createChild("div", "security-explanation");
+        var explanationSection = this._securityExplanations.createChild("div", "section");
+        explanationSection.classList.add("explanation");
 
-        var explanationLockIcon = explanationDiv.createChild("div", "lock-icon");
-        explanationLockIcon.classList.add("lock-icon-" + explanation.securityState);
-        explanationDiv.createChild("div", "explanation-title").textContent = WebInspector.UIString(explanation.summary);
-        explanationDiv.createChild("div", "explanation-text").textContent = WebInspector.UIString(explanation.description);
+        explanationSection.createChild("div", "lock-icon").classList.add("lock-icon-" + explanation.securityState);
+        var text = explanationSection.createChild("div", "text");
+        text.createChild("div", "title").textContent = explanation.summary

[dgozman, 2015/08/26 20:28:41]

nit: semicolon missing

[lgarron, 2015/08/26 21:42:43]

Done.

(One of these days I'll write myself an extra linter and wrap it together with
the Blink presubmit...)

+        text.createChild("div", "explanation").textContent = explanation.description;
     },
 
     /**
@@ -360,12 +366,20 @@ WebInspector.SecurityMainView.prototype = {
     {
         // Remove old state.
         // It's safe to call this even when this._securityState is undefined.
-        this._lockIcon.classList.remove("lock-icon-" + this._securityState);
+        this._summarylockIcon.classList.remove("lock-icon-" + this._securityState);
+        this._summaryExplanation.classList.remove("security-state-" + this._securityState);
 
         // Add new state.
         this._securityState = newSecurityState;
-        this._lockIcon.classList.add("lock-icon-" + this._securityState);
-        this._securityStateText.textContent = WebInspector.UIString("Page security state: %s", this._securityState);
+        this._summarylockIcon.classList.add("lock-icon-" + this._securityState);
+        this._summaryExplanation.classList.add("security-state-" + this._securityState);
+        var summaryExplanationStrings = {
+            "unknown":  WebInspector.UIString("This security of this page is unknown."),
+            "insecure": WebInspector.UIString("This page is insecure (broken HTTPS)."),
+            "neutral":  WebInspector.UIString("This page is not secure."),
+            "secure":   WebInspector.UIString("This page is secure (valid HTTPS).")
+        }
+        this._summaryExplanation.textContent = summaryExplanationStrings[this._securityState];
 
         this._securityExplanations.removeChildren();
         for (var explanation of explanations)