[DevTools] Remove SidebarTreeElement from SecurityPanel.

This is a step towards removing SidebarTreeElement, and moving
all tree outlines into shadow dom.

BUG=none

Review-Url: https://codereview.chromium.org/2347483002
Cr-Commit-Position: refs/heads/master@{#419062}

third_party/WebKit/LayoutTests/http/tests/inspector/security-test.js

@@ -5,13 +5,14 @@ InspectorTest.preloadPanel("security");
 InspectorTest.dumpSecurityPanelSidebarOrigins = function() {
     for (var key in WebInspector.SecurityPanelSidebarTree.OriginGroupName) {
         var originGroupName = WebInspector.SecurityPanelSidebarTree.OriginGroupName[key];
-        var originTitles = WebInspector.SecurityPanel._instance()._sidebarTree._originGroups.get(originGroupName).childrenListElement.getElementsByClassName("title");
-        if (originTitles.length > 0) {
+        var originGroup = WebInspector.SecurityPanel._instance()._sidebarTree._originGroups.get(originGroupName);
+        if (originGroup.hidden)
+            continue;
         InspectorTest.addResult("Group: " + originGroupName);
+        var originTitles = originGroup.childrenListElement.getElementsByClassName("title");
         for (var originTitle of originTitles)
             InspectorTest.dumpDeepInnerHTML(originTitle);
     }
-    }
 }
 
 /**

third_party/WebKit/LayoutTests/http/tests/inspector/security/blank-origins-not-shown-expected.txt

 Tests that blank origins aren't shown in the security panel origins list.
 
 Group: Main Origin
-<SPAN class=title >
-Reload to view details
-</SPAN>
 Group: Unknown / Canceled
 <SPAN class=title >
 https://foo.test

third_party/WebKit/LayoutTests/http/tests/inspector/security/failed-request-expected.txt

 Tests that origins with failed requests are shown correctly in the security panel origins list.
 
 Group: Main Origin
-<SPAN class=title >
-Reload to view details
-</SPAN>
 Group: Secure Origins
 <SPAN class=title >
 https://foo.test

third_party/WebKit/LayoutTests/http/tests/inspector/security/security-unknown-resource-expected.txt

 Tests that requests to unresolved origins result in unknown security state and show up in the sidebar origin list.
 
 Group: Main Origin
-<SPAN class=title >
-Reload to view details
-</SPAN>
 Group: Unknown / Canceled
 <SPAN class=title >
 http://unknown

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

@@ -381,18 +381,19 @@ WebInspector.SecurityPanelSidebarTree = function(mainViewElement, showOriginInPa
     this._mainOrigin = null;
 
     TreeOutlineInShadow.call(this);
-    this.element.classList.add("sidebar-tree");
     this.registerRequiredCSS("security/sidebar.css");
     this.registerRequiredCSS("security/lockIcon.css");
 
     this.appendChild(mainViewElement);
 
-    /** @type {!Map<!WebInspector.SecurityPanelSidebarTree.OriginGroupName, !WebInspector.SidebarSectionTreeElement>} */
+    /** @type {!Map<!WebInspector.SecurityPanelSidebarTree.OriginGroupName, !TreeElement>} */
     this._originGroups = new Map();
 
     for (var key in WebInspector.SecurityPanelSidebarTree.OriginGroupName) {
         var originGroupName = WebInspector.SecurityPanelSidebarTree.OriginGroupName[key];
-        var originGroup = new WebInspector.SidebarSectionTreeElement(WebInspector.UIString(originGroupName));
+        var originGroup = new TreeElement(originGroupName, true);
+        originGroup.selectable = false;
+        originGroup.expand();
         originGroup.listItemElement.classList.add("security-sidebar-origins");
         this._originGroups.set(originGroupName, originGroup);
         this.appendChild(originGroup);
@@ -400,8 +401,9 @@ WebInspector.SecurityPanelSidebarTree = function(mainViewElement, showOriginInPa
     this._clearOriginGroups();
 
     // This message will be removed by clearOrigins() during the first new page load after the panel was opened.
-    var mainViewReloadMessage = new WebInspector.SidebarTreeElement("security-main-view-reload-message", WebInspector.UIString("Reload to view details"));
+    var mainViewReloadMessage = new TreeElement(WebInspector.UIString("Reload to view details"));
     mainViewReloadMessage.selectable = false;
+    mainViewReloadMessage.listItemElement.classList.add("security-main-view-reload-message");
     this._originGroups.get(WebInspector.SecurityPanelSidebarTree.OriginGroupName.MainOrigin).appendChild(mainViewReloadMessage);
 
     /** @type {!Map<!WebInspector.SecurityPanel.Origin, !WebInspector.SecurityPanelSidebarTreeElement>} */
@@ -506,16 +508,16 @@ WebInspector.SecurityPanelSidebarTree.prototype = {
  * @enum {string}
  */
 WebInspector.SecurityPanelSidebarTree.OriginGroupName = {
-    MainOrigin: "Main Origin",
-    NonSecure: "Non-Secure Origins",
-    Secure: "Secure Origins",
-    Unknown: "Unknown / Canceled"
+    MainOrigin: WebInspector.UIString("Main Origin"),
+    NonSecure: WebInspector.UIString("Non-Secure Origins"),
+    Secure: WebInspector.UIString("Secure Origins"),
+    Unknown: WebInspector.UIString("Unknown / Canceled")
 }
 
 
 /**
  * @constructor
- * @extends {WebInspector.SidebarTreeElement}
+ * @extends {TreeElement}
  * @param {string} text
  * @param {function()} selectCallback
  * @param {string} className
@@ -523,12 +525,13 @@ WebInspector.SecurityPanelSidebarTree.OriginGroupName = {
  */
 WebInspector.SecurityPanelSidebarTreeElement = function(text, selectCallback, className, cssPrefix)
 {
+    TreeElement.call(this, "", false);
     this._selectCallback = selectCallback;
     this._cssPrefix = cssPrefix;
-
-    WebInspector.SidebarTreeElement.call(this, className, text);
-    this.iconElement.classList.add(this._cssPrefix);
-
+    this.listItemElement.classList.add(className);
+    this._iconElement = this.listItemElement.createChild("div", "icon");
+    this._iconElement.classList.add(this._cssPrefix);
+    this.listItemElement.createChild("span", "title").textContent = text;
     this.setSecurityState(SecurityAgent.SecurityState.Unknown);
 }
 
@@ -539,10 +542,10 @@ WebInspector.SecurityPanelSidebarTreeElement.prototype = {
     setSecurityState: function(newSecurityState)
     {
         if (this._securityState)
-            this.iconElement.classList.remove(this._cssPrefix + "-" + this._securityState)
+            this._iconElement.classList.remove(this._cssPrefix + "-" + this._securityState);
 
         this._securityState = newSecurityState;
-        this.iconElement.classList.add(this._cssPrefix + "-" + newSecurityState);
+        this._iconElement.classList.add(this._cssPrefix + "-" + newSecurityState);
     },
 
     /**
@@ -563,7 +566,7 @@ WebInspector.SecurityPanelSidebarTreeElement.prototype = {
         return true;
     },
 
-    __proto__: WebInspector.SidebarTreeElement.prototype
+    __proto__: TreeElement.prototype
 }
 
 /**

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

@@ -11,6 +11,11 @@
     display: flex;
     flex-direction: row;
     align-items: center;
+    padding: 2px 5px;
+    overflow: hidden;
+    margin: 2px 0;
+    border-top: 1px solid transparent;
+    white-space: nowrap;
 }
 
 .tree-outline:focus li.selected .lock-icon,
@@ -24,11 +29,14 @@
     padding: 16px 0;
 }
 
-.tree-outline .security-sidebar-origins {
-    padding: 1px 8px 6px 8px;
+.tree-outline li.security-sidebar-origins {
+    padding: 1px 8px 1px 13px;
     margin-top: 1em;
     margin-bottom: 0.5em;
     color: rgb(90, 90, 90);
+    border-top: none;
+    line-height: 16px;
+    text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
 }
 
 .tree-outline ol {
@@ -41,12 +49,12 @@
 
 .tree-outline .security-main-view-sidebar-tree-item,
 .tree-outline .security-sidebar-origins,
-.tree-outline .sidebar-tree-section + .children > .sidebar-tree-item {
+.tree-outline li.security-sidebar-origins + .children > li {
     padding-left: 16px;
 }
 
-.tree-outline .sidebar-tree-item .lock-icon,
-.tree-outline .sidebar-tree-item .security-property {
+.tree-outline .lock-icon,
+.tree-outline .security-property {
     margin-right: 4px;
     flex: none;
 }
@@ -55,12 +63,12 @@
     padding: 2px 0;
 }
 
-.security-sidebar-tree-item .titles {
+.security-sidebar-tree-item .title {
     overflow: hidden;
     margin-right: 5px;
 }
 
-.sidebar-tree-item.security-main-view-reload-message .title {
+.security-main-view-reload-message .tree-element-title {
     color: rgba(0, 0, 0, 0.5);
     padding-left: 8px;
 }