External/buzz
1
0
Fork 0
mirror of https://github.com/block/buzz.git synced 2026-08-18 06:50:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

debug(timeline): ring imeta-dim inline images to show the reservation split

Browse Source 
Add a debug-only red `outline` ring on exactly the inline images whose row
height we reserve up front from their imeta `dim` tag — the ones the
reservation fix catches. Lets tho SEE the split in the running app: ringed
= height-reserved, un-ringed = `dim`-less natural-load thrasher (the
residual-flicker caveat made visible).

Uses `outline` (zero layout impact), never `border`, so toggling it can't
shift a single pixel. Gated behind a trivially-flippable module const
(`DEBUG_RING_DIM_IMAGES`) with a ship-then-rip comment; the ring class
applies only when `DEBUG_RING_DIM_IMAGES && reserved`. Not for shipping
styling.

Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
This commit is contained in:
npub1223z34hd7vtwc6qj4s7flsxkj644nlre2nthu7lrrmkumhu3xddsrx9r6w
2026-06-15 22:27:43 -07:00
co-authored by Taylor Ho
parent 78f81e89f4
commit 158a7a74e7
1 changed files with 17 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
desktop/src/shared/ui/markdown.tsx
+17 -1
View File
@@ -74,6 +74,17 @@ let shikiHighlighter: HighlighterGeneric<BundledLanguage, BundledTheme> | null =
let shikiInitPromise: Promise<void> | null = null;
const loadedLangs = new Set<string>();
const loadedThemes = new Set<string>();
// ─────────────────────────────────────────────────────────────────────────────
// DEBUG diagnostic (Phase 2 virtualization). When true, inline images that
// carry an imeta `dim` tag — the ones whose row height we reserve up front in
// `ImageBlock` — get a red ring so you can SEE the dim-vs-dim-less split in the
// running app: ringed = height-reserved, un-ringed = `dim`-less natural-load
// thrasher. Uses `outline` (zero layout impact), never `border`, so toggling it
// can't shift a single pixel. Flip to false (or delete the const + its one use
// in `ImageBlock`) to remove. Not for shipping styling.
const DEBUG_RING_DIM_IMAGES = true;
const DEBUG_DIM_IMAGE_RING_CLASS = "outline outline-2 outline-red-500";
const tokenCache = new Map<string, ThemedToken[][]>();
const MAX_CACHE_ENTRIES = 100;
const MAX_LOADED_LANGUAGES = 30;
@@ -309,7 +320,12 @@ function ImageBlock({
{/* biome-ignore lint/a11y/useKeyWithClickEvents: image opens lightbox on click; keyboard equivalent handled by lightbox close button */}
<img
alt={alt}
className="mt-1 block h-auto max-h-64 max-w-sm cursor-pointer rounded-xl object-contain"
className={cn(
"mt-1 block h-auto max-h-64 max-w-sm cursor-pointer rounded-xl object-contain",
// DEBUG: ring the dim-reserved images so the dim-vs-dim-less split is
// visible in the running app. `outline` only — zero layout impact.
DEBUG_RING_DIM_IMAGES && reserved && DEBUG_DIM_IMAGE_RING_CLASS,
)}
// Reserve the rendered box from imeta `dim` so the row's height is
// stable BEFORE the image loads — no zero-then-grow reflow thrashing the
// virtualized list. width/height stay within the max-h-64/max-w-sm caps