DevTools Security Panel: Use the new security indicators.

DevTools Security Panel: Use the new security indicators.

This is an initial change that updates the icons to match the specs, along with minimal CSS tweaks to accommodate the icons. Additional layout tweaks
will be in a followup CL.

BUG=617311
TEST=Open DevTools to the Security panel, and navigate to the following sites:
1) https://very.badssl.com - under "Security Overview", a gray lock icon and info icon should show up to the left of a red triangle-with-exclamation-mark-inside. The bullet points below should include a red triangle and a red circle, as should the side bar (under "Non-Secure Origins").
2) https://www.washingtonpost.com - under "Security Overview", a green lock icon should show up next to a gray info icon and a gray triangle-with-exclamation-mark-inside. There should be three green *rounded square* bullet points below and a long list of "Secure Origins" in the sidebar with the same bullet points.
3) http://www.nytimes.com/ - under "Security Overview", a black info icon should show up between a gray lock icon and a gray triangle-with-exclamation-mark-inside. There should be no bullet points below, but the sidebar should show long lists of red circular bullets ("Non-Secure Origins") and green rounded square bullets ("Secure Origins").
4) https://very.badssl.com/ - under "Security Overview", below the main bullets there should be a bullet for "Blocked mixed content" - a gray rounded square with an i inside.
5) https://mixed.badssl.com/test/canceled-image/ - in the sidebar there should be a section titled "Unknown/Canceled" with "https://google.com" to the right of a gray rounded square icon with a question mark inside.
See https://crbug.com/617311 for reference screenshots (note that details other than the icons will change soon).

Committed: https://crrev.com/b15aca6d0fc70b2a00beed368137e9aa90bfe7b7
Cr-Commit-Position: refs/heads/master@{#411866}

[lgarron, 2016-08-09 08:27:07]

Patchset #1 (id:1) has been deleted

[lgarron, 2016-08-09 08:28:00]

Description was changed from

==========
DevTools Security Panel: use the new security indicators.

This is an initial change that updates the icons to match the specs, while
making minimal CSS changes to accommodate the icons. Additional layout tweaks
will be in a followup CL.

TEST=Open DevTools to the Security panel, and navigate to the following sites:
1) https://very.badssl.com - under "Security Overview", a gray lock icon and
info icon should show up to the left of a red
triangle-with-exclamation-mark-inside. The bullet points below should include a
red triangle and a red circle, as should the side bar (under "Non-Secure
Origins").
2) https://www.washingtonpost.com - under "Security Overview", a green lock icon
should show up next to a gray info icon and a gray
triangle-with-exclamation-mark-inside. There should be three green *rounded
square* bullet points below and a long list of "Secure Origins" in the sidebar
with the same bullet points.
3) http://www.nytimes.com/ - under "Security Overview", a black info icon should
show up between a gray lock icon and a gray
triangle-with-exclamation-mark-inside. There should be no bullet points below,
but the sidebar should show long lists of red circular bullets ("Non-Secure
Origins") and green rounded square bullets ("Secure Origins").
See https://crbug.com/617311 for reference screenshots (note that details other
than the icons will change soon).

BUG=617311
==========

to

==========
DevTools Security Panel: use the new security indicators.

This is an initial change that updates the icons to match the specs, while
making minimal CSS changes to accommodate the new icons. Additional layout
tweaks
will be in a followup CL.

TEST=Open DevTools to the Security panel, and navigate to the following sites:
1) https://very.badssl.com - under "Security Overview", a gray lock icon and
info icon should show up to the left of a red
triangle-with-exclamation-mark-inside. The bullet points below should include a
red triangle and a red circle, as should the side bar (under "Non-Secure
Origins").
2) https://www.washingtonpost.com - under "Security Overview", a green lock icon
should show up next to a gray info icon and a gray
triangle-with-exclamation-mark-inside. There should be three green *rounded
square* bullet points below and a long list of "Secure Origins" in the sidebar
with the same bullet points.
3) http://www.nytimes.com/ - under "Security Overview", a black info icon should
show up between a gray lock icon and a gray
triangle-with-exclamation-mark-inside. There should be no bullet points below,
but the sidebar should show long lists of red circular bullets ("Non-Secure
Origins") and green rounded square bullets ("Secure Origins").
See https://crbug.com/617311 for reference screenshots (note that details other
than the icons will change soon).

