Web - Threads - make Pause a toggle, and set Clear apart

Author: samaaron

app/web/app/src/icons.js

@@ -11,6 +11,8 @@ import { animateWhileShown } from "./ui/shown.js";
 import { createProcessTree } from "./process-tree.js";
 import { createPianoRoll } from "./piano-roll.js";
 import { perfAdd } from "./perf.js";
+import { icon } from "./icons.js";
+import { askTwice } from "./ui/ask-twice.js";
 
 const PALETTE = ["HighlightedBackground", "NumberForeground", "KeywordForeground", "DoubleQuotedStringForeground", "Scope_2", "HoverButton", "LogBackground_2", "SymbolForeground"];
 const MAX_EVENTS = 600;
@@ -200,24 +202,37 @@ export function createInsight(root, hooks) {
     b.addEventListener("click", () => { windowTarget = secs; [...windows.children].forEach((c) => { c.classList.toggle("active", c === b); c.setAttribute("aria-pressed", String(c === b)); }); });
     windows.appendChild(b);
   }
-  // Pause holds every view where it is — the tree's rows, the timeline's clock, the roll — to explore it
+  // Pause holds every view where it is — the tree's rows, the timeline's clock, the roll — to explore it. A toggle,
+  // the size of the chips beside it: lit while it holds, its name the same either way
   let frozenRows = null;
-  const pause = el("button", "sp-mini-btn insight-pause", "Pause");
+  const pauseSeg = el("div", "seg");
+  const pause = el("button", "insight-pause");
+  pause.type = "button";
+  pause.innerHTML = `${icon("player-pause")}Pause`;
+  pause.setAttribute("aria-pressed", "false");
+  pause.title = "Hold every view where it is, to look around it";
   pause.addEventListener("click", () => {
     paused = !paused;
     frozenNow = paused ? hooks.now() : null;
     frozenRows = paused ? hooks.processes() : null;
-    pause.textContent = paused ? "Resume" : "Pause";
-    pause.classList.toggle("on", paused);
+    pause.classList.toggle("active", paused);
+    pause.setAttribute("aria-pressed", String(paused));
   });
-  head.appendChild(pause);
-  const clear = el("button", "sp-mini-btn", "Clear");
+  pauseSeg.appendChild(pause);
+  // Clear drops the record every view has drawn, which cannot be brought back: at the far end, after the legend,
+  // away from the controls that are only ways of looking, quieter than they are, and it asks twice (ui/ask-twice.js)
+  const clearSeg = el("div", "seg insight-clear-seg");
+  const clear = el("button", "insight-clear");
+  clear.type = "button";
+  clear.innerHTML = `${icon("trash")}<span class="ask-label">Clear</span>`;
+  clear.title = "Clear what every view has drawn so far: it cannot be brought back";
   const clearAll = () => { threads.clear(); lanes.clear(); cues = []; beatAnchor = null; roll.clear(); renderTable(); };
-  clear.addEventListener("click", clearAll);
+  askTwice(clear, { label: "Clear", armedLabel: "Clear for good", act: clearAll, settle: 3000 });
+  clearSeg.appendChild(clear);
   const legend = el("span", "insight-legend");
   legend.innerHTML = '<i class="lg-note"></i>note <i class="lg-sample"></i>sample <i class="lg-sleep"></i>sleep <i class="lg-wait"></i>sync <i class="lg-cue"></i>cue';
-  timelineControls.append(windows, clear, legend);
-  head.appendChild(timelineControls);
+  timelineControls.append(windows, legend, clearSeg);   // Clear only where there is a record to clear: not the tree's
+  head.append(timelineControls, pauseSeg);
 
   const body = el("div", "insight-body");
   const canvasWrap = el("div", "insight-canvas");

app/web/app/src/insight.js

@@ -6,6 +6,7 @@
 // a new set's name and description, or a set's own, and for a set not showing, Delete. The list draws again whenever
 // the workspace says something changed; a set's details are left alone while they are being typed.
 import { icon } from "./icons.js";
