Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-03-31 23:31:30 -05:00
Code Issues Activity

Rename Dev Overlay to Dev Toolbar (#9271)

Browse source 
* Add more dev overlay tests

* Rename Dev Overlay to Dev Toolbar

* Add config option and preferences

* Fix build

* Alias the event names

* Add changeset
This commit is contained in:
Matthew Phillips 2023-12-01 16:15:35 -05:00 • committed by GitHub
parent 5773e67456
commit 47604bd5b5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 274 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
.changeset/lemon-crews-juggle.md Normal file
View file

@ -0,0 +1,9 @@
---
'astro': major
---
Renames Dev Overlay to Dev Toolbar
The previously named Dev Overlay is now known as the Astro Dev Toolbar. Additionally what were called Plugins are now Toolbar Apps. This updates our references to reflect.
As there were a lot of APIs that used these names, the existing APIs are left in place, and aliases for the new Toolbar based names are included as well, which is what will be documented.

118
packages/astro/e2e/dev-overlay.test.js
View file

@ -19,14 +19,14 @@ test.describe('Dev Overlay', () => {
test('dev overlay exists in the page', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/'));
const devOVerlay = page.locator('astro-dev-overlay');
const devOVerlay = page.locator('astro-dev-toolbar');
await expect(devOVerlay).toHaveCount(1);
});
test('shows plugin name on hover', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/'));
const overlay = page.locator('astro-dev-overlay');
const overlay = page.locator('astro-dev-toolbar');
const pluginButton = overlay.locator('button[data-plugin-id="astro"]');
const pluginButtonTooltip = pluginButton.locator('.item-tooltip');
await pluginButton.hover();
@ -37,14 +37,14 @@ test.describe('Dev Overlay', () => {
test('can open Astro plugin', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/'));
const overlay = page.locator('astro-dev-overlay');
const overlay = page.locator('astro-dev-toolbar');
const pluginButton = overlay.locator('button[data-plugin-id="astro"]');
await pluginButton.click();
const astroPluginCanvas = overlay.locator(
'astro-dev-overlay-plugin-canvas[data-plugin-id="astro"]'
'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro"]'
);
const astroWindow = astroPluginCanvas.locator('astro-dev-overlay-window');
const astroWindow = astroPluginCanvas.locator('astro-dev-toolbar-window');
await expect(astroWindow).toHaveCount(1);
await expect(astroWindow).toBeVisible();
@ -56,18 +56,18 @@ test.describe('Dev Overlay', () => {
test('xray shows highlights and tooltips', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/'));
const overlay = page.locator('astro-dev-overlay');
const overlay = page.locator('astro-dev-toolbar');
const pluginButton = overlay.locator('button[data-plugin-id="astro:xray"]');
await pluginButton.click();
const xrayCanvas = overlay.locator(
'astro-dev-overlay-plugin-canvas[data-plugin-id="astro:xray"]'
'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:xray"]'
);
const xrayHighlight = xrayCanvas.locator('astro-dev-overlay-highlight');
const xrayHighlight = xrayCanvas.locator('astro-dev-toolbar-highlight');
await expect(xrayHighlight).toBeVisible();
await xrayHighlight.hover();
const xrayHighlightTooltip = xrayHighlight.locator('astro-dev-overlay-tooltip');
const xrayHighlightTooltip = xrayHighlight.locator('astro-dev-toolbar-tooltip');
await expect(xrayHighlightTooltip).toBeVisible();
// Toggle plugin off
@ -76,21 +76,41 @@ test.describe('Dev Overlay', () => {
await expect(xrayHighlightTooltip).not.toBeVisible();
});
test('xray shows no islands message when there are none', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/xray-no-islands'));
const overlay = page.locator('astro-dev-toolbar');
const pluginButton = overlay.locator('button[data-plugin-id="astro:xray"]');
await pluginButton.click();
const xrayCanvas = overlay.locator(
'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:xray"]'
);
const auditHighlight = xrayCanvas.locator('astro-dev-toolbar-highlight');
await expect(auditHighlight).not.toBeVisible();
const xrayWindow = xrayCanvas.locator('astro-dev-toolbar-window');
await expect(xrayWindow).toHaveCount(1);
await expect(xrayWindow).toBeVisible();
await expect(xrayWindow.locator('astro-dev-toolbar-icon[icon=lightbulb]')).toBeVisible();
});
test('audit shows higlights and tooltips', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/'));
const overlay = page.locator('astro-dev-overlay');
const overlay = page.locator('astro-dev-toolbar');
const pluginButton = overlay.locator('button[data-plugin-id="astro:audit"]');
await pluginButton.click();
const auditCanvas = overlay.locator(
'astro-dev-overlay-plugin-canvas[data-plugin-id="astro:audit"]'
'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:audit"]'
);
const auditHighlight = auditCanvas.locator('astro-dev-overlay-highlight');
const auditHighlight = auditCanvas.locator('astro-dev-toolbar-highlight');
await expect(auditHighlight).toBeVisible();
await auditHighlight.hover();
const auditHighlightTooltip = auditHighlight.locator('astro-dev-overlay-tooltip');
const auditHighlightTooltip = auditHighlight.locator('astro-dev-toolbar-tooltip');
await expect(auditHighlightTooltip).toBeVisible();
// Toggle plugin off
@ -99,17 +119,37 @@ test.describe('Dev Overlay', () => {
await expect(auditHighlightTooltip).not.toBeVisible();
});
test('audit shows no issues message when there are no issues', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/audit-no-warning'));
const overlay = page.locator('astro-dev-toolbar');
const pluginButton = overlay.locator('button[data-plugin-id="astro:audit"]');
await pluginButton.click();
const auditCanvas = overlay.locator(
'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:audit"]'
);
const auditHighlight = auditCanvas.locator('astro-dev-toolbar-highlight');
await expect(auditHighlight).not.toBeVisible();
const auditWindow = auditCanvas.locator('astro-dev-toolbar-window');
await expect(auditWindow).toHaveCount(1);
await expect(auditWindow).toBeVisible();
await expect(auditWindow.locator('astro-dev-toolbar-icon[icon=check-circle]')).toBeVisible();
});
test('can open Settings plugin', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/'));
const overlay = page.locator('astro-dev-overlay');
const overlay = page.locator('astro-dev-toolbar');
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"]'
'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:settings"]'
);
const settingsWindow = settingsPluginCanvas.locator('astro-dev-overlay-window');
const settingsWindow = settingsPluginCanvas.locator('astro-dev-toolbar-window');
await expect(settingsWindow).toHaveCount(1);
await expect(settingsWindow).toBeVisible();
@ -117,4 +157,50 @@ test.describe('Dev Overlay', () => {
await pluginButton.click();
await expect(settingsWindow).not.toBeVisible();
});
test('Opening a plugin closes the currently opened plugin', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/'));
const overlay = page.locator('astro-dev-toolbar');
let pluginButton = overlay.locator('button[data-plugin-id="astro:settings"]');
await pluginButton.click();
const settingsPluginCanvas = overlay.locator(
'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:settings"]'
);
const settingsWindow = settingsPluginCanvas.locator('astro-dev-toolbar-window');
await expect(settingsWindow).toHaveCount(1);
await expect(settingsWindow).toBeVisible();
// Click the astro plugin
pluginButton = overlay.locator('button[data-plugin-id="astro"]');
await pluginButton.click();
const astroPluginCanvas = overlay.locator(
'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro"]'
);
const astroWindow = astroPluginCanvas.locator('astro-dev-toolbar-window');
await expect(astroWindow).toHaveCount(1);
await expect(astroWindow).toBeVisible();
await expect(settingsWindow).not.toBeVisible();
});
test('Settings plugin contains message on disabling the overlay', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/'));
const overlay = page.locator('astro-dev-toolbar');
let pluginButton = overlay.locator('button[data-plugin-id="astro:settings"]');
await pluginButton.click();
const settingsPluginCanvas = overlay.locator(
'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:settings"]'
);
const settingsWindow = settingsPluginCanvas.locator('astro-dev-toolbar-window');
await expect(settingsWindow).toHaveCount(1);
await expect(settingsWindow).toBeVisible();
const hideOverlay = settingsWindow.getByRole('heading', { name: 'Hide overlay' });
await expect(hideOverlay).toBeVisible();
});
});

5
packages/astro/e2e/fixtures/dev-overlay/src/pages/audit-no-warning.astro Normal file
View file

@ -0,0 +1,5 @@
---
---
<img src="https://astro.build/assets/press/astro-logo-dark.svg" alt="Astro logo" />

5
packages/astro/e2e/fixtures/dev-overlay/src/pages/xray-no-islands.astro Normal file
View file

@ -0,0 +1,5 @@
---
---
<div>no islands on this page</div>

47
packages/astro/src/@types/astro.ts
View file

@ -1159,6 +1159,7 @@ export interface AstroUserConfig {
* @docs
* @kind heading
* @name Dev Overlay Options
* @deprecated Use `devToolbar` instead.
*/
devOverlay?: {
/**
@ -1183,6 +1184,34 @@ export interface AstroUserConfig {
defaultState: 'minimized' | 'expanded';
};
/**
* @docs
* @kind heading
* @name Dev Toolbar Options
*/
devToolbar?: {
/**
* @docs
* @name devToolbar.enabled
* @type {boolean}
* @default `true`
* @description
* Whether to enable the Astro Dev Toolbar. This toolbar allows you to inspect your page islands, see helpful audits on performance and accessibility, and more.
*
* This option is scoped to the entire project, to only disable the toolbar for yourself, run `npm run astro preferences disable devToolbar`. To disable the toolbar for all your Astro projects, run `npm run astro preferences disable devToolbar --global`.
*/
enabled: boolean;
/**
* @docs
* @name devToolbar.defaultState
* @type {'minimized' | 'expanded'}
* @default `minimized`
* @description
* Whether the Dev Toolbar should be expanded or minimized by default.
*/
defaultState: 'minimized' | 'expanded';
};
/**
* @docs
* @kind heading
@ -1716,7 +1745,7 @@ export interface AstroSettings {
* Map of directive name (e.g. `load`) to the directive script code
*/
clientDirectives: Map<string, string>;
devOverlayPlugins: string[];
devToolbarApps: string[];
middlewares: { pre: string[]; post: string[] };
tsConfig: TSConfig | undefined;
tsConfigPath: string | undefined;
@ -2292,7 +2321,11 @@ export interface AstroIntegration {
injectScript: (stage: InjectedScriptStage, content: string) => void;
injectRoute: (injectRoute: InjectedRoute) => void;
addClientDirective: (directive: ClientDirectiveConfig) => void;
/**
* @deprecated Use `addDevToolbarApp` instead.
*/
addDevOverlayPlugin: (entrypoint: string) => void;
addDevToolbarApp: (entrypoint: string) => void;
addMiddleware: (mid: AstroIntegrationMiddleware) => void;
logger: AstroIntegrationLogger;
// TODO: Add support for `injectElement()` for full HTML element injection, not just scripts.
@ -2563,6 +2596,18 @@ export type DevOverlayMetadata = Window &
declare global {
interface HTMLElementTagNameMap {
'astro-dev-toolbar': AstroDevOverlay;
'astro-dev-toolbar-window': DevOverlayWindow;
'astro-dev-toolbar-plugin-canvas': DevOverlayCanvas;
'astro-dev-toolbar-tooltip': DevOverlayTooltip;
'astro-dev-toolbar-highlight': DevOverlayHighlight;
'astro-dev-toolbar-toggle': DevOverlayToggle;
'astro-dev-toolbar-badge': DevOverlayBadge;
'astro-dev-toolbar-button': DevOverlayButton;
'astro-dev-toolbar-icon': DevOverlayIcon;
'astro-dev-toolbar-card': DevOverlayCard;
// Deprecated names
'astro-dev-overlay': AstroDevOverlay;
'astro-dev-overlay-window': DevOverlayWindow;
'astro-dev-overlay-plugin-canvas': DevOverlayCanvas;

12
packages/astro/src/core/config/schema.ts
View file

@ -45,6 +45,10 @@ const ASTRO_CONFIG_DEFAULTS = {
enabled: true,
defaultState: 'minimized',
},
devToolbar: {
enabled: true,
defaultState: 'minimized',
},
compressHTML: true,
server: {
host: false,
@ -236,6 +240,14 @@ export const AstroConfigSchema = z.object({
.default(ASTRO_CONFIG_DEFAULTS.devOverlay.defaultState),
})
.default(ASTRO_CONFIG_DEFAULTS.devOverlay),
devToolbar: z
.object({
enabled: z.boolean().default(ASTRO_CONFIG_DEFAULTS.devToolbar.enabled),
defaultState: z
.enum(['minimized', 'expanded'])
.default(ASTRO_CONFIG_DEFAULTS.devToolbar.defaultState),
})
.default(ASTRO_CONFIG_DEFAULTS.devToolbar),
markdown: z
.object({
syntaxHighlight: z

2
packages/astro/src/core/config/settings.ts
View file

@ -102,7 +102,7 @@ export function createBaseSettings(config: AstroConfig): AstroSettings {
clientDirectives: getDefaultClientDirectives(),
middlewares: { pre: [], post: [] },
watchFiles: [],
devOverlayPlugins: [],
devToolbarApps: [],
timer: new AstroTimer(),
};
}

6
packages/astro/src/integrations/index.ts
View file

@ -141,7 +141,11 @@ export async function runHookConfigSetup({
updatedSettings.watchFiles.push(path instanceof URL ? fileURLToPath(path) : path);
},
addDevOverlayPlugin: (entrypoint) => {
updatedSettings.devOverlayPlugins.push(entrypoint);
// TODO add a deprecation warning in Astro 5.
hooks.addDevToolbarApp(entrypoint);
},
addDevToolbarApp: (entrypoint) => {
updatedSettings.devToolbarApps.push(entrypoint);
},
addClientDirective: ({ name, entrypoint }) => {
if (updatedSettings.clientDirectives.has(name) || addedClientDirectives.has(name)) {

2
packages/astro/src/preferences/defaults.ts
View file

@ -1,5 +1,5 @@
export const DEFAULT_PREFERENCES = {
devOverlay: {
devToolbar: {
/** Specifies whether the user has the Dev Overlay enabled */
enabled: true,
},

43
packages/astro/src/runtime/client/dev-overlay/entrypoint.ts
View file

@ -34,18 +34,31 @@ document.addEventListener('DOMContentLoaded', async () => {
]);
// Register custom elements
customElements.define('astro-dev-overlay', AstroDevOverlay);
customElements.define('astro-dev-overlay-window', DevOverlayWindow);
customElements.define('astro-dev-overlay-plugin-canvas', DevOverlayCanvas);
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);
customElements.define('astro-dev-overlay-button', DevOverlayButton);
customElements.define('astro-dev-overlay-badge', DevOverlayBadge);
customElements.define('astro-dev-overlay-icon', DevOverlayIcon);
customElements.define('astro-dev-toolbar', AstroDevOverlay);
customElements.define('astro-dev-toolbar-window', DevOverlayWindow);
customElements.define('astro-dev-toolbar-plugin-canvas', DevOverlayCanvas);
customElements.define('astro-dev-toolbar-tooltip', DevOverlayTooltip);
customElements.define('astro-dev-toolbar-highlight', DevOverlayHighlight);
customElements.define('astro-dev-toolbar-card', DevOverlayCard);
customElements.define('astro-dev-toolbar-toggle', DevOverlayToggle);
customElements.define('astro-dev-toolbar-button', DevOverlayButton);
customElements.define('astro-dev-toolbar-badge', DevOverlayBadge);
customElements.define('astro-dev-toolbar-icon', DevOverlayIcon);
overlay = document.createElement('astro-dev-overlay');
// Add deprecated names
const deprecated = (Parent: any) => class extends Parent{};
customElements.define('astro-dev-overlay', deprecated(AstroDevOverlay));
customElements.define('astro-dev-overlay-window', deprecated(DevOverlayWindow));
customElements.define('astro-dev-overlay-plugin-canvas', deprecated(DevOverlayCanvas));
customElements.define('astro-dev-overlay-tooltip', deprecated(DevOverlayTooltip));
customElements.define('astro-dev-overlay-highlight', deprecated(DevOverlayHighlight));
customElements.define('astro-dev-overlay-card', deprecated(DevOverlayCard));
customElements.define('astro-dev-overlay-toggle', deprecated(DevOverlayToggle));
customElements.define('astro-dev-overlay-button', deprecated(DevOverlayButton));
customElements.define('astro-dev-overlay-badge', deprecated(DevOverlayBadge));
customElements.define('astro-dev-overlay-icon', deprecated(DevOverlayIcon));
overlay = document.createElement('astro-dev-toolbar');
const preparePlugin = (
pluginDefinition: DevOverlayPluginDefinition,
@ -76,14 +89,18 @@ document.addEventListener('DOMContentLoaded', async () => {
target.querySelector('.notification')?.toggleAttribute('data-active', newState);
});
eventTarget.addEventListener('toggle-plugin', async (evt) => {
const onToggleApp = async (evt: Event) => {
let newState = undefined;
if (evt instanceof CustomEvent) {
newState = evt.detail.state ?? true;
}
await overlay.setPluginStatus(plugin, newState);
});
};
eventTarget.addEventListener('toggle-app', onToggleApp);
// Deprecated
eventTarget.addEventListener('toggle-plugin', onToggleApp);
return plugin;
};

37
packages/astro/src/runtime/client/dev-overlay/overlay.ts
View file

@ -15,7 +15,8 @@ export type DevOverlayPlugin = DevOverlayPluginDefinition & {
};
eventTarget: EventTarget;
};
const WS_EVENT_NAME = 'astro-dev-overlay';
const WS_EVENT_NAME = 'astro-dev-toolbar';
const WS_EVENT_NAME_DEPRECATED = 'astro-dev-overlay';
const HOVER_DELAY = 2 * 1000;
export class AstroDevOverlay extends HTMLElement {
@ -43,12 +44,12 @@ export class AstroDevOverlay extends HTMLElement {
/* Important! Reset all inherited styles to initial */
all: initial;
z-index: 999999;
view-transition-name: astro-dev-overlay;
view-transition-name: astro-dev-toolbar;
display: contents;
}
::view-transition-old(astro-dev-overlay),
::view-transition-new(astro-dev-overlay) {
::view-transition-old(astro-dev-toolbar),
::view-transition-new(astro-dev-toolbar) {
animation: none;
}
@ -273,7 +274,7 @@ export class AstroDevOverlay extends HTMLElement {
// Create plugin canvases
this.plugins.forEach(async (plugin) => {
if (settings.config.verbose) console.log(`Creating plugin canvas for ${plugin.id}`);
const pluginCanvas = document.createElement('astro-dev-overlay-plugin-canvas');
const pluginCanvas = document.createElement('astro-dev-toolbar-plugin-canvas');
pluginCanvas.dataset.pluginId = plugin.id;
this.shadowRoot?.append(pluginCanvas);
});
@ -384,6 +385,7 @@ export class AstroDevOverlay extends HTMLElement {
if (import.meta.hot) {
import.meta.hot.send(`${WS_EVENT_NAME}:${plugin.id}:initialized`);
import.meta.hot.send(`${WS_EVENT_NAME_DEPRECATED}:${plugin.id}:initialized`);
}
} catch (e) {
console.error(`Failed to init plugin ${plugin.id}, error: ${e}`);
@ -404,7 +406,7 @@ export class AstroDevOverlay extends HTMLElement {
getPluginCanvasById(id: string) {
return this.shadowRoot.querySelector<HTMLElement>(
`astro-dev-overlay-plugin-canvas[data-plugin-id="${id}"]`
`astro-dev-toolbar-plugin-canvas[data-plugin-id="${id}"]`
);
}
@ -462,17 +464,24 @@ export class AstroDevOverlay extends HTMLElement {
pluginCanvas.removeAttribute('data-active');
}
plugin.eventTarget.dispatchEvent(
new CustomEvent('plugin-toggled', {
detail: {
state: plugin.active,
plugin,
},
})
);
[
'app-toggled',
// Deprecated
'plugin-toggled'
].forEach(eventName => {
plugin.eventTarget.dispatchEvent(
new CustomEvent(eventName, {
detail: {
state: plugin.active,
plugin,
},
})
);
});
if (import.meta.hot) {
import.meta.hot.send(`${WS_EVENT_NAME}:${plugin.id}:toggled`, { state: plugin.active });
import.meta.hot.send(`${WS_EVENT_NAME_DEPRECATED}:${plugin.id}:toggled`, { state: plugin.active });
}
return true;

34
packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts
View file

@ -87,7 +87,7 @@ export default {
justify-content: center;
}
#buttons-container astro-dev-overlay-card {
#buttons-container astro-dev-toolbar-card {
flex: 1;
}
@ -222,7 +222,7 @@ export default {
height: 1px;
}
#integration-list astro-dev-overlay-card, .integration-skeleton {
#integration-list astro-dev-toolbar-card, .integration-skeleton {
min-width: 240px;
height: 160px;
}
@ -242,7 +242,7 @@ export default {
}
}
#integration-list astro-dev-overlay-card .integration-image {
#integration-list astro-dev-toolbar-card .integration-image {
width: 40px;
height: 40px;
background-color: var(--integration-image-background, white);
@ -253,12 +253,12 @@ export default {
margin-bottom: 8px;
}
#integration-list astro-dev-overlay-card img {
#integration-list astro-dev-toolbar-card img {
width: 24px;
height: 24px;
}
#integration-list astro-dev-overlay-card astro-dev-overlay-icon {
#integration-list astro-dev-toolbar-card astro-dev-toolbar-icon {
width: 24px;
height: 24px;
color: #fff;
@ -287,26 +287,26 @@ export default {
color: rgba(145, 152, 173, 1);
}
#links astro-dev-overlay-icon {
#links astro-dev-toolbar-icon {
width: 1.5em;
height: 1.5em;
display: block;
}
#integration-list astro-dev-overlay-card svg {
#integration-list astro-dev-toolbar-card svg {
width: 24px;
height: 24px;
vertical-align: bottom;
}
#integration-list astro-dev-overlay-card h3 {
#integration-list astro-dev-toolbar-card h3 {
margin: 0;
margin-bottom: 8px;
color: white;
white-space: nowrap;
}
#integration-list astro-dev-overlay-card p {
#integration-list astro-dev-toolbar-card p {
font-size: 14px;
}
@ -320,11 +320,11 @@ export default {
<header>
<section>
${astroLogo}
<astro-dev-overlay-badge badge-style="gray" size="large">${
<astro-dev-toolbar-badge badge-style="gray" size="large">${
(window as DevOverlayMetadata).__astro_dev_overlay__.version
}</astro-dev-overlay-badge>
}</astro-dev-toolbar-badge>
</section>
<astro-dev-overlay-button id="copy-debug-button">Copy debug info <astro-dev-overlay-icon icon="copy" /></astro-dev-overlay-button>
<astro-dev-toolbar-button id="copy-debug-button">Copy debug info <astro-dev-toolbar-icon icon="copy" /></astro-dev-toolbar-button>
</header>
<hr />
@ -345,9 +345,9 @@ export default {
${links
.map(
(link) =>
`<a href="${link.link}" target="_blank"><astro-dev-overlay-icon ${
`<a href="${link.link}" target="_blank"><astro-dev-toolbar-icon ${
isDefinedIcon(link.icon) ? `icon="${link.icon}">` : `>${link.icon}`
}</astro-dev-overlay-icon>${link.name}</a>`
}</astro-dev-toolbar-icon>${link.name}</a>`
)
.join('')}
</section>
@ -376,7 +376,7 @@ export default {
const copyDebugButton = canvas.querySelector<HTMLButtonElement>('#copy-debug-button');
if (!copyDebugButton) return;
copyDebugButton.innerHTML = 'Copy debug info <astro-dev-overlay-icon icon="copy" />';
copyDebugButton.innerHTML = 'Copy debug info <astro-dev-toolbar-icon icon="copy" />';
}
function refreshIntegrationList() {
@ -387,7 +387,7 @@ export default {
const fragment = document.createDocumentFragment();
for (const integration of integrationData.data) {
const integrationComponent = document.createElement('astro-dev-overlay-card');
const integrationComponent = document.createElement('astro-dev-toolbar-card');
integrationComponent.link = integration.homepageUrl;
const integrationContainer = document.createElement('div');
@ -402,7 +402,7 @@ export default {
img.alt = integration.title;
integrationImage.append(img);
} else {
const icon = document.createElement('astro-dev-overlay-icon');
const icon = document.createElement('astro-dev-toolbar-icon');
icon.icon = iconForIntegration(integration);
integrationImage.append(icon);
integrationImage.style.setProperty(

8
packages/astro/src/runtime/client/dev-overlay/plugins/audit.ts
View file

@ -79,7 +79,7 @@ export default {
font-size: 22px;
}
astro-dev-overlay-icon {
astro-dev-toolbar-icon {
width: 1em;
height: 1em;
padding: 8px;
@ -89,7 +89,7 @@ export default {
}
</style>
<header>
<h1><astro-dev-overlay-icon icon="check-circle"></astro-dev-overlay-icon>No issues detected.</h1>
<h1><astro-dev-toolbar-icon icon="check-circle"></astro-dev-toolbar-icon>No issues detected.</h1>
</header>
`
);
@ -106,7 +106,7 @@ export default {
const noAuditBlock = canvas.getElementById('no-audit');
if (noAuditBlock) {
const devOverlayRect = document
.querySelector('astro-dev-overlay')
.querySelector('astro-dev-toolbar')
?.shadowRoot.querySelector('#dev-overlay')
?.getBoundingClientRect();
@ -145,7 +145,7 @@ export default {
}
function buildAuditTooltip(rule: AuditRule, element: Element) {
const tooltip = document.createElement('astro-dev-overlay-tooltip');
const tooltip = document.createElement('astro-dev-toolbar-tooltip');
tooltip.sections = [
{

10
packages/astro/src/runtime/client/dev-overlay/plugins/settings.ts
View file

@ -18,7 +18,7 @@ const settingsRows = [
settingKey: 'disablePluginNotification',
changeEvent: (evt: Event) => {
if (evt.currentTarget instanceof HTMLInputElement) {
const devOverlay = document.querySelector('astro-dev-overlay');
const devOverlay = document.querySelector('astro-dev-toolbar');
if (devOverlay) {
devOverlay.setNotificationVisible(!evt.currentTarget.checked);
@ -57,7 +57,7 @@ export default {
function createSettingsWindow() {
const windowElement = createWindowElement(
`<style>
:host astro-dev-overlay-window {
:host astro-dev-toolbar-window {
height: 480px;
--color-purple: rgba(224, 204, 250, 1);
@ -98,7 +98,7 @@ export default {
font-size: 22px;
}
astro-dev-overlay-icon {
astro-dev-toolbar-icon {
width: 1em;
height: 1em;
display: block;
@ -123,7 +123,7 @@ export default {
}
</style>
<header>
<h1><astro-dev-overlay-icon icon="gear"></astro-dev-overlay-icon> Settings</h1>
<h1><astro-dev-toolbar-icon icon="gear"></astro-dev-toolbar-icon> Settings</h1>
</header>
<hr />
@ -150,7 +150,7 @@ export default {
switch (setting.input) {
case 'checkbox': {
const astroToggle = document.createElement('astro-dev-overlay-toggle');
const astroToggle = document.createElement('astro-dev-toolbar-toggle');
astroToggle.input.addEventListener('change', setting.changeEvent);
astroToggle.input.checked = settings.config[setting.settingKey];
label.append(astroToggle);

2
packages/astro/src/runtime/client/dev-overlay/plugins/utils/highlight.ts
View file

@ -2,7 +2,7 @@ import type { DevOverlayHighlight } from '../../ui-library/highlight.js';
import type { Icon } from '../../ui-library/icons.js';
export function createHighlight(rect: DOMRect, icon?: Icon) {
const highlight = document.createElement('astro-dev-overlay-highlight');
const highlight = document.createElement('astro-dev-toolbar-highlight');
if (icon) highlight.icon = icon;
highlight.tabIndex = 0;

2
packages/astro/src/runtime/client/dev-overlay/plugins/utils/window.ts
View file

@ -1,5 +1,5 @@
export function createWindowElement(content: string) {
const windowElement = document.createElement('astro-dev-overlay-window');
const windowElement = document.createElement('astro-dev-toolbar-window');
windowElement.innerHTML = content;
return windowElement;
}

6
packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts
View file

@ -48,7 +48,7 @@ export default {
font-size: 22px;
}
astro-dev-overlay-icon {
astro-dev-toolbar-icon {
width: 1em;
height: 1em;
padding: 8px;
@ -58,7 +58,7 @@ export default {
}
</style>
<header>
<h1><astro-dev-overlay-icon icon="lightbulb"></astro-dev-overlay-icon>No islands detected.</h1>
<h1><astro-dev-toolbar-icon icon="lightbulb"></astro-dev-toolbar-icon>No islands detected.</h1>
</header>
`
);
@ -111,7 +111,7 @@ export default {
}
function buildIslandTooltip(island: HTMLElement) {
const tooltip = document.createElement('astro-dev-overlay-tooltip');
const tooltip = document.createElement('astro-dev-toolbar-tooltip');
tooltip.sections = [];
const islandProps = island.getAttribute('props')

3
packages/astro/src/runtime/client/dev-overlay/ui-library/button.ts
View file

@ -72,7 +72,8 @@ export class DevOverlayButton extends HTMLElement {
border-color: rgba(249, 196, 215, 0.33);
}
::slotted(astro-dev-overlay-icon) {
::slotted(astro-dev-overlay-icon),
::slotted(astro-dev-toolbar-icon) {
display: inline-block;
height: 1em;
width: 1em;

2
packages/astro/src/vite-plugin-astro-server/route.ts
View file

@ -401,7 +401,7 @@ async function getScriptsAndStyles({ pipeline, filePath }: GetScriptsAndStylesPa
if (
settings.config.devOverlay.enabled &&
(await settings.preferences.get('devOverlay.enabled'))
(await settings.preferences.get('devToolbar.enabled'))
) {
scripts.add({
props: {

2
packages/astro/src/vite-plugin-dev-overlay/vite-plugin-dev-overlay.ts
View file

@ -16,7 +16,7 @@ export default function astroDevOverlay({ settings }: AstroPluginOptions): vite.
if (id === resolvedVirtualModuleId) {
return `
export const loadDevOverlayPlugins = async () => {
return [${settings.devOverlayPlugins
return [${settings.devToolbarApps
.map((plugin) => `(await import('${plugin}')).default`)
.join(',')}];
};