BUG=617311
==========

[lgarron, 2016-08-09 08:29:17]

lgarron@chromium.org changed reviewers:
+ pfeldman@chromium.org

[lgarron, 2016-08-09 08:29:18]

pfeldman@, could you review?

This CL swaps out all the icons in the Security panel with Max's new assets.

Max wanted pixel-perfect PNGs instead of SVGs (I've crushed the PNGs); let me
know if you'd rather keep using SVGs.

[pfeldman, 2016-08-09 17:50:40]

On 2016/08/09 08:29:18, lgarron wrote:
> pfeldman@, could you review?
> 
> This CL swaps out all the icons in the Security panel with Max's new assets.
> 
> Max wanted pixel-perfect PNGs instead of SVGs (I've crushed the PNGs); let me
> know if you'd rather keep using SVGs.

Could you combine all of the images into a sprite image similarly to
toolbarIcons?

[lgarron, 2016-08-12 01:40:59]

Patchset #2 (id:40001) has been deleted

[lgarron, 2016-08-12 01:49:16]

Latest patch uses a sprite sheet. Could you review again?

[lgarron, 2016-08-12 05:53:07]

Description was changed from

==========
DevTools Security Panel: use the new security indicators.

This is an initial change that updates the icons to match the specs, while
making minimal CSS changes to accommodate the new icons. Additional layout
tweaks
will be in a followup CL.

TEST=Open DevTools to the Security panel, and navigate to the following sites:
1) https://very.badssl.com - under "Security Overview", a gray lock icon and
info icon should show up to the left of a red
triangle-with-exclamation-mark-inside. The bullet points below should include a
red triangle and a red circle, as should the side bar (under "Non-Secure
Origins").
2) https://www.washingtonpost.com - under "Security Overview", a green lock icon
should show up next to a gray info icon and a gray
triangle-with-exclamation-mark-inside. There should be three green *rounded
square* bullet points below and a long list of "Secure Origins" in the sidebar
with the same bullet points.
3) http://www.nytimes.com/ - under "Security Overview", a black info icon should
show up between a gray lock icon and a gray
triangle-with-exclamation-mark-inside. There should be no bullet points below,
but the sidebar should show long lists of red circular bullets ("Non-Secure
Origins") and green rounded square bullets ("Secure Origins").
See https://crbug.com/617311 for reference screenshots (note that details other
than the icons will change soon).

BUG=617311
==========

to

==========
DevTools Security Panel: use the new security indicators.

This is an initial change that updates the icons to match the specs, while
making minimal CSS changes to accommodate the icons. Additional layout tweaks
will be in a followup CL.

TEST=Open DevTools to the Security panel, and navigate to the following sites:
1) https://very.badssl.com - under "Security Overview", a gray lock icon and
info icon should show up to the left of a red
triangle-with-exclamation-mark-inside. The bullet points below should include a
red triangle and a red circle, as should the side bar (under "Non-Secure
Origins").
2) https://www.washingtonpost.com - under "Security Overview", a green lock icon
should show up next to a gray info icon and a gray
triangle-with-exclamation-mark-inside. There should be three green *rounded
square* bullet points below and a long list of "Secure Origins" in the sidebar
with the same bullet points.
3) http://www.nytimes.com/ - under "Security Overview", a black info icon should
show up between a gray lock icon and a gray
triangle-with-exclamation-mark-inside. There should be no bullet points below,
but the sidebar should show long lists of red circular bullets ("Non-Secure
Origins") and green rounded square bullets ("Secure Origins").
4) https://very.badssl.com/ - under "Security Overview", below the main bullets
there should be a bullet for "Blocked mixed content" - a gray rounded square
with an i inside.
5) https://mixed.badssl.com/test/canceled-image/ - in the sidebar there should
be a section titled "Unknown/Canceled" with "https://google.com" to the right of
a gray rounded square icon with a question mark inside.
See https://crbug.com/617311 for reference screenshots (note that details other
than the icons will change soon).
==========

