feat(browser): add browser iframe mouse interaction

packages/browser/src/client/orchestrator.ts

@@ -44,11 +44,11 @@ function createIframe(container: HTMLDivElement, file: string) {
 
   iframe.style.display = 'block'
   iframe.style.border = 'none'
-  iframe.style.pointerEvents = 'none'
   iframe.setAttribute('allowfullscreen', 'true')
   iframe.setAttribute('allow', 'clipboard-write;')
 
   iframes.set(file, iframe)
+  container.className = 'scrolls'
   container.appendChild(iframe)
   return iframe
 }

packages/ui/client/auto-imports.d.ts

@@ -96,20 +96,22 @@ declare global {
   const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
   const provide: typeof import('vue')['provide']
   const provideLocal: typeof import('@vueuse/core')['provideLocal']
+  const provideResizing: typeof import('./composables/browser')['provideResizing']
   const reactify: typeof import('@vueuse/core')['reactify']
   const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
   const reactive: typeof import('vue')['reactive']
   const reactiveComputed: typeof import('@vueuse/core')['reactiveComputed']
   const reactiveOmit: typeof import('@vueuse/core')['reactiveOmit']
   const reactivePick: typeof import('@vueuse/core')['reactivePick']
   const readonly: typeof import('vue')['readonly']
-  const recalculateDetailPanels: typeof import('./composables/navigation')['recalculateDetailPanels']
+  const recalculateDetailPanels: typeof import('./composables/browser')['recalculateDetailPanels']
   const ref: typeof import('vue')['ref']
   const refAutoReset: typeof import('@vueuse/core')['refAutoReset']
   const refDebounced: typeof import('@vueuse/core')['refDebounced']
   const refDefault: typeof import('@vueuse/core')['refDefault']
   const refThrottled: typeof import('@vueuse/core')['refThrottled']
   const refWithControl: typeof import('@vueuse/core')['refWithControl']
+  const registerResizingListener: typeof import('./composables/browser')['registerResizingListener']
   const resolveComponent: typeof import('vue')['resolveComponent']
   const resolveRef: typeof import('@vueuse/core')['resolveRef']
   const resolveUnref: typeof import('@vueuse/core')['resolveUnref']

packages/ui/client/components/BrowserIframe.vue

@@ -1,22 +1,26 @@
 <script setup lang="ts">
-const viewport = ref('custom')
-import { recalculateDetailPanels } from '~/composables/navigation'
+import { recalculateDetailPanels, registerResizingListener } from '~/composables/browser'
 
-const sizes = {
+type ViewportSize = 'small-mobile' | 'large-mobile' | 'tablet' | 'custom'
+
+const sizes: Record<ViewportSize, [width: string, height: string]> = {
   'small-mobile': ['320px', '568px'],
   'large-mobile': ['414px', '896px'],
   tablet: ['834px', '1112px'],
   custom: ['100%', '100%'],
 }
 
-async function changeViewport(name: string) {
+const testerRef = ref<HTMLDivElement>()
+const viewport = ref<ViewportSize>('custom')
+
+async function changeViewport(name: ViewportSize) {
   if (viewport.value === name) {
     viewport.value = 'custom'
   } else {
     viewport.value = name
   }
 
-  const iframe = document.querySelector('#tester-ui iframe[data-vitest]')
+  const iframe = document.querySelector<HTMLIFrameElement>('#tester-ui iframe[data-vitest]')
   if (!iframe) {
     console.warn('Iframe not found')
     return
@@ -31,6 +35,17 @@ async function changeViewport(name: string) {
 
   recalculateDetailPanels()
 }
+
+function onResizing(isResizing: boolean) {
+  const tester = testerRef.value
+  if (!tester)
+    return
+
+  tester.style.pointerEvents = isResizing ? 'none' : ''
+}
+onMounted(() => {
+  registerResizingListener(onResizing)
+})
 </script>
 
 <template>
@@ -84,8 +99,8 @@ async function changeViewport(name: string) {
         @click="changeViewport('tablet')"
       />
     </div>
-    <div flex-auto overflow-auto>
-      <div id="tester-ui" class="flex h-full justify-center items-center font-light op70" style="overflow: auto; width: 100%; height: 100%">
+    <div flex-auto class="scrolls">
+      <div id="tester-ui" ref="testerRef" class="flex h-full justify-center items-center font-light op70" style="overflow: auto; width: 100%; height: 100%">
         Select a test to run
       </div>
     </div>

packages/ui/client/composables/browser.ts

@@ -0,0 +1,36 @@
+import { detailSizes } from '~/composables/navigation'
+
+export type ResizingListener = (isResizing: boolean) => void
+
+const resizingSymbol = Symbol.for('resizing')
+
+export function recalculateDetailPanels() {
+  const iframe = document.querySelector('#tester-ui iframe[data-vitest]')!
+  const panel = document.querySelector('#details-splitpanes')!
+  const panelWidth = panel.clientWidth
+  const iframeWidth = iframe.clientWidth
+  const iframePercent = Math.min((iframeWidth / panelWidth) * 100, 95)
+  const detailsPercent = 100 - iframePercent
+  detailSizes.value = [iframePercent, detailsPercent]
+}
+
+export function registerResizingListener(listener: ResizingListener) {
+  inject<(listener: ResizingListener) => void>(resizingSymbol)?.(listener)
+}
+
+export function provideResizing() {
+  const listeners = new Set<ResizingListener>()
+
+  function addResizeListener(listener: ResizingListener) {
+    listeners.add(listener)
+  }
+
+  function notifyResizing(isResizing: boolean) {
+    for (const listener of listeners)
+      listener(isResizing)
+  }
+
+  provide(resizingSymbol, addResizeListener)
+
+  return { notifyResizing }
+}

packages/ui/client/composables/navigation.ts

@@ -16,16 +16,6 @@ export const detailSizes = useLocalStorage<[left: number, right: number]>('vites
   initOnMounted: true,
 })
 
-export function recalculateDetailPanels() {
-  const iframe = document.querySelector('#tester-ui iframe[data-vitest]')!
-  const panel = document.querySelector('#details-splitpanes')!
-  const panelWidth = panel.clientWidth
-  const iframeWidth = iframe.clientWidth
-  const iframePercent = Math.min((iframeWidth / panelWidth) * 100, 95)
-  const detailsPercent = 100 - iframePercent
-  detailSizes.value = [iframePercent, detailsPercent]
-}
-
 // @ts-expect-error not typed global
 window.__vitest_ui_api__ = {
   get currentModule() {

packages/ui/client/pages/index.vue

@@ -2,9 +2,12 @@
 // @ts-expect-error missing types
 import { Pane, Splitpanes } from 'splitpanes'
 import { browserState } from '~/composables/client';
-import { coverageUrl, coverageVisible, initializeNavigation, detailSizes } from '../composables/navigation'
+import { coverageUrl, coverageVisible, initializeNavigation, detailSizes } from '~/composables/navigation'
+import { provideResizing } from '~/composables/browser'
 
+const { notifyResizing } = provideResizing()
 const dashboardVisible = initializeNavigation()
+
 const mainSizes = useLocalStorage<[left: number, right: number]>('vitest-ui_splitpanes-mainSizes', [33, 67], {
   initOnMounted: true,
 })
@@ -18,6 +21,7 @@ const onModuleResized = useDebounceFn((event: { size: number }[]) => {
   event.forEach((e, i) => {
     detailSizes.value[i] = e.size
   })
+  notifyResizing(false)
 }, 0)
 
 function resizeMain() {
@@ -41,7 +45,7 @@ function resizeMain() {
           <Coverage v-else-if="coverageVisible" key="coverage" :src="coverageUrl" />
           <FileDetails v-else />
         </transition>
-        <Splitpanes v-else key="detail" id="details-splitpanes" @resized="onModuleResized">
+        <Splitpanes v-else key="detail" id="details-splitpanes" @resize="notifyResizing(true)" @resized="onModuleResized">
           <Pane :size="detailSizes[0]">
             <BrowserIframe v-once />
           </Pane>