🔥 Sync 2026-08-20 08:58:30

luci-theme-footstrap/htdocs/luci-static/resources/fs-chrome.js

@@ -228,11 +228,17 @@ function measureShell() {
 	 * value is what everything downstream is measured against */
 	_shellOuter = document.documentElement.clientWidth;
 	/* The GUTTER, though, is resolved style, and this runs on every mutation batch — once a second
-	 * on any polled page. The two things that move it are the width (a media query re-paddings the
-	 * column below 767px) and the density (the token is `calc(28px * var(--fs-density-space))`), so
-	 * both are the key and an unchanged page resolves nothing. Same trade as the token memo above,
-	 * for the same reason. */
-	const key = (document.documentElement.getAttribute('data-density') || '') + '|' + _shellOuter;
+	 * on any polled page. Three things move it: the width (a media query re-paddings the column
+	 * below 767px), the density (the token is `calc(28px * var(--fs-density-space))`) and the PAGE.
+	 * The third is the one the paragraph above already names and this key used to miss: `.fs-content`
+	 * carries no chrome mark, so a foreign sheet may re-pad it — and `sheets.scopeToCurrentPage()`
+	 * enables and disables those sheets on every client navigation, with no width and no density
+	 * change to notice it by. Navigating off a page whose sheet re-padded the column would otherwise
+	 * leave this pinned at that app's gutter for as long as the width held. `body[data-page]` is the
+	 * one attribute a navigation always restamps, so it is the third term; an unchanged page still
+	 * resolves nothing. Same trade as the token memo above, for the same reason. */
+	const key = (document.documentElement.getAttribute('data-density') || '') + '|' + _shellOuter +
+		'|' + (document.body ? document.body.getAttribute('data-page') || '' : '');
 	if (_padAt === key && _shellPad != null) return;
 	const host = document.querySelector('.fs-content');
 	const cs = host ? getComputedStyle(host) : null;

luci-theme-footstrap/htdocs/luci-static/resources/fs-fit.js

@@ -329,12 +329,23 @@ const ENGINE_ANCHORS = (() => {
  * matter — the engine covers the other half. On one that does not, this is the half nobody covers,
  * so the reference is kept from the last still moment instead. */
 let _rest = null;
+/* THE OFFSET IS REMEMBERED EVEN WHEN THE ELEMENT IS NOT, and that is the difference between putting
+ * the reader back on 25.12 and putting them back everywhere. See anchorFor(). `_restPage` goes with
+ * it because a page the reader NAVIGATED away from is not a page whose offset means anything: the
+ * router resets both scrollers on a client navigation and replays them on a Back, and neither is a
+ * clamp to undo. */
+let _restAt = null, _restPage = null;
+function pageStamp() {
+	return (document.body && document.body.getAttribute('data-page')) || '';
+}
 function rememberRest() {
 	if (ENGINE_ANCHORS || scrolling()) return;
 	const ref = anchorRef();
 	/* the offset it was taken at travels with it: a reference is only about the page, and the page
 	 * moving under the reader is a different fact from the reader moving through it */
-	_rest = ref ? { el: ref.el, top: ref.top, at: scrollTop() } : null;
+	_restAt = scrollTop();
+	_restPage = pageStamp();
+	_rest = ref ? { el: ref.el, top: ref.top, at: _restAt } : null;
 }
 
 /* -> the reference to correct against: the pre-mutation one where the engine leaves that to us, the
@@ -343,13 +354,65 @@ function rememberRest() {
  * left the document, or that the reader has since scrolled a screen away from, is not one. */
 function anchorFor() {
 	if (ENGINE_ANCHORS) return anchorRef();
-	if (!_rest || !_rest.el.isConnected) return anchorRef();
+	const at = scrollTop();
+	/* AN OFFSET THAT DROPPED WITH NOBODY SCROLLING, ON THE PAGE IT WAS TAKEN ON, IS A CLAMP.
+	 * All three of those conditions are load-bearing. A clamp only ever moves the offset DOWN — it is the
+	 * page running out of length, never gaining it — and a reader who moved is a reader `scrolling()`
+	 * still answers for: their scroll starts the sampler, while the clamp's own scroll event arrives
+	 * in the rendering step AFTER this microtask. The page stamp is the third: fs-router resets both
+	 * scrollers on a client navigation and replays them on a Back, and neither of those is a clamp to
+	 * undo — restoring there would drag the reader down a page they had just left. */
+	const clamped = (_restAt != null && at < _restAt && !scrolling() && _restPage === pageStamp());
+	/* THE REFERENCE DID NOT SURVIVE THE TICK, WHICH IS THE COMMON CASE RATHER THAN AN EDGE ONE.
+	 * `dom.content()` replaces a section's children with NEW nodes, so the element that happened to
+	 * sit at the top of the content area is gone by the time this runs. Measured on a 24.10 stand,
+	 * where the theme cannot reach the poll at all — `view.status.index` there keeps its step
+	 * function in a closure (no `poll_status` on the prototype), so fs-overview's height pin has
+	 * nothing to hook and every tick empties its sections the hard way: the reference was
+	 * disconnected on the tick that mattered, the fallback took a fresh one, measured a drift the
+	 * ceiling then refused, and the reader stayed 1206px from where they had been.
+	 *
+	 * With no element there is no drift to measure — but there is still a number known exactly, and
+	 * it is the one the engine took: the offset dropped by this much and nothing else happened.
+	 * Giving it back IS the correction, and it cannot run away with the page — if the document really
+	 * is shorter now, the browser clamps the write straight back and the reader keeps the offset they
+	 * already had. The element path below stays preferred where it survives, because it compensates
+	 * the height change the tick brought with it as well. */
+	if (!_rest || !_rest.el.isConnected)
+		return clamped ? { by: _restAt - at } : anchorRef();
 	/* THE READER MOVED, NOT THE PAGE. A reference taken at one offset says nothing about a document
 	 * seen from another: correcting against it would drag the page back to where the reader had
-	 * scrolled FROM. Anything but the offset it was captured at means take a fresh one — which, on
-	 * the mutation path, is the same as not correcting this tick. */
-	if (_rest.at !== scrollTop()) return anchorRef();
-	return _rest;
+	 * scrolled FROM. So an offset that is not the one the reference was captured at normally means
+	 * take a fresh one — which, on the mutation path, is the same as not correcting this tick.
+	 *
+	 * EXCEPT WHEN THE ENGINE MOVED IT, and that exception is the whole reason a poll tick could
+	 * still throw the Overview across the screen with the compensation above already in place.
+	 * `dom.content()` — what every LuCI poll calls to refresh a section — empties the container
+	 * before it refills it, and for that moment the document is SHORTER than the offset the reader
+	 * is at. The engine clamps the offset to what is left, the container fills again and nothing
+	 * puts the offset back; the reader is simply somewhere else. Measured in WebKit with the
+	 * engine's own anchoring off, a 30-row section swapped for a 35-row one two screens above the
+	 * reader: the offset clamped by 130px and the page moved 255px under them.
+	 *
+	 * The test above cannot tell that from a reader who scrolled, because both changed the offset —
+	 * so it threw away the one reference that describes where the page WAS and took a fresh one
+	 * after the clamp, which measures a drift of zero and corrects nothing. Two facts separate them:
+	 * a clamp only ever moves the offset DOWN (it is the page running out of length, never gaining
+	 * it), and a reader who moved is a reader `scrolling()` still answers for — a scroll of theirs
+	 * fires the event that starts the sampler, while the clamp's own scroll event arrives in the
+	 * rendering step AFTER this microtask. An offset that dropped with nobody scrolling is the
+	 * engine's doing, and the remembered reference is exactly what puts the reader back.
+	 *
+	 * Measured on the same harness with the reader flicking while the swap lands: the theme writes
+	 * no offset at all, before this change and after it. */
+	if (at !== _rest.at && !clamped) return anchorRef();
+	/* HOW MUCH OF THE DRIFT IS ALREADY ACCOUNTED FOR. applyAnchor() refuses a correction bigger than
+	 * a viewport because a drift that size normally means the view replaced its whole subtree and
+	 * the reference is describing a page that no longer exists. A clamp is the one drift that big
+	 * with a receipt: the offset dropped by exactly this much with nobody scrolling, so the ceiling
+	 * is raised by that measured amount and by nothing else. Without it the worst clamps — the ones
+	 * that hurt, 690px in a 300px viewport on the harness — were the ones refused. */
+	return { el: _rest.el, top: _rest.top, slack: Math.max(0, _rest.at - at) };
 }
 
 function anchorRef() {
@@ -421,19 +484,36 @@ function scheduleAnchor(ref) {
 	});
 }
 function applyAnchor(ref) {
-	if (!ref || !ref.el.isConnected) return;
+	if (!ref) return;
 	/* through scroller(), not a second probe of its own: the two asked the same question in the
 	 * same two lines and could already answer differently within one frame */
 	const sc = scroller();
 	const at = sc ? sc.scrollTop : window.scrollY;
+	/* THE ELEMENT-FREE FORM: give back exactly what the engine clamped away, no geometry read at all
+	 * (anchorFor() explains when this is the only form available). No ceiling here and none wanted:
+	 * the number is not an estimate of where the reader was, it is what the offset lost, and the
+	 * document's own length is what bounds the write.
+	 *
+	 * It runs BEFORE the "a page at the top is left alone" rule below, and has to: a collapse deep
+	 * enough clamps the offset to zero, and that is the worst version of this fault rather than the
+	 * one case to sit out. The rule below is about a drift measured from a reference, where an offset
+	 * of zero means there is nothing to give back. */
+	if (ref.by != null) {
+		if (ref.by < 1) return;
+		if (sc) sc.scrollTop = at + ref.by;
+		else window.scrollTo(0, at + ref.by);
+		return;
+	}
 	if (at <= 0) return;
+	if (!ref.el.isConnected) return;
 	const drift = ref.el.getBoundingClientRect().top - ref.top;
 	if (Math.abs(drift) < 1) return;
 	/* A CORRECTION IS A SCROLL THE READER DID NOT ASK FOR, so an absurd one is a bug rather than a
 	 * fix: a view that replaced its whole subtree can move a reference by thousands of pixels, and
 	 * jumping there is worse than leaving the page where it is. One viewport is the most a single
-	 * tick can honestly account for. */
-	if (Math.abs(drift) > (window.innerHeight || 0) + 200) return;
+	 * tick can honestly account for — plus whatever the engine is on record for having clamped away
+	 * (`slack`, see anchorFor()), which is measured rather than assumed. */
+	if (Math.abs(drift) > (window.innerHeight || 0) + 200 + (ref.slack || 0)) return;
 	if (sc) sc.scrollTop = at + drift;
 	else window.scrollTo(0, at + drift);
 }

luci-theme-footstrap/htdocs/luci-static/resources/fs-menutree.js

@@ -165,7 +165,8 @@ function readonlyForSegs(segs) {
 
 /* The view class a menu node instantiates, or null if the node isn't SPA-able. The Status→Overview
  * `template` node maps to view.status.index (its server template just instantiates that — the
- * globals that template also defines are fs-overview.js's, see ensureOverviewHelpers there). Shared by navigate() and the hover prefetch. */
+ * globals that template also defines are the chrome bootstrap's, see ensureOverviewHelpers in
+ * menu-footstrap-common.js). Shared by navigate() and the hover prefetch. */
 function viewClassFor(node) {
 	if (!node || !node.action || node.satisfied === false)
 		return null;

luci-theme-footstrap/htdocs/luci-static/resources/fs-overview.js

@@ -191,10 +191,44 @@ function fillSection(inc, container, res) {
 		container.parentNode.style.display = '';
 		container.parentNode.classList.add('fade-in');
 		if (!inc.hide)
-			dom.content(container, content);
+			swapContent(container, content);
 	}
 }
 
+/* WHAT `dom.content()` DOES TO A READER TWO SCREENS DOWN, and the reason a section is filled through
+ * here rather than through it directly.
+ *
+ * `dom.content()` removes every child and then appends the new ones. Between those two halves the
+ * section has NO height, and a document that just lost several hundred pixels is a document the
+ * engine clamps the scroll offset into: the offset drops to whatever length is left, the section
+ * fills again, and nothing puts the offset back. The reader is now somewhere else, once a second,
+ * for as long as the Overview is open. Reported from Safari on macOS and iOS with the offset moving
+ * 200-887px per tick, and reproduced in WebKit with the engine's own scroll anchoring off: a 30-row
+ * section swapped for a 35-row one two screens above the reader moved the page 255px under them —
+ * 0px with the height held across the swap.
+ *
+ * fs-fit's anchoring covers the same fault from the other side (it now recognises a clamped offset
+ * and puts the reader back), and it has to: every OTHER page's poll calls `dom.content()` too and no
+ * theme code is in that path. This is the half that can be prevented rather than corrected, and
+ * prevention is worth the line — a correction is a scroll the reader did not ask for, and on iOS it
+ * lands in the middle of whatever momentum the page still has.
+ *
+ * The cost is one `offsetHeight` per filled section per tick — a forced layout, which this theme
+ * spends carefully (fs-fit.js). It is paid because the alternative is not "no layout" but "a layout
+ * whose result is the page jumping": the swap dirties this container anyway.
+ *
+ * The pin is released in the same call, so nothing is left to a later frame that could take the
+ * minimum with it if the next tick throws — and a section that legitimately got shorter is shorter
+ * again by the time this returns. */
+function swapContent(container, content) {
+	const hold = container.offsetHeight;
+	const prev = container.style.minHeight;
+	if (hold > 0)
+		container.style.minHeight = hold + 'px';
+	try { dom.content(container, content); }
+	finally { if (hold > 0) container.style.minHeight = prev; }
+}
+
 let _inflight = null;
 /* WHICH containers the in-flight run is filling. The guard below is module-level because the
  * duplicate load it kills is module-level, but the frames are per RENDER — so joining a run blindly
@@ -296,58 +330,14 @@ function patchOverview() {
 	}).catch((e) => console.error('footstrap: overview progressive paint not applied', e));
 }
 
-/* Status→Overview is a `template` node whose server template (admin_status/index.ut) defines 3
- * globals the stock status includes use (18_cpu/20_memory/25_storage/…) and then instantiates
- * view.status.index. Arriving by the theme's SPA router never runs that inline <script>, so define
- * them here, guarded, so a full load's copies (any theme) are not clobbered.
- *
- * This is the OTHER thing the include location used to give for free, and the one that survived the
- * move intact: the definitions had to exist before any include renders, which module eval inside
- * index.load() guaranteed. A chrome module evaluates once, at chrome init — i.e. before any SPA
- * navigation can possibly happen — so the guarantee is now stronger rather than weaker. On a full
- * load of the overview the template's own copies win the race and these are no-ops, as before.
- *
- * Bodies are verbatim from upstream except L.itemlist → window.L.itemlist (the two-L trap,
- * docs/spa-router.md). */
-function ensureOverviewHelpers() {
-	/* eslint-disable no-var -- these three bodies are copied VERBATIM from LuCI's
-	   admin_status/index.ut so they can be diffed against upstream when it changes.
-	   Modernising the `var`s would silently break that property, which is the whole
-	   reason the copies are safe to carry. */
-	if (typeof window.progressbar !== 'function')
-		window.progressbar = function(query, value, max, byte) {
-			var pg = document.querySelector(query),
-			    vn = parseInt(value) || 0,
-			    mn = parseInt(max) || 100,
-			    fv = byte ? String.format('%1024.2mB', value) : value,
-			    fm = byte ? String.format('%1024.2mB', max) : max,
-			    pc = Math.floor((100 / mn) * vn);
-			if (pg) {
-				pg.firstElementChild.style.width = pc + '%';
-				pg.setAttribute('title', '%s / %s (%d%%)'.format(fv, fm, pc));
-			}
-		};
-	if (typeof window.renderBox !== 'function')
-		window.renderBox = function(title, active, childs) {
-			childs = childs || [];
-			childs.unshift(window.L.itemlist(E('span'), [].slice.call(arguments, 3)));
-			return E('div', { class: 'ifacebox' }, [
-				E('div', { class: 'ifacebox-head center ' + (active ? 'active' : '') },
-					E('strong', title)),
-				E('div', { class: 'ifacebox-body left' }, childs)
-			]);
-		};
-	if (typeof window.renderBadge !== 'function')
-		window.renderBadge = function(icon, title) {
-			return E('span', { class: 'ifacebadge' }, [
-				E('img', { src: icon, title: title || '' }),
-				window.L.itemlist(E('span'), [].slice.call(arguments, 2))
-			]);
-		};
-	/* eslint-enable no-var */
-}
-/* Unconditional: the typeof guards make it a no-op wherever the real definitions already exist. */
-ensureOverviewHelpers();
+/* THE THREE TEMPLATE GLOBALS ARE NOT HERE, and where they went is the point. `progressbar`,
+ * `renderBox` and `renderBadge` come from `admin_status/index.ut`'s inline script, which an SPA
+ * arrival never runs, so the theme defines them — but a stock include calls them bare from its own
+ * `render()`, so they must exist before the view class does. While this file was in the chrome's
+ * directive prologue that was free: it evaluated at chrome init. As a page module it is required
+ * during the navigation that needs it, racing the router's require of the view class, so the
+ * definitions moved to `menu-footstrap-common.js`, which every page evaluates before the router
+ * exists. This module keeps only what the Overview itself needs. */
 
 return baseclass.extend({
 	/* Called by menu-footstrap-common's init, once. Everything route-dependent hangs off the

luci-theme-footstrap/htdocs/luci-static/resources/fs-router.js

@@ -1130,9 +1130,10 @@ function navigate(pathname, push, kbd) {
 	 * singleton whose __init__ already ran. `_seen` is that distinction, and it must be read BEFORE
 	 * the require resolves, since the require is what fills LuCI's cache. */
 	/* Status→Overview needs the 3 template globals (progressbar/renderBox/renderBadge) an SPA
-	 * arrival never defines. fs-overview.js defines them at its own module eval — which, as a
-	 * chrome module, happens at chrome init, i.e. before any SPA navigation can occur. Not here:
-	 * the router has no business owning luci-mod-status's globals. */
+	 * arrival never defines. `menu-footstrap-common.js` defines them at its own module eval, which
+	 * every page performs before this router exists — the one page module that could have carried
+	 * them (fs-overview) now loads DURING the navigation and would race this require. Not here
+	 * either way: the router has no business owning luci-mod-status's globals. */
 	const RT = window.L;
 	const cached = _seen.has(className);
 	/* WAIT for an in-flight prefetch of this class rather than racing it. Two requests for the same

luci-theme-footstrap/htdocs/luci-static/resources/menu-footstrap-common.js

@@ -51,6 +51,67 @@ function wirePageModules() {
 	load();
 }
 
+/* THE THREE TEMPLATE GLOBALS STATUS→OVERVIEW NEEDS, DEFINED WHERE ORDER IS GUARANTEED.
+ *
+ * `admin_status/index.ut` defines `progressbar`, `renderBox` and `renderBadge` in an inline script
+ * and then instantiates `view.status.index`; the stock includes (18_cpu, 30_network, 60_wifi…) call
+ * them bare from their own `render()`. An SPA arrival never runs that inline script, so this theme
+ * is their only definition — and a definition that arrives late is a `ReferenceError` thrown from a
+ * stock include on a page already committed to the document.
+ *
+ * THEY LIVE HERE RATHER THAN IN `fs-overview.js` FOR EXACTLY ONE REASON: ordering. While that module
+ * was in the directive prologue it evaluated at chrome init, i.e. before any navigation could
+ * happen, and the guarantee was free. It is a page module now (PAGE_MODULES above) — required
+ * DURING the navigation that needs it, in a chain that races the router's own require of the view
+ * class. fs-overview's chain is the shorter of the two and should win, but nothing orders them, and
+ * losing costs the page. This file is required by the footer on every page and evaluates before the
+ * router exists, so moving the ~40 dependency-free lines here restores the guarantee at a cost of
+ * their own bytes; the 3.8 KB of Overview layout code stays on the Overview.
+ *
+ * Bodies are verbatim from upstream except L.itemlist → window.L.itemlist (the two-L trap,
+ * docs/spa-router.md), and the typeof guards make every one a no-op on a full page load, where the
+ * template's own copies win the race — any theme, as before. */
+function ensureOverviewHelpers() {
+	/* eslint-disable no-var -- these three bodies are copied VERBATIM from LuCI's
+	   admin_status/index.ut so they can be diffed against upstream when it changes.
+	   Modernising the `var`s would silently break that property, which is the whole
+	   reason the copies are safe to carry. */
+	if (typeof window.progressbar !== 'function')
+		window.progressbar = function(query, value, max, byte) {
+			var pg = document.querySelector(query),
+			    vn = parseInt(value) || 0,
+			    mn = parseInt(max) || 100,
+			    fv = byte ? String.format('%1024.2mB', value) : value,
+			    fm = byte ? String.format('%1024.2mB', max) : max,
+			    pc = Math.floor((100 / mn) * vn);
+			if (pg) {
+				pg.firstElementChild.style.width = pc + '%';
+				pg.setAttribute('title', '%s / %s (%d%%)'.format(fv, fm, pc));
+			}
+		};
+	if (typeof window.renderBox !== 'function')
+		window.renderBox = function(title, active, childs) {
+			childs = childs || [];
+			childs.unshift(window.L.itemlist(E('span'), [].slice.call(arguments, 3)));
+			return E('div', { class: 'ifacebox' }, [
+				E('div', { class: 'ifacebox-head center ' + (active ? 'active' : '') },
+					E('strong', title)),
+				E('div', { class: 'ifacebox-body left' }, childs)
+			]);
+		};
+	if (typeof window.renderBadge !== 'function')
+		window.renderBadge = function(icon, title) {
+			return E('span', { class: 'ifacebadge' }, [
+				E('img', { src: icon, title: title || '' }),
+				window.L.itemlist(E('span'), [].slice.call(arguments, 2))
+			]);
+		};
+	/* eslint-enable no-var */
+}
+
+/* Unconditional: the typeof guards make it a no-op wherever the real definitions already exist. */
+ensureOverviewHelpers();
+
 /* The chrome BOOTSTRAP: load the menu tree once, hand it to the parts that need it, and wire them
  * in the right order. It renders nothing itself — every piece lives in its own module:
  *