From 373238298e5bb397c8638b7601350472f9aa1051 Mon Sep 17 00:00:00 2001 From: Princesseuh <3019731+Princesseuh@users.noreply.github.com> Date: Wed, 8 Nov 2023 22:56:35 +0100 Subject: [PATCH 1/7] feat: implement window and icon --- packages/astro/src/@types/astro.ts | 2 + .../runtime/client/dev-overlay/entrypoint.ts | 9 +++- .../src/runtime/client/dev-overlay/overlay.ts | 17 +++++--- .../client/dev-overlay/plugins/astro.ts | 42 ++++-------------- .../client/dev-overlay/plugins/settings.ts | 25 +++++++++++ .../dev-overlay/plugins/utils/window.ts | 43 +++++++++++++++++++ .../client/dev-overlay/ui-library/toggle.ts | 16 +++++++ .../client/dev-overlay/ui-library/window.ts | 4 +- 8 files changed, 116 insertions(+), 42 deletions(-) create mode 100644 packages/astro/src/runtime/client/dev-overlay/plugins/settings.ts create mode 100644 packages/astro/src/runtime/client/dev-overlay/plugins/utils/window.ts create mode 100644 packages/astro/src/runtime/client/dev-overlay/ui-library/toggle.ts diff --git a/packages/astro/src/@types/astro.ts b/packages/astro/src/@types/astro.ts index dfeb7ee80f68..0c0bd35d5998 100644 --- a/packages/astro/src/@types/astro.ts +++ b/packages/astro/src/@types/astro.ts @@ -24,6 +24,7 @@ import type { AstroIntegrationLogger, Logger, LoggerLevel } from '../core/logger import type { AstroDevOverlay, DevOverlayCanvas } from '../runtime/client/dev-overlay/overlay.js'; import type { DevOverlayHighlight } from '../runtime/client/dev-overlay/ui-library/highlight.js'; import type { Icon } from '../runtime/client/dev-overlay/ui-library/icons.js'; +import type { DevOverlayToggle } from '../runtime/client/dev-overlay/ui-library/toggle.js'; import type { DevOverlayTooltip } from '../runtime/client/dev-overlay/ui-library/tooltip.js'; import type { DevOverlayWindow } from '../runtime/client/dev-overlay/ui-library/window.js'; import type { AstroComponentFactory, AstroComponentInstance } from '../runtime/server/index.js'; @@ -2335,5 +2336,6 @@ declare global { 'astro-dev-overlay-plugin-canvas': DevOverlayCanvas; 'astro-dev-overlay-tooltip': DevOverlayTooltip; 'astro-dev-overlay-highlight': DevOverlayHighlight; + 'astro-dev-overlay-toggle': DevOverlayToggle; } } diff --git a/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts b/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts index 7336f9d06673..55d01a0640c4 100644 --- a/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts +++ b/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts @@ -9,22 +9,26 @@ document.addEventListener('DOMContentLoaded', async () => { { default: astroDevToolPlugin }, { default: astroAuditPlugin }, { default: astroXrayPlugin }, + { default: astroSettingsPlugin }, { AstroDevOverlay, DevOverlayCanvas }, { DevOverlayCard }, { DevOverlayHighlight }, { DevOverlayTooltip }, { DevOverlayWindow }, + { DevOverlayToggle }, ] = await Promise.all([ // @ts-expect-error import('astro:dev-overlay'), import('./plugins/astro.js'), import('./plugins/audit.js'), import('./plugins/xray.js'), + import('./plugins/settings.js'), import('./overlay.js'), import('./ui-library/card.js'), import('./ui-library/highlight.js'), import('./ui-library/tooltip.js'), import('./ui-library/window.js'), + import('./ui-library/toggle.js'), ]); // Register custom elements @@ -34,6 +38,7 @@ document.addEventListener('DOMContentLoaded', async () => { customElements.define('astro-dev-overlay-tooltip', DevOverlayTooltip); customElements.define('astro-dev-overlay-highlight', DevOverlayHighlight); customElements.define('astro-dev-overlay-card', DevOverlayCard); + customElements.define('astro-dev-overlay-toggle', DevOverlayToggle); overlay = document.createElement('astro-dev-overlay'); @@ -77,8 +82,8 @@ document.addEventListener('DOMContentLoaded', async () => { const customPluginsDefinitions = (await loadDevOverlayPlugins()) as DevOverlayPluginDefinition[]; const plugins: DevOverlayPlugin[] = [ - ...[astroDevToolPlugin, astroXrayPlugin, astroAuditPlugin].map((pluginDef) => - preparePlugin(pluginDef, true) + ...[astroDevToolPlugin, astroXrayPlugin, astroAuditPlugin, astroSettingsPlugin].map( + (pluginDef) => preparePlugin(pluginDef, true) ), ...customPluginsDefinitions.map((pluginDef) => preparePlugin(pluginDef, false)), ]; diff --git a/packages/astro/src/runtime/client/dev-overlay/overlay.ts b/packages/astro/src/runtime/client/dev-overlay/overlay.ts index e0ab02e481a7..a0b4fb583e3a 100644 --- a/packages/astro/src/runtime/client/dev-overlay/overlay.ts +++ b/packages/astro/src/runtime/client/dev-overlay/overlay.ts @@ -235,14 +235,21 @@ export class AstroDevOverlay extends HTMLElement {
${this.plugins - .filter((plugin) => plugin.builtIn) + .filter((plugin) => plugin.builtIn && plugin.id !== 'astro:settings') .map((plugin) => this.getPluginTemplate(plugin)) .join('')} + ${ + this.plugins.filter((plugin) => !plugin.builtIn).length > 0 + ? `
${this.plugins + .filter((plugin) => !plugin.builtIn) + .map((plugin) => this.getPluginTemplate(plugin)) + .join('')}` + : '' + }
- ${this.plugins - .filter((plugin) => !plugin.builtIn) - .map((plugin) => this.getPluginTemplate(plugin)) - .join('')} + ${this.getPluginTemplate( + this.plugins.find((plugin) => plugin.builtIn && plugin.id === 'astro:settings')! + )}
diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts index ea3b7f26fc1f..e864d901eb1b 100644 --- a/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts +++ b/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts @@ -1,4 +1,5 @@ import type { DevOverlayPlugin } from '../../../../@types/astro.js'; +import { createWindowWithTransition } from './utils/window.js'; export default { id: 'astro', @@ -10,38 +11,10 @@ export default { document.addEventListener('astro:after-swap', createWindow); function createWindow() { - const style = document.createElement('style'); - style.textContent = ` - :host { - opacity: 0; - transition: opacity 0.15s ease-in-out; - } - - :host([data-active]) { - opacity: 1; - } - - @media screen and (prefers-reduced-motion: no-preference) { - :host astro-dev-overlay-window { - transform: translateY(55px) translate(-50%, -50%); - transition: transform 0.15s ease-in-out; - transform-origin: center bottom; - } - - :host([data-active]) astro-dev-overlay-window { - transform: translateY(0) translate(-50%, -50%); - } - } - `; - canvas.append(style); - - const astroWindow = document.createElement('astro-dev-overlay-window'); - - astroWindow.windowTitle = 'Astro'; - astroWindow.windowIcon = 'astro:logo'; - - astroWindow.innerHTML = ` - + + + `; + } +} diff --git a/packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts b/packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts index 64bf580769d0..4b534eaac368 100644 --- a/packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts +++ b/packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts @@ -41,11 +41,13 @@ export class DevOverlayWindow extends HTMLElement { margin: 0; font-weight: 600; color: #fff; + display: flex; + align-items: center; } h1 svg { - vertical-align: text-bottom; margin-right: 8px; + height: 1em; } hr { From 7a1c1a23404dc35acf7cf19b5beb50a4cf32a862 Mon Sep 17 00:00:00 2001 From: Princesseuh <3019731+Princesseuh@users.noreply.github.com> Date: Thu, 9 Nov 2023 14:01:19 +0100 Subject: [PATCH 2/7] style: misc styling tweaks --- .../src/runtime/client/dev-overlay/overlay.ts | 2 +- .../client/dev-overlay/plugins/astro.ts | 10 +---- .../client/dev-overlay/plugins/settings.ts | 23 +++++++++-- .../dev-overlay/plugins/utils/window.ts | 10 +++++ .../client/dev-overlay/ui-library/window.ts | 39 ++++++++++++++++--- 5 files changed, 67 insertions(+), 17 deletions(-) diff --git a/packages/astro/src/runtime/client/dev-overlay/overlay.ts b/packages/astro/src/runtime/client/dev-overlay/overlay.ts index a0b4fb583e3a..e69046d61023 100644 --- a/packages/astro/src/runtime/client/dev-overlay/overlay.ts +++ b/packages/astro/src/runtime/client/dev-overlay/overlay.ts @@ -328,7 +328,7 @@ export class AstroDevOverlay extends HTMLElement { if (this.isHidden()) { this.hoverTimeout = window.setTimeout(() => { this.toggleOverlay(true); - }, this.HOVER_DELAY); + }, this.HOVER_DELAY + 200); // Slightly higher delay here to prevent users opening the overlay by accident } else { this.hoverTimeout = window.setTimeout(() => { this.toggleMinimizeButton(true); diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts index e864d901eb1b..352a018e11e2 100644 --- a/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts +++ b/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts @@ -1,5 +1,5 @@ import type { DevOverlayPlugin } from '../../../../@types/astro.js'; -import { createWindowWithTransition } from './utils/window.js'; +import { createWindowWithTransition, waitForTransition } from './utils/window.js'; export default { id: 'astro', @@ -71,12 +71,6 @@ export default { } }, async beforeTogglingOff(canvas) { - canvas.host?.removeAttribute('data-active'); - - await new Promise((resolve) => { - canvas.host.addEventListener('transitionend', resolve); - }); - - return true; + return await waitForTransition(canvas); }, } satisfies DevOverlayPlugin; diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/settings.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/settings.ts index 09c1fc1d8246..9b01d48d0a67 100644 --- a/packages/astro/src/runtime/client/dev-overlay/plugins/settings.ts +++ b/packages/astro/src/runtime/client/dev-overlay/plugins/settings.ts @@ -1,12 +1,12 @@ import type { DevOverlayPlugin } from '../../../../@types/astro.js'; -import { createWindowWithTransition } from './utils/window.js'; +import { createWindowWithTransition, waitForTransition } from './utils/window.js'; const icon = ''; export default { id: 'astro:settings', - name: 'Settings', + name: 'Overlay settings', icon: icon, init(canvas, eventTarget) { createSettingsWindow(); @@ -17,9 +17,26 @@ export default { const window = createWindowWithTransition( 'Settings', icon, - `` + ` +

General

+ +
+ +
+ ` ); canvas.append(window); } }, + async beforeTogglingOff(canvas) { + return await waitForTransition(canvas); + }, } satisfies DevOverlayPlugin; diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/utils/window.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/utils/window.ts index 62caaf9cba01..4d79408c92e3 100644 --- a/packages/astro/src/runtime/client/dev-overlay/plugins/utils/window.ts +++ b/packages/astro/src/runtime/client/dev-overlay/plugins/utils/window.ts @@ -41,3 +41,13 @@ export function createWindowWithTransition( return fragment; } + +export async function waitForTransition(canvas: ShadowRoot): Promise { + canvas.host?.removeAttribute('data-active'); + + await new Promise((resolve) => { + canvas.host.addEventListener('transitionend', resolve); + }); + + return true; +} diff --git a/packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts b/packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts index 4b534eaac368..ce86d63c4ee2 100644 --- a/packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts +++ b/packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts @@ -19,11 +19,12 @@ export class DevOverlayWindow extends HTMLElement { this.shadowRoot.innerHTML = ` -

${this.windowIcon ? this.getElementForIcon(this.windowIcon) : ''}${this.windowTitle ?? ''}

+

${this.windowIcon ? this.getElementForIcon(this.windowIcon) : ''}${ + this.windowTitle ?? '' + }

`; From acaf7e46aa9140c989d2e6fcd016a863f79410ad Mon Sep 17 00:00:00 2001 From: Princesseuh <3019731+Princesseuh@users.noreply.github.com> Date: Fri, 10 Nov 2023 09:58:40 +0100 Subject: [PATCH 3/7] feat: implement UI --- .../client/dev-overlay/plugins/settings.ts | 67 +++++++++++++++++-- .../client/dev-overlay/ui-library/toggle.ts | 42 +++++++++++- .../client/dev-overlay/ui-library/window.ts | 2 +- 3 files changed, 101 insertions(+), 10 deletions(-) diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/settings.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/settings.ts index 9b01d48d0a67..c9940b1614d4 100644 --- a/packages/astro/src/runtime/client/dev-overlay/plugins/settings.ts +++ b/packages/astro/src/runtime/client/dev-overlay/plugins/settings.ts @@ -4,6 +4,22 @@ import { createWindowWithTransition, waitForTransition } from './utils/window.js const icon = ''; +interface Setting { + name: string; + description: string; + input: 'checkbox' | 'text' | 'number' | 'select'; + inputId: string; +} + +const settings = [ + { + name: 'Disable notifications?', + description: 'Notification bubbles will not be shown when this is enabled.', + input: 'checkbox', + inputId: 'disable-notifications', + }, +] satisfies Setting[]; + export default { id: 'astro:settings', name: 'Overlay settings', @@ -18,22 +34,61 @@ export default { 'Settings', icon, `

General

- -
- -
+ ${settings.map(getElementForSettingAsString).join('')} ` ); canvas.append(window); + attachEvents(); + + function getElementForSettingAsString(setting: Setting) { + const label = document.createElement('label'); + label.classList.add('setting-row'); + const section = document.createElement('section'); + section.innerHTML = `

${setting.name}

${setting.description}`; + label.append(section); + + switch (setting.input) { + case 'checkbox': { + const astroToggle = document.createElement('astro-dev-overlay-toggle'); + label.append(astroToggle); + } + } + + return label.outerHTML + '
'; + } + } + + function attachEvents() { + const disableNotifications = document.getElementById( + 'disable-notifications' + ) as HTMLInputElement; + disableNotifications.addEventListener('change', (evt) => { + eventTarget.dispatchEvent( + new CustomEvent('toggle-notification', { + detail: { + state: disableNotifications.checked, + }, + }) + ); + }); } }, async beforeTogglingOff(canvas) { diff --git a/packages/astro/src/runtime/client/dev-overlay/ui-library/toggle.ts b/packages/astro/src/runtime/client/dev-overlay/ui-library/toggle.ts index d48088329d1a..1973199679b3 100644 --- a/packages/astro/src/runtime/client/dev-overlay/ui-library/toggle.ts +++ b/packages/astro/src/runtime/client/dev-overlay/ui-library/toggle.ts @@ -1,5 +1,6 @@ export class DevOverlayToggle extends HTMLElement { shadowRoot: ShadowRoot; + inputId?: string; constructor() { super(); @@ -7,10 +8,45 @@ export class DevOverlayToggle extends HTMLElement { this.shadowRoot.innerHTML = ` + input { + appearance: none; + width: 32px; + height: 20px; + border: 1px solid rgba(145, 152, 173, 1); + transition: background-color 0.2s ease, border-color 0.2s ease; + border-radius: 9999px; + } + + input::after { + content: ''; + width: 16px; + display: inline-block; + height: 16px; + background-color: rgba(145, 152, 173, 1); + border-radius: 9999px; + transition: transform 0.2s ease, background-color 0.2s ease; + top: 1px; + left: 1px; + position: relative; + } + + input:checked { + border: 1px solid rgba(213, 249, 196, 1); + background-color: rgba(61, 125, 31, 1); + } - + input:checked::after { + transform: translateX(12px); + background: rgba(213, 249, 196, 1); + } + `; + const checkbox = document.createElement('input'); + checkbox.type = 'checkbox'; + + if (this.hasAttribute('input-id') || this.inputId) { + checkbox.id = this.getAttribute('input-id') ?? this.inputId ?? ''; + } + this.shadowRoot.append(checkbox); } } diff --git a/packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts b/packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts index ce86d63c4ee2..18b515429ad8 100644 --- a/packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts +++ b/packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts @@ -77,7 +77,7 @@ export class DevOverlayWindow extends HTMLElement { height: 1em; } - hr { + hr, ::slotted(hr) { border: 1px solid rgba(27, 30, 36, 1); margin: 1em 0; } From 53d92aac9e7c30758152100b3ca7901507e8112c Mon Sep 17 00:00:00 2001 From: Princesseuh <3019731+Princesseuh@users.noreply.github.com> Date: Fri, 10 Nov 2023 15:36:06 +0100 Subject: [PATCH 4/7] feat: implement the actual feature --- .../runtime/client/dev-overlay/entrypoint.ts | 5 +- .../src/runtime/client/dev-overlay/overlay.ts | 7 ++- .../client/dev-overlay/plugins/settings.ts | 59 +++++++++++-------- .../dev-overlay/plugins/utils/window.ts | 7 ++- .../runtime/client/dev-overlay/settings.ts | 32 ++++++++++ .../client/dev-overlay/ui-library/toggle.ts | 14 ++--- 6 files changed, 86 insertions(+), 38 deletions(-) create mode 100644 packages/astro/src/runtime/client/dev-overlay/settings.ts diff --git a/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts b/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts index 55d01a0640c4..887449c3772c 100644 --- a/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts +++ b/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts @@ -1,5 +1,6 @@ import type { DevOverlayPlugin as DevOverlayPluginDefinition } from '../../../@types/astro.js'; import { type AstroDevOverlay, type DevOverlayPlugin } from './overlay.js'; +import { settings } from './settings.js'; let overlay: AstroDevOverlay; @@ -65,7 +66,9 @@ document.addEventListener('DOMContentLoaded', async () => { newState = evt.detail.state ?? true; } - target.querySelector('.notification')?.toggleAttribute('data-active', newState); + if (settings.config.showPluginNotifications === false) { + target.querySelector('.notification')?.toggleAttribute('data-active', newState); + } }); eventTarget.addEventListener('toggle-plugin', async (evt) => { diff --git a/packages/astro/src/runtime/client/dev-overlay/overlay.ts b/packages/astro/src/runtime/client/dev-overlay/overlay.ts index e69046d61023..70d95726920b 100644 --- a/packages/astro/src/runtime/client/dev-overlay/overlay.ts +++ b/packages/astro/src/runtime/client/dev-overlay/overlay.ts @@ -1,5 +1,6 @@ /* eslint-disable no-console */ import type { DevOverlayPlugin as DevOverlayPluginDefinition } from '../../../@types/astro.js'; +import { settings } from './settings.js'; import { getIconElement, isDefinedIcon, type Icon } from './ui-library/icons.js'; export type DevOverlayPlugin = DevOverlayPluginDefinition & { @@ -261,7 +262,8 @@ export class AstroDevOverlay extends HTMLElement { // Create plugin canvases this.plugins.forEach(async (plugin) => { if (!this.hasBeenInitialized) { - console.log(`Creating plugin canvas for ${plugin.id}`); + if (settings.config.verbose) console.log(`Creating plugin canvas for ${plugin.id}`); + const pluginCanvas = document.createElement('astro-dev-overlay-plugin-canvas'); pluginCanvas.dataset.pluginId = plugin.id; this.shadowRoot?.append(pluginCanvas); @@ -381,7 +383,8 @@ export class AstroDevOverlay extends HTMLElement { const shadowRoot = this.getPluginCanvasById(plugin.id)!.shadowRoot!; try { - console.info(`Initializing plugin ${plugin.id}`); + if (settings.config.verbose) console.info(`Initializing plugin ${plugin.id}`); + await plugin.init?.(shadowRoot, plugin.eventTarget); plugin.status = 'ready'; diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/settings.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/settings.ts index c9940b1614d4..8da6ea66a144 100644 --- a/packages/astro/src/runtime/client/dev-overlay/plugins/settings.ts +++ b/packages/astro/src/runtime/client/dev-overlay/plugins/settings.ts @@ -1,30 +1,48 @@ import type { DevOverlayPlugin } from '../../../../@types/astro.js'; +import { settings, type Settings } from '../settings.js'; import { createWindowWithTransition, waitForTransition } from './utils/window.js'; const icon = ''; -interface Setting { +interface SettingRow { name: string; description: string; input: 'checkbox' | 'text' | 'number' | 'select'; - inputId: string; + settingKey: keyof Settings; + changeEvent: (evt: Event) => void; } -const settings = [ +const settingsRows = [ { name: 'Disable notifications?', description: 'Notification bubbles will not be shown when this is enabled.', input: 'checkbox', - inputId: 'disable-notifications', + settingKey: 'showPluginNotifications', + changeEvent: (evt: Event) => { + if (evt.currentTarget instanceof HTMLInputElement) { + settings.updateSetting('showPluginNotifications', evt.currentTarget.checked); + } + }, }, -] satisfies Setting[]; + { + name: 'Verbose logging?', + description: 'Log additional information to the console.', + input: 'checkbox', + settingKey: 'verbose', + changeEvent: (evt: Event) => { + if (evt.currentTarget instanceof HTMLInputElement) { + settings.updateSetting('verbose', evt.currentTarget.checked); + } + }, + }, +] satisfies SettingRow[]; export default { id: 'astro:settings', name: 'Overlay settings', icon: icon, - init(canvas, eventTarget) { + init(canvas) { createSettingsWindow(); document.addEventListener('astro:after-swap', createSettingsWindow); @@ -52,13 +70,15 @@ export default { }

General

- ${settings.map(getElementForSettingAsString).join('')} - ` + `, + settingsRows.flatMap((setting) => [ + getElementForSettingAsString(setting), + document.createElement('hr'), + ]) ); canvas.append(window); - attachEvents(); - function getElementForSettingAsString(setting: Setting) { + function getElementForSettingAsString(setting: SettingRow) { const label = document.createElement('label'); label.classList.add('setting-row'); const section = document.createElement('section'); @@ -68,28 +88,15 @@ export default { switch (setting.input) { case 'checkbox': { const astroToggle = document.createElement('astro-dev-overlay-toggle'); + astroToggle.input.addEventListener('change', setting.changeEvent); + astroToggle.input.checked = settings.config[setting.settingKey]; label.append(astroToggle); } } - return label.outerHTML + '
'; + return label; } } - - function attachEvents() { - const disableNotifications = document.getElementById( - 'disable-notifications' - ) as HTMLInputElement; - disableNotifications.addEventListener('change', (evt) => { - eventTarget.dispatchEvent( - new CustomEvent('toggle-notification', { - detail: { - state: disableNotifications.checked, - }, - }) - ); - }); - } }, async beforeTogglingOff(canvas) { return await waitForTransition(canvas); diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/utils/window.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/utils/window.ts index 4d79408c92e3..04f09d6e6473 100644 --- a/packages/astro/src/runtime/client/dev-overlay/plugins/utils/window.ts +++ b/packages/astro/src/runtime/client/dev-overlay/plugins/utils/window.ts @@ -3,7 +3,8 @@ import type { Icon } from '../../ui-library/icons.js'; export function createWindowWithTransition( title: string, icon: Icon, - content: string + windowContent: string, + addedNodes: Node[] = [] ): DocumentFragment { const fragment = document.createDocumentFragment(); @@ -35,7 +36,9 @@ export function createWindowWithTransition( const window = document.createElement('astro-dev-overlay-window'); window.windowTitle = title; window.windowIcon = icon; - window.innerHTML = content; + window.innerHTML = windowContent; + + window.append(...addedNodes); fragment.append(window); diff --git a/packages/astro/src/runtime/client/dev-overlay/settings.ts b/packages/astro/src/runtime/client/dev-overlay/settings.ts new file mode 100644 index 000000000000..a6c086d2c9f9 --- /dev/null +++ b/packages/astro/src/runtime/client/dev-overlay/settings.ts @@ -0,0 +1,32 @@ +export interface Settings { + showPluginNotifications: boolean; + verbose: boolean; +} + +export const defaultSettings = { + showPluginNotifications: true, + verbose: false, +} satisfies Settings; + +export const settings = getSettings(); + +function getSettings() { + let _settings: Settings = { ...defaultSettings }; + const overlaySettings = localStorage.getItem('astro:dev-overlay:settings'); + + if (overlaySettings) { + _settings = { ..._settings, ...JSON.parse(overlaySettings) }; + } + + function updateSetting(key: keyof Settings, value: Settings[typeof key]) { + _settings[key] = value; + localStorage.setItem('astro:dev-overlay:settings', JSON.stringify(_settings)); + } + + return { + get config() { + return _settings; + }, + updateSetting, + }; +} diff --git a/packages/astro/src/runtime/client/dev-overlay/ui-library/toggle.ts b/packages/astro/src/runtime/client/dev-overlay/ui-library/toggle.ts index 1973199679b3..5ff21fd1837a 100644 --- a/packages/astro/src/runtime/client/dev-overlay/ui-library/toggle.ts +++ b/packages/astro/src/runtime/client/dev-overlay/ui-library/toggle.ts @@ -1,6 +1,6 @@ export class DevOverlayToggle extends HTMLElement { shadowRoot: ShadowRoot; - inputId?: string; + input: HTMLInputElement; constructor() { super(); @@ -41,12 +41,12 @@ export class DevOverlayToggle extends HTMLElement { } `; - const checkbox = document.createElement('input'); - checkbox.type = 'checkbox'; - if (this.hasAttribute('input-id') || this.inputId) { - checkbox.id = this.getAttribute('input-id') ?? this.inputId ?? ''; - } - this.shadowRoot.append(checkbox); + this.input = document.createElement('input'); + } + + connectedCallback() { + this.input.type = 'checkbox'; + this.shadowRoot.append(this.input); } } From 550c4c2554e3cb91b4708b4c406ede8f282b3c0d Mon Sep 17 00:00:00 2001 From: Princesseuh <3019731+Princesseuh@users.noreply.github.com> Date: Sun, 12 Nov 2023 23:17:39 +0100 Subject: [PATCH 5/7] refactor: small refactor --- packages/astro/e2e/dev-overlay.test.js | 19 +++++++++++++++++++ .../client/dev-overlay/plugins/settings.ts | 7 ++----- .../client/dev-overlay/ui-library/icons.ts | 1 + packages/astro/test/core-image.test.js | 2 +- 4 files changed, 23 insertions(+), 6 deletions(-) diff --git a/packages/astro/e2e/dev-overlay.test.js b/packages/astro/e2e/dev-overlay.test.js index 3e8c6662c705..1a358487cb27 100644 --- a/packages/astro/e2e/dev-overlay.test.js +++ b/packages/astro/e2e/dev-overlay.test.js @@ -98,4 +98,23 @@ test.describe('Dev Overlay', () => { await expect(auditHighlight).not.toBeVisible(); await expect(auditHighlightTooltip).not.toBeVisible(); }); + + test('can open Settings plugin', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/')); + + const overlay = page.locator('astro-dev-overlay'); + const pluginButton = overlay.locator('button[data-plugin-id="astro:settings"]'); + await pluginButton.click(); + + const settingsPluginCanvas = overlay.locator( + 'astro-dev-overlay-plugin-canvas[data-plugin-id="astro:settings"]' + ); + const settingsWindow = settingsPluginCanvas.locator('astro-dev-overlay-window'); + await expect(settingsWindow).toHaveCount(1); + await expect(settingsWindow).toBeVisible(); + + // Toggle plugin off + await pluginButton.click(); + await expect(settingsWindow).not.toBeVisible(); + }); }); diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/settings.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/settings.ts index 8da6ea66a144..569e95adcce8 100644 --- a/packages/astro/src/runtime/client/dev-overlay/plugins/settings.ts +++ b/packages/astro/src/runtime/client/dev-overlay/plugins/settings.ts @@ -2,9 +2,6 @@ import type { DevOverlayPlugin } from '../../../../@types/astro.js'; import { settings, type Settings } from '../settings.js'; import { createWindowWithTransition, waitForTransition } from './utils/window.js'; -const icon = - ''; - interface SettingRow { name: string; description: string; @@ -41,7 +38,7 @@ const settingsRows = [ export default { id: 'astro:settings', name: 'Overlay settings', - icon: icon, + icon: 'gear', init(canvas) { createSettingsWindow(); @@ -50,7 +47,7 @@ export default { function createSettingsWindow() { const window = createWindowWithTransition( 'Settings', - icon, + 'gear', `

General

From bacda8736726b803ad3d7858f8040d62c9549e96 Mon Sep 17 00:00:00 2001 From: Princesseuh <3019731+Princesseuh@users.noreply.github.com> Date: Mon, 13 Nov 2023 13:09:17 +0100 Subject: [PATCH 7/7] chore: changeset --- .changeset/six-chefs-flash.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/six-chefs-flash.md diff --git a/.changeset/six-chefs-flash.md b/.changeset/six-chefs-flash.md new file mode 100644 index 000000000000..3de93b983741 --- /dev/null +++ b/.changeset/six-chefs-flash.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Add a new settings panel to the dev overlay