+import { askTwice } from "./ui/ask-twice.js";
 import { NAME_MAX, DESCRIPTION_MAX } from "./workspace.js";
 
 const ago = (t) => {
@@ -125,13 +126,11 @@ export function createSetsView({ slot, menu, workspace, toast }) {
       // delete: asked twice, in its own place, the second time in the danger colour
       const del = el("button", "sv-delete", "Delete");
       del.type = "button";
-      let armed = false;
-      del.addEventListener("click", () => {
-        if (!armed) { armed = true; del.textContent = "Delete for good"; del.classList.add("armed"); return; }
+      askTwice(del, { label: "Delete", armedLabel: "Delete for good", act: () => {
         workspace.removeSet(s.id);
         toast(`deleted "${s.name}"`);
         toList();
-      });
+      } });
       foot.append(del);
     }
     const cancel = el("button", "sv-cancel", "Cancel"), save = el("button", "sv-save", s ? "Save" : "Create");

app/web/app/src/sets-view.js

@@ -357,6 +357,8 @@ body.no-metro #link-section { display: none; }   /* hidden until the preference
 /* sets have a colour of their own, everywhere they show (the chip, the list, the Share panel's set): the theme's
    second colour, numbers' in the code and native's second swatch, where a buffer has the accent */
 :root { --set-colour: var(--NumberForeground); }
+/* the danger colour, for what cannot be brought back (ui/ask-twice.js): the error's, as the error pane's */
+:root { --danger: var(--MarkerBackground, var(--HighlightedBackground)); }
 .set-slot { display: contents; }   /* the chip's place in the tab row (buffer-tabs.js): the chip lays out as one of the row's own */
 /* the set showing, named, before the tabs once there is more than one set: it opens the list of sets (main.js paintSetChip) */
 .set-chip { margin-right: 10px; }   /* the row's two ends: SET and JAM a pair, one size and weight (below) */
@@ -417,8 +419,9 @@ body.no-metro #link-section { display: none; }   /* hidden until the preference
 @media (hover: hover) { .sv-cancel:hover { color: var(--WindowForeground); background: var(--subtleFill); } }
 .sv-save { border: 1px solid var(--set-colour); background: var(--set-colour); color: var(--Background); }
 @media (hover: hover) { .sv-save:hover { filter: brightness(1.08); } }
-.sv-delete { --danger: var(--MarkerBackground, var(--HighlightedBackground)); margin-right: auto; border: 1px solid transparent; background: none; color: var(--danger); }   /* the error's colour, as the error pane's */
-.sv-delete.armed { border-color: var(--danger); background: var(--danger); color: var(--accentContrastText); }
+.sv-delete { margin-right: auto; border: 1px solid transparent; background: none; color: var(--danger); }
+/* asked a second time (ui/ask-twice.js): filled in the danger colour */
+.sv-delete.armed, .seg button.insight-clear.armed { border-color: var(--danger); border-style: solid; background: var(--danger); color: var(--accentContrastText); }
 #sets-menu :is(button, .sv-input):focus-visible { outline: 2px solid var(--set-colour); outline-offset: 1px; }
 .buffer-tab-sep { padding: 0 2px; color: var(--WindowBorder); font: 300 var(--t-small) var(--code-font); pointer-events: none; user-select: none; }
 .buffer-tab { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; flex: 1 1 34px; min-width: 0; padding: 7px 4px; border: none; background: none; color: var(--faintText); font: var(--t-body)/1 var(--code-font); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: font-size 0.25s ease 0.1s, padding 0.25s ease 0.1s; }
@@ -1421,6 +1424,16 @@ body[data-drawer="logs"] #logs-pane { display: flex; }
 .insight[data-view="timeline"] .insight-processes { display: none; }
 .insight[data-view="roll"] .insight-body, .insight[data-view="roll"] .insight-processes, .insight[data-view="roll"] .insight-legend { display: none; }
 .insight-timeline-controls { display: contents; }
+/* the head: what to look at, how much of it, and holding it still; at the far end, the legend and Clear (insight.js) */
+.insight-legend, .insight-clear-seg { order: 1; }
+.insight-clear-seg { margin-left: 4px; }
+.insight[data-view="roll"] .insight-clear-seg { margin-left: auto; }   /* no legend there to carry it to the end */
+:is(.insight-pause, .insight-clear) { display: inline-flex; align-items: center; gap: 6px; }
+:is(.insight-pause, .insight-clear) .tb-icon { width: 14px; height: 14px; flex: none; }
+/* Clear throws the record away: quieter than the ways of looking, and the danger colour once it is pointed at */
+.seg button.insight-clear { border-style: dashed; color: var(--mutedForeground); }
+.seg button.insight-clear:not(.armed):focus-visible { border-color: var(--danger); color: var(--danger); }
+@media (hover: hover) { .seg button.insight-clear:not(.armed):hover { border-color: var(--danger); color: var(--danger); } }
 .insight-processes { flex: 1; min-height: 0; display: flex; flex-direction: column; }
 .ptree-head { display: flex; align-items: center; gap: 12px; padding: 4px 12px; flex-wrap: wrap; }
 .ptree-stats { display: flex; gap: 14px; flex-wrap: wrap; font: var(--t-tiny) var(--code-font); color: var(--mutedForeground); flex: 1; }

app/web/app/src/style.css

@@ -0,0 +1,26 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// A button that asks twice, for what cannot be brought back (deleting a set, clearing the Threads record): the first
+// press arms it, its second label in the danger colour (style.css .armed), and the second press does it. Left armed it
+// settles back after `settle` ms, or as soon as focus leaves it; with no `settle` it stays armed until pressed again.
+// The label is the button's .ask-label where it has one (beside an icon), else its whole text.
+export function askTwice(button, { label, armedLabel, act, settle = null }) {
+  const text = button.querySelector(".ask-label") ?? button;
+  let timer = null;
+  const disarm = () => {
+    clearTimeout(timer);
+    timer = null;
+    button.classList.remove("armed");
+    text.textContent = label;
+  };
+  button.addEventListener("click", () => {
+    if (!button.classList.contains("armed")) {
+      button.classList.add("armed");
+      text.textContent = armedLabel;
+      if (settle != null) timer = setTimeout(disarm, settle);
+      return;
+    }
+    disarm();
+    act();
+  });
+  if (settle != null) button.addEventListener("blur", disarm);
+}

app/web/app/src/ui/ask-twice.js

@@ -465,7 +465,10 @@ for (const [name, engineType] of [["chromium", chromium], ["webkit", webkit]]) {
     const tipText = (await page.locator(".roll-tip:not([hidden])").textContent().catch(() => "")) ?? "";
     check("pointing at a note names it, its synth and its line", /^[A-G][♯♭]?\d \(\d+\) · :tb303 · amp 1 · 0\.2 s · :bass · line 7$/.test(tipText), tipText);
     await page.mouse.move(0, 0);
-    await page.locator(".insight-pause", { hasText: "Resume" }).click();
+    // Pause is a toggle: pressed while it holds, its name the same either way
+    const pauseHeld = await pause.evaluate((b) => ({ pressed: b.getAttribute("aria-pressed"), text: b.textContent.trim() }));
+    check("Pause is a toggle, pressed while it holds and named the same", pauseHeld.pressed === "true" && pauseHeld.text === "Pause", JSON.stringify(pauseHeld));
+    await pause.click();
     // the roll has notes still to sound (the bass is a second ahead) once it has drawn again after the resume: waited
     // for, not a fixed pause, which a slow machine's drawing can outlast
     const aheadNow = () => { const now = window.sonicPi.session.clockNow(); return window.sonicPi.pianoRoll().notes.filter((n) => n.start > now).length; };
@@ -477,6 +480,23 @@ for (const [name, engineType] of [["chromium", chromium], ["webkit", webkit]]) {
     // none ahead: say what the roll had, and when, for a machine where it fails
     const rollSaid = ahead > 0 ? "" : ` (stopped at ${stoppedAt}: the roll had ${rollStopped.notes.length} notes, the latest starting ${Math.max(...rollStopped.notes.map((n) => n.start))})`;
     check("Stop takes the notes that will now never sound off the piano roll", ahead > 0 && rollStopped.notes.every((n) => n.start <= stoppedAt && n.end <= stoppedAt + 1e-6) && rollStopped.hits.every((h) => h.time <= stoppedAt), `${ahead} ahead before, ${rollStopped.notes.filter((n) => n.start > stoppedAt).length} after the stop${rollSaid}`);
+    // Clear drops the record and cannot bring it back, so it asks twice (ui/ask-twice.js): the first press arms it,
+    // left alone it settles back with the record kept, and only a second press clears
+    {
+      const clearBtn = page.locator(".insight-clear");
+      const rows = () => page.locator(".insight-table tbody .insight-chip").count();   // a thread's row; not the empty table's line
+      const state = () => clearBtn.evaluate((b) => ({ armed: b.classList.contains("armed"), text: b.textContent.trim() }));
+      const before = await rows();
+      await clearBtn.click();
+      const armed = await state(), keptArmed = await rows();
+      await page.waitForTimeout(3300);   // a finished thread may leave the table meanwhile, as it would anyway
+      const settled = await state(), keptSettled = await rows();
+      // the two presses and the count in one task: a record arriving a moment later is the next one's, not the cleared
+      const after = await clearBtn.evaluate((b) => { b.click(); b.click(); return b.getRootNode().querySelectorAll(".insight-table tbody .insight-chip").length; });
+      check("Clear asks twice: armed by a press, settled back if left, the record gone only with a second press",
+        before > 0 && armed.armed && armed.text === "Clear for good" && keptArmed === before && !settled.armed && settled.text === "Clear" && keptSettled > 0 && after === 0,
+        `rows ${before} → armed ${keptArmed} (${armed.text}) → settled ${keptSettled} (${settled.text}) → ${after}`);
+    }
     await setCode("n = play 60, release: 2\nsleep 0.25\ncontrol n, note: 72\nset :answer, 42\nputs get(:answer)\nputs spread(3, 8)\nmidi_note_on 60\nputs chord_invert(chord(:c4, :major), 1)");
     await page.click("#btn-run");
     await page.waitForFunction(() => /\(ring 64, 67, 72\)/.test(document.getElementById("log").shadowRoot.textContent), null, { timeout: 10000 }).catch(() => {});