v150 · Window Management

Custom Titlebar

The full VDI pattern: a bespoke titlebar drawn in HTML with app-region: drag, window-control buttons marked app-region: no-drag and wired to window.minimize/maximize/restore(), and a CSS @media (display-state: maximized) rule that swaps the maximize and restore buttons with zero JavaScript.

Test the current experimental implementation in an installed desktop app with chrome://flags/#enable-desktop-pwas-additional-windowing-controls (or --enable-blink-features=DesktopPWAsAdditionalWindowingControls), real transient activation, and the window-management permission. ChromeStatus currently records no milestone. In a browser tab the controls attempt only exposed methods and report the result — dragging via app-region and the state-driven button swap require an applicable installed-app window.

Remote App — VDI session

This titlebar is your app's own HTML. The label area is a draggable region; the four buttons are not.

In an installed app, dragging the label moves the OS window (app-region: drag), and the maximize button becomes a restore button automatically when (display-state: maximized) matches.

Reported display-state: reading…

Preview the CSS button-swap

Click a window control above to invoke the real API.

<header class="titlebar">              /* app-region: drag  → moves the window */
  <div class="win-controls">         /* app-region: no-drag → clickable buttons */
    <button id="minimize-btn"></button>
    <button id="maximize-btn"></button>
    <button id="restore-btn"></button>
  </div>
</header>

#restore-btn { display: none; }
@media (display-state: maximized) {          /* pure-CSS toggle, no JS */
  #restore-btn  { display: block; }
  #maximize-btn { display: none; }
}

minimizeBtn.onclick = () => window.minimize();
maximizeBtn.onclick = () => window.maximize();
restoreBtn.onclick  = () => window.restore();

see also