@leftoff/cli 0.9.17-beta.5 → 0.9.17-beta.7

package/ui/scroll-keep.js

@@ -0,0 +1,247 @@
+// 0.9.18 Scroll, focus and open <details> kept through every redraw (Joel, Oct 28: "the right
+// sidebar ... is doing the scroll jump thing too. It seems to be a bug that's in a lot of places").
+//
+// A live update (session.updated over SSE -> soon() -> render()) repaints whole pages with
+// innerHTML (paintSession, the board, Settings, PRs ...) and polls repaint parts of them. A box
+// that is rebuilt starts at scroll 0, and one taken out and put back in is reset to 0, so
+// whatever you had scrolled jumped to the top. Rather than patch each panel, this watches the
+// page itself: it records where every scroll box is as you scroll (keyed by a stable path:
+// an id or data-scroll-key, then tag.class:index below it), and right after any DOM change
+// (a MutationObserver, which runs before the browser paints, so there's no visible jump) puts a
+// box that came back at 0 where it was. It never moves a box the app itself positioned since
+// (its own scrollTop / scrollTo / scrollIntoView: the chat's stick-to-bottom, a jump to a file),
+// never carries a place over to another page (records belong to the route they were made on),
+// and only ever moves a box away from 0, never to the top. A box whose content came back
+// shorter for a moment (a placeholder, a late image) is put back as the content grows.
+// Focus and the caret in a field come back when a redraw removed the focused element; a
+// <details> you opened or closed stays that way.
+
+// (whole class names that come and go with state; is-* and has-* too)
+const STATE = /^(?:(?:is|has)-.*|on|off|cur|current|open|shut|closed|active|sel|selected|hide|hidden|show|shown|stuck|fold|folded|live|busy|err|warn|dim|faint|new|seen|away|up|down|sheet-up|collapsed|wide|narrow|empty|loading|ready|copied|pinned|exited|done)$/
+
+// One step of an element's path: its own key, or tag + first non-state class + index among like siblings
+export function scrollSeg(el) {
+  const k = el.getAttribute && el.getAttribute('data-scroll-key')
+  if (k) return '[' + k + ']'
+  if (el.id) return '#' + el.id
+  const tag = String(el.tagName || '').toLowerCase()
+  let cls = ''
+  for (const c of el.classList || []) if (!STATE.test(c)) { cls = c; break }
+  let i = 0
+  for (let p = el.previousElementSibling; p; p = p.previousElementSibling) if (p.tagName === el.tagName && (!cls || (p.classList && p.classList.contains(cls)))) i++
+  return tag + (cls ? '.' + cls : '') + (i ? ':' + i : '')
+}
+// The path up to the nearest id / data-scroll-key (or the body)
+export function scrollKey(el) {
+  const parts = []
+  for (let e = el; e && e.nodeType === 1; e = e.parentElement) {
+    const tag = String(e.tagName || '').toLowerCase()
+    if (tag === 'html') { parts.unshift('html'); break }
+    parts.unshift(scrollSeg(e))
+    if (tag === 'body' || e.id || (e.getAttribute && e.getAttribute('data-scroll-key'))) break
+  }
+  return parts.join('>')
+}
+// Back from a path to the element in the page now (null when it isn't there)
+export function findByKey(doc, key) {
+  const parts = String(key || '').split('>')
+  if (!parts[0]) return null
+  let el
+  const a = parts[0]
+  if (a === 'html') el = doc.documentElement
+  else if (a === 'body') el = doc.body
+  else if (a[0] === '#') el = doc.getElementById(a.slice(1))
+  else if (a[0] === '[') { const v = a.slice(1, -1); el = [...doc.querySelectorAll('[data-scroll-key]')].find((e) => e.getAttribute('data-scroll-key') === v) || null }
+  else return null
+  for (let i = 1; el && i < parts.length; i++) {
+    let next = null
+    for (const c of el.children) if (scrollSeg(c) === parts[i]) { next = c; break }
+    el = next
+  }
+  return el || null
+}
+// Whether to put a box back: it came back at 0 (rebuilt or put back in) where it had been further on,
+// and nothing (the app, you) moved it since the record. -> { top, left } to set, or null
+export function restoreFor(rec, cur, { wroteAt = 0 } = {}) {
+  if (!rec || wroteAt > rec.at) return null
+  const t = rec.top > 1 && cur.top === 0 && Math.abs(cur.top - rec.top) > 1
+  const l = rec.left > 1 && cur.left === 0 && Math.abs(cur.left - rec.left) > 1
+  if (!t && !l) return null
+  return { top: t ? rec.top : null, left: l ? rec.left : null }
+}
+
+export function createScrollKeep({ win = window, doc = document, now = () => performance.now(), maxRecords = 80 } = {}) {
+  const recs = new Map() // route|key -> { top, left, at, el: WeakRef }
+  const wrote = new WeakMap() // element -> when the app itself last positioned it
+  const pending = new Map() // element -> { top, left, until, set } a restore the content wasn't tall enough for yet
+  const details = new Map() // route|key -> open, the <details> you opened or closed
+  let lastInput = -1e9, appUntil = -1e9, quietUntil = -1e9, restoring = 0
+  let focus = null // { el, key, start, end, dir } what has focus (kept when a redraw removed it)
+  const stats = { restored: 0, refocused: 0, reopened: 0 }
+  const route = () => win.location.pathname + win.location.hash
+  const se = () => doc.scrollingElement || doc.documentElement
+  const W = typeof WeakRef === 'function' ? (x) => new WeakRef(x) : (x) => ({ deref: () => x })
+  const keyFor = (el) => el === se() ? 'doc' : scrollKey(el)
+  const elFor = (key) => key === 'doc' ? se() : findByKey(doc, key)
+  const user = () => now() - lastInput < 800
+
+  function record(el, t = now()) {
+    if (!el || !el.isConnected) return
+    const k = route() + '|' + keyFor(el)
+    recs.delete(k)
+    recs.set(k, { top: el.scrollTop, left: el.scrollLeft, at: t, el: W(el) })
+    if (recs.size > maxRecords) recs.delete(recs.keys().next().value)
+  }
+  function set(el, top, left) {
+    restoring++
+    try { if (top != null && el.scrollTop !== top) el.scrollTop = top; if (left != null && el.scrollLeft !== left) el.scrollLeft = left } finally { restoring-- }
+    quietUntil = now() + 250
+  }
+
+  // -- as you scroll
+  function onScroll(e) {
+    const el = e.target === doc || e.target === win ? se() : e.target
+    if (!el || el.nodeType !== 1 || !el.isConnected) return
+    const p = pending.get(el)
+    const t = now()
+    if (p) {
+      // still short of where it was and nobody moved it (our own set, or the browser clamping it): keep waiting
+      if (!user() && t < p.until && (el.scrollTop === p.set || el.scrollTop < (p.top || 0))) return
+      pending.delete(el)
+    }
+    const k = route() + '|' + keyFor(el)
+    const r = recs.get(k)
+    const app = t - (wrote.get(el) || -1e9) < 1500 || t < appUntil
+    if (r && !user() && !app && el.scrollTop < r.top - 1 && t - r.at > 0) {
+      // moved up with no hand on it: content came back shorter (clamped) or the box was reset; put it back as it grows
+      const max = el.scrollHeight - el.clientHeight
+      if (el.scrollTop === 0 || el.scrollTop >= max - 1) { pending.set(el, { top: r.top, left: null, until: t + 2000, set: el.scrollTop }); tick(); return }
+    }
+    record(el, t)
+  }
+
+  // -- the app positioning a box itself (never undone)
+  function mark(el) { if (!restoring && el && el.nodeType === 1) { wrote.set(el, now()); pending.delete(el) } }
+  function patchProto() {
+    const E = win.Element && win.Element.prototype
+    if (!E || E.__scrollKeep) return
+    E.__scrollKeep = true
+    for (const prop of ['scrollTop', 'scrollLeft']) {
+      const d = Object.getOwnPropertyDescriptor(E, prop)
+      if (!d || !d.set) continue
+      Object.defineProperty(E, prop, { configurable: true, enumerable: d.enumerable, get: d.get, set(v) { d.set.call(this, v); if (!restoring) { mark(this); record(this) } } })
+    }
+    for (const m of ['scrollTo', 'scroll', 'scrollBy']) {
+      const f = E[m]; if (typeof f !== 'function') continue
+      E[m] = function (...a) { const r = f.apply(this, a); if (!restoring) { mark(this); if (a[0] && a[0].behavior === 'smooth') appUntil = now() + 1500; record(this) } return r }
+    }
+    const siv = E.scrollIntoView
+    if (typeof siv === 'function') E.scrollIntoView = function (...a) {
+      const r = siv.apply(this, a)
+      if (!restoring) { appUntil = now() + (a[0] && a[0].behavior === 'smooth' ? 1500 : 300); for (let p = this.parentElement; p; p = p.parentElement) { mark(p); record(p) } }
+      return r
+    }
+    for (const m of ['scrollTo', 'scroll', 'scrollBy']) {
+      const f = win[m]; if (typeof f !== 'function') continue
+      win[m] = function (...a) { const r = f.apply(win, a); if (!restoring) { mark(se()); if (a[0] && a[0].behavior === 'smooth') appUntil = now() + 1500; record(se()) } return r }
+    }
+  }
+
+  // -- focus and the caret
+  function caret(el) {
+    try { if (el && /^(INPUT|TEXTAREA)$/.test(el.tagName) && el.selectionStart != null) return { start: el.selectionStart, end: el.selectionEnd, dir: el.selectionDirection } } catch {}
+    return null
+  }
+  function onFocusIn(e) { const el = e.target; if (!el || el.nodeType !== 1 || restoring) return; focus = { el, key: scrollKey(el), route: route(), ...(caret(el) || {}) } }
+  function onFocusOut(e) {
+    const el = e.target
+    // a real blur (you clicked away) leaves the element in the page; one a redraw caused takes it out
+    win.setTimeout(() => { if (focus && focus.el === el && el.isConnected && doc.activeElement !== el) focus = null }, 0)
+  }
+  function onSel() { const a = doc.activeElement; if (focus && a === focus.el) Object.assign(focus, caret(a) || {}) }
+
+  // -- right after any change to the page
+  function restoreAll() {
+    const r = route() + '|'
+    for (const [k, rec] of recs) {
+      if (!k.startsWith(r)) continue
+      let el = rec.el.deref()
+      if (!el || !el.isConnected) el = elFor(k.slice(r.length))
+      if (!el) continue
+      if (el !== rec.el.deref()) rec.el = W(el)
+      const cur = { top: el.scrollTop, left: el.scrollLeft }
+      const want = restoreFor(rec, cur, { wroteAt: wrote.get(el) || 0 })
+      if (!want) continue
+      set(el, want.top, want.left)
+      stats.restored++
+      if (want.top != null && el.scrollTop < want.top - 1) { pending.set(el, { top: want.top, left: want.left, until: now() + 2000, set: el.scrollTop }); tick() }
+    }
+    for (const [k, open] of details) {
+      if (!k.startsWith(r)) continue
+      const d = findByKey(doc, k.slice(r.length))
+      if (d && d.tagName === 'DETAILS' && d.open !== open && !d.__skSeen) { d.__skSeen = true; restoring++; try { d.open = open } finally { restoring-- }; stats.reopened++ }
+      if (d) d.__skSeen = true
+    }
+    const a = doc.activeElement
+    if (focus && focus.route !== route()) focus = null // another page: what had focus there stays there
+    if (focus && !focus.el.isConnected && (!a || a === doc.body)) {
+      const el = findByKey(doc, focus.key)
+      if (el && typeof el.focus === 'function' && !el.disabled) {
+        restoring++
+        try {
+          el.focus({ preventScroll: true })
+          if (focus.start != null && caret(el) && el.value.length >= focus.end) el.setSelectionRange(focus.start, focus.end, focus.dir || 'none')
+        } catch {} finally { restoring-- }
+        if (doc.activeElement === el) { focus = { ...focus, el }; stats.refocused++ }
+      } else focus = null
+    }
+  }
+  // a box the content wasn't tall enough for yet: try again for a moment as it grows
+  let ticking = false
+  function tick() {
+    if (ticking) return
+    ticking = true
+    const step = () => {
+      const t = now()
+      for (const [el, p] of pending) {
+        if (t > p.until || !el.isConnected || user() || el.scrollTop !== p.set) { pending.delete(el); continue }
+        set(el, p.top, p.left)
+        p.set = el.scrollTop
+        if (Math.abs(el.scrollTop - p.top) <= 1) { pending.delete(el); record(el) }
+      }
+      if (pending.size) win.requestAnimationFrame(step); else ticking = false
+    }
+    win.requestAnimationFrame(step)
+  }
+  function onMutations(list) {
+    for (const m of list) if (m.addedNodes.length || m.removedNodes.length) { restoreAll(); for (const [el] of pending) if (el.isConnected && el.scrollTop !== pending.get(el).set) pending.delete(el); return }
+  }
+  function onToggle(e) {
+    const d = e.target
+    if (!d || d.tagName !== 'DETAILS' || restoring) return
+    d.__skSeen = true
+    if (now() - lastInput < 600) details.set(route() + '|' + scrollKey(d), d.open)
+  }
+
+  function start() {
+    patchProto()
+    const input = () => { lastInput = now() }
+    for (const ev of ['wheel', 'touchstart', 'touchmove', 'keydown', 'pointerdown', 'mousedown']) win.addEventListener(ev, input, { capture: true, passive: true })
+    doc.addEventListener('scroll', onScroll, { capture: true, passive: true })
+    doc.addEventListener('focusin', onFocusIn, true)
+    doc.addEventListener('focusout', onFocusOut, true)
+    doc.addEventListener('selectionchange', onSel)
+    doc.addEventListener('keyup', onSel, true)
+    doc.addEventListener('input', onSel, true)
+    doc.addEventListener('toggle', onToggle, true)
+    new win.MutationObserver(onMutations).observe(doc.body, { childList: true, subtree: true })
+  }
+  return {
+    start,
+    restoreNow: restoreAll,
+    // our own restore scrolls: a tip that hides on scroll stays up for these
+    quiet: () => now() < quietUntil,
+    stats,
+    _recs: recs,
+  }
+}

