diff --git a/packages/frontend/editor-ui/src/Interface.ts b/packages/frontend/editor-ui/src/Interface.ts index fa34c859c7..c1c9e8cefe 100644 --- a/packages/frontend/editor-ui/src/Interface.ts +++ b/packages/frontend/editor-ui/src/Interface.ts @@ -121,16 +121,6 @@ declare global { getVariant: (name: string) => string | boolean | undefined; override: (name: string, value: string) => void; }; - // https://developer.mozilla.org/en-US/docs/Web/API/DocumentPictureInPicture - documentPictureInPicture?: { - window: Window | null; - requestWindow: (options?: { - width?: number; - height?: number; - preferInitialWindowPlacement?: boolean; - disallowReturnToOpener?: boolean; - }) => Promise; - }; Cypress: unknown; } } diff --git a/packages/frontend/editor-ui/src/components/RunDataJsonActions.vue b/packages/frontend/editor-ui/src/components/RunDataJsonActions.vue index 313a79d362..d13ce311df 100644 --- a/packages/frontend/editor-ui/src/components/RunDataJsonActions.vue +++ b/packages/frontend/editor-ui/src/components/RunDataJsonActions.vue @@ -9,7 +9,7 @@ import { useNDVStore } from '@/stores/ndv.store'; import { useNodeHelpers } from '@/composables/useNodeHelpers'; import { useToast } from '@/composables/useToast'; import { useI18n } from '@n8n/i18n'; -import { nonExistingJsonPath, PiPWindowSymbol } from '@/constants'; +import { nonExistingJsonPath, PopOutWindowKey } from '@/constants'; import { useClipboard } from '@/composables/useClipboard'; import { usePinnedData } from '@/composables/usePinnedData'; import { inject, computed, ref } from 'vue'; @@ -39,8 +39,8 @@ const props = withDefaults( }, ); -const pipWindow = inject(PiPWindowSymbol, ref()); -const isInPiPWindow = computed(() => pipWindow?.value !== undefined); +const popOutWindow = inject(PopOutWindowKey, ref()); +const isInPopOutWindow = computed(() => popOutWindow?.value !== undefined); const ndvStore = useNDVStore(); const workflowsStore = useWorkflowsStore(); @@ -195,7 +195,7 @@ function handleCopyClick(commandData: { command: string }) { v-else trigger="click" :teleported=" - !isInPiPWindow // disabling teleport ensures the menu is rendered in PiP window + !isInPopOutWindow // disabling teleport ensures the menu is rendered in pop-out window " @command="handleCopyClick" > diff --git a/packages/frontend/editor-ui/src/composables/useClipboard.ts b/packages/frontend/editor-ui/src/composables/useClipboard.ts index 309a91dd72..0a4a636458 100644 --- a/packages/frontend/editor-ui/src/composables/useClipboard.ts +++ b/packages/frontend/editor-ui/src/composables/useClipboard.ts @@ -1,6 +1,6 @@ import { inject, onBeforeUnmount, onMounted, ref } from 'vue'; import { useClipboard as useClipboardCore, useThrottleFn } from '@vueuse/core'; -import { PiPWindowSymbol } from '@/constants'; +import { PopOutWindowKey } from '@/constants'; type ClipboardEventFn = (data: string, event?: ClipboardEvent) => void; @@ -9,9 +9,9 @@ export function useClipboard({ }: { onPaste?: ClipboardEventFn; } = {}) { - const pipWindow = inject(PiPWindowSymbol, ref()); + const popOutWindow = inject(PopOutWindowKey, ref()); const { copy, copied, isSupported, text } = useClipboardCore({ - navigator: pipWindow?.value?.navigator ?? window.navigator, + navigator: popOutWindow?.value?.navigator ?? window.navigator, legacy: true, }); diff --git a/packages/frontend/editor-ui/src/composables/useDocumentTitle.ts b/packages/frontend/editor-ui/src/composables/useDocumentTitle.ts index ae561ee101..62f8bf1526 100644 --- a/packages/frontend/editor-ui/src/composables/useDocumentTitle.ts +++ b/packages/frontend/editor-ui/src/composables/useDocumentTitle.ts @@ -1,9 +1,10 @@ import { useSettingsStore } from '@/stores/settings.store'; +import type { Ref } from 'vue'; const DEFAULT_TITLE = 'n8n'; const DEFAULT_TAGLINE = 'Workflow Automation'; -export function useDocumentTitle() { +export function useDocumentTitle(windowRef?: Ref) { const settingsStore = useSettingsStore(); const { releaseChannel } = settingsStore.settings; const suffix = @@ -13,7 +14,7 @@ export function useDocumentTitle() { const set = (title: string) => { const sections = [title || DEFAULT_TAGLINE, suffix]; - document.title = sections.join(' - '); + (windowRef?.value?.document ?? document).title = sections.join(' - '); }; const reset = () => { diff --git a/packages/frontend/editor-ui/src/composables/useKeybindings.ts b/packages/frontend/editor-ui/src/composables/useKeybindings.ts index ed5d3122f3..57a3a4c2d6 100644 --- a/packages/frontend/editor-ui/src/composables/useKeybindings.ts +++ b/packages/frontend/editor-ui/src/composables/useKeybindings.ts @@ -1,4 +1,4 @@ -import { PiPWindowSymbol } from '@/constants'; +import { PopOutWindowKey } from '@/constants'; import { useDeviceSupport } from '@n8n/composables/useDeviceSupport'; import { useActiveElement, useEventListener } from '@vueuse/core'; import type { MaybeRefOrGetter } from 'vue'; @@ -30,8 +30,8 @@ export const useKeybindings = ( disabled: MaybeRefOrGetter; }, ) => { - const pipWindow = inject(PiPWindowSymbol, ref()); - const activeElement = useActiveElement({ window: pipWindow?.value }); + const popOutWindow = inject(PopOutWindowKey, ref()); + const activeElement = useActiveElement({ window: popOutWindow?.value }); const { isCtrlKeyPressed } = useDeviceSupport(); const isDisabled = computed(() => toValue(options?.disabled)); @@ -150,5 +150,5 @@ export const useKeybindings = ( } } - useEventListener(pipWindow?.value?.document ?? document, 'keydown', onKeyDown); + useEventListener(popOutWindow?.value?.document ?? document, 'keydown', onKeyDown); }; diff --git a/packages/frontend/editor-ui/src/constants.ts b/packages/frontend/editor-ui/src/constants.ts index c78d947837..89e09d0fd7 100644 --- a/packages/frontend/editor-ui/src/constants.ts +++ b/packages/frontend/editor-ui/src/constants.ts @@ -964,10 +964,10 @@ export const CanvasKey = 'canvas' as unknown as InjectionKey; export const CanvasNodeHandleKey = 'canvasNodeHandle' as unknown as InjectionKey; -export const PiPWindowSymbol = 'PiPWindow' as unknown as InjectionKey>; -export const ExpressionLocalResolveContextSymbol = Symbol( - 'ExpressionLocalResolveContext', -) as InjectionKey>; +export const PopOutWindowKey: InjectionKey> = Symbol('PopOutWindow'); +export const ExpressionLocalResolveContextSymbol: InjectionKey< + ComputedRef +> = Symbol('ExpressionLocalResolveContext'); export const APP_MODALS_ELEMENT_ID = 'app-modals'; export const CODEMIRROR_TOOLTIP_CONTAINER_ELEMENT_ID = 'cm-tooltip-container'; diff --git a/packages/frontend/editor-ui/src/features/logs/components/LogsPanel.vue b/packages/frontend/editor-ui/src/features/logs/components/LogsPanel.vue index a22c160ed1..d75224ad8d 100644 --- a/packages/frontend/editor-ui/src/features/logs/components/LogsPanel.vue +++ b/packages/frontend/editor-ui/src/features/logs/components/LogsPanel.vue @@ -16,16 +16,19 @@ import { useLogsStore } from '@/stores/logs.store'; import { useLogsPanelLayout } from '@/features/logs/composables/useLogsPanelLayout'; import { type KeyMap } from '@/composables/useKeybindings'; import LogsViewKeyboardEventListener from './LogsViewKeyboardEventListener.vue'; +import { useWorkflowsStore } from '@/stores/workflows.store'; const props = withDefaults(defineProps<{ isReadOnly?: boolean }>(), { isReadOnly: false }); const container = useTemplateRef('container'); const logsContainer = useTemplateRef('logsContainer'); -const pipContainer = useTemplateRef('pipContainer'); -const pipContent = useTemplateRef('pipContent'); +const popOutContainer = useTemplateRef('popOutContainer'); +const popOutContent = useTemplateRef('popOutContent'); const logsStore = useLogsStore(); const ndvStore = useNDVStore(); +const workflowsStore = useWorkflowsStore(); +const workflowName = computed(() => workflowsStore.workflow.name); const { height, @@ -36,7 +39,7 @@ const { isPoppedOut, isCollapsingDetailsPanel, isOverviewPanelFullWidth, - pipWindow, + popOutWindow, onResize, onResizeEnd, onToggleOpen, @@ -45,7 +48,7 @@ const { onChatPanelResizeEnd, onOverviewPanelResize, onOverviewPanelResizeEnd, -} = useLogsPanelLayout(pipContainer, pipContent, container, logsContainer); +} = useLogsPanelLayout(workflowName, popOutContainer, popOutContent, container, logsContainer); const { currentSessionId, @@ -136,20 +139,20 @@ function handleChangeOutputTableColumnCollapsing(columnName: string | null) {