[lgarron, 2016-08-12 06:01:49]

Description was changed from

==========
DevTools Security Panel: use the new security indicators.

This is an initial change that updates the icons to match the specs, while
making minimal CSS changes to accommodate the icons. Additional layout tweaks
will be in a followup CL.

TEST=Open DevTools to the Security panel, and navigate to the following sites:
1) https://very.badssl.com - under "Security Overview", a gray lock icon and
info icon should show up to the left of a red
triangle-with-exclamation-mark-inside. The bullet points below should include a
red triangle and a red circle, as should the side bar (under "Non-Secure
Origins").
2) https://www.washingtonpost.com - under "Security Overview", a green lock icon
should show up next to a gray info icon and a gray
triangle-with-exclamation-mark-inside. There should be three green *rounded
square* bullet points below and a long list of "Secure Origins" in the sidebar
with the same bullet points.
3) http://www.nytimes.com/ - under "Security Overview", a black info icon should
show up between a gray lock icon and a gray
triangle-with-exclamation-mark-inside. There should be no bullet points below,
but the sidebar should show long lists of red circular bullets ("Non-Secure
Origins") and green rounded square bullets ("Secure Origins").
4) https://very.badssl.com/ - under "Security Overview", below the main bullets
there should be a bullet for "Blocked mixed content" - a gray rounded square
with an i inside.
5) https://mixed.badssl.com/test/canceled-image/ - in the sidebar there should
be a section titled "Unknown/Canceled" with "https://google.com" to the right of
a gray rounded square icon with a question mark inside.
See https://crbug.com/617311 for reference screenshots (note that details other
than the icons will change soon).
==========

to

==========
DevTools Security Panel: use the new security indicators.

This is an initial change that updates the icons to match the specs, while
making minimal CSS changes to accommodate the icons. Additional layout tweaks
will be in a followup CL.

BUG=617311
TEST=Open DevTools to the Security panel, and navigate to the following sites:
1) https://very.badssl.com - under "Security Overview", a gray lock icon and
info icon should show up to the left of a red
triangle-with-exclamation-mark-inside. The bullet points below should include a
red triangle and a red circle, as should the side bar (under "Non-Secure
Origins").
2) https://www.washingtonpost.com - under "Security Overview", a green lock icon
should show up next to a gray info icon and a gray
triangle-with-exclamation-mark-inside. There should be three green *rounded
square* bullet points below and a long list of "Secure Origins" in the sidebar
with the same bullet points.
3) http://www.nytimes.com/ - under "Security Overview", a black info icon should
show up between a gray lock icon and a gray
triangle-with-exclamation-mark-inside. There should be no bullet points below,
but the sidebar should show long lists of red circular bullets ("Non-Secure
Origins") and green rounded square bullets ("Secure Origins").
4) https://very.badssl.com/ - under "Security Overview", below the main bullets
there should be a bullet for "Blocked mixed content" - a gray rounded square
with an i inside.
5) https://mixed.badssl.com/test/canceled-image/ - in the sidebar there should
be a section titled "Unknown/Canceled" with "https://google.com" to the right of
a gray rounded square icon with a question mark inside.
See https://crbug.com/617311 for reference screenshots (note that details other
than the icons will change soon).
==========

[lgarron, 2016-08-12 06:02:54]

Description was changed from

==========
DevTools Security Panel: use the new security indicators.

This is an initial change that updates the icons to match the specs, while
making minimal CSS changes to accommodate the icons. Additional layout tweaks
will be in a followup CL.

