Security panel origin view: truncate SAN to two entries by default.

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 440 matching lines @@
      * *return {!Element}
      */
     _createSanDiv: function(securityDetails)
     {
         // TODO(lgarron): Truncate the display of SAN entries and add a button to toggle the full list. https://crbug.com/523591
         var sanDiv = createElement("div");
         var sanList = securityDetails.certificateDetails.subject.sanDnsNames.concat(securityDetails.certificateDetails.subject.sanIpAddresses);
         if (sanList.length === 0) {
             sanDiv.textContent = WebInspector.UIString("(N/A)");
         } else {
-            for (var sanEntry of sanList) {
+            var truncatedNumToShow = 2;
+            var listIsTruncated = sanList.length > truncatedNumToShow;
+            for (var i = 0; i < sanList.length; i++) {
                 var span = sanDiv.createChild("span", "san-entry");
-                span.textContent = WebInspector.UIString(sanEntry);
+                span.textContent = sanList[i];
+                if (listIsTruncated && i >= truncatedNumToShow) {

[dgozman, 2015/09/03 20:11:05]

no { for one-liners

+                    span.classList.add("truncated-entry");
+                }
+            }
+            if (listIsTruncated) {
+                var truncatedSANToggle = sanDiv.createChild("div", "link");
+                truncatedSANToggle.href = "";
+
+                function toggleSANTruncation() {

[dgozman, 2015/09/03 20:11:05]

nit: { on next line

+                    if (sanDiv.classList.contains("truncated-san")) {
+                        sanDiv.classList.remove("truncated-san")
+                        truncatedSANToggle.textContent = WebInspector.UIString("Show fewer");

[dgozman, 2015/09/03 20:11:05]

But all the UIs I've seen have "Show more/less".

[lgarron, 2015/09/03 20:29:46]

"Show less" makes sense when there is a bunch of stuff, but "fewer" is more
correct for a discrete list.
It seems there is only one occurrence of "Show less" in DevTools – in fact, in
all of Chrome.

On the internal Google codebase search, there are actually more results for
"Show fewer"

+                    } else {
+                        sanDiv.classList.add("truncated-san")

[dgozman, 2015/09/03 20:11:05]

;

+                        truncatedSANToggle.textContent = WebInspector.UIString("Show more (%d in total)", sanList.length);
+                    }
+                }
+                truncatedSANToggle.addEventListener("click", toggleSANTruncation, false);
+                toggleSANTruncation();
             }
         }
         return sanDiv;
     },
 
     /**
      * @param {!SecurityAgent.SecurityState} newSecurityState
      */
     setSecurityState: function(newSecurityState)
     {
@@ skipping 38 matching lines @@
 
         var valueDiv = row.createChild("div");
         if (value instanceof HTMLDivElement) {
             valueDiv.appendChild(value);
         } else {
             valueDiv.textContent = value;
         }
     }
 }