Addition of Certificate Transparency details to Security panel of DevTools

third_party/WebKit/Source/devtools/front_end/security/SecurityPanel.js

Index: third_party/WebKit/Source/devtools/front_end/security/SecurityPanel.js
diff --git a/third_party/WebKit/Source/devtools/front_end/security/SecurityPanel.js b/third_party/WebKit/Source/devtools/front_end/security/SecurityPanel.js
index 8dab64ea2c9a4f159411dc580406b5d4fc4f1a58..6ab9b6969bddf74eca0497e93bdc7c8ce731ee5d 100644
--- a/third_party/WebKit/Source/devtools/front_end/security/SecurityPanel.js
+++ b/third_party/WebKit/Source/devtools/front_end/security/SecurityPanel.js
@@ -786,6 +786,12 @@ WebInspector.SecurityOriginView = function(panel, origin, originState)
         var certificateSection = this.element.createChild("div", "origin-view-section");
         certificateSection.createChild("div", "origin-view-section-title").textContent = WebInspector.UIString("Certificate");
 
+        if (originState.securityDetails.signedCertificateTimestampList.length > 0) {

[dgozman, 2016/06/04 00:27:37]

nit: drop "> 0"

[dwaxweiler, 2016/06/04 08:38:02]

Acknowledged.

+            // Create the Certificate Transparency section outside the callback, so that it appears in the right place.
+            var sctSection = this.element.createChild("div", "origin-view-section");
+            sctSection.createChild("div", "origin-view-section-title").textContent = WebInspector.UIString("Certificate Transparency");
+        }
+
         /**
          * @this {WebInspector.SecurityOriginView}
          * @param {?NetworkAgent.CertificateDetails} certificateDetails
@@ -805,6 +811,53 @@ WebInspector.SecurityOriginView = function(panel, origin, originState)
             table.addRow(WebInspector.UIString("Issuer"), certificateDetails.issuer);
             table.addRow(WebInspector.UIString("SCTs"), this.sctSummary(originState.securityDetails.certificateValidationDetails));
             table.addRow("", WebInspector.SecurityPanel.createCertificateViewerButton(WebInspector.UIString("Open full certificate details"), originState.securityDetails.certificateId));
+
+            if (originState.securityDetails.signedCertificateTimestampList.length <= 0)

[dgozman, 2016/06/04 00:27:37]

if (!....length)

[dwaxweiler, 2016/06/04 08:38:02]

Acknowledged.

+                return;
+
+            // Show summary of SCT(s) of Certificate Transparency.
+            var sctSummaryTable = new WebInspector.SecurityDetailsTable();
+            sctSummaryTable.element().classList.add("sct-summary");
+            sctSection.appendChild(sctSummaryTable.element());
+            for (var i = 0; i < originState.securityDetails.signedCertificateTimestampList.length; i++)
+            {
+                sctSummaryTable.addRow(WebInspector.UIString("SCT"), originState.securityDetails.signedCertificateTimestampList[i].logDescription + " (" +

[dgozman, 2016/06/04 00:27:37]

Is SCT a well-known term for web developers? I think full name will not hurt.

[dwaxweiler, 2016/06/04 08:38:02]

I have also been thinking about including the full name somewhere, but I do not
like to increase the width of the left column of the table even more. Moreover,
the full name would often appear three times one below the other, which might
look a bit crowded. What do you tink of writing out the second occurence of
"SCT" in the line "SCTs: 3 valid SCTs" in the previous paragraph? I was thinking
about creating another CL for that change.

[dgozman, 2016/06/09 08:34:12]

Let's go with what you suggest. Let's also add
{string=} title
parameter to addRow function and pass "Signed Certificate Timestamps".

[dwaxweiler, 2016/06/10 07:42:37]

Okay. I do not completely get your suggestion. What would the addRow function do
with an additional parameter called title? Do you suggest that for this CL or
for another one?

+                    originState.securityDetails.signedCertificateTimestampList[i].origin + ", " +
+                    originState.securityDetails.signedCertificateTimestampList[i].status + ")");
+            }
+
+            // Show detailed SCT(s) of Certificate Transparency.
+            var sctTableWrapper = sctSection.createChild("div", "sct-details");
+            sctTableWrapper.classList.add("hidden");
+            for (var i = 0; i < originState.securityDetails.signedCertificateTimestampList.length; i++)
+            {
+                var sctTable = new WebInspector.SecurityDetailsTable();

[dgozman, 2016/06/04 00:27:37]

nit: let's extract a |var sct =
originState.securityDetails.signedCertificateTimestampList[i]| for readability.

[dwaxweiler, 2016/06/04 08:38:02]

Acknowledged.

+                sctTableWrapper.appendChild(sctTable.element());
+                sctTable.addRow(WebInspector.UIString("Log Name"), originState.securityDetails.signedCertificateTimestampList[i].logDescription);
+                sctTable.addRow(WebInspector.UIString("Log ID"), originState.securityDetails.signedCertificateTimestampList[i].logId.replace(/(.{2})/g,"$1 "));
+                sctTable.addRow(WebInspector.UIString("Validation Status"), originState.securityDetails.signedCertificateTimestampList[i].status);
+                sctTable.addRow(WebInspector.UIString("Origin"), originState.securityDetails.signedCertificateTimestampList[i].origin);
+                sctTable.addRow(WebInspector.UIString("Issued At"), new Date(originState.securityDetails.signedCertificateTimestampList[i].timestamp).toUTCString());
+                sctTable.addRow(WebInspector.UIString("Hash Algorithm"), originState.securityDetails.signedCertificateTimestampList[i].hashAlgorithm);
+                sctTable.addRow(WebInspector.UIString("Signature Algorithm"), originState.securityDetails.signedCertificateTimestampList[i].signatureAlgorithm);
+                sctTable.addRow(WebInspector.UIString("Signature Data"), originState.securityDetails.signedCertificateTimestampList[i].signatureData.replace(/(.{2})/g,"$1 "));
+            }
+
+            // Add link to toggle between displaying of the summary of the SCT(s) and the detailed SCT(s).
+            var toggleSctsDetailsLink = sctSection.createChild("div", "link");
+            toggleSctsDetailsLink.classList.add("sct-toggle");
+            toggleSctsDetailsLink.textContent = WebInspector.UIString("Show full details");
+            function toggleSctDetailsDisplay()
+            {
+                var isDetailsShown = !sctTableWrapper.classList.contains("hidden");
+                if (isDetailsShown)
+                    toggleSctsDetailsLink.textContent = WebInspector.UIString("Show full details");
+                else
+                    toggleSctsDetailsLink.textContent = WebInspector.UIString("Hide full details");
+                sctSummaryTable.element().classList.toggle("hidden");
+                sctTableWrapper.classList.toggle("hidden");
+            }
+            toggleSctsDetailsLink.addEventListener("click", toggleSctDetailsDisplay, false);
         }
 
         function displayCertificateDetailsUnavailable()