CCing:
- maxwalker@, the DevTools designer
- ernam@ from the Certificate Transparency team.

The overall goal here is good. We want to promote Certificate Transparency, and the Security panel is the place for security details.

I have a few concerns we'll have to work through:
- SCTs as shown in the mockup take up a bunch of space. We should find a way to optimize for the common case and hide most details by default.
- SCTs can have two sources: certificate and TLS handshake. If we're going to show SCT information as clearly as possible, ideally we'd indicate the source of each SCT.
- Some day we'll have inclusion proofs. Ideally, we'd find a way of showing SCTs that will naturally accommodate inclusion proofs some day.

Note jonatan.garbee is working on bringing CSP to the Security panel:  Issue 588970 . I don't see a conflict (in fact, I'm excited) – just something to be aware of. As an analogue, CSP information can also have two sources (header or meta tag), so it would be nice if we found a paradigm to display multiple-source information in a similar way to SCTs.

eranm@: We previously had the SCT viewer. Do you think Security panel is a better place for it in the long term? Could you describe any important desires or constraints Daniel should be aware of?

Also, Daniel, how familiar are you with building Chrome?

In theory, all you have to do is:
- Build Chrome: https://www.chromium.org/developers/how-tos
- Pipe the SCT information to DevTools and decide on a way to display it (see  Issue 551705  for a start),
- Upload a change to https://codereview.chromium.org/, get approval (after some back-and-forth), and select "Commit".

But the details can be tricky. Feel free to email me with questions.

Thanks for the input!

Currently, the source is labelled as "origin" in the mockup, and "embedded" stands for embedded in the certificate. I will make these texts clearer.

I am completely new with building Chrome, but I was able to build it.

I have uploaded my code for review: https://codereview.chromium.org/1772603002/

I'm trying to think about how to make this information concise in the default case, since there are very few developers who will regularly need to look at all the details.

Here's a strawman (compact.png) for what to show by default, which serves three goals:
- Be concise
- Avoid implying an ordering/numbering to the SCTs.
- Give the relevant details: log name, delivery mechanism, validity. In practice, log name is the main thing that will distinguish the SCTs, so I think we should provide log names as the most prominent identifiers

When the user clicks on "Show full details", I think it's reasonable to expand absolutely all the details as in expanded.png (although we could truncate the binary data using a "Show more" button to keep it reasonably compact on smaller screens).

Even when expanded, I'd strongly prefer to keep all the SCTs under the same heading rather than introducing a new bold heading for each one. The strawman does this by placing three tables after each other with a small separator, but there's probably a better choice.

Deleted: compact.png 287 KB

	compact.png 287 KB View Download

Deleted: expanded.png 631 KB

	expanded.png 631 KB View Download

Another feature I forgot to mention: once inclusion proofs become available, we can easily show them in the same format.

Deleted: Screen Shot 2016-03-22 at 18.57.52.png 309 KB

	Screen Shot 2016-03-22 at 18.57.52.png 309 KB View Download

I was also not completely happy with showing all the details directly. I will remove the numbering of the SCTs, use only one heading for the CT information and take your prototypes into account.

If you move the grey lines to the right hand side, they still provide a divide, but don't appear to split the Certificate Transparency section (tweaked screenshot attached).

Deleted: 27c0c577-e4a3-4b70-94cd-2559d6dc1cf9.png 270 KB

	27c0c577-e4a3-4b70-94cd-2559d6dc1cf9.png 270 KB View Download

These separators look better. I have included them into my CL.

daniel.waxweiler: I'm sorry, but I've had trouble compiling your patch a few times, presumably due to version drift and gyp issues. Would you mind posting a screenshot here?

As for the lines, they look a little inconsistent in Craig's screenshot. Could we make them extend only as far as the text on the right column?

Here are two screenshots of the last version.

I will also fix the patch in the next days.

Deleted: chrome-devtools-security-mozilla.png 165 KB

	chrome-devtools-security-mozilla.png 165 KB View Download

Deleted: chrome-devtools-security-mozilla-details.png 233 KB

	chrome-devtools-security-mozilla-details.png 233 KB View Download

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/0e8fdc2e0d2d4d88a5552f5ba7d283d4c1fa7588

commit 0e8fdc2e0d2d4d88a5552f5ba7d283d4c1fa7588
Author: daniel.waxweiler <daniel.waxweiler@gmail.com>
Date: Tue Jun 28 22:41:31 2016

Addition of Certificate Transparency details to Security panel of DevTools

The Signed Certificate Timestamps (SCTs) are listed in detail in the Security panel of the DevTools.

BUG= 591848 

TEST=Visit a website whose certificate has Certificate Transparency information like mozilla.org, open the Security panel in DevTools, refresh and click on "https://www.mozilla.org" under "Main Origin". You should see three SCT sections underneath the certificate section.

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

