Organize security panel main view.

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.PanelWithSidebar}
  * @implements {WebInspector.TargetManager.Observer}
  */
 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();
     sidebarTree.element.classList.add("sidebar-tree");
     this.panelSidebarElement().appendChild(sidebarTree.element);
     sidebarTree.registerRequiredCSS("security/sidebar.css");
     sidebarTree.registerRequiredCSS("security/lockIcon.css");
     this.setDefaultFocusedElement(sidebarTree.element);
 
     this._sidebarMainViewElement = new WebInspector.SecurityMainViewSidebarTreeElement(this);
@@ skipping 299 matching lines @@
  * @extends {WebInspector.VBox}
  */
 WebInspector.SecurityMainView = function()
 {
     WebInspector.VBox.call(this);
     this.setMinimumSize(100, 100);
 
     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");
 
 }
 
 WebInspector.SecurityMainView.prototype = {
     /**
      * @param {!SecurityAgent.SecurityStateExplanation} explanation
      */
     _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;
     },
 
     /**
      * @param {!SecurityAgent.SecurityState} newSecurityState
      * @param {!Array<!SecurityAgent.SecurityStateExplanation>} explanations
      */
     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);
+        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)
             this._addExplanation(explanation);
     },
 
     __proto__: WebInspector.VBox.prototype
 }
 
 /**
@@ skipping 133 matching lines @@
 
         var valueDiv = row.createChild("div");
         if (value instanceof HTMLDivElement) {
             valueDiv.appendChild(value);
         } else {
             valueDiv.textContent = value;
         }
     }
 }