Live-element outline for the x-trace-history dock.
When the user selects a record in the dock, this namespace draws a high-contrast magenta outline around the live DOM element identified by the record's componentId — a solid 3px border with a triple box-shadow ring (dark + white + magenta glow) that reads on both light and dark backgrounds, a faint magenta inner fill, and a one-shot attention pulse on each new selection. The overlay is a fixed-position layer mounted into the shared overlay root (which lives under the nearest <x-theme> ancestor, outside the dock's marked-internal subtree). It does NOT mutate the target element — no CSS injection into its shadow root, no inline style writes on the host.
The layer is created once per dock lifetime and shown/hidden as selection changes. Scroll and resize listeners (installed by the dock) call reposition! through a single coalesced rAF so the box stays aligned as the page moves.
Recorder-pollution contract: every write that maintains the overlay is either a native DOM call (.style.*, .appendChild, scrollIntoView) or routes through du/setv-untraced!, so the trace timeline is not polluted by the highlight machinery.
Live-element outline for the x-trace-history dock. When the user selects a record in the dock, this namespace draws a high-contrast magenta outline around the live DOM element identified by the record's componentId — a solid 3px border with a triple box-shadow ring (dark + white + magenta glow) that reads on both light and dark backgrounds, a faint magenta inner fill, and a one-shot attention pulse on each new selection. The overlay is a fixed-position layer mounted into the shared overlay root (which lives under the nearest <x-theme> ancestor, outside the dock's marked-internal subtree). It does NOT mutate the target element — no CSS injection into its shadow root, no inline style writes on the host. The layer is created once per dock lifetime and shown/hidden as selection changes. Scroll and resize listeners (installed by the dock) call reposition! through a single coalesced rAF so the box stays aligned as the page moves. Recorder-pollution contract: every write that maintains the overlay is either a native DOM call (.style.*, .appendChild, scrollIntoView) or routes through du/setv-untraced!, so the trace timeline is not polluted by the highlight machinery.
(hide! host)Hide the outline if a layer exists. Cheaper than removing — the layer is reused for the dock's lifetime.
Hide the outline if a layer exists. Cheaper than removing — the layer is reused for the dock's lifetime.
(remove! host)Tear down the overlay layer and clear every highlight slot on the host. Called from the dock's unmount!. Idempotent — a second call with no layer is a no-op.
Tear down the overlay layer and clear every highlight slot on the host. Called from the dock's unmount!. Idempotent — a second call with no layer is a no-op.
(reposition! host)Realign the outline to its current target without rescrolling. Called from the scroll/resize handlers (the page moved, the target may have moved with it). No-op when no record is currently highlighted.
When the cid is stale (target was disconnected since the last
selection), hide the box AND clear k-highlight-cid so subsequent
scroll/resize ticks short-circuit on the initial when-let rather
than re-walking the DOM only to discover the same miss again.
Realign the outline to its current target without rescrolling. Called from the scroll/resize handlers (the page moved, the target may have moved with it). No-op when no record is currently highlighted. When the cid is stale (target was disconnected since the last selection), hide the box AND clear k-highlight-cid so subsequent scroll/resize ticks short-circuit on the initial `when-let` rather than re-walking the DOM only to discover the same miss again.
(show! host target)Make the outline visible over target. Scrolls the target into view
if any edge is offscreen, writes the box geometry, flips display to
block, and re-triggers the attention pulse. Called only on a fresh
selection (apply-highlight! routes same-cid re-selection through
reposition!, which intentionally does not pulse).
Make the outline visible over `target`. Scrolls the target into view if any edge is offscreen, writes the box geometry, flips display to block, and re-triggers the attention pulse. Called only on a fresh selection (apply-highlight! routes same-cid re-selection through reposition!, which intentionally does not pulse).
cljdoc builds & hosts documentation for Clojure/Script libraries
| Ctrl+k | Jump to recent docs |
| ← | Move to previous article |
| → | Move to next article |
| Ctrl+/ | Jump to the search field |