comparison: add arrows and pre-fold exe headings

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: mattip

codespeed/static/css/main.css

@@ -235,6 +235,17 @@ div.about_content { text-align: left; }
 #options li { margin-bottom: 0.8em; }
 .seriescolor { float: right; margin-top: 2px; height: 13px; width: 14px; }
 a.togglefold { font-size: normal; color: #000000; }
+a.togglefold::before {
+  content: '▶';
+  display: inline-block;
+  margin-right: 0.3em;
+  font-size: 0.7em;
+  transition: transform 0.2s ease;
+  transform: rotate(90deg);
+}
+a.togglefold.folded::before {
+  transform: rotate(0deg);
+}
 a.checkall, a.uncheckall { font-size: small; color: #AAAAAA; }
 
 p.errormessage { line-height: 10em; margin-bottom: 10em; }

codespeed/static/js/codespeed.js

@@ -43,8 +43,14 @@ $(function() {
 
     $('.togglefold').each(function() {
         var lis = $(this).parent().children("li");
+        var allUnchecked = lis.find("input[type='checkbox']").filter(':checked').length === 0;
+        if (allUnchecked) {
+            lis.hide();
+            $(this).addClass('folded');
+        }
         $(this).click(function() {
             lis.slideToggle();
+            $(this).toggleClass('folded');
             return false;
         });
     });

codespeed/static/js/comparison.js

@@ -409,11 +409,6 @@ function init(defaults) {
     });
     */
 
-    sel = $("input[name='benchmarks']");
-    $.each(defaults.benchmarks, function(i, bench) {
-        sel.filter("[value='" + bench + "']").prop('checked', true);
-    });
-
     sel = $("input[name='environments']");
     $.each(defaults.environments, function(i, env) {
         sel.filter("[value='" + env + "']").prop('checked', true);

codespeed/templates/codespeed/comparison.html

@@ -51,7 +51,11 @@
   <ul><a href="#" class="togglefold">{{ key }}</a> <a href="#" class="checkall">(All</a>, <a href="#" class="uncheckall">None)</a>
     {% for bench in benchlist|dictsort:"name" %}
     <li title="{{ bench.description }}">
-      <input id="benchmark_{{ bench.id }}" type="checkbox" name="benchmarks" value="{{ bench.id }}" />
+      {% if bench in checkedbenchmarks %}
+        <input id="benchmark_{{ bench.id }}" type="checkbox" name="benchmarks" value="{{ bench.id }}" checked />
+      {% else %}
+        <input id="benchmark_{{ bench.id }}" type="checkbox" name="benchmarks" value="{{ bench.id }}" />
+      {% endif %}
       <label for="benchmark_{{ bench.id }}">{{ bench }}</label>
     </li>{% endfor %}
   </ul>{% endfor %}