Function requestPipWindow

packages/devtools/src/context/pip-context.tsx:44–131

(settings: string)

  }

  // Open new pipWindow
  const requestPipWindow = (settings: string) => {
    // We don't want to allow multiple requests.
    if (pipWindow() != null) {
      return
    }

    const pip = window.open('', 'TSDT-Devtools-Panel', `${settings},popup`)

    if (!pip) {
      throw new Error(
        'Failed to open popup. Please allow popups for this site to view the devtools in picture-in-picture mode.',
      )
    }

    if (import.meta.hot && typeof import.meta.hot.on === 'function') {
      import.meta.hot.on('vite:beforeUpdate', () => {
        localStorage.setItem('pip_open', 'false')
        closePipWindow()
      })
    }
    window.addEventListener('beforeunload', () => {
      localStorage.setItem('pip_open', 'false')
      closePipWindow()
    })
    // Remove existing styles
    pip.document.head.innerHTML = ''
    // Remove existing body
    pip.document.body.innerHTML = ''

    pip.document.title = 'TanStack Devtools'
    pip.document.body.style.margin = '0'

    // Detect when window is closed by user
    pip.addEventListener('pagehide', () => {
      localStorage.setItem('pip_open', 'false')
      closePipWindow()
    })

    // It is important to copy all parent window styles. Otherwise, there would be no CSS available at all
    // https://developer.chrome.com/docs/web-platform/document-picture-in-picture/#copy-style-sheets-to-the-picture-in-picture-window
    ;[...document.styleSheets].forEach((styleSheet) => {
      try {
        const cssRules = [...styleSheet.cssRules]
          .map((rule) => rule.cssText)
          .join('')
        const style = document.createElement('style')
        const style_node = styleSheet.ownerNode
        let style_id = ''

        if (style_node && 'id' in style_node) {
          style_id = style_node.id
        }

        if (style_id) {
          style.setAttribute('id', style_id)
        }
        style.textContent = cssRules