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) {
+            // 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)
+                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 + " (" +
+                    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();
+                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 "));

[Eran Messeri, 2016/05/25 10:47:04]

Nit: The Log ID is mostly superfluous when the Log Name is displayed. I'll leave
it to the UI experts to suggest how it can be done, but if it can be shown only
on-demand that'd be great.

+                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("Version"), originState.securityDetails.signedCertificateTimestampList[i].version);
+                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);
         }
     }
 }