Collapse reusable test generator

docs/_javascript/preset_test.js

@@ -534,6 +534,7 @@
     const status = root.querySelector('[data-role="timezone-map-status"]');
     const selectedLabel = root.querySelector('[data-role="selected-time-zone"]');
     const browserButton = root.querySelector('[data-action="use-browser-time-zone"]');
+    const disclosure = container && container.closest("details");
     const generator = root.querySelector('[data-role="url-generator"]');
     const zoneInput = generator && generator.elements.tz;
     let selectedZone = validateTimeZone(initialTimeZone);
@@ -603,6 +604,18 @@
       worldCopyJump: true,
     }).setView([25, 10], 2);
 
+    if (disclosure) {
+      disclosure.addEventListener("toggle", function () {
+        if (!disclosure.open || !map) return;
+        global.setTimeout(function () {
+          map.invalidateSize();
+          if (selectedLayer) {
+            map.fitBounds(selectedLayer.getBounds(), { padding: [18, 18], maxZoom: 5 });
+          }
+        }, 0);
+      });
+    }
+
     L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
       minZoom: 1,
       maxZoom: 8,

docs/_stylesheets/preset_test.css

@@ -244,6 +244,56 @@
   font-family: var(--md-code-font-family);
 }
 
+.preset-test-generator-disclosure {
+  border: 1px solid var(--preset-border);
+  border-radius: 0.65rem;
+  background: var(--md-default-bg-color);
+}
+
+.preset-test-generator-disclosure > summary {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: center;
+  padding: 0.9rem 1rem;
+  cursor: pointer;
+  list-style: none;
+}
+
+.preset-test-generator-disclosure > summary::-webkit-details-marker {
+  display: none;
+}
+
+.preset-test-generator-disclosure > summary h2 {
+  margin: 0;
+  font-size: 1.15rem;
+}
+
+.preset-test-generator-disclosure > summary::after {
+  flex: 0 0 auto;
+  border-radius: 999px;
+  padding: 0.24rem 0.58rem;
+  background: color-mix(in srgb, var(--preset-cyan) 12%, transparent);
+  color: var(--preset-cyan);
+  content: "Open generator";
+  font-size: 0.68rem;
+  font-weight: 750;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.preset-test-generator-disclosure[open] > summary {
+  border-bottom: 1px solid var(--preset-border);
+}
+
+.preset-test-generator-disclosure[open] > summary::after {
+  content: "Close generator";
+}
+
+.preset-test-generator-disclosure-body {
+  padding: 0 1rem 1rem;
+}
+
 .preset-test-generator-layout {
   display: grid;
   grid-template-columns: minmax(0, 3fr) minmax(15rem, 2fr);

docs/preset_test.md

@@ -259,13 +259,17 @@ clock</code></pre>
     </section>
 
     <section aria-labelledby="share-title">
-      <h2 id="share-title">Build a link for another test</h2>
-      <p>
+      <details class="preset-test-generator-disclosure">
+        <summary>
+          <h2 id="share-title">Build a link for another test</h2>
+        </summary>
+        <div class="preset-test-generator-disclosure-body">
+          <p>
         Enter the test times in the selected time zone and choose the radio
         tuple. The generated URL converts the times to exact UTC instants and
         keeps <code>tz</code> so the page displays them in the organizer's local
         time zone.
-      </p>
+          </p>
 
       <div class="preset-test-generator-layout">
         <form class="preset-test-generator" data-role="url-generator">
@@ -368,13 +372,15 @@ clock</code></pre>
         <a data-role="open-generated-url" target="_blank" rel="noopener">Open generated page</a>
       </div>
 
-      <p class="preset-test-note">
+          <p class="preset-test-note">
         Advanced use: <code>start</code> and <code>end</code> also accept ISO-8601
         timestamps with explicit UTC offsets or Unix epoch seconds. If
         <code>tz</code> is omitted, the page uses the browser's time zone. The
         other URL parameters are <code>freq</code>, <code>bw</code>,
         <code>sf</code>, <code>cr</code>, and estimate-only <code>tx</code>.
-      </p>
+          </p>
+        </div>
+      </details>
     </section>
   </div>
 </div>

mkdocs.yml

@@ -21,11 +21,11 @@ extra_css:
   - _stylesheets/firmware_picker.css
   - _stylesheets/telemetry_decoder.css
   - _stylesheets/filter_tool.css
-  - _stylesheets/preset_test.css?v=20260916-2
+  - _stylesheets/preset_test.css?v=20260916-3
 
 extra_javascript:
   - https://unpkg.com/leaflet@1.9.4/dist/leaflet.js
   - _javascript/firmware_picker.js
   - _javascript/telemetry_decoder.js
   - _javascript/filter_tool.js
-  - _javascript/preset_test.js?v=20260916-3
+  - _javascript/preset_test.js?v=20260916-4

test/test_preset_test.js

@@ -8,6 +8,11 @@ const pageSource = fs.readFileSync("docs/preset_test.md", "utf8");
 assert.match(pageSource, /data-role="timezone-map"/);
 assert.match(pageSource, /type="hidden" name="tz"/);
 assert.doesNotMatch(pageSource, /<select name="tz"/);
+assert.match(pageSource, /<details class="preset-test-generator-disclosure">/);
+assert.doesNotMatch(
+  pageSource,
+  /<details class="preset-test-generator-disclosure"\s+open/
+);
 
 const query =
   "?start=2026-09-21T17:00:00-07:00" +