diff --git a/packages/core/src/client/webcomponents/components/DockStandalone.ts b/packages/core/src/client/webcomponents/components/DockStandalone.ts index 602bd9c3..ee9f3549 100644 --- a/packages/core/src/client/webcomponents/components/DockStandalone.ts +++ b/packages/core/src/client/webcomponents/components/DockStandalone.ts @@ -4,20 +4,11 @@ import { defineCustomElement } from 'vue' import css from '../.generated/css' import Component from './DockStandalone.vue' -const forcedColorModeCss = ` -:host([data-vite-devtools-color-mode='dark']) { - color-scheme: dark; -} -:host([data-vite-devtools-color-mode='light']) { - color-scheme: light; -} -` - export const DockStandalone = defineCustomElement( Component, { shadowRoot: true, - styles: [css, forcedColorModeCss], + styles: [css], }, ) as VueElementConstructor<{ context: DocksContext diff --git a/packages/core/src/client/webcomponents/components/DockStandalone.vue b/packages/core/src/client/webcomponents/components/DockStandalone.vue index daae672a..787922e4 100644 --- a/packages/core/src/client/webcomponents/components/DockStandalone.vue +++ b/packages/core/src/client/webcomponents/components/DockStandalone.vue @@ -31,7 +31,7 @@ watch( ) const groupedEntries = computed(() => { - if (isDockPopupEntryVisible()) + if (isDockPopupEntryVisible('standalone')) return context.docks.groupedEntries return filterPopupDockEntry(context.docks.groupedEntries) diff --git a/packages/core/src/client/webcomponents/state/__tests__/popup.test.ts b/packages/core/src/client/webcomponents/state/__tests__/popup.test.ts index 1a55cae5..f949fad6 100644 --- a/packages/core/src/client/webcomponents/state/__tests__/popup.test.ts +++ b/packages/core/src/client/webcomponents/state/__tests__/popup.test.ts @@ -1,25 +1,23 @@ import type { DocksContext } from '@vitejs/devtools-kit/client' import { afterAll, beforeEach, describe, expect, it, vi } from 'vitest' import { setDocksOverflowPanel, useDocksOverflowPanel } from '../floating-tooltip' -import { closeDockPopup, filterPopupDockEntry, isDockPopupEntryVisible, isDockPopupSupported, isRunningInDockPopupWindow, openDockPopup, setDockStandaloneLoaderForTest, useDockPopupWindow, useIsDockPopupOpen } from '../popup' +import { closeDockPopup, filterPopupDockEntry, isDockPopupEntryVisible, isDockPopupSupported, openDockPopup, setDockStandaloneLoaderForTest, useDockPopupWindow, useIsDockPopupOpen } from '../popup' const { DockStandaloneElementMock, dockStandaloneCtorCalls, dockElementRemoveMock, - dockElementSetAttributeMock, } = vi.hoisted(() => { const dockElementRemoveMock = vi.fn() - const dockElementSetAttributeMock = vi.fn() const dockStandaloneCtorCalls: Array<{ context: DocksContext }> = [] class DockStandaloneElementMock { context: DocksContext remove: () => void - setAttribute: (name: string, value: string) => void + style: Record constructor({ context }: { context: DocksContext }) { this.context = context this.remove = dockElementRemoveMock - this.setAttribute = dockElementSetAttributeMock + this.style = {} dockStandaloneCtorCalls.push({ context }) } } @@ -27,7 +25,6 @@ const { DockStandaloneElementMock: DockStandaloneElementMock as unknown as new (props: { context: DocksContext }) => HTMLElement, dockStandaloneCtorCalls, dockElementRemoveMock, - dockElementSetAttributeMock, } }) @@ -135,7 +132,6 @@ describe('dock popup state', () => { setDockStandaloneLoaderForTest(async () => DockStandaloneElementMock) dockStandaloneCtorCalls.length = 0 dockElementRemoveMock.mockClear() - dockElementSetAttributeMock.mockClear() ;(globalThis as { window?: any }).window = { innerWidth: 1200, innerHeight: 800, @@ -149,7 +145,7 @@ describe('dock popup state', () => { it('returns null when the API is unavailable', async () => { expect(isDockPopupSupported()).toBe(false) - expect(isDockPopupEntryVisible()).toBe(false) + expect(isDockPopupEntryVisible('embedded')).toBe(false) const popup = await openDockPopup(createMockContext()) expect(popup).toBeNull() expect(useIsDockPopupOpen().value).toBe(false) @@ -160,21 +156,15 @@ describe('dock popup state', () => { const requestWindow = vi.fn().mockResolvedValue(popup) ;(window as Window & { documentPictureInPicture?: unknown }).documentPictureInPicture = { requestWindow } - expect(isDockPopupEntryVisible()).toBe(true) + expect(isDockPopupEntryVisible('embedded')).toBe(true) await openDockPopup(createMockContext()) - expect(isDockPopupEntryVisible()).toBe(false) + expect(isDockPopupEntryVisible('embedded')).toBe(false) }) it('hides popup entry when running inside popup window', () => { ;(window as Window & { documentPictureInPicture?: unknown }).documentPictureInPicture = { requestWindow: vi.fn() } - ;(window as Window & { document?: unknown }).document = { - documentElement: { - hasAttribute: vi.fn((name: string) => name === 'data-vite-devtools-popup-window'), - }, - } as any - expect(isRunningInDockPopupWindow()).toBe(true) - expect(isDockPopupEntryVisible()).toBe(false) + expect(isDockPopupEntryVisible('standalone')).toBe(false) }) it('filters popup entry from grouped entries', () => { @@ -220,7 +210,6 @@ describe('dock popup state', () => { expect(appRoot).toBeTruthy() expect(appRoot.id).toBe('vite-devtools-popup-root') expect(appRoot.appended).toHaveLength(1) - expect(dockElementSetAttributeMock).toHaveBeenCalledWith('data-vite-devtools-color-mode', 'light') }) it('hides dock overflow panel when opening popup', async () => { diff --git a/packages/core/src/client/webcomponents/state/context.ts b/packages/core/src/client/webcomponents/state/context.ts index 0d5181af..e085a50c 100644 --- a/packages/core/src/client/webcomponents/state/context.ts +++ b/packages/core/src/client/webcomponents/state/context.ts @@ -65,7 +65,7 @@ export async function createDocksContext( // If the action is in a popup, delegate to the main frame if (entry.type === 'action') { - const delegated = await triggerMainFrameDockAction(entry.id) + const delegated = await triggerMainFrameDockAction(clientType, entry.id) if (delegated != null) return false } @@ -135,7 +135,7 @@ export async function createDocksContext( clientType, }) - registerMainFrameDockActionHandler(async (id) => { + registerMainFrameDockActionHandler(clientType, async (id) => { const entry = dockEntries.value.find(e => e.id === id) if (!entry || entry.type !== 'action') return false diff --git a/packages/core/src/client/webcomponents/state/popup.ts b/packages/core/src/client/webcomponents/state/popup.ts index 877bb9f0..39501e2a 100644 --- a/packages/core/src/client/webcomponents/state/popup.ts +++ b/packages/core/src/client/webcomponents/state/popup.ts @@ -19,7 +19,6 @@ const PANEL_MAX_SIZE = 100 const POPUP_MIN_WIDTH = 320 const POPUP_MIN_HEIGHT = 240 const POPUP_DOCK_ID = '~popup' -const POPUP_WINDOW_ATTRIBUTE = 'data-vite-devtools-popup-window' const MAIN_FRAME_ACTION_HANDLER_KEY = '__VITE_DEVTOOLS_TRIGGER_DOCK_ACTION__' const popupWindow = shallowRef(null) @@ -81,9 +80,7 @@ function resolveColorMode(): ColorMode { } function applyPopupColorMode(popup: Window, mode: ColorMode) { - popup.document.documentElement?.setAttribute('data-vite-devtools-color-mode', mode) popup.document.documentElement?.style.setProperty('color-scheme', mode) - popupDockElement?.setAttribute('data-vite-devtools-color-mode', mode) } function setupPopupColorModeSync(popup: Window): () => void { @@ -177,7 +174,6 @@ async function mountStandaloneApp(context: DocksContext, popup: Window) { ].join('\n') popup.document.title = 'Vite DevTools' - popup.document.documentElement?.setAttribute(POPUP_WINDOW_ATTRIBUTE, '') popup.document.head?.appendChild(baseStyle) popup.document.body.textContent = '' @@ -194,30 +190,26 @@ export function isDockPopupSupported(): boolean { return !!getDocumentPictureInPicture()?.requestWindow } -export function isRunningInDockPopupWindow(): boolean { - if (typeof window === 'undefined') - return false - return !!window.document?.documentElement?.hasAttribute?.(POPUP_WINDOW_ATTRIBUTE) -} - export function registerMainFrameDockActionHandler( + clientType: 'embedded' | 'standalone', handler: MainFrameDockActionHandler, ) { if (typeof window === 'undefined') { return } - if (isRunningInDockPopupWindow()) { + if (clientType === 'standalone') { return } ;(window as Window & { [MAIN_FRAME_ACTION_HANDLER_KEY]?: MainFrameDockActionHandler })[MAIN_FRAME_ACTION_HANDLER_KEY] = handler } export async function triggerMainFrameDockAction( + clientType: 'embedded' | 'standalone', entryId: string, ): Promise { if (typeof window === 'undefined') return undefined - if (!isRunningInDockPopupWindow()) + if (clientType !== 'standalone') return undefined try { @@ -234,8 +226,8 @@ export async function triggerMainFrameDockAction( } } -export function isDockPopupEntryVisible(): boolean { - return isDockPopupSupported() && !isPopupOpen.value && !isRunningInDockPopupWindow() +export function isDockPopupEntryVisible(clientType: 'embedded' | 'standalone'): boolean { + return isDockPopupSupported() && !isPopupOpen.value && clientType !== 'standalone' } export function filterPopupDockEntry(