Add a sidebar to the DevTools Security panel.

Followup CLs will add additional items to the sidebar.

BUG=503167

Review URL: https://codereview.chromium.org/1215493002

git-svn-id: svn://svn.chromium.org/blink/trunk@197972 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/Source/devtools/devtools.gypi

@@ -512,6 +512,7 @@
             'front_end/resources/ServiceWorkersView.js',
         ],
         'devtools_security_js_files': [
+            'front_end/security/lockIcon.css',
             'front_end/security/securityPanel.css',
             'front_end/security/SecurityModel.js',
             'front_end/security/SecurityPanel.js',

third_party/WebKit/Source/devtools/front_end/security/SecurityPanel.js

@@ -4,35 +4,30 @@
 
 /**
  * @constructor
- * @extends {WebInspector.Panel}
+ * @extends {WebInspector.PanelWithSidebar}
  * @implements {WebInspector.TargetManager.Observer}
  */
 WebInspector.SecurityPanel = function() {
-    WebInspector.Panel.call(this, "security");
+    WebInspector.PanelWithSidebar.call(this, "security");
     this.registerRequiredCSS("security/securityPanel.css");
+    this.registerRequiredCSS("security/lockIcon.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");
-    this._securityExplanations = securityStateSection.createChild("div", "security-explanations");
+    var sidebarTree = new TreeOutlineInShadow();
+    sidebarTree.element.classList.add("sidebar-tree");
+    this.panelSidebarElement().appendChild(sidebarTree.element);
+    sidebarTree.registerRequiredCSS("security/lockIcon.css");
+    this.setDefaultFocusedElement(sidebarTree.element);
+
+    this._sidebarMainViewElement = new WebInspector.SecurityMainViewSidebarTreeElement(this);
+    sidebarTree.appendChild(this._sidebarMainViewElement);
+
+    this._mainView = new WebInspector.SecurityMainView();
+    this.showMainView();
 
     WebInspector.targetManager.observeTargets(this);
 }
 
 WebInspector.SecurityPanel.prototype = {
-    /**
-     * @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
@@ -40,18 +35,8 @@ WebInspector.SecurityPanel.prototype = {
      */
     _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 = WebInspector.UIString("Page security state: %s", this._securityState);
-
-        this._securityExplanations.removeChildren();
-        for (var explanation of explanations)
-            this._addExplanation(explanation);
+        this._sidebarMainViewElement.setSecurityState(newSecurityState);
+        this._mainView.updateSecurityState(newSecurityState, explanations);
     },
 
     /**
@@ -64,6 +49,28 @@ WebInspector.SecurityPanel.prototype = {
         this._updateSecurityState(securityState, explanations);
     },
 
+    showMainView: function()
+    {
+        this._setVisibleView(this._mainView);
+    },
+
+    /**
+     * @param {!WebInspector.VBox} view
+     */
+    _setVisibleView: function(view)
+    {
+        if (this._visibleView === view)
+            return;
+
+        if (this._visibleView)
+            this._visibleView.detach();
+
+        this._visibleView = view;
+
+        if (view)
+            this.splitWidget().setMainWidget(view);
+    },
+
     /**
      * @override
      * @param {!WebInspector.Target} target
@@ -92,7 +99,7 @@ WebInspector.SecurityPanel.prototype = {
         }
     },
 
-    __proto__: WebInspector.Panel.prototype
+    __proto__: WebInspector.PanelWithSidebar.prototype
 }
 
 /**
@@ -105,6 +112,50 @@ WebInspector.SecurityPanel._instance = function()
     return WebInspector.SecurityPanel._instanceObject;
 }
 
+/**
+ * @constructor
+ * @extends {WebInspector.SidebarTreeElement}
+ * @param {!WebInspector.SecurityPanel} panel
+ */
+WebInspector.SecurityMainViewSidebarTreeElement = function(panel)
+{
+    this._panel = panel;
+    this.small = true;
+    WebInspector.SidebarTreeElement.call(this, "security-sidebar-tree-item", WebInspector.UIString("Overview"));
+    this.iconElement.classList.add("lock-icon");
+}
+
+WebInspector.SecurityMainViewSidebarTreeElement.prototype = {
+    onattach: function()
+    {
+        WebInspector.SidebarTreeElement.prototype.onattach.call(this);
+    },
+
+    /**
+     * @param {!SecurityAgent.SecurityState} newSecurityState
+     */
+    setSecurityState: function(newSecurityState)
+    {
+        for (var className of this.iconElement.classList)
+            if (className.indexOf("lock-icon-") === 0)
+                this.iconElement.classList.remove(className);
+
+        this.iconElement.classList.add("lock-icon-" + newSecurityState);
+    },
+
+    /**
+     * @override
+     * @return {boolean}
+     */
+    onselect: function()
+    {
+        this._panel.showMainView();
+        return true;
+    },
+
+    __proto__: WebInspector.SidebarTreeElement.prototype
+}
+
 /**
  * @constructor
  * @implements {WebInspector.PanelFactory}
@@ -122,4 +173,61 @@ WebInspector.SecurityPanelFactory.prototype = {
     {
         return WebInspector.SecurityPanel._instance();
     }
-}
\ No newline at end of file
+}
+
+/**
+ * @constructor
+ * @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");
+
+}
+
+WebInspector.SecurityMainView.prototype = {
+    /**
+     * @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, 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 = WebInspector.UIString("Page security state: %s", this._securityState);
+
+        this._securityExplanations.removeChildren();
+        for (var explanation of explanations)
+            this._addExplanation(explanation);
+    },
+
+    __proto__: WebInspector.VBox.prototype
+}

third_party/WebKit/Source/devtools/front_end/security/lockIcon.css

+/* Copyright (c) 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.
+ */
+
+.lock-icon {
+    background-size: cover;
+    height: 16px;
+    width: 16px;
+}
+
+.lock-icon-unknown {
+    background-image: url(Images/securityStateHttp.png);
+}
+
+.lock-icon-http {
+    background-image: url(Images/securityStateHttp.png);
+}
+
+.lock-icon-insecure {
+    background-image: url(Images/securityStateInsecure.png);
+}
+
+.lock-icon-warning {
+    background-image: url(Images/securityStateWarning.png);
+}
+
+.lock-icon-secure {
+    background-image: url(Images/securityStateSecure.png);
+}
+
+
+@media (-webkit-min-device-pixel-ratio: 1.5) {
+    .lock-icon-unknown {
+        background-image: url(Images/securityStateHttp_2x.png);
+    }
+
+    .lock-icon-http {
+        background-image: url(Images/securityStateHttp_2x.png);
+    }
+
+    .lock-icon-insecure {
+        background-image: url(Images/securityStateInsecure_2x.png);
+    }
+
+    .lock-icon-warning {
+        background-image: url(Images/securityStateWarning_2x.png);
+    }
+
+    .lock-icon-secure {
+        background-image: url(Images/securityStateSecure_2x.png);
+    }
+}
+
+.sidebar-tree-item .lock-icon {
+    float: left;
+    margin-right: 2px;
+}
\ No newline at end of file

third_party/WebKit/Source/devtools/front_end/security/module.json

@@ -15,6 +15,7 @@
         "SecurityPanel.js"
     ],
     "resources": [
+        "lockIcon.css",
         "securityPanel.css"
     ]
 }

