Introduction & Context

• Speaker discusses web popup history and spam issues
• Audience demographics likely remember popup era
• Popups had good concepts: separate window management, programmatic movement
• Current solutions use "crazy hacks like popover JS" and browser layers
• Google proposing "companion windows" to capture popup magic properly

Companion Windows Overview

• Similar to popups but render within tab/top-level window
• Auto-close when parent closed or navigated to different origin
• Multiple presentation modes:
  • Docked to window edge
  • Modal on bottom of content area
  • Float above/around content
  • Attach to document elements
• Don't participate in main browsing history (back button won't navigate)
• Can't have nested companion windows (no tooltip in tooltip)
• Multiple companion windows allowed per main page
• Persist during same-origin navigation
• Detached elements change presentation style (float/dock)
• Both user and JavaScript can manipulate

Use Cases & Examples

• YouTube-style video players sticking to bottom right
• Live media streams during site navigation
• Customer support chat persistence
• Twitch streaming: navigate site while maintaining video player
• Live news videos showing during site browsing
• SPA functionality for multi-page apps

Technical Requirements & Goals

• Allow script/DOM to span pages within site
• Keep activities (media playback) seamless during navigation
• Fluid window changes based on context (dark/light mode)
• Build on existing security/privacy expectations
• Handle accessibility and localization
• Lightweight for easy adoption before widespread browser support
• Enable polyfill/DIY implementation in interim

Non-Goals (What It Won't Do)

• Won't displace existing tools: popups, picture-in-picture, iframes
• Won't replace navigation APIs: service workers, pre-loading, view transitions
• Won't obsolete media APIs: media session, media source
• Won't obsolete single-page apps
• Won't support every imaginable use case (focus on solving some well)

Technical Implementation

• Each top-level traversable has companion windows collection
• Similar to auxiliary popup windows (not confined to single document lifetime)
• Similar to frames (part of user's browsing experience within content suite)
• Key difference from popups: attached to browser origin, not separate session
• CSS-oriented presentation styles: inline, docked bottom syntax
• JavaScript positioning: anchored: true, reposition() method
• Smart re-embedding when navigating back to original pages

Presentation Modes Detail

• Inline: embedded within document, can pop out on navigation
• Docked: attached to window edges
• Floating: hover above content
• Anchored: attached to specific document elements
• User agent ensures suitable presentation if unstyled

Considered Alternatives

• Document Picture-in-Picture:
  • Chrome doesn't have, Edge does
  • Strongly linked to creating document
  • Closes when document navigates (major limitation)
  • Renders outside content area/browser window
  • Requires platform support (not universal, especially iOS/Linux)
  • Good for consuming media outside browser entirely
• Companion windows more universally supportable across platforms

Example Scenario

• National News app with embedded player in companion window
• Initially inline/anchored, becomes floating/docked on scroll
• Continues running when user clicks to article
• Can re-embed in new page if styled appropriately
• Maintains state during navigation (unlike some SPA chat implementations)