static/frontend: condense display of vuln chips

Instead of displaying a chip for each vulnerability affecting
a module version, display a chip for the first vuln, followed
by a chip with the text "+N more" (if applicable).

Screentests aren't available for the versions and search tabs,
but a screenshot of how this looks is at
golang/go#68347.

For golang/go#68347

Change-Id: Ie19ce8e846b5ef3c3e2dc74a9415a7b908c93194
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/597176
Reviewed-by: Damien Neil <dneil@google.com>
LUCI-TryBot-Result: Go LUCI <golang-scoped@luci-project-accounts.iam.gserviceaccount.com>
kokoro-CI: kokoro <noreply+kokoro@google.com>

static/frontend/search/search.tmpl

@@ -113,11 +113,7 @@
             </a>
           </h2>
           {{with $v.ChipText}}<span class="go-Chip go-Chip--inverted">{{.}}</span>{{end}}
-          {{range $v.Vulns}}
-            <span class="go-Chip go-Chip--alert">
-              {{.ID}}
-            </span>
-          {{end}}
+          {{template "vuln-chip-condensed" $v.Vulns}}
         </div>
         {{with $v.Synopsis}}
           <p class="SearchSnippet-synopsis" data-test-id="snippet-synopsis">

static/frontend/unit/versions/versions.tmpl

@@ -78,7 +78,7 @@
         {{else}}
           <div class="Version-commitTime">
             {{$v.CommitTime}}{{if $v.Retracted}}<div><span class="go-Chip go-Chip--inverted">retracted</span></div>{{end}}
-            {{range $v.Vulns}}<div><span class="go-Chip go-Chip--alert">{{.ID}}</span></div>{{end}}
+            {{template "vuln-chip-condensed-div" $v.Vulns}}
           </div>
         {{end}}
       {{end}}
@@ -90,7 +90,7 @@
   <details class="Version-details js-versionDetails">
     <summary class="Version-summary">
       {{.CommitTime}}{{if .Retracted}}<div><span class="go-Chip go-Chip--inverted">retracted</span></div>{{end}}
-      {{range .Vulns}}<span class="go-Chip go-Chip--alert">{{.ID}}</span>{{end}}
+      {{template "vuln-chip-condensed" .Vulns}}
     </summary>
     <div class="Versions-vulns">
       {{range .Vulns}}{{template "vuln-message" .}}{{end}}

static/shared/vuln/vuln.tmpl

@@ -16,3 +16,34 @@
     <a href="/vuln/{{.ID}}">{{.ID}}</a>: {{.Details}}
   </div>
 {{end}}
+
+{{define "vuln-chip"}}
+  <span class="go-Chip go-Chip--alert">{{.}}</span>
+{{end}}
+
+{{define "vuln-chip-first"}}
+  {{template "vuln-chip" (index . 0).ID}}
+{{end}}
+
+{{define "vuln-chip-more"}}
+  {{$more := (subtract (len .) 1)}}
+  {{template "vuln-chip" (printf "+%d more" $more)}}
+{{end}}
+
+{{define "vuln-chip-condensed"}}
+  {{if .}}
+    {{template "vuln-chip-first" .}}
+  {{end}}
+  {{if (gt (len .) 1)}}
+    {{template "vuln-chip-more" .}}
+  {{end}}
+{{end}}
+
+{{define "vuln-chip-condensed-div"}}
+  {{if .}}
+    <div>{{template "vuln-chip-first" .}}</div>
+  {{end}}
+  {{if (gt (len .) 1)}}
+    <div>{{template "vuln-chip-more" .}}</div>
+  {{end}}
+{{end}}