Stack & Heap Simulator 作者: Libor Benes (Dr. B)

🧠 Stack & Heap Simulator brings one of computer science's most important concepts directly into your Firefox sidebar — an interactive, colour-coded visualisation of how programs use memory, updated live as you click.

🔍 WHAT IT DOES:
A persistent Firefox sidebar lets you build up a real memory picture step by step: push function call frames onto the stack, allocate blocks on the heap, connect them with pointer variables, then free blocks and pop frames — and watch exactly what goes wrong when you don't do it in the right order.

📐 TWO-COLUMN CANVAS:
🟢 Left column — the Stack. Grows downward (high → low addresses). Each function call adds a named frame containing local variables and a return address. The active frame glows purple; the SP (stack pointer) is marked with a dashed line.
🔵 Right column — the Heap. Grows upward (low → high addresses). Each malloc() adds a blue block with its ID, size, and address. New blocks appear above older ones, correctly reflecting heap growth direction.
🟡 Yellow Bézier arrows connect stack pointer variables to their heap blocks across the gap between columns.

🔴 MEMORY ERRORS — MADE VISIBLE:
Unlike reading about memory bugs in a book, this simulator shows them in colour:
• Dangling pointer — free a heap block while a pointer still references it. The arrow and variable turn red immediately, labelled DANGLING.
• Memory leak — pop a stack frame without freeing its heap blocks. Orphaned blocks turn orange, labelled LEAKED.
• Heap fragmentation — allocate several blocks, free alternating ones, and see the live (blue) and free (gray dashed) blocks interleaved in the heap column.

📖 FIVE GUIDED SCENARIOS:
Click any scenario card in the Scenarios tab to watch an auto-play walkthrough at 650 ms per step:
• Basic Allocation — the fundamental stack-to-heap relationship with a pointer.
• Function Call Stack — push main() → foo() → bar() with local variables, then pop them LIFO.
• Memory Leak — return from a function without freeing heap memory.
• Dangling Pointer — free a block while a stack pointer still holds its address.
• Heap Fragmentation — allocate four blocks, free the alternating ones, see the gaps.

📚 BUILT-IN REFERENCE (Explain tab):
Four compact concept rows — Stack, Heap, Pointers, and Call Frames — give the essential theory in a format that fits entirely on screen without scrolling, followed by a memory layout diagram showing high-address stack base, stack growth direction, free space, heap growth direction, and low-address heap base.

🔒 SECURITY-FIRST ARCHITECTURE:
✅ No data collection — explicitly declared in manifest.json via data_collection_permissions: ["none"].
✅ No telemetry — no analytics, no external pings, zero network requests of any kind.
✅ No eval() — safe, audited code meeting Firefox extension standards.
✅ No innerHTML — all rendering via the Canvas 2D API; all DOM updates via textContent.
✅ No permissions — the permissions array in manifest.json is completely empty.
✅ Input validation on every state mutation before it touches the canvas.
✅ Content Security Policy locked to script-src 'self'.

🎯 PERFECT FOR:
• Students in systems programming, OS, or C/C++ courses who want a visual complement to lectures.
• Developers debugging memory errors or learning allocator behavior.
• CS educators who want an interactive demo to show alongside a whiteboard.
• Anyone who has ever wondered what malloc(), free(), stack frames, and pointers actually look like at runtime.

⚙️ TECHNICAL:
• Firefox 140.0+ desktop only · Manifest v2 · Sidebar panel.
• Zero network requests · Zero storage · No background scripts · No account required.
• Runtime Execution RAM Footprint: ~42 KB (core scripts: manifest.json + panel.html + styles.css + script.js).
• Total Extension Download/Install Size: ~ 96KB (including README.md).
• No permissions required — manifest.json permissions array is empty.

🔒 100% Client-Side · No Data Collection · No Tracking · No Account.

🧠 Stack & Heap Simulator: See the memory. Understand the machine.