[modify] https://crrev.com/0e8fdc2e0d2d4d88a5552f5ba7d283d4c1fa7588/content/child/web_url_loader_impl.cc
[add] https://crrev.com/0e8fdc2e0d2d4d88a5552f5ba7d283d4c1fa7588/net/cert/ct_sct_to_string.cc
[add] https://crrev.com/0e8fdc2e0d2d4d88a5552f5ba7d283d4c1fa7588/net/cert/ct_sct_to_string.h
[modify] https://crrev.com/0e8fdc2e0d2d4d88a5552f5ba7d283d4c1fa7588/net/cert/ct_signed_certificate_timestamp_log_param.cc
[modify] https://crrev.com/0e8fdc2e0d2d4d88a5552f5ba7d283d4c1fa7588/net/cert/multi_log_ct_verifier_unittest.cc
[modify] https://crrev.com/0e8fdc2e0d2d4d88a5552f5ba7d283d4c1fa7588/net/log/net_log_event_type_list.h
[modify] https://crrev.com/0e8fdc2e0d2d4d88a5552f5ba7d283d4c1fa7588/net/net.gypi
[modify] https://crrev.com/0e8fdc2e0d2d4d88a5552f5ba7d283d4c1fa7588/third_party/WebKit/Source/core/inspector/InspectorNetworkAgent.cpp
[modify] https://crrev.com/0e8fdc2e0d2d4d88a5552f5ba7d283d4c1fa7588/third_party/WebKit/Source/core/inspector/browser_protocol.json
[modify] https://crrev.com/0e8fdc2e0d2d4d88a5552f5ba7d283d4c1fa7588/third_party/WebKit/Source/devtools/front_end/security/SecurityPanel.js
[modify] https://crrev.com/0e8fdc2e0d2d4d88a5552f5ba7d283d4c1fa7588/third_party/WebKit/Source/devtools/front_end/security/originView.css
[modify] https://crrev.com/0e8fdc2e0d2d4d88a5552f5ba7d283d4c1fa7588/third_party/WebKit/Source/platform/exported/WebURLResponse.cpp
[modify] https://crrev.com/0e8fdc2e0d2d4d88a5552f5ba7d283d4c1fa7588/third_party/WebKit/Source/platform/network/ResourceResponse.cpp
[modify] https://crrev.com/0e8fdc2e0d2d4d88a5552f5ba7d283d4c1fa7588/third_party/WebKit/Source/platform/network/ResourceResponse.h
[modify] https://crrev.com/0e8fdc2e0d2d4d88a5552f5ba7d283d4c1fa7588/third_party/WebKit/public/platform/WebURLResponse.h

Thanks Daniel!

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/fd0c0c47ff748ddc214e69da33646402bd2f961f

commit fd0c0c47ff748ddc214e69da33646402bd2f961f
Author: lgarron <lgarron@chromium.org>
Date: Thu Jun 30 09:11:08 2016

CT in DevTools: use "Source" rather than "Origin".

BUG= 591848 

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

[modify] https://crrev.com/fd0c0c47ff748ddc214e69da33646402bd2f961f/third_party/WebKit/Source/devtools/front_end/security/SecurityPanel.js

Verified the fix as per the test steps in C#15 and this is working as intended on the latest M-53(53.0.2785.8) on Windows-7, Mac OS 10.11.5, Linux Ubuntu 14.04.

Deleted: 591848.png 128 KB

	591848.png 128 KB View Download

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/46add67f297acfab8c50a7b267a15740b70c1ae9

commit 46add67f297acfab8c50a7b267a15740b70c1ae9
Author: estark <estark@chromium.org>
Date: Wed Aug 03 23:41:59 2016

Remove SCT counters from DevTools security panel

This CL concerns the information that the DevTools security panel shows
for the Signed Certificate Timestamps (SCTs) that were served on a
request. (SCTs are part of the Certificate Transparency project.)

Each SCT has a validation status, and initially (in
https://codereview.chromium.org/1589703002), the security panel showed a
count of how many SCTs were served with each status.

Later, in https://codereview.chromium.org/1772603002, we added the full
details of each SCT to the security panel. Thus the counters are now
somewhat redundant: we show "X valid SCTs" followed by a summary of each
SCT with its validation status.

This CL removes the counters ("X valid SCTs, Y invalid SCTs, ...").

While the counters are a little more scannable at a glance, they
clutters the UI with redundant information and present an extra burden
for maintaining the plumbing needed to show the counters. This is
relevant right now because we want to add an additional SCT status. We
could rework the plumbing to accommodate this additional SCT status,
but it seems to make more sense to just remove the redundant information
from the UI.

BUG= 591848 , 634006 

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

[modify] https://crrev.com/46add67f297acfab8c50a7b267a15740b70c1ae9/content/child/web_url_loader_impl.cc
[delete] https://crrev.com/4005d82163d916d4f3c9d062fafaf33d1831e438/third_party/WebKit/LayoutTests/http/tests/inspector/security/sct-summary-expected.txt
[delete] https://crrev.com/4005d82163d916d4f3c9d062fafaf33d1831e438/third_party/WebKit/LayoutTests/http/tests/inspector/security/sct-summary.html
[modify] https://crrev.com/46add67f297acfab8c50a7b267a15740b70c1ae9/third_party/WebKit/Source/core/inspector/InspectorNetworkAgent.cpp
[modify] https://crrev.com/46add67f297acfab8c50a7b267a15740b70c1ae9/third_party/WebKit/Source/core/inspector/browser_protocol.json
[modify] https://crrev.com/46add67f297acfab8c50a7b267a15740b70c1ae9/third_party/WebKit/Source/devtools/front_end/security/SecurityPanel.js
[modify] https://crrev.com/46add67f297acfab8c50a7b267a15740b70c1ae9/third_party/WebKit/Source/platform/exported/WebURLResponse.cpp
[modify] https://crrev.com/46add67f297acfab8c50a7b267a15740b70c1ae9/third_party/WebKit/Source/platform/network/ResourceResponse.cpp
[modify] https://crrev.com/46add67f297acfab8c50a7b267a15740b70c1ae9/third_party/WebKit/Source/platform/network/ResourceResponse.h
[modify] https://crrev.com/46add67f297acfab8c50a7b267a15740b70c1ae9/third_party/WebKit/public/platform/WebURLResponse.h