From 203a4e13a5f63fb929e38d293de6808befd70dd4 Mon Sep 17 00:00:00 2001
From: clawbot <35+clawbot@noreply.example.org>
Date: Tue, 27 Oct 2026 04:56:58 +0100
Subject: [PATCH] Let the AS page's prefix lists fold (closes #155)
The IPv4 and IPv6 prefix lists on the AS page are each a
element. Its holds the list's heading and count, so a click on
the heading folds or unfolds the list without a script. Both lists start
open. The peer list is unchanged.
The summary keeps the look of the other section headings. It hides the
browser's own marker, which not every browser shows on a flex element,
and draws a triangle before the heading that points down while the list
is open.
Model: opus-5-5
---
TODO.md | 2 +
internal/templates/as_detail.html | 36 ++++++++++---
internal/templates/templates_test.go | 80 ++++++++++++++++++++++++++++
3 files changed, 110 insertions(+), 8 deletions(-)
diff --git a/TODO.md b/TODO.md
index e80be3a..fd09c4d 100644
--- a/TODO.md
+++ b/TODO.md
@@ -33,6 +33,8 @@ tested.
# Completed Steps
+- 2026-10-27: on the AS page, a click on the heading of the IPv4 or the IPv6
+ prefix list folds or unfolds the list. Both lists start open (closes #155)
- 2026-10-27: the AS page lists its IPv4 and its IPv6 prefixes by mask length,
shortest first, and prefixes of one mask length by address. They used to be
listed by address (closes #153)
diff --git a/internal/templates/as_detail.html b/internal/templates/as_detail.html
index 73a957e..9fa6951 100644
--- a/internal/templates/as_detail.html
+++ b/internal/templates/as_detail.html
@@ -126,6 +126,26 @@
margin: 0;
color: #2c3e50;
}
+ /* A click on a prefix list's heading folds or unfolds the list. Not
+ every browser shows its own marker on a flex element, so the page
+ hides it and draws a triangle before the heading. The triangle
+ points down while the list is open. */
+ summary.prefix-header {
+ cursor: pointer;
+ list-style: none;
+ }
+ summary.prefix-header::-webkit-details-marker {
+ display: none;
+ }
+ summary.prefix-header h2::before {
+ content: "\25B8";
+ display: inline-block;
+ margin-right: 10px;
+ transition: transform 0.2s;
+ }
+ details[open] > summary.prefix-header h2::before {
+ transform: rotate(90deg);
+ }
.prefix-count {
background: #e74c3c;
color: white;
@@ -242,11 +262,11 @@
{{if .IPv4Prefixes}}
-
-
+
@@ -267,15 +287,15 @@
{{end}}
-
{{end}}
{{if .IPv6Prefixes}}
-
-
+
@@ -296,7 +316,7 @@
{{end}}
-
element that
+// starts open and whose holds the list's heading, so that a click on
+// the heading folds the list.
+func TestASDetailPrefixListsFold(t *testing.T) {
+ t.Parallel()
+
+ const (
+ asn = 64500
+ prefixV4 = "192.0.2.0/24"
+ prefixV6 = "2001:db8::/32"
+ )
+
+ ipv4 := []database.LiveRoute{{Prefix: prefixV4}}
+ ipv6 := []database.LiveRoute{{Prefix: prefixV6}}
+
+ // The fields the AS page handler gives the template.
+ data := struct {
+ ASN *database.ASN
+ IPv4Prefixes []database.LiveRoute
+ IPv6Prefixes []database.LiveRoute
+ TotalCount int
+ IPv4Count int
+ IPv6Count int
+ Peers []database.ASPeer
+ PeerCount int
+ CSPNonce string
+ }{
+ ASN: &database.ASN{ASN: asn},
+ IPv4Prefixes: ipv4,
+ IPv6Prefixes: ipv6,
+ TotalCount: len(ipv4) + len(ipv6),
+ IPv4Count: len(ipv4),
+ IPv6Count: len(ipv6),
+ }
+
+ var rendered bytes.Buffer
+
+ err := templates.ASDetailTemplate().Execute(&rendered, data)
+ if err != nil {
+ t.Fatalf("rendering the page: %v", err)
+ }
+
+ page := rendered.String()
+
+ lists := []struct{ heading, prefix string }{
+ {"IPv4 Prefixes", prefixV4},
+ {"IPv6 Prefixes", prefixV6},
+ }
+
+ for _, list := range lists {
+ before, _, found := strings.Cut(page, list.prefix)
+ if !found {
+ t.Fatalf("the page does not list %s", list.prefix)
+ }
+
+ // The list's section starts at the last ") {
+ t.Errorf("%s: the list is not inside a element", list.heading)
+
+ continue
+ }
+
+ tag, section, _ := strings.Cut(before[start:], ">")
+ if !strings.Contains(tag, " open") {
+ t.Errorf("%s: the element does not start open: %s>",
+ list.heading, tag)
+ }
+
+ _, summary, _ := strings.Cut(section, "")
+
+ if !strings.Contains(summary, list.heading) {
+ t.Errorf("%s: the does not hold the heading", list.heading)
+ }
+ }
+}