package/ui/walk-pop.js

@@ -61,7 +61,7 @@ export function popHtml(c, { esc, icon }) {
 }
 
 // the popover itself: one element on <body>, anchored under the button it explains
-export function initPops({ esc, icon, contentFor, doc = document, win = window }) {
+export function initPops({ esc, icon, contentFor, doc = document, win = window, quiet = () => false }) {
   const pop = doc.createElement('div')
   pop.className = 'lo-pop'; pop.id = 'loPop'; pop.setAttribute('role', 'tooltip'); pop.hidden = true
   doc.body.appendChild(pop)
@@ -129,7 +129,7 @@ export function initPops({ esc, icon, contentFor, doc = document, win = window }
   }, true)
   doc.addEventListener('keydown', (e) => { if (e.key === 'Escape' && cur) { hide(); e.stopPropagation() } }, true)
   for (const ev of ['resize', 'hashchange']) win.addEventListener(ev, () => { if (cur) hide() }, true)
-  // a scroll that moves the button closes it (the thread scrolling beside it doesn't)
-  win.addEventListener('scroll', (e) => { const t = e.target; if (cur && t && (t === doc || t === win || (t.contains && t.contains(cur)))) hide() }, true)
+  // a scroll that moves the button closes it (the thread scrolling beside it doesn't; 0.9.18 nor a redraw putting a box back, quiet())
+  win.addEventListener('scroll', (e) => { const t = e.target; if (cur && !quiet() && t && (t === doc || t === win || (t.contains && t.contains(cur)))) hide() }, true)
   return { hide, refresh, el: pop }
 }