Issue metadata
Sign in to add a comment
|
Material UI for DevTools Security Panel |
||||||||||||||||||||||||||||||||||||
Issue descriptionMocks are available to Googlers at https://drive.google.com/corp/drive/folders/0B1kg1oK-WfnuXzFkQk1mM2VJSDQ
,
Jun 4 2016
,
Jun 5 2016
,
Jun 30 2016
,
Jul 1 2016
I think we should use the new shapes for the property icons. I think the (i) could be fine if we explain the intention, I think it would be more confusing to leave as-is with the page icon. What if we change the string in the yellow box to: "This page not secure. Click (i) in the URL bar to learn more." Max LGTY?
,
Jul 7 2016
Moving this nonessential bug to the next milestone. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Jul 27 2016
Spec available here: https://goo.gl/cbqtD9.
,
Aug 9 2016
Max, thanks for those assets and mocks! They were a delight to work with. In all, I only spent about 3 hours on the first pass adapting DevTools to the icons, although I didn't finish until now. I've swapped out all the icons (and adjusted some of the spacing to compensate) in a standalone CL: https://codereview.chromium.org/2229443005 Screenshots for the CL attached. The inactive security state icons are implemented using {opacity: 0.3; -webkit-filter: grayscale(100%);}, which I think is a good compromise for avoiding a bunch of extra icon files. Let me know if you're not okay with that (or want a more exact value like opacity 0.29 to match your mocks more precisely). I will make a separate CL to get rid of the colored overview box and adjust the other other details.
,
Aug 9 2016
Yay - thanks, Lucas! Using opacity/filter for inactive icons sounds good to me.
,
Aug 12 2016
Max, when I align the security property icons with the text baseline in the sidebar, I can either keep the text span centered like it is right now and move down the icon (text-centered.png) or center the icon and move up the text (icon-centered.png). Which do you prefer?
,
Aug 12 2016
Some more examples for last comment.
,
Aug 12 2016
Icon-centered looks more balanced to me. Thanks for having an eye for the details!
,
Aug 13 2016
Sidebar screenshots for https://codereview.chromium.org/2231383003 (icon-centered).
,
Aug 13 2016
Overview screenshots for https://crrev.com/2237393002
,
Aug 13 2016
Origin view screenshots for https://codereview.chromium.org/2244593002
,
Aug 13 2016
,
Aug 13 2016
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/b15aca6d0fc70b2a00beed368137e9aa90bfe7b7 commit b15aca6d0fc70b2a00beed368137e9aa90bfe7b7 Author: lgarron <lgarron@chromium.org> Date: Sat Aug 13 03:01:18 2016 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). Review-Url: https://codereview.chromium.org/2229443005 Cr-Commit-Position: refs/heads/master@{#411866} [modify] https://crrev.com/b15aca6d0fc70b2a00beed368137e9aa90bfe7b7/third_party/WebKit/Source/devtools/devtools.gypi [add] https://crrev.com/b15aca6d0fc70b2a00beed368137e9aa90bfe7b7/third_party/WebKit/Source/devtools/front_end/Images/securityIcons.png [add] https://crrev.com/b15aca6d0fc70b2a00beed368137e9aa90bfe7b7/third_party/WebKit/Source/devtools/front_end/Images/securityIcons_2x.png [delete] https://crrev.com/bf8b26608b67a274cf7b5ca99446043e9e197394/third_party/WebKit/Source/devtools/front_end/Images/securityPropertyInfo.svg [delete] https://crrev.com/bf8b26608b67a274cf7b5ca99446043e9e197394/third_party/WebKit/Source/devtools/front_end/Images/securityPropertyInsecure.svg [delete] https://crrev.com/bf8b26608b67a274cf7b5ca99446043e9e197394/third_party/WebKit/Source/devtools/front_end/Images/securityPropertySecure.svg [delete] https://crrev.com/bf8b26608b67a274cf7b5ca99446043e9e197394/third_party/WebKit/Source/devtools/front_end/Images/securityPropertyUnknown.svg [delete] https://crrev.com/bf8b26608b67a274cf7b5ca99446043e9e197394/third_party/WebKit/Source/devtools/front_end/Images/securityPropertyWarning.svg [delete] https://crrev.com/bf8b26608b67a274cf7b5ca99446043e9e197394/third_party/WebKit/Source/devtools/front_end/Images/securityStateInsecure.svg [delete] https://crrev.com/bf8b26608b67a274cf7b5ca99446043e9e197394/third_party/WebKit/Source/devtools/front_end/Images/securityStateNeutral.svg [delete] https://crrev.com/bf8b26608b67a274cf7b5ca99446043e9e197394/third_party/WebKit/Source/devtools/front_end/Images/securityStateSecure.svg [add] https://crrev.com/b15aca6d0fc70b2a00beed368137e9aa90bfe7b7/third_party/WebKit/Source/devtools/front_end/Images/src/securityIcons.svg [modify] https://crrev.com/b15aca6d0fc70b2a00beed368137e9aa90bfe7b7/third_party/WebKit/Source/devtools/front_end/security/SecurityPanel.js [modify] https://crrev.com/b15aca6d0fc70b2a00beed368137e9aa90bfe7b7/third_party/WebKit/Source/devtools/front_end/security/lockIcon.css [modify] https://crrev.com/b15aca6d0fc70b2a00beed368137e9aa90bfe7b7/third_party/WebKit/Source/devtools/front_end/security/mainView.css [modify] https://crrev.com/b15aca6d0fc70b2a00beed368137e9aa90bfe7b7/third_party/WebKit/Source/devtools/front_end/security/sidebar.css
,
Aug 17 2016
The icons have been updated, and I broke up the other CSS tweaks into three CLs: [crrev.com/2231383003](https://crrev.com/2231383003) DevTools Security panel: Update the sidebar to match new Material specs. [crrev.com/2244593002](https://crrev.com/2244593002) DevTools Security panel: Update the origin view to match the latest Material specs. [crrev.com/2237393002](https://crrev.com/2237393002) DevTools Security panel: Update the security overview to match the new Material specs. pfeldman@, you not LGTMed the first CL, saying we should fix bugs other before updating to the new specs. You mentioned that you're worried about breaking something, but these are very conservative layout changes. What are you looking for before we land these CLs?
,
Aug 23 2016
pfeldman@: ping If you're still against landing the layout adjustment CLs; I'd like to understand more about why.
,
Aug 26 2016
We should focus on fixing priority bugs before updating the UI w/ cosmetics.
,
Aug 26 2016
This was reasonably high priority. We had a bug for redlining the Security panel [1] for a long time, and it was important to update the icons for M54 as part of a large security UI effort. Those three additional changes only contain additional cosmetic changes from Max's mocks that took very little time to implement. These fixes will *obviate* the need to spend time fixing cosmetic details in the future, and I've already completely finished them. (The mocks also had some changes that involved updates to the strings sent via the DevTools protocol, which I agreed with Max not to implement yet.) [1] Issue 594850
,
Sep 13 2016
,
Nov 22 2016
,
Aug 21 2017
,
Aug 22 2017
,
Sep 21 2017
Is there any work left here?
,
Sep 25 2017
Yes, all of it.
,
Nov 10 2017
,
Nov 13 2017
,
Dec 11 2017
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/4be828be3c4ba2ad7a334da35582d65dfa2cc55a commit 4be828be3c4ba2ad7a334da35582d65dfa2cc55a Author: spqchan <spqchan@chromium.org> Date: Mon Dec 11 23:37:46 2017 [DevTools] Highlight the URLs on the Security Panel sidebar Highlight the URLs on the sidebar according to the Security Panel MD specs. Screenshot: https://screenshot.googleplex.com/baLGTsSAe8B Updated the sidebar tests so it will test for the new changes. Bug: 523589 , 617311 Change-Id: I35c14aded5530cfad2b58f18e9270250fa2e7ed1 Reviewed-on: https://chromium-review.googlesource.com/795171 Commit-Queue: Sarah Chan <spqchan@chromium.org> Reviewed-by: Dmitry Gozman <dgozman@chromium.org> Reviewed-by: Eric Lawrence <elawrence@chromium.org> Cr-Commit-Position: refs/heads/master@{#523253} [modify] https://crrev.com/4be828be3c4ba2ad7a334da35582d65dfa2cc55a/third_party/WebKit/LayoutTests/http/tests/devtools/security/blank-origins-not-shown-expected.txt [modify] https://crrev.com/4be828be3c4ba2ad7a334da35582d65dfa2cc55a/third_party/WebKit/LayoutTests/http/tests/devtools/security/failed-request-expected.txt [modify] https://crrev.com/4be828be3c4ba2ad7a334da35582d65dfa2cc55a/third_party/WebKit/LayoutTests/http/tests/devtools/security/interstitial-sidebar-expected.txt [modify] https://crrev.com/4be828be3c4ba2ad7a334da35582d65dfa2cc55a/third_party/WebKit/LayoutTests/http/tests/devtools/security/main-origin-assigned-despite-request-missing-expected.txt [modify] https://crrev.com/4be828be3c4ba2ad7a334da35582d65dfa2cc55a/third_party/WebKit/LayoutTests/http/tests/devtools/security/security-details-updated-with-security-state-expected.txt [modify] https://crrev.com/4be828be3c4ba2ad7a334da35582d65dfa2cc55a/third_party/WebKit/LayoutTests/http/tests/devtools/security/security-unknown-resource-expected.txt [modify] https://crrev.com/4be828be3c4ba2ad7a334da35582d65dfa2cc55a/third_party/WebKit/Source/devtools/front_end/security/SecurityPanel.js [modify] https://crrev.com/4be828be3c4ba2ad7a334da35582d65dfa2cc55a/third_party/WebKit/Source/devtools/front_end/security/lockIcon.css [modify] https://crrev.com/4be828be3c4ba2ad7a334da35582d65dfa2cc55a/third_party/WebKit/Source/devtools/front_end/security_test_runner/SecurityTestRunner.js
,
Dec 14 2017
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/990e8c057fc85f8ca7cb0e63c97eab532423799c commit 990e8c057fc85f8ca7cb0e63c97eab532423799c Author: spqchan <spqchan@chromium.org> Date: Thu Dec 14 18:25:52 2017 [DevTools] Updating the Security Overview Panel Update the Security Overview Page in DevTools to MD. Modified the strings and introduced a title value to SecurityStyleExplanation. Updated tests to reflect this change. Screenshot: https://screenshot.googleplex.com/Qqjc0TmkaS5.png Bug: 617311 Change-Id: If7893e2fd795c53e6a9fed0542f84bbe7006f59b Reviewed-on: https://chromium-review.googlesource.com/772002 Reviewed-by: Emily Stark <estark@chromium.org> Reviewed-by: Dmitry Gozman <dgozman@chromium.org> Reviewed-by: Eric Lawrence <elawrence@chromium.org> Commit-Queue: Sarah Chan <spqchan@chromium.org> Cr-Commit-Position: refs/heads/master@{#524118} [modify] https://crrev.com/990e8c057fc85f8ca7cb0e63c97eab532423799c/chrome/browser/ssl/security_state_tab_helper_browsertest.cc [modify] https://crrev.com/990e8c057fc85f8ca7cb0e63c97eab532423799c/components/security_state/content/content_utils.cc [modify] https://crrev.com/990e8c057fc85f8ca7cb0e63c97eab532423799c/components/security_state/content/content_utils_unittest.cc [modify] https://crrev.com/990e8c057fc85f8ca7cb0e63c97eab532423799c/components/security_state_strings.grdp [modify] https://crrev.com/990e8c057fc85f8ca7cb0e63c97eab532423799c/content/browser/devtools/protocol/devtools_protocol_browsertest.cc [modify] https://crrev.com/990e8c057fc85f8ca7cb0e63c97eab532423799c/content/browser/devtools/protocol/security_handler.cc [modify] https://crrev.com/990e8c057fc85f8ca7cb0e63c97eab532423799c/content/public/browser/security_style_explanation.cc [modify] https://crrev.com/990e8c057fc85f8ca7cb0e63c97eab532423799c/content/public/browser/security_style_explanation.h [modify] https://crrev.com/990e8c057fc85f8ca7cb0e63c97eab532423799c/third_party/WebKit/LayoutTests/http/tests/devtools/security/origin-view-then-interstitial-expected.txt [modify] https://crrev.com/990e8c057fc85f8ca7cb0e63c97eab532423799c/third_party/WebKit/Source/core/inspector/browser_protocol.json [modify] https://crrev.com/990e8c057fc85f8ca7cb0e63c97eab532423799c/third_party/WebKit/Source/core/inspector/browser_protocol.pdl [modify] https://crrev.com/990e8c057fc85f8ca7cb0e63c97eab532423799c/third_party/WebKit/Source/devtools/front_end/security/SecurityPanel.js [modify] https://crrev.com/990e8c057fc85f8ca7cb0e63c97eab532423799c/third_party/WebKit/Source/devtools/front_end/security/mainView.css
,
Dec 19 2017
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/b4f0f2dbba35c3f23e64f5bd23d40c37ddbca1c1 commit b4f0f2dbba35c3f23e64f5bd23d40c37ddbca1c1 Author: spqchan <spqchan@chromium.org> Date: Tue Dec 19 06:50:43 2017 [DevTools] Upgrade Security Origin Panel to MD Update the DevTools Security Origin Page to MD. Screenshot: https://screenshot.googleplex.com/jVEM0iFFMkj Bug: 617311 Change-Id: Ibc73636e7b809952a75efd97353805e7e72f689c Reviewed-on: https://chromium-review.googlesource.com/824952 Commit-Queue: Sarah Chan <spqchan@chromium.org> Reviewed-by: Dmitry Gozman <dgozman@chromium.org> Reviewed-by: Eric Lawrence <elawrence@chromium.org> Cr-Commit-Position: refs/heads/master@{#524958} [modify] https://crrev.com/b4f0f2dbba35c3f23e64f5bd23d40c37ddbca1c1/third_party/WebKit/LayoutTests/http/tests/devtools/security/origin-view-then-interstitial-expected.txt [modify] https://crrev.com/b4f0f2dbba35c3f23e64f5bd23d40c37ddbca1c1/third_party/WebKit/LayoutTests/http/tests/devtools/security/security-details-updated-with-security-state-expected.txt [modify] https://crrev.com/b4f0f2dbba35c3f23e64f5bd23d40c37ddbca1c1/third_party/WebKit/Source/devtools/front_end/security/SecurityPanel.js [modify] https://crrev.com/b4f0f2dbba35c3f23e64f5bd23d40c37ddbca1c1/third_party/WebKit/Source/devtools/front_end/security/originView.css
,
Dec 19 2017
|
|||||||||||||||||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||||||||||||||||
Comment 1 by lgar...@chromium.org
, Jun 3 2016181 KB
181 KB View Download
202 KB
202 KB View Download
229 KB
229 KB View Download
118 KB
118 KB View Download
136 KB
136 KB View Download
146 KB
146 KB View Download
201 KB
201 KB View Download
223 KB
223 KB View Download
266 KB
266 KB View Download