Function MainPanel

packages/devtools/src/components/main-panel.tsx:13–50

(props: {
  isOpen: Accessor<boolean>
  children: JSX.Element
  isResizing: Accessor<boolean>
})

import type { Accessor, JSX } from 'solid-js'

export const MainPanel = (props: {
  isOpen: Accessor<boolean>
  children: JSX.Element
  isResizing: Accessor<boolean>
  isCollapsed: Accessor<boolean>
  hasSubheader: Accessor<boolean>
}) => {
  const styles = createStyles()
  const { height } = createHeight()
  const { settings } = createDevtoolsSettings()
  const pip = createPiPWindow()
  const panelWindow = () =>
    pip().pipWindow ?? (typeof window === 'undefined' ? null : window)
  const readClientWidth = () => {
    const targetWindow = panelWindow()
    if (!targetWindow) return 0
    return (
      targetWindow.document.documentElement.clientWidth ||
      targetWindow.innerWidth
    )
  }
  const [clientWidth, setClientWidth] = createSignal(readClientWidth())

  createEffect(() => {
    const targetWindow = panelWindow()
    if (!targetWindow) return
    const targetRoot = targetWindow.document.documentElement
    const syncClientWidth = () => {
      setClientWidth(targetRoot.clientWidth || targetWindow.innerWidth)
    }
    syncClientWidth()
    targetWindow.addEventListener('resize', syncClientWidth)
    const ResizeObserverConstructor =
      (targetWindow as Window & { ResizeObserver?: typeof ResizeObserver })
        .ResizeObserver ??
      (globalThis as unknown as { ResizeObserver?: typeof ResizeObserver })
        .ResizeObserver
    const resizeObserver = ResizeObserverConstructor
      ? new ResizeObserverConstructor(syncClientWidth)
      : null
    resizeObserver?.observe(targetRoot)