Add a sidebar to the DevTools Security panel.

Source/devtools/front_end/security/securityPanel.css

Index: Source/devtools/front_end/security/securityPanel.css
diff --git a/Source/devtools/front_end/security/securityPanel.css b/Source/devtools/front_end/security/securityPanel.css
index 335d7685435897b0a31fb7142b8d87bc98d56159..6545a49a3b11fa8b2de13279212e2f87d942a95e 100644
--- a/Source/devtools/front_end/security/securityPanel.css
+++ b/Source/devtools/front_end/security/securityPanel.css
@@ -3,18 +3,18 @@
  * found in the LICENSE file.
  */
 
-.security.panel {
+.security.panel .security-main-view {

[dgozman, 2015/06/26 10:50:49]

You can omit .security.panel where you have .security-main-view in selectors.

[lgarron, 2015/06/26 16:33:31]

Done.

I've also removed .security-main-view before .security-explanation in the
selectors below.

     margin: 1em;
 }
 
 .security.panel .lock-icon,
-.security.panel .security-state {
+.security.panel .security-main-view .security-state {
     display: inline-block;
     margin: 0.2em;
     vertical-align: middle;
 }
 
-.security.panel .security-state {
+.security.panel .security-main-view .security-state {
     font-weight: bold;
     font-size: 1.2em;
 }
@@ -69,22 +69,22 @@
     }
 }
 
-.security.panel .security-explanation {
+.security.panel .security-main-view .security-explanation {
     margin: 16px 0px;
 }
 
-.security.panel .security-explanation .lock-icon {
+.security.panel .security-main-view .security-explanation .lock-icon {
     display: inline-block;
     vertical-align: bottom;
 }
 
-.security.panel .security-explanation .explanation-title {
+.security.panel .security-main-view .security-explanation .explanation-title {
     display: inline-block;
     font-weight: bold;
     font-size: 1.2em;
     margin-left: 4px;
 }
 
-.security.panel .security-explanation .explanation-text {
+.security.panel .security-main-view .security-explanation .explanation-text {
     margin: 4px 0px;
 }