Addition of Certificate Transparency details to Security panel of DevTools

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

 // Copyright 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.
 
 /**
  * @constructor
  * @extends {WebInspector.PanelWithSidebar}
  * @implements {WebInspector.TargetManager.Observer}
  */
 WebInspector.SecurityPanel = function()
@@ skipping 768 matching lines @@
         var table = new WebInspector.SecurityDetailsTable();
         connectionSection.appendChild(table.element());
         table.addRow("Protocol", originState.securityDetails.protocol);
         table.addRow("Key Exchange", originState.securityDetails.keyExchange);
         table.addRow("Cipher Suite", originState.securityDetails.cipher + (originState.securityDetails.mac ? " with " + originState.securityDetails.mac : ""));
 
         // Create the certificate section outside the callback, so that it appears in the right place.
         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
          */
         function displayCertificateDetails(certificateDetails)
         {
             var sanDiv = this._createSanDiv(certificateDetails.subject);
             var validFromString = new Date(1000 * certificateDetails.validFrom).toUTCString();
             var validUntilString = new Date(1000 * certificateDetails.validTo).toUTCString();
 
             var table = new WebInspector.SecurityDetailsTable();
             certificateSection.appendChild(table.element());
             table.addRow(WebInspector.UIString("Subject"), certificateDetails.subject.name);
             table.addRow(WebInspector.UIString("SAN"), sanDiv);
             table.addRow(WebInspector.UIString("Valid From"), validFromString);
             table.addRow(WebInspector.UIString("Valid Until"), validUntilString);
             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()
         {
             certificateSection.createChild("div").textContent = WebInspector.UIString("Certificate details unavailable.");
         }
 
         originState.certificateDetailsPromise.then(displayCertificateDetails.bind(this), displayCertificateDetailsUnavailable);
 
         var noteSection = this.element.createChild("div", "origin-view-section");
@@ skipping 118 matching lines @@
         row.createChild("div").textContent = key;
 
         var valueDiv = row.createChild("div");
         if (typeof value === "string") {
             valueDiv.textContent = value;
         } else {
             valueDiv.appendChild(value);
         }
     }
 }