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 SecurityMainViewSidebarT
lgarron
2015/06/29 08:22:56
Hmm, I wasn't sure how to do that, since registerR
|
+ 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 |
+} |