LazyRuler

During web UI development and design QA audits, verifying visual alignment, margin balances, and relative spacing across components conventionally requires capturing screenshots and measuring in Figma or Photoshop, breaking the developer flow.

Injecting measurement overlays directly into arbitrary third-party pages poses significant technical hurdles: host page CSS resets and aggressive stylesheet inheritance bleed into the overlay, arbitrary z-indexes occlude ruler bars, vertical page scrolling displaces coordinates, and DOM shifts disrupt alignment. The challenge was building an isolated, zero-leak measurement overlay with magnetic edge-snapping and persistent document-space guides under Manifest V3.

1. Shadow DOM Encapsulation: Hosts all ruler tracks, guide markers, and HUD controls within a closed Shadow Root, entirely preventing host page CSS bleed, style pollution, and inheritance collisions.

2. Native Photoshop-Style Guide Mechanics: Dragging down from the top bar or right from the left bar creates persistent guides. Supports real-time dragging, double-click deletion, ruler flick discarding, and ergonomic hotkeys (Alt+R, Ctrl+; for hide/show, Ctrl+Alt+; for locking).

3. Spatial Snap Heuristics: Evaluates on-screen viewport elements in real time, snapping guides to element boundaries (left, right, center, top, bottom, middle) within a 6px threshold, bypassable on-the-fly via Shift key.

4. Alt-Key Distance & Dimension Measurement: Pressing Alt inspects hovered element bounds with live dimension badges, while dragging casts relative distance readouts between disparate page components.

5. Three Adaptable View Modes: Supports default Floating Overlay, Content Push (offsetting document content by 22px to prevent header obstruction), and Edge Proximity Auto-hide (revealing rulers smoothly on hover near viewport boundaries).

6. Document-Pinned Per-Origin Persistence: Anchors guides to absolute document coordinates so markers stay attached during page scrolling, stored locally per domain origin via chrome.storage.local with 100% offline security.