Add a sidebar to 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 4348fbb2829ff54684b0a6a2c918a31c25c88aa9..721e9dcda969a1e6450e11ee929d42328151be5a 100644
--- a/Source/devtools/front_end/security/SecurityPanel.js
+++ b/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");

[dgozman, 2015/06/29 08:11:47]

I'd rather attach this in SecurityMainViewSidebarTreeElement. It's cheap.

[lgarron, 2015/06/29 08:22:56]

Hmm, I wasn't sure how to do that, since registerRequiredCSS can't be called on
a WebInspector.SidebarTreeElement.
Should I:
- Pass sidebarTree into the SecurityMainViewSidebarTreeElement constructor and
call sidebarTree.registerRequiredCSS()?
- Make SecurityMainViewSidebarTreeElement extend something that has
registerRequiredCSS, like WebInspector.Widget or WebInspector.Section?
- Do something else?

It isn't obvious to me. :-(

+    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
 }
 
 /**
@@ -107,6 +114,50 @@ WebInspector.SecurityPanel._instance = function()
 
 /**
  * @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}
  */
 WebInspector.SecurityPanelFactory = function()
@@ -122,4 +173,61 @@ WebInspector.SecurityPanelFactory.prototype = {
     {
         return WebInspector.SecurityPanel._instance();
     }
-}
+}
+
+/**
+ * @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
+}