third_party/WebKit/Source/devtools/front_end/security/securityPanel.css

@@ -3,88 +3,40 @@
  * found in the LICENSE file.
  */
 
-.security.panel {
+.security-main-view {
     margin: 1em;
 }
 
-.security.panel .lock-icon,
-.security.panel .security-state {
+.security-main-view .lock-icon {
     display: inline-block;
     margin: 0.2em;
     vertical-align: middle;
 }
 
-.security.panel .security-state {
-    font-weight: bold;
+.security-main-view .security-state {
+    display: inline-block;
     font-size: 1.2em;
+    font-weight: bold;
+    margin: 0.2em;
+    vertical-align: middle;
 }
 
-.security.panel .lock-icon {
-    width: 16px;
-    height: 16px;
-    border-radius: 2px;
-    background-size: cover;
-}
-
-.security.panel .lock-icon-unknown {
-    background-image: url(Images/securityStateHttp.png);
-}
-
-.security.panel .lock-icon-http {
-    background-image: url(Images/securityStateHttp.png);
-}
-
-.security.panel .lock-icon-insecure {
-    background-image: url(Images/securityStateInsecure.png);
-}
-
-.security.panel .lock-icon-warning {
-    background-image: url(Images/securityStateWarning.png);
-}
-
-.security.panel .lock-icon-secure {
-    background-image: url(Images/securityStateSecure.png);
-}
-
-
-@media (-webkit-min-device-pixel-ratio: 1.5) {
-    .security.panel .lock-icon-unknown {
-        background-image: url(Images/securityStateHttp_2x.png);
-    }
-
-    .security.panel .lock-icon-http {
-        background-image: url(Images/securityStateHttp_2x.png);
-    }
-
-    .security.panel .lock-icon-insecure {
-        background-image: url(Images/securityStateInsecure_2x.png);
-    }
-
-    .security.panel .lock-icon-warning {
-        background-image: url(Images/securityStateWarning_2x.png);
-    }
-
-    .security.panel .lock-icon-secure {
-        background-image: url(Images/securityStateSecure_2x.png);
-    }
-}
-
-.security.panel .security-explanation {
+.security-explanation {
     margin: 16px 0px;
 }
 
-.security.panel .security-explanation .lock-icon {
+.security-explanation .lock-icon {
     display: inline-block;
     vertical-align: bottom;
 }
 
-.security.panel .security-explanation .explanation-title {
+.security-explanation .explanation-title {
     display: inline-block;
-    font-weight: bold;
     font-size: 1.2em;
+    font-weight: bold;
     margin-left: 4px;
 }
 
-.security.panel .security-explanation .explanation-text {
+.security-explanation .explanation-text {
     margin: 4px 0px;
 }
\ No newline at end of file