BUG=617311
TEST=Open DevTools to the Security panel, and navigate to the following sites:
1) https://very.badssl.com - under "Security Overview", a gray lock icon and
info icon should show up to the left of a red
triangle-with-exclamation-mark-inside. The bullet points below should include a
red triangle and a red circle, as should the side bar (under "Non-Secure
Origins").
2) https://www.washingtonpost.com - under "Security Overview", a green lock icon
should show up next to a gray info icon and a gray
triangle-with-exclamation-mark-inside. There should be three green *rounded
square* bullet points below and a long list of "Secure Origins" in the sidebar
with the same bullet points.
3) http://www.nytimes.com/ - under "Security Overview", a black info icon should
show up between a gray lock icon and a gray
triangle-with-exclamation-mark-inside. There should be no bullet points below,
but the sidebar should show long lists of red circular bullets ("Non-Secure
Origins") and green rounded square bullets ("Secure Origins").
4) https://very.badssl.com/ - under "Security Overview", below the main bullets
there should be a bullet for "Blocked mixed content" - a gray rounded square
with an i inside.
5) https://mixed.badssl.com/test/canceled-image/ - in the sidebar there should
be a section titled "Unknown/Canceled" with "https://google.com" to the right of
a gray rounded square icon with a question mark inside.
See https://crbug.com/617311 for reference screenshots (note that details other
than the icons will change soon).
==========

to

==========
DevTools Security Panel: use the new security indicators.

This is an initial change that updates the icons to match the specs, along with
minimal CSS tweaks to accommodate the icons. Additional layout tweaks
will be in a followup CL.

BUG=617311
TEST=Open DevTools to the Security panel, and navigate to the following sites:
1) https://very.badssl.com - under "Security Overview", a gray lock icon and
info icon should show up to the left of a red
triangle-with-exclamation-mark-inside. The bullet points below should include a
red triangle and a red circle, as should the side bar (under "Non-Secure
Origins").
2) https://www.washingtonpost.com - under "Security Overview", a green lock icon
should show up next to a gray info icon and a gray
triangle-with-exclamation-mark-inside. There should be three green *rounded
square* bullet points below and a long list of "Secure Origins" in the sidebar
with the same bullet points.
3) http://www.nytimes.com/ - under "Security Overview", a black info icon should
show up between a gray lock icon and a gray
triangle-with-exclamation-mark-inside. There should be no bullet points below,
but the sidebar should show long lists of red circular bullets ("Non-Secure
Origins") and green rounded square bullets ("Secure Origins").
4) https://very.badssl.com/ - under "Security Overview", below the main bullets
there should be a bullet for "Blocked mixed content" - a gray rounded square
with an i inside.
5) https://mixed.badssl.com/test/canceled-image/ - in the sidebar there should
be a section titled "Unknown/Canceled" with "https://google.com" to the right of
a gray rounded square icon with a question mark inside.
See https://crbug.com/617311 for reference screenshots (note that details other
than the icons will change soon).
==========

[pfeldman, 2016-08-12 22:39:01]

I don't see where the svg for the sprite is, other than that looks good.

[lgarron, 2016-08-12 23:39:35]

On 2016/08/12 at 22:39:01, pfeldman wrote:
> I don't see where the svg for the sprite is, other than that looks good.

Oh, I didn't know we had sources!
I've added an .svg in the src/ folder.

However, unlike the other glyphs, the security icons have *different sources*
depending on screen resolution (some of the icons are even 1dp wider at 1x).
I've placed them into a single source file, since that's how I've been working
with them. Let me know if you'd prefer separate source files for 1x and 2x.

[pfeldman, 2016-08-13 00:10:15]

lgtm

[lgarron, 2016-08-13 00:40:38]

The CQ bit was checked by lgarron@chromium.org

[commit-bot: I haz the power, 2016-08-13 00:41:17]

CQ is trying da patch. Follow status at
 
https://chromium-cq-status.appspot.com/v2/patch-status/codereview.chromium.or...

[lgarron, 2016-08-13 01:36:07]

Description was changed from

==========
DevTools Security Panel: use the new security indicators.

This is an initial change that updates the icons to match the specs, along with
minimal CSS tweaks to accommodate the icons. Additional layout tweaks
will be in a followup CL.

