From c9296bf073fc6158d8e4da7d3cd1078df9eec3d2 Mon Sep 17 00:00:00 2001 From: userquin Date: Sat, 1 Jun 2024 23:14:48 +0200 Subject: [PATCH 1/5] feat(browser): add browser iframe mouse interaction --- packages/browser/src/client/orchestrator.ts | 2 +- .../ui/client/components/BrowserIframe.vue | 40 ++++++++++++++++--- .../ui/client/composables/client/resizing.ts | 24 +++++++++++ packages/ui/client/pages/index.vue | 8 +++- 4 files changed, 65 insertions(+), 9 deletions(-) create mode 100644 packages/ui/client/composables/client/resizing.ts diff --git a/packages/browser/src/client/orchestrator.ts b/packages/browser/src/client/orchestrator.ts index 92f2a0c840f2..8f6b60ccec26 100644 --- a/packages/browser/src/client/orchestrator.ts +++ b/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 = 'testing' container.appendChild(iframe) return iframe } diff --git a/packages/ui/client/components/BrowserIframe.vue b/packages/ui/client/components/BrowserIframe.vue index a509a9b70e0f..709d0f37a842 100644 --- a/packages/ui/client/components/BrowserIframe.vue +++ b/packages/ui/client/components/BrowserIframe.vue @@ -1,22 +1,27 @@ + + diff --git a/packages/ui/client/composables/client/resizing.ts b/packages/ui/client/composables/client/resizing.ts new file mode 100644 index 000000000000..44d2576b6ed9 --- /dev/null +++ b/packages/ui/client/composables/client/resizing.ts @@ -0,0 +1,24 @@ +export type ResizingListener = (isResizing: boolean) => void + +const resizingSymbol = Symbol.for('resizing') + +export function registerResizingListener(listener: ResizingListener) { + inject<(listener: ResizingListener) => void>(resizingSymbol)?.(listener) +} + +export function provideResizing() { + const listeners = new Set() + + function addResizeListener(listener: ResizingListener) { + listeners.add(listener) + } + + function notifyResizing(isResizing: boolean) { + for (const listener of listeners) + listener(isResizing) + } + + provide(resizingSymbol, addResizeListener) + + return { notifyResizing } +} diff --git a/packages/ui/client/pages/index.vue b/packages/ui/client/pages/index.vue index bfa4f38d5ce9..e9202ea4d399 100644 --- a/packages/ui/client/pages/index.vue +++ b/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/client/resizing' +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() { - + From d8289fd682f4623c7e891b086727ccdee8a9f31c Mon Sep 17 00:00:00 2001 From: userquin Date: Sat, 1 Jun 2024 23:28:22 +0200 Subject: [PATCH 2/5] chore: update classes and styles --- packages/browser/src/client/orchestrator.ts | 2 +- packages/ui/client/components/BrowserIframe.vue | 14 +------------- 2 files changed, 2 insertions(+), 14 deletions(-) diff --git a/packages/browser/src/client/orchestrator.ts b/packages/browser/src/client/orchestrator.ts index 8f6b60ccec26..d20afa4ae22d 100644 --- a/packages/browser/src/client/orchestrator.ts +++ b/packages/browser/src/client/orchestrator.ts @@ -48,7 +48,7 @@ function createIframe(container: HTMLDivElement, file: string) { iframe.setAttribute('allow', 'clipboard-write;') iframes.set(file, iframe) - container.className = 'testing' + container.className = 'scrolls' container.appendChild(iframe) return iframe } diff --git a/packages/ui/client/components/BrowserIframe.vue b/packages/ui/client/components/BrowserIframe.vue index 709d0f37a842..88aa8439e87f 100644 --- a/packages/ui/client/components/BrowserIframe.vue +++ b/packages/ui/client/components/BrowserIframe.vue @@ -101,21 +101,9 @@ onMounted(() => { />
-
+
Select a test to run
- - From 690d88c95d204d839424a177e38b730ae4fcc08e Mon Sep 17 00:00:00 2001 From: userquin Date: Sat, 1 Jun 2024 23:42:29 +0200 Subject: [PATCH 3/5] chore: refactor browser ui logic --- packages/ui/client/auto-imports.d.ts | 4 +++- packages/ui/client/components/BrowserIframe.vue | 3 +-- .../composables/{client/resizing.ts => browser.ts} | 12 ++++++++++++ packages/ui/client/composables/navigation.ts | 10 ---------- packages/ui/client/pages/index.vue | 2 +- 5 files changed, 17 insertions(+), 14 deletions(-) rename packages/ui/client/composables/{client/resizing.ts => browser.ts} (56%) diff --git a/packages/ui/client/auto-imports.d.ts b/packages/ui/client/auto-imports.d.ts index 594e5ba5b5b8..1ceae12acd8d 100644 --- a/packages/ui/client/auto-imports.d.ts +++ b/packages/ui/client/auto-imports.d.ts @@ -96,6 +96,7 @@ 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'] @@ -103,13 +104,14 @@ declare global { 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'] diff --git a/packages/ui/client/components/BrowserIframe.vue b/packages/ui/client/components/BrowserIframe.vue index 88aa8439e87f..c8780879a2ed 100644 --- a/packages/ui/client/components/BrowserIframe.vue +++ b/packages/ui/client/components/BrowserIframe.vue @@ -1,6 +1,5 @@