Skip to content

GitLab

T
tangled
Commit cda41dfb authored by lgarron@chromium.org's avatar lgarron@chromium.org
Browse files
Options

Organize security panel main view. 

This includes the following changes:
- Material design icons to match the current mocks better.
- Rename securityPanel.css into mainView.css, because it only contains main view CSS anyhow.
- Rewrite security panel main view DOM code to match the mocks.

BUG=484387

Review URL: https://codereview.chromium.org/1316853002

git-svn-id: svn://svn.chromium.org/blink/trunk@201267 bbb929c8-8fbe-4397-9dbb-9b2b20218538
parent f7024a1e
Hide whitespace changes
Inline Side-by-side
Showing with 158 additions and 99 deletions
third_party/WebKit/Source/devtools/devtools.gypi
View file @ cda41dfb
......@@ -534,8 +534,8 @@
],
'devtools_security_js_files': [
'front_end/security/lockIcon.css',
'front_end/security/mainView.css',
'front_end/security/originView.css',
'front_end/security/securityPanel.css',
'front_end/security/sidebar.css',
'front_end/security/SecurityModel.js',
'front_end/security/SecurityPanel.js',
......@@ -772,14 +772,9 @@
'front_end/Images/securityPropertyInsecure.svg',
'front_end/Images/securityPropertySecure.svg',
'front_end/Images/securityPropertyWarning.svg',
'front_end/Images/securityStateInsecure_2x.png',
'front_end/Images/securityStateInsecure.png',
'front_end/Images/securityStateNeutral_2x.png',
'front_end/Images/securityStateNeutral.png',
'front_end/Images/securityStateSecure_2x.png',
'front_end/Images/securityStateSecure.png',
'front_end/Images/securityStateWarning_2x.png',
'front_end/Images/securityStateWarning.png',
'front_end/Images/securityStateInsecure.svg',
'front_end/Images/securityStateNeutral.svg',
'front_end/Images/securityStateSecure.svg',
'front_end/Images/serviceWorker.svg',
'front_end/Images/sessionStorage.png',
'front_end/Images/settingsListRemove.png',
......
third_party/WebKit/Source/devtools/front_end/Images/securityStateInsecure.svg 0 → 100644
View file @ cda41dfb
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="96px" height="96px" viewBox="0 0 96 96" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="omnibox-icons" transform="translate(-2988.000000, -1022.000000)">
<g id="Notes" transform="translate(328.000000, 139.000000)"></g>
<g id="omnibox_https_invalid-xxxhdpi" transform="translate(2988.000000, 1022.000000)">
<g id="icon" transform="translate(8.000000, 8.000000)">
<rect id="Rectangle-22" fill="#FFFFFF" x="10" y="4" width="60" height="70"></rect>
<path d="M45.5,42.016 L40.1,47.416 L34.688,42.004 L32.184,44.504 L37.6,49.92 L32.12,55.396 L34.62,57.9 L40.1,52.42 L45.488,57.808 L47.992,55.304 L42.604,49.92 L48.004,44.516 L45.5,42.016" id="Fill-1" fill="#DB4437"></path>
<path d="M30,28 L30,32 L50,32 L50,28 C50,22.423184 45.716,20 40,20 C34.284,20 30,22.423184 30,28 Z" id="Fill-2" fill="#DB4437"></path>
<path d="M73.3333333,0 L6.66666667,0 C2.98333333,0 0,2.98333333 0,6.66666667 L0,73.3333333 C0,77.0166667 2.98333333,80 6.66666667,80 L73.3333333,80 C77.0166667,80 80,77.0166667 80,73.3333333 L80,6.66666667 C80,2.98333333 77.0166667,0 73.3333333,0 L73.3333333,0 Z M54.284,66 L25.716,66 C22.856,66 20,63.144 20,60.284 L20,37.428 C20,34.572 23.14,32 26,32 L26,28 C26,19.428 31.428,16 40,16 C48.572,16 54,19.428 54,28 L54,32 C56.86,32 60,34.572 60,37.428 L60,60.284 C60,63.144 57.144,66 54.284,66 Z" id="Fill-3" fill="#DB4437"></path>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
third_party/WebKit/Source/devtools/front_end/Images/securityStateNeutral.svg 0 → 100644
View file @ cda41dfb
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="96px" height="96px" viewBox="0 0 96 96" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="omnibox-icons" transform="translate(-3530.000000, -1022.000000)" fill="#5A5A5A">
<g id="omnibox_http-xxxhdpi" transform="translate(3530.000000, 1022.000000)">
<path d="M52,20 L28,20 L28,76 L68,76 L68,36 L52,20 L52,20 Z M62,36 L52,36 L52,26 L62,36 L62,36 Z M64,72 L32,72 L32,24 L48,24 L48,40 L64,40 L64,72 L64,72 Z" id="Imported-Layers"></path>
</g>
</g>
</g>
</svg>
\ No newline at end of file
third_party/WebKit/Source/devtools/front_end/Images/securityStateSecure.svg 0 → 100644
View file @ cda41dfb
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="96px" height="96px" viewBox="0 0 96 96" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="omnibox-icons" transform="translate(-3124.000000, -1022.000000)">
<g id="Notes" transform="translate(328.000000, 139.000000)"></g>
<g id="omnibox_https_valid-xxxhdpi" transform="translate(3124.000000, 1022.000000)">
<g id="icon" transform="translate(8.000000, 8.000000)">
<rect id="Rectangle-23" fill="#FFFFFF" x="10" y="6" width="60" height="70"></rect>
<path d="M30,28.0000001 L30,31.9999996 L50,32 C50,32 50.0029864,28.1279148 50,28 C49.8723774,22.5336524 45.5853016,20 40,20 C34.284,20 30,22.2880001 30,28.0000001 Z" id="Fill-1" fill="#1AC222"></path>
<path d="M40,40.284 C36.844,40.284 34.284,42.929413 34.284,46.1907112 C34.284,48.3690434 35.44,50.2539001 37.144,51.2748642 L37.144,58 L42.856,58 L42.856,51.2748642 C44.56,50.2539001 45.716,48.3690434 45.716,46.1907112 C45.716,42.929413 43.156,40.284 40,40.284" id="Fill-2" fill="#1AC222"></path>
<path d="M73.3333333,0 L6.66666667,0 C2.98333333,0 0,2.98333333 0,6.66666667 L0,73.3333333 C0,77.0166667 2.98333333,80 6.66666667,80 L73.3333333,80 C77.0166667,80 80,77.0166667 80,73.3333333 L80,6.66666667 C80,2.98333333 77.0166667,0 73.3333333,0 L73.3333333,0 Z M54.284,66 L25.716,66 C22.856,66 20,63.144 20,60.284 L20,37.428 C20,34.572 23.14,32 26,32 L26,28 C26,19.428 31.428,16 40,16 C48.572,16 54,19.428 54,28 L54,32 C56.86,32 60,34.572 60,37.428 L60,60.284 C60,63.144 57.144,66 54.284,66 Z" id="Fill-3" fill="#1AC222"></path>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
third_party/WebKit/Source/devtools/front_end/security/SecurityModel.js
View file @ cda41dfb
......@@ -60,10 +60,27 @@ WebInspector.SecurityDispatcher.prototype = {
* @override
* @param {!SecurityAgent.SecurityState} securityState
* @param {!Array<!SecurityAgent.SecurityStateExplanation>=} explanations
* @param {!SecurityAgent.MixedContentStatus=} mixedContentStatus
* @param {boolean=} schemeIsCryptographic
*/
securityStateChanged: function(securityState, explanations)
securityStateChanged: function(securityState, explanations, mixedContentStatus, schemeIsCryptographic)
{
var data = {"securityState": securityState, "explanations": explanations || []};
if (schemeIsCryptographic && mixedContentStatus) {
if (mixedContentStatus.ranInsecureContent) {
explanations.push({
"securityState": mixedContentStatus.ranInsecureContentStyle,
"summary": WebInspector.UIString("Active Mixed Content"),
"description": WebInspector.UIString("You have recently allowed insecure content (such as scripts or iframes) to run on this site.")
});
} else if (mixedContentStatus.displayedInsecureContent) {
explanations.push({
"securityState": mixedContentStatus.displayedInsecureContentStyle,
"summary": WebInspector.UIString("Mixed Content"),
"description": WebInspector.UIString("The site includes HTTP resources.")
});
}
}
this._model.dispatchEventToListeners(WebInspector.SecurityModel.EventTypes.SecurityStateChanged, data);
}
}
\ No newline at end of file
third_party/WebKit/Source/devtools/front_end/security/SecurityPanel.js
View file @ cda41dfb
......@@ -10,7 +10,7 @@
WebInspector.SecurityPanel = function()
{
WebInspector.PanelWithSidebar.call(this, "security");
this.registerRequiredCSS("security/securityPanel.css");
this.registerRequiredCSS("security/mainView.css");
this.registerRequiredCSS("security/lockIcon.css");
var sidebarTree = new TreeOutlineInShadow();
......@@ -330,11 +330,16 @@ WebInspector.SecurityMainView = function()
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");
var summarySection = this.element.createChild("div", "security-section");
summarySection.classList.add("security-summary");
this._summarylockIcon = summarySection.createChild("div", "lock-icon");
var text = summarySection.createChild("div", "security-section-text");
text.createChild("div", "security-summary-section-title").textContent = WebInspector.UIString("Security Overview");
this._summaryExplanation = text.createChild("div", "security-explanation");
this._securityExplanations = this.element.createChild("div", "security-explanation-list");
}
......@@ -344,12 +349,13 @@ WebInspector.SecurityMainView.prototype = {
*/
_addExplanation: function(explanation)
{
var explanationDiv = this._securityExplanations.createChild("div", "security-explanation");
var explanationSection = this._securityExplanations.createChild("div", "security-section");
explanationSection.classList.add("security-explanation");
var explanationLockIcon = explanationDiv.createChild("div", "lock-icon");
explanationLockIcon.classList.add("lock-icon-" + explanation.securityState);
explanationDiv.createChild("div", "explanation-title").textContent = WebInspector.UIString(explanation.summary);
explanationDiv.createChild("div", "explanation-text").textContent = WebInspector.UIString(explanation.description);
explanationSection.createChild("div", "lock-icon").classList.add("lock-icon-" + explanation.securityState);
var text = explanationSection.createChild("div", "security-section-text");
text.createChild("div", "security-section-title").textContent = explanation.summary;
text.createChild("div", "security-explanation").textContent = explanation.description;
},
/**
......@@ -360,12 +366,20 @@ WebInspector.SecurityMainView.prototype = {
{
// Remove old state.
// It's safe to call this even when this._securityState is undefined.
this._lockIcon.classList.remove("lock-icon-" + this._securityState);
this._summarylockIcon.classList.remove("lock-icon-" + this._securityState);
this._summaryExplanation.classList.remove("security-state-" + 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._summarylockIcon.classList.add("lock-icon-" + this._securityState);
this._summaryExplanation.classList.add("security-state-" + this._securityState);
var summaryExplanationStrings = {
"unknown": WebInspector.UIString("This security of this page is unknown."),
"insecure": WebInspector.UIString("This page is insecure (broken HTTPS)."),
"neutral": WebInspector.UIString("This page is not secure."),
"secure": WebInspector.UIString("This page is secure (valid HTTPS).")
}
this._summaryExplanation.textContent = summaryExplanationStrings[this._securityState];
this._securityExplanations.removeChildren();
for (var explanation of explanations)
......
third_party/WebKit/Source/devtools/front_end/security/lockIcon.css
View file @ cda41dfb
......@@ -11,46 +11,19 @@
}
.lock-icon-unknown {
background-image: url(Images/securityStateNeutral.png);
background-image: url(Images/securityStateNeutral.svg);
}
.lock-icon-neutral {
background-image: url(Images/securityStateNeutral.png);
background-image: url(Images/securityStateNeutral.svg);
}
.lock-icon-insecure {
background-image: url(Images/securityStateInsecure.png);
}
.lock-icon-warning {
background-image: url(Images/securityStateWarning.png);
background-image: url(Images/securityStateInsecure.svg);
}
.lock-icon-secure {
background-image: url(Images/securityStateSecure.png);
}
@media (-webkit-min-device-pixel-ratio: 1.5) {
.lock-icon-unknown {
background-image: url(Images/securityStateNeutral_2x.png);
}
.lock-icon-neutral {
background-image: url(Images/securityStateNeutral_2x.png);
}
.lock-icon-insecure {
background-image: url(Images/securityStateInsecure_2x.png);
}
.lock-icon-warning {
background-image: url(Images/securityStateWarning_2x.png);
}
.lock-icon-secure {
background-image: url(Images/securityStateSecure_2x.png);
}
background-image: url(Images/securityStateSecure.svg);
}
.security-property-insecure {
......
third_party/WebKit/Source/devtools/front_end/security/mainView.css 0 → 100644
View file @ cda41dfb
/* Copyright (c) 2015 The Chromium Authors. All rights reserved.
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file.
*/
.security-main-view {
-webkit-user-select: text;
}
.security-main-view .security-section {
padding: 1em;
border-bottom: 1px solid rgb(230, 230, 230);
display: flex;
white-space: nowrap;
}
.security-main-view .security-summary .lock-icon {
flex: none;
width: 32px;
height: 32px;
margin-right: 1em;
}
.security-main-view .security-section-text {
flex: auto;
white-space: normal;
}
.security-main-view .security-summary-section-title {
font-size: 14px;
margin-bottom: 2px;
}
.security-main-view .security-explanation.security-state-secure {
color: rgb(42, 194, 57);
}
.security-main-view .security-explanation.security-state-neutral {
color: rgb(253, 177, 48);
}
.security-main-view .security-explanation.security-state-insecure {
color: rgb(216, 71, 60);
}
.security-main-view .security-explanation.security-section .lock-icon {
flex: none;
width: 16px;
height: 16px;
margin-left: 10px;
margin-right: 18px;
}
.security-main-view .security-section-title {
color: rgb(90, 90, 90);
margin-bottom: 8px;
}
\ No newline at end of file
third_party/WebKit/Source/devtools/front_end/security/module.json
View file @ cda41dfb
......@@ -16,8 +16,8 @@
],
"resources": [
"lockIcon.css",
"mainView.css",
"originView.css",
"securityPanel.css",
"sidebar.css"
]
}
third_party/WebKit/Source/devtools/front_end/security/securityPanel.css deleted 100644 → 0
View file @ f7024a1e
/* Copyright (c) 2015 The Chromium Authors. All rights reserved.
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file.
*/
.security-main-view {
-webkit-user-select: text;
margin: 1em;
}
.security-main-view .lock-icon {
display: inline-block;
margin: 0.2em;
vertical-align: middle;
}
.security-main-view .security-state {
display: inline-block;
font-size: 1.2em;
font-weight: bold;
margin: 0.2em;
vertical-align: middle;
}
.security-explanation {
margin: 16px 0px;
}
.security-explanation .lock-icon {
display: inline-block;
vertical-align: bottom;
}
.security-explanation .explanation-title {
display: inline-block;
font-size: 1.2em;
font-weight: bold;
margin-left: 4px;
}
.security-explanation .explanation-text {
margin: 4px 0px;
}
\ No newline at end of file
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