Skip to content

GitLab

T
tangled
Commit 93f5f005 authored by dgozman's avatar dgozman Committed by Commit bot
Browse files
Options

[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}
parent 5c77780d
Hide whitespace changes
Inline Side-by-side
Showing with 92 additions and 191 deletions
third_party/WebKit/LayoutTests/http/tests/inspector/security-test.js
View file @ 93f5f005
......@@ -5,12 +5,13 @@ 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) {
InspectorTest.addResult("Group: " + originGroupName);
for (var originTitle of originTitles)
InspectorTest.dumpDeepInnerHTML(originTitle);
}
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
View file @ 93f5f005
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
View file @ 93f5f005
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/interstitial-sidebar-expected.txt
View file @ 93f5f005
Tests that the sidebar origin list disappears and appers when an interstitial is shown or hidden.
Before interstitial is shown:
<DIV class=sidebar-tree >
<DIV >
<#document-fragment >
<STYLE type=text/css >
</STYLE>
......@@ -11,26 +11,18 @@ Before interstitial is shown:
</STYLE>
<DIV class=tree-outline-disclosure >
<OL class=tree-outline tabindex=0 >
<LI class=sidebar-tree-item security-main-view-sidebar-tree-item selected >
<LI class=security-main-view-sidebar-tree-item selected >
<DIV class=selection fill >
</DIV>
<DIV class=icon lock-icon lock-icon-unknown >
</DIV>
<DIV class=status >
</DIV>
<DIV class=titles no-subtitle >
<SPAN class=title-container >
<SPAN class=title >
<SPAN class=title >
Overview
</SPAN>
</SPAN>
<SPAN class=subtitle >
</SPAN>
</DIV>
</SPAN>
</LI>
<OL class=children >
</OL>
<LI class=parent expanded security-sidebar-origins sidebar-tree-section >
<LI class=parent expanded security-sidebar-origins >
<DIV class=selection fill >
</DIV>
<SPAN class=tree-element-title >
......@@ -38,27 +30,17 @@ Main Origin
</SPAN>
</LI>
<OL class=children expanded >
<LI class=sidebar-tree-item security-main-view-reload-message >
<LI class=security-main-view-reload-message >
<DIV class=selection fill >
</DIV>
<DIV class=icon >
</DIV>
<DIV class=status >
</DIV>
<DIV class=titles no-subtitle >
<SPAN class=title-container >
<SPAN class=title >
<SPAN class=tree-element-title >
Reload to view details
</SPAN>
</SPAN>
<SPAN class=subtitle >
</SPAN>
</DIV>
</SPAN>
</LI>
<OL class=children >
</OL>
</OL>
<LI class=parent expanded security-sidebar-origins sidebar-tree-section hidden >
<LI class=parent expanded security-sidebar-origins hidden >
<DIV class=selection fill >
</DIV>
<SPAN class=tree-element-title >
......@@ -67,7 +49,7 @@ Non-Secure Origins
</LI>
<OL class=children expanded hidden >
</OL>
<LI class=parent expanded security-sidebar-origins sidebar-tree-section >
<LI class=parent expanded security-sidebar-origins >
<DIV class=selection fill >
</DIV>
<SPAN class=tree-element-title >
......@@ -75,46 +57,30 @@ Secure Origins
</SPAN>
</LI>
<OL class=children expanded >
<LI class=sidebar-tree-item security-sidebar-tree-item >
<LI class=security-sidebar-tree-item >
<DIV class=selection fill >
</DIV>
<DIV class=icon security-property security-property-secure >
</DIV>
<DIV class=status >
</DIV>
<DIV class=titles no-subtitle >
<SPAN class=title-container >
<SPAN class=title >
<SPAN class=title >
https://foo.test
</SPAN>
</SPAN>
<SPAN class=subtitle >
</SPAN>
</DIV>
</SPAN>
</LI>
<OL class=children >
</OL>
<LI class=sidebar-tree-item security-sidebar-tree-item >
<LI class=security-sidebar-tree-item >
<DIV class=selection fill >
</DIV>
<DIV class=icon security-property security-property-secure >
</DIV>
<DIV class=status >
</DIV>
<DIV class=titles no-subtitle >
<SPAN class=title-container >
<SPAN class=title >
<SPAN class=title >
https://bar.test
</SPAN>
</SPAN>
<SPAN class=subtitle >
</SPAN>
</DIV>
</SPAN>
</LI>
<OL class=children >
</OL>
</OL>
<LI class=parent expanded security-sidebar-origins sidebar-tree-section hidden >
<LI class=parent expanded security-sidebar-origins hidden >
<DIV class=selection fill >
</DIV>
<SPAN class=tree-element-title >
......@@ -132,7 +98,7 @@ Unknown / Canceled
</#document-fragment>
</DIV>
After interstitial is shown:
<DIV class=sidebar-tree >
<DIV >
<#document-fragment >
<STYLE type=text/css >
</STYLE>
......@@ -142,26 +108,18 @@ After interstitial is shown:
</STYLE>
<DIV class=tree-outline-disclosure >
<OL class=tree-outline tabindex=0 >
<LI class=sidebar-tree-item security-main-view-sidebar-tree-item selected >
<LI class=security-main-view-sidebar-tree-item selected >
<DIV class=selection fill >
</DIV>
<DIV class=icon lock-icon lock-icon-unknown >
</DIV>
<DIV class=status >
</DIV>
<DIV class=titles no-subtitle >
<SPAN class=title-container >
<SPAN class=title >
<SPAN class=title >
Overview
</SPAN>
</SPAN>
<SPAN class=subtitle >
</SPAN>
</DIV>
</SPAN>
</LI>
<OL class=children >
</OL>
<LI class=parent expanded security-sidebar-origins sidebar-tree-section hidden >
<LI class=parent expanded security-sidebar-origins hidden >
<DIV class=selection fill >
</DIV>
<SPAN class=tree-element-title >
......@@ -169,27 +127,17 @@ Main Origin
</SPAN>
</LI>
<OL class=children expanded hidden >
<LI class=sidebar-tree-item security-main-view-reload-message >
<LI class=security-main-view-reload-message >
<DIV class=selection fill >
</DIV>
<DIV class=icon >
</DIV>
<DIV class=status >
</DIV>
<DIV class=titles no-subtitle >
<SPAN class=title-container >
<SPAN class=title >
<SPAN class=tree-element-title >
Reload to view details
</SPAN>
</SPAN>
<SPAN class=subtitle >
</SPAN>
</DIV>
</SPAN>
</LI>
<OL class=children >
</OL>
</OL>
<LI class=parent expanded security-sidebar-origins sidebar-tree-section hidden >
<LI class=parent expanded security-sidebar-origins hidden >
<DIV class=selection fill >
</DIV>
<SPAN class=tree-element-title >
......@@ -198,7 +146,7 @@ Non-Secure Origins
</LI>
<OL class=children expanded hidden >
</OL>
<LI class=parent expanded security-sidebar-origins sidebar-tree-section hidden >
<LI class=parent expanded security-sidebar-origins hidden >
<DIV class=selection fill >
</DIV>
<SPAN class=tree-element-title >
......@@ -206,46 +154,30 @@ Secure Origins
</SPAN>
</LI>
<OL class=children expanded hidden >
<LI class=sidebar-tree-item security-sidebar-tree-item >
<LI class=security-sidebar-tree-item >
<DIV class=selection fill >
</DIV>
<DIV class=icon security-property security-property-secure >
</DIV>
<DIV class=status >
</DIV>
<DIV class=titles no-subtitle >
<SPAN class=title-container >
<SPAN class=title >
<SPAN class=title >
https://foo.test
</SPAN>
</SPAN>
<SPAN class=subtitle >
</SPAN>
</DIV>
</SPAN>
</LI>
<OL class=children >
</OL>
<LI class=sidebar-tree-item security-sidebar-tree-item >
<LI class=security-sidebar-tree-item >
<DIV class=selection fill >
</DIV>
<DIV class=icon security-property security-property-secure >
</DIV>
<DIV class=status >
</DIV>
<DIV class=titles no-subtitle >
<SPAN class=title-container >
<SPAN class=title >
<SPAN class=title >
https://bar.test
</SPAN>
</SPAN>
<SPAN class=subtitle >
</SPAN>
</DIV>
</SPAN>
</LI>
<OL class=children >
</OL>
</OL>
<LI class=parent expanded security-sidebar-origins sidebar-tree-section hidden >
<LI class=parent expanded security-sidebar-origins hidden >
<DIV class=selection fill >
</DIV>
<SPAN class=tree-element-title >
......@@ -263,7 +195,7 @@ Unknown / Canceled
</#document-fragment>
</DIV>
After interstitial is hidden:
<DIV class=sidebar-tree >
<DIV >
<#document-fragment >
<STYLE type=text/css >
</STYLE>
......@@ -273,26 +205,18 @@ After interstitial is hidden:
</STYLE>
<DIV class=tree-outline-disclosure >
<OL class=tree-outline tabindex=0 >
<LI class=sidebar-tree-item security-main-view-sidebar-tree-item selected >
<LI class=security-main-view-sidebar-tree-item selected >
<DIV class=selection fill >
</DIV>
<DIV class=icon lock-icon lock-icon-unknown >
</DIV>
<DIV class=status >
</DIV>
<DIV class=titles no-subtitle >
<SPAN class=title-container >
<SPAN class=title >
<SPAN class=title >
Overview
</SPAN>
</SPAN>
<SPAN class=subtitle >
</SPAN>
</DIV>
</SPAN>
</LI>
<OL class=children >
</OL>
<LI class=parent expanded security-sidebar-origins sidebar-tree-section >
<LI class=parent expanded security-sidebar-origins >
<DIV class=selection fill >
</DIV>
<SPAN class=tree-element-title >
......@@ -300,27 +224,17 @@ Main Origin
</SPAN>
</LI>
<OL class=children expanded >
<LI class=sidebar-tree-item security-main-view-reload-message >
<LI class=security-main-view-reload-message >
<DIV class=selection fill >
</DIV>
<DIV class=icon >
</DIV>
<DIV class=status >
</DIV>
<DIV class=titles no-subtitle >
<SPAN class=title-container >
<SPAN class=title >
<SPAN class=tree-element-title >
Reload to view details
</SPAN>
</SPAN>
<SPAN class=subtitle >
</SPAN>
</DIV>
</SPAN>
</LI>
<OL class=children >
</OL>
</OL>
<LI class=parent expanded security-sidebar-origins sidebar-tree-section >
<LI class=parent expanded security-sidebar-origins >
<DIV class=selection fill >
</DIV>
<SPAN class=tree-element-title >
......@@ -329,7 +243,7 @@ Non-Secure Origins
</LI>
<OL class=children expanded >
</OL>
<LI class=parent expanded security-sidebar-origins sidebar-tree-section >
<LI class=parent expanded security-sidebar-origins >
<DIV class=selection fill >
</DIV>
<SPAN class=tree-element-title >
......@@ -337,46 +251,30 @@ Secure Origins
</SPAN>
</LI>
<OL class=children expanded >
<LI class=sidebar-tree-item security-sidebar-tree-item >
<LI class=security-sidebar-tree-item >
<DIV class=selection fill >
</DIV>
<DIV class=icon security-property security-property-secure >
</DIV>
<DIV class=status >
</DIV>
<DIV class=titles no-subtitle >
<SPAN class=title-container >
<SPAN class=title >
<SPAN class=title >
https://foo.test
</SPAN>
</SPAN>
<SPAN class=subtitle >
</SPAN>
</DIV>
</SPAN>
</LI>
<OL class=children >
</OL>
<LI class=sidebar-tree-item security-sidebar-tree-item >
<LI class=security-sidebar-tree-item >
<DIV class=selection fill >
</DIV>
<DIV class=icon security-property security-property-secure >
</DIV>
<DIV class=status >
</DIV>
<DIV class=titles no-subtitle >
<SPAN class=title-container >
<SPAN class=title >
<SPAN class=title >
https://bar.test
</SPAN>
</SPAN>
<SPAN class=subtitle >
</SPAN>
</DIV>
</SPAN>
</LI>
<OL class=children >
</OL>
</OL>
<LI class=parent expanded security-sidebar-origins sidebar-tree-section >
<LI class=parent expanded security-sidebar-origins >
<DIV class=selection fill >
</DIV>
<SPAN class=tree-element-title >
......
third_party/WebKit/LayoutTests/http/tests/inspector/security/security-unknown-resource-expected.txt
View file @ 93f5f005
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
View file @ 93f5f005
......@@ -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
View file @ 93f5f005
......@@ -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;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment