window-drag

concepts

1. Titlebar Mock

   A mocked-up custom titlebar with a drag region, app controls, and a window-controls overlay area. Annotated to show exactly which CSS rule applies to each strip.

2. No-drag Event Probe

   The failure mode the web.dev guide warns about: drag regions swallow pointer events. Click buttons placed in drag vs no-drag zones and watch an event log fill (or not). Demonstrates why every interactive element inside a custom titlebar needs explicit no-drag.

3. Multi-Zone Inspector

   An interactive mock PWA layout — click any region to toggle it between drag and no-drag, and watch the generated CSS update live. Shows how real apps need both: a wide title-bar drag area plus explicit no-drag on every button and sidebar item.

4. Inheritance Debugger

   A live mini-DOM where every node has a window-drag dropdown. The right column shows the effective computed value plus whether it was inherited. Spot the common bug: a button inside a draggable titlebar inheriting "drag" and silently stopping clicks.

5. Legacy app-region Comparator

   Paste your old -webkit-app-region CSS and get the modern window-drag equivalent — single output or transitional "emit both" mode. Plus a cross-browser support matrix and a live CSS.supports() probe on this device.

6. Install Readiness Wizard

   Six live checks — secure context, display mode, CSS.supports(), navigator.windowControlsOverlay, Chrome version, and install prompt — that tell you exactly whether window-drag is active in this session and precisely why not if it isn't.

7. OS Integration Storyboard

   Visual comparison across five states: browser tab, standalone installed, Window Controls Overlay, file-handler launch, and legacy -webkit-app-region migration. Each card shows the applicable CSS and a window mockup — plus a live card detecting the current browser's actual state.

8. Policy & Rollback Tool

   Three generators: a manifest snippet builder (name, colours, WCO toggle), a CSS migration converter from -webkit-app-region to window-drag with "emit both" / "modern only" / "legacy only" modes, and an analytics continuity checker showing how to keep pointer-event tracking alive inside drag regions.

why it shipped

Installed PWAs and Window Controls Overlay let sites paint their own title bar — but until now, the platform didn't have a way to say "the user dragging here should move the window". Authors hacked around it with synthetic pointermove handlers and window.moveTo, which only works in standalone windows and feels off compared to native. The window-drag property hands the drag intent to the platform: drag in a "drag" region, the OS moves the window at its native frame rate; drag in a "no-drag" region (the button strip), nothing window-y happens.

references

• ChromeStatus entry
• Window Controls Overlay spec