BUG=617311
TEST=Open DevTools to the Security panel, and navigate to the following sites:
1) https://very.badssl.com - under "Security Overview", a gray lock icon and
info icon should show up to the left of a red
triangle-with-exclamation-mark-inside. The bullet points below should include a
red triangle and a red circle, as should the side bar (under "Non-Secure
Origins").
2) https://www.washingtonpost.com - under "Security Overview", a green lock icon
should show up next to a gray info icon and a gray
triangle-with-exclamation-mark-inside. There should be three green *rounded
square* bullet points below and a long list of "Secure Origins" in the sidebar
with the same bullet points.
3) http://www.nytimes.com/ - under "Security Overview", a black info icon should
show up between a gray lock icon and a gray
triangle-with-exclamation-mark-inside. There should be no bullet points below,
but the sidebar should show long lists of red circular bullets ("Non-Secure
Origins") and green rounded square bullets ("Secure Origins").
4) https://very.badssl.com/ - under "Security Overview", below the main bullets
there should be a bullet for "Blocked mixed content" - a gray rounded square
with an i inside.
5) https://mixed.badssl.com/test/canceled-image/ - in the sidebar there should
be a section titled "Unknown/Canceled" with "https://google.com" to the right of
a gray rounded square icon with a question mark inside.
See https://crbug.com/617311 for reference screenshots (note that details other
than the icons will change soon).
==========

to

==========
DevTools Security Panel: Use the new security indicators.

This is an initial change that updates the icons to match the specs, along with
minimal CSS tweaks to accommodate the icons. Additional layout tweaks
will be in a followup CL.

BUG=617311
TEST=Open DevTools to the Security panel, and navigate to the following sites:
1) https://very.badssl.com - under "Security Overview", a gray lock icon and
info icon should show up to the left of a red
triangle-with-exclamation-mark-inside. The bullet points below should include a
red triangle and a red circle, as should the side bar (under "Non-Secure
Origins").
2) https://www.washingtonpost.com - under "Security Overview", a green lock icon
should show up next to a gray info icon and a gray
triangle-with-exclamation-mark-inside. There should be three green *rounded
square* bullet points below and a long list of "Secure Origins" in the sidebar
with the same bullet points.
3) http://www.nytimes.com/ - under "Security Overview", a black info icon should
show up between a gray lock icon and a gray
triangle-with-exclamation-mark-inside. There should be no bullet points below,
but the sidebar should show long lists of red circular bullets ("Non-Secure
Origins") and green rounded square bullets ("Secure Origins").
4) https://very.badssl.com/ - under "Security Overview", below the main bullets
there should be a bullet for "Blocked mixed content" - a gray rounded square
with an i inside.
5) https://mixed.badssl.com/test/canceled-image/ - in the sidebar there should
be a section titled "Unknown/Canceled" with "https://google.com" to the right of
a gray rounded square icon with a question mark inside.
See https://crbug.com/617311 for reference screenshots (note that details other
than the icons will change soon).
==========

[commit-bot: I haz the power, 2016-08-13 03:02:18]

The CQ bit was unchecked by commit-bot@chromium.org

[commit-bot: I haz the power, 2016-08-13 03:02:20]

Failed to apply patch for
third_party/WebKit/Source/devtools/front_end/Images/securityPropertyInfo.svg:
While running git rm
third_party/WebKit/Source/devtools/front_end/Images/securityPropertyInfo.svg;
  fatal: pathspec
'third_party/WebKit/Source/devtools/front_end/Images/securityPropertyInfo.svg'
did not match any files

Patch:  D   
third_party/WebKit/Source/devtools/front_end/Images/securityPropertyInfo.svg
Index:
third_party/WebKit/Source/devtools/front_end/Images/securityPropertyInfo.svg
diff --git
a/third_party/WebKit/Source/devtools/front_end/Images/securityPropertyInfo.svg
b/third_party/WebKit/Source/devtools/front_end/Images/securityPropertyInfo.svg
deleted file mode 100644
index
edb6b0757dd9dbcec7dc27f71380f00132455880..0000000000000000000000000000000000000000
---
a/third_party/WebKit/Source/devtools/front_end/Images/securityPropertyInfo.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-  <g fill="none" fill-rule="evenodd">
-    <rect fill="#7f7f7f" x="1" y="1" width="14" height="14" rx="2"/>
-    <path d="m8.75 12.481l-1.5.019v-6.188h1.5v6.169m-.75-7.481c-.414
0-.75-.336-.75-.75 0-.414.336-.75.75-.75.415 0 .75.336.75.75 0
.414-.335.75-.75.75" fill="#fff"/>
-  </g>
-</svg>
\ No newline at end of file

