Add buttons for expanding and collapsing all test suites

Kobzol · Kobzol · commit a326afd5dd81 · 2025-04-17T16:30:23.000+02:00
diff --git a/src/ci/citool/templates/layout.askama b/src/ci/citool/templates/layout.askama
@@ -3,69 +3,20 @@
   <meta charset="UTF-8">
   <title>Rust CI Test Dashboard</title>
   <style>
-      body {
+    body {
         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
         line-height: 1.6;
         max-width: 1500px;
         margin: 0 auto;
         padding: 20px;
         background: #F5F5F5;
-      }
-
-      h1 {
-        text-align: center;
-        color: #333333;
-        margin-bottom: 30px;
-      }
-
-      .test-suites {
-        background: white;
-        border-radius: 8px;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        padding: 20px;
-      }
-
-      ul {
-        padding-left: 0;
-      }
-
-      li {
-        list-style: none;
-        padding-left: 20px;
-      }
-      summary {
-        margin-bottom: 5px;
-        padding: 6px;
-        background-color: #F4F4F4;
-        border: 1px solid #ddd;
-        border-radius: 4px;
-        cursor: pointer;
-      }
-      summary:hover {
-        background-color: #CFCFCF;
-      }
-
-      /* Style the disclosure triangles */
-      details > summary {
-          list-style: none;
-          position: relative;
-      }
-
-      details > summary::before {
-          content: "▶";
-          position: absolute;
-          left: -15px;
-          transform: rotate(0);
-          transition: transform 0.2s;
-      }
-
-      details[open] > summary::before {
-          transform: rotate(90deg);
-      }
+    }
+    {% block styles %}{% endblock %}
   </style>
 </head>
 
 <body>
 {% block content %}{% endblock %}
+{% block scripts %}{% endblock %}
 </body>
 </html>
diff --git a/src/ci/citool/templates/test_suites.askama b/src/ci/citool/templates/test_suites.askama
@@ -4,7 +4,11 @@
 <h1>Rust CI Test Dashboard</h1>
 <div class="test-suites">
     <div class="summary">
-        Total tests: {{ test_count }}
+        <span>Total tests: {{ test_count }}</span>
+        <div>
+            <button onclick="openAll()">Open all</button>
+            <button onclick="closeAll()">Close all</button>
+        </div>
     </div>
 
     <ul>
@@ -16,3 +20,78 @@
     </ul>
 </div>
 {% endblock %}
+
+{% block styles %}
+h1 {
+    text-align: center;
+    color: #333333;
+    margin-bottom: 30px;
+}
+
+.summary {
+    display: flex;
+    justify-content: space-between;
+}
+
+.test-suites {
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+}
+
+ul {
+    padding-left: 0;
+}
+
+li {
+    list-style: none;
+    padding-left: 20px;
+}
+summary {
+    margin-bottom: 5px;
+    padding: 6px;
+    background-color: #F4F4F4;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    cursor: pointer;
+}
+summary:hover {
+    background-color: #CFCFCF;
+}
+
+/* Style the disclosure triangles */
+details > summary {
+    list-style: none;
+    position: relative;
+}
+
+details > summary::before {
+    content: "▶";
+    position: absolute;
+    left: -15px;
+    transform: rotate(0);
+    transition: transform 0.2s;
+}
+
+details[open] > summary::before {
+    transform: rotate(90deg);
+}
+{% endblock %}
+
+{% block scripts %}
+<script type="text/javascript">
+function openAll() {
+    const details = document.getElementsByTagName("details");
+    for (const elem of details) {
+        elem.open = true;
+    }
+}
+function closeAll() {
+    const details = document.getElementsByTagName("details");
+    for (const elem of details) {
+        elem.open = false;
+    }
+}
+</script>
+{% endblock %}
