Web - Editor - float the foot over the code's last lines, with the code padded so its last line scrolls clear

Author: samaaron

app/web/app/src/editor.js

@@ -698,6 +698,9 @@ export function createEditor(mount, { api, hooks, workspace }) {
 
   let nudgeSlider = () => false;   // slider mode's keyboard step (completion/cm.js), once the completion is set up
   const extensions = [
+    // The foot floats over the code's last lines (style.css #editor-foot, its height in --editor-foot-h on the
+    // column): the caret is kept above it when the editor scrolls it into view
+    EditorView.scrollMargins.of(() => ({ bottom: parseFloat(getComputedStyle(mount).getPropertyValue("--editor-foot-h")) || 0 })),
     // Native's shortcuts, in whichever keymap the player picked, are main.js's
     // (shortcuts.js), and run the editor's commands through command() below.
     // These are the keys every keymap leaves to the editor.

app/web/app/src/main.js

@@ -2133,6 +2133,15 @@ const placeInfo = () => {
 let lastStripH = 0;
 window.addEventListener("resize", () => { if (infoOpen()) placeInfo(); });
 { const ro = new ResizeObserver(() => { if (infoOpen()) placeInfo(); }); ro.observe(siteNav); ro.observe($("site-strip")); }   // the bar grows a row on a phone once its tabs are in
+// The editor's foot floats over the code (style.css #editor-foot): the code is padded by the foot's height, as it
+// stands — a phone's row, focus mode's none — so its last line can always scroll clear of the buffers
+{
+  const foot = $("editor-foot"), column = $("editor-column");
+  const fit = () => column.style.setProperty("--editor-foot-h", `${foot.offsetHeight}px`);
+  new ResizeObserver(fit).observe(foot);
+  new MutationObserver(fit).observe(document.body, { attributes: true, attributeFilter: ["class"] });   // focus mode and the keyboard hide it
+  fit();
+}
 setInterval(() => { if (infoOpen()) placeInfo(); }, 500);                        // and, belt and braces, the pages check where the bar ends
 /** The card at a page (the one on show, if none) or at the page holding an id; history: how the address follows
  *  ("push" a step Back undoes, "replace" in place of an old link, "none" when the address is where Back went). */

app/web/app/src/style.css

@@ -316,31 +316,44 @@ body[data-drawer]:not([data-drawer=""]) #main { grid-template-rows: minmax(80px,
 body.zen #main { grid-template-columns: 1fr 0 0; }
 body.zen #sidebar, body.zen #panel-divider { display: none; }
 
-#editor-column { grid-area: editor; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--Background); }
+#editor-column { grid-area: editor; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--Background); position: relative; --editor-foot-h: 48px; }   /* the foot floats over the code's last lines (below); its height is measured into --editor-foot-h (main.js) */
 .shadow-pane { display: contents; }   /* a part's insides, in its shadow root, laid out as its host's own children (shadow.js) */
 #editor-mount { flex: 1; min-height: 0; overflow: visible; position: relative; }   /* not hidden: the editor inside fills it and scrolls itself, and Safari's completion popup is positioned absolutely within it (CodeMirror's Safari fallback), so a clip here would cut the popup at the editor's foot */
 :host(#editor-mount) .cm-scroller, .qs-card-body { overscroll-behavior: none; }   /* code stops at its edges: no rubber band past them (iOS) — long lines still scroll, never wrap */
 /* the editor's insides are in a shadow root on its mount (shadow.js): its rules name the mount as their :host */
 :host(#editor-mount) .cm-editor { height: 100%; }
 :host(#editor-mount) .cm-editor.cm-focused { outline: none; }
 
-/* Under the editor: where the caret is, and the ten buffers */
+/* Over the foot of the editor: where the caret is, and the ten buffers. It floats on the code's last lines,
+   transparent, rather than taking a row of its own, and the code is padded by its height (--editor-foot-h) so the
+   last line can always scroll clear of it. */
 #editor-foot {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
   gap: 12px;
   padding: 6px 14px 8px;
   flex-shrink: 0;
-}
-#caret-pos { font: var(--t-small) var(--code-font); color: var(--mutedForeground); white-space: pre; overflow: hidden; text-overflow: ellipsis; min-width: 0; }   /* small and quiet: where the caret is, not what to read */
+  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
+  background: transparent;   /* the code shows through whole: the chips carry their own pills and borders */
+  pointer-events: none;      /* the gaps between the chips are the code's: a click there reaches it */
+}
+#editor-foot > * { pointer-events: auto; }
+:host(#editor-mount) .cm-content { padding-bottom: var(--editor-foot-h, 48px); }   /* the room under the code for the foot */
+#error-strip:not([hidden]) { margin-bottom: var(--editor-foot-h, 48px); }   /* the strip, when shown, sits above the foot, not under it */
+#caret-pos { font: var(--t-small) var(--code-font); color: var(--mutedForeground); white-space: pre; overflow: hidden; text-overflow: ellipsis; min-width: 0; justify-self: start; padding: 2px 8px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--Background) 90%, transparent); }   /* a solid pill, as the chips: readable over the code the foot floats on (a blur of code text smears) */   /* small and quiet: where the caret is, not what to read */
 body.no-caret-pos #caret-pos { visibility: hidden; }   /* hidden until the preference shows it (main.js); its room is kept, so the buffer pads stay centred */
 body.no-metro #link-section { display: none; }   /* hidden until the preference shows it (main.js) */
 /* The buffer tabs, in the theme's colours. Pads 0-9 between thin bars, each a small pill behind its digit, the
    active one filled; one with code in it brighter than an empty one. The jam toggle at the row's end; with jam on
    the pads grow to drum-pad size and the run / show / exec picker sits above them. */
 #buffer-tabs { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
 .buffer-tabs-row { display: flex; align-items: center; justify-content: center; min-width: 0; }
+/* the ten digits as one solid capsule, like the chips beside it: each digit's own pill is the pane's colour, which
+   over the code the foot floats on is no pill at all, and the code read between the numbers. Solid, not frosted:
+   a blur of the code's bright text behind came out as milky smears wherever there was text, and nothing elsewhere */
+#buffer-tabs:not(.jam-on) .buffer-tabs-list { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; border-radius: var(--r-pill); padding: 0 6px; background: color-mix(in srgb, var(--Background) 90%, transparent); }   /* a box of its own here (elsewhere display: contents, above): the capsule needs one; jam's square pads are frosted each */
+#buffer-tabs:not(.jam-on) .buffer-tab:not(.active):not(:hover)::before { background: transparent; }   /* one surface: a digit's own pill would be a box in the box; the active buffer alone keeps its accent */
 /* 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); }
@@ -423,23 +436,23 @@ body.no-metro #link-section { display: none; }   /* hidden until the preference
 /* the jam toggle: a quiet pill, filled and glowing when on */
 /* SET and JAM, the row's two ends: one pill, the same size in every layout and state (a width that holds JAM's grid
    mark too), the same words' weight; what they say apart is only their colour: SET's the sets', JAM's the accent */
-:is(.set-chip, .jam-toggle) { flex: none; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 64px; height: 26px; margin-block: -3px; padding: 0 8px; border: 1px solid var(--WindowBorder); border-radius: var(--r-pill); background: none; color: var(--mutedForeground); font: 600 var(--t-label)/1 var(--prose-font); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.18s, color 0.18s, border-color 0.18s; }
+:is(.set-chip, .jam-toggle) { flex: none; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 64px; height: 26px; margin-block: -3px; padding: 0 8px; border: 1px solid var(--WindowBorder); border-radius: var(--r-pill); background: color-mix(in srgb, var(--Background) 90%, transparent); color: var(--mutedForeground); font: 600 var(--t-label)/1 var(--prose-font); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.18s, color 0.18s, border-color 0.18s; }
 .jam-toggle { margin-left: 10px; }
 /* jam on: the pair in the accent together, framing the pads; the set's list open, a shade brighter */
 :is(.jam-toggle.on, #buffer-tabs.jam-on .set-chip) { border-color: var(--HighlightedBackground); background: var(--HighlightedBackground); color: var(--accentContrastText); }
 #buffer-tabs.jam-on .set-chip[aria-expanded="true"] { filter: brightness(1.12); }
 #buffer-tabs.jam-on .set-chip:focus-visible { outline: 2px solid var(--HighlightedBackground); outline-offset: 2px; }   /* the keyboard's ring, outside the fill */
 @media (hover: hover) { :is(#buffer-tabs:not(.jam-on) .set-chip, .jam-toggle:not(.on)):hover { border-color: var(--HoverButton); color: var(--HoverButton); } }   /* the pair's hover, one */
 /* the mode picker: run | show | exec, only while jam is on */
-.jam-modes { display: none; overflow: hidden; border: 1px solid var(--HighlightedBackground); border-radius: var(--r-s); }
+.jam-modes { display: none; overflow: hidden; border: 1px solid var(--HighlightedBackground); border-radius: var(--r-s); background: color-mix(in srgb, var(--Background) 90%, transparent); }   /* solid, as the chips beside it */
 #buffer-tabs.jam-on .jam-modes { display: inline-flex; }
 .jam-mode { min-width: 40px; padding: 5px 8px; border: none; border-right: 1px solid var(--HighlightedBackground); background: none; color: var(--HighlightedBackground); font: 600 var(--t-label)/1 var(--prose-font); letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; }
 .jam-mode:last-child { border-right: none; }
 .jam-mode.on { background: var(--HighlightedBackground); color: var(--accentContrastText); }
 /* jam on: drum pads — big, bordered, the active one filled, a flash on every hit */
 #buffer-tabs.jam-on .buffer-tab { flex: none; width: 58px; padding: 26px 0; color: var(--HighlightedBackground); font: 500 24px/1 var(--code-font); }   /* square pads */
 #buffer-tabs.jam-on .buffer-tab.active { color: var(--accentContrastText); }
-#buffer-tabs.jam-on .buffer-tab::before { width: min(52px, calc(100% - 6px)); height: auto; aspect-ratio: 1; border: 2px solid var(--HighlightedBackground); border-radius: var(--r-m); background: transparent; box-sizing: border-box; }
+#buffer-tabs.jam-on .buffer-tab::before { width: min(52px, calc(100% - 6px)); height: auto; aspect-ratio: 1; border: 2px solid var(--HighlightedBackground); border-radius: var(--r-m); background: color-mix(in srgb, var(--Background) 90%, transparent);   /* solid, as the chips: the pad floats on the code */ box-sizing: border-box; }
 #buffer-tabs.jam-on .buffer-tab.active::before { background: var(--HighlightedBackground); }
 #buffer-tabs.jam-on .buffer-tab-sep { display: none; }
 /* jam on: the row a grid, the modes right against the pads, no room between (buffer-tabs.js puts them in the row). Two

app/web/scripts/browser-check.mjs

@@ -41,6 +41,39 @@ const stillness = (pg, ms = 2500) => pg.evaluate((ms) => new Promise((resolve) =
 const still = (heard) => !Object.keys(heard).length;
 // what only one engine can be asked: said with its reason, and counted apart from what passed
 const skip = (name, why) => { results.push({ engine, name, ok: true, skipped: true }); say("skip", name, why); };
+// The editor's foot (the caret readout, the buffers) floats over the code's last lines rather than taking a row of its
+// own (style.css #editor-foot): the code is padded by the foot's measured height (main.js --editor-foot-h), so its last
+// line, and the caret on it, scroll clear of the foot, and a tap in the foot's gaps reaches the code. Asked of a long
+// program with the caret at its end; the buffer is put back as it was.
+const footFloats = async (pg, where) => {
+  const r = await pg.evaluate(async () => {
+    const ed = window.sonicPi.editor, view = ed.view;
+    const before = view.state.doc.toString();
+    ed.setCode(Array.from({ length: 150 }, (_, i) => `# line ${i + 1}`).join("\n"));
+    view.focus();
+    view.dispatch({ selection: { anchor: view.state.doc.length }, scrollIntoView: true });
+    await new Promise((done) => requestAnimationFrame(() => requestAnimationFrame(done)));
+    const foot = document.getElementById("editor-foot"), column = document.getElementById("editor-column");
+    const f = foot.getBoundingClientRect();
+    const caret = view.coordsAtPos(view.state.doc.length);
+    // the foot's padding strip above its chips: the foot itself, not a chip, is under the pointer there
+    const hit = document.elementFromPoint(f.left + f.width / 2, f.top + 1);
+    const out = {
+      position: getComputedStyle(foot).position, footBottom: f.bottom, columnBottom: column.getBoundingClientRect().bottom,
+      footTop: f.top, footH: parseFloat(getComputedStyle(column).getPropertyValue("--editor-foot-h")), measured: foot.offsetHeight,
+      pad: parseFloat(getComputedStyle(view.contentDOM).paddingBottom), caretBottom: caret?.bottom ?? null, hit: hit?.id || hit?.tagName,
+    };
+    ed.setCode(before);
+    return out;
+  });
+  check(`${where}: the editor's foot floats over the code's last lines`, r.position === "absolute" && Math.abs(r.footBottom - r.columnBottom) < 1,
+    `${r.position}, foot ends at ${r.footBottom}, the column at ${r.columnBottom}`);
+  check(`${where}: the code is padded by the foot's height, as measured`, r.footH === r.measured && r.pad === r.footH,
+    `--editor-foot-h ${r.footH}, foot ${r.measured}, padding ${r.pad}`);
+  check(`${where}: the last line, and the caret on it, scroll clear of the foot`, r.caretBottom !== null && r.caretBottom <= r.footTop + 0.5,
+    `caret ends at ${r.caretBottom}, the foot starts at ${r.footTop}`);
+  check(`${where}: a tap in the foot's gaps reaches the code`, r.hit === "editor-mount", `under the pointer: ${r.hit}`);
+};
 // the dev server speaks https with a certificate it signed itself (scripts/serve.mjs): the browser is told to go on
 const HTTPS = { ignoreHTTPSErrors: BASE.startsWith("https:") };
 
@@ -104,6 +137,8 @@ for (const [name, engineType] of [["chromium", chromium], ["webkit", webkit]]) {
     };
     const caretToEnd = () => page.evaluate(() => { const v = window.sonicPi.editor.view; v.focus(); v.dispatch({ selection: { anchor: v.state.doc.length } }); });
 
+    await footFloats(page, "desktop");
+
     // highlighting: native's lexer keys. A cleared buffer has none of them in it, so the code is put there first
     await setCode("live_loop :beat do    # a comment\n  sample :bd_haus, amp: 2\n  sleep 1\nend");
     await page.waitForSelector("#editor-mount .cm-content .sp-keyword", { timeout: 5000 });   // the buffer's, in its shadow root: not a card's
@@ -990,6 +1025,7 @@ for (const [name, engineType] of [["chromium", chromium], ["webkit", webkit]]) {
     const lit = await ph.locator("#buffer-tabs .buffer-tab.active").getAttribute("data-idx");
     check("on a phone the buffers are pads across the foot, and a tap switches",
           !caretShown && pads === size && activeBuffer === 2 && lit === "2", `caret ${caretShown}, ${pads} pads of ${size}, active ${activeBuffer}, lit ${lit}`);
+    await footFloats(ph, "on a phone");
     // the rail's zoom pair (the drawer head, with native's ZoomBar, is hidden on a phone) zooms the pane and leaves it open
     await ph.evaluate(() => document.querySelector("#drawer-rail [data-drawer=docs]").click());   // Help would toggle whatever pane is open
     await ph.waitForFunction(() => document.body.dataset.drawer === "docs");