[commit-bot: I haz the power, 2016-08-13 03:03:35]

Description was changed from

==========
DevTools Security Panel: Use the new security indicators.

This is an initial change that updates the icons to match the specs, along with
minimal CSS tweaks to accommodate the icons. Additional layout tweaks
will be in a followup CL.

BUG=617311
TEST=Open DevTools to the Security panel, and navigate to the following sites:
1) https://very.badssl.com - under "Security Overview", a gray lock icon and
info icon should show up to the left of a red
triangle-with-exclamation-mark-inside. The bullet points below should include a
red triangle and a red circle, as should the side bar (under "Non-Secure
Origins").
2) https://www.washingtonpost.com - under "Security Overview", a green lock icon
should show up next to a gray info icon and a gray
triangle-with-exclamation-mark-inside. There should be three green *rounded
square* bullet points below and a long list of "Secure Origins" in the sidebar
with the same bullet points.
3) http://www.nytimes.com/ - under "Security Overview", a black info icon should
show up between a gray lock icon and a gray
triangle-with-exclamation-mark-inside. There should be no bullet points below,
but the sidebar should show long lists of red circular bullets ("Non-Secure
Origins") and green rounded square bullets ("Secure Origins").
4) https://very.badssl.com/ - under "Security Overview", below the main bullets
there should be a bullet for "Blocked mixed content" - a gray rounded square
with an i inside.
5) https://mixed.badssl.com/test/canceled-image/ - in the sidebar there should
be a section titled "Unknown/Canceled" with "https://google.com" to the right of
a gray rounded square icon with a question mark inside.
See https://crbug.com/617311 for reference screenshots (note that details other
than the icons will change soon).
==========

to

==========
DevTools Security Panel: Use the new security indicators.

This is an initial change that updates the icons to match the specs, along with
minimal CSS tweaks to accommodate the icons. Additional layout tweaks
will be in a followup CL.

BUG=617311
TEST=Open DevTools to the Security panel, and navigate to the following sites:
1) https://very.badssl.com - under "Security Overview", a gray lock icon and
info icon should show up to the left of a red
triangle-with-exclamation-mark-inside. The bullet points below should include a
red triangle and a red circle, as should the side bar (under "Non-Secure
Origins").
2) https://www.washingtonpost.com - under "Security Overview", a green lock icon
should show up next to a gray info icon and a gray
triangle-with-exclamation-mark-inside. There should be three green *rounded
square* bullet points below and a long list of "Secure Origins" in the sidebar
with the same bullet points.
3) http://www.nytimes.com/ - under "Security Overview", a black info icon should
show up between a gray lock icon and a gray
triangle-with-exclamation-mark-inside. There should be no bullet points below,
but the sidebar should show long lists of red circular bullets ("Non-Secure
Origins") and green rounded square bullets ("Secure Origins").
4) https://very.badssl.com/ - under "Security Overview", below the main bullets
there should be a bullet for "Blocked mixed content" - a gray rounded square
with an i inside.
5) https://mixed.badssl.com/test/canceled-image/ - in the sidebar there should
be a section titled "Unknown/Canceled" with "https://google.com" to the right of
a gray rounded square icon with a question mark inside.
See https://crbug.com/617311 for reference screenshots (note that details other
than the icons will change soon).

Committed: https://crrev.com/b15aca6d0fc70b2a00beed368137e9aa90bfe7b7
Cr-Commit-Position: refs/heads/master@{#411866}
==========

[commit-bot: I haz the power, 2016-08-13 03:03:36]

Patchset 4 (id:??) landed as
https://crrev.com/b15aca6d0fc70b2a00beed368137e9aa90bfe7b7
Cr-Commit-Position: refs/heads/master@{#411866}