feat: unflag dev overlay (#9232)

* feat: unflag dev overlay

* fix: oops

* fix: check for both config existing

* fix: don't use flag in e2e tests

* Disable view transition tests

* Disable more

* even more

---------

Co-authored-by: Matthew Phillips <matthew@skypack.dev>

packages/astro/e2e/astro-envs.test.js

@@ -1,7 +1,12 @@
 import { expect } from '@playwright/test';
 import { testFactory } from './test-utils.js';
 
-const test = testFactory({ root: './fixtures/astro-envs/' });
+const test = testFactory({
+	root: './fixtures/astro-envs/',
+	devOverlay: {
+		enabled: false,
+	}
+});
 
 let devServer;
 

packages/astro/e2e/css.test.js

@@ -3,6 +3,9 @@ import { testFactory } from './test-utils.js';
 
 const test = testFactory({
 	root: './fixtures/css/',
+	devOverlay: {
+		enabled: false,
+	},
 });
 
 let devServer;

packages/astro/e2e/fixtures/astro-component/astro.config.mjs

@@ -3,5 +3,8 @@ import preact from '@astrojs/preact'
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [preact()]
+  integrations: [preact()],
+	devOverlay: {
+		enabled: false,
+	}
 });

packages/astro/e2e/fixtures/astro-envs/astro.config.mjs

@@ -5,5 +5,8 @@ import vue from '@astrojs/vue';
 export default defineConfig({
 	site: 'http://example.com',
 	base: '/blog',
+	devOverlay: {
+		enabled: false,
+	},
 	integrations: [vue()],
 });

packages/astro/e2e/fixtures/dev-overlay/astro.config.mjs

@@ -2,7 +2,4 @@ import preact from '@astrojs/preact';
 
 export default {
 	integrations: [preact()],
-	experimental: {
-		devOverlay: true
-	}
 };

packages/astro/e2e/fixtures/lit-component/astro.config.mjs

@@ -4,4 +4,7 @@ import lit from '@astrojs/lit';
 // https://astro.build/config
 export default defineConfig({
 	integrations: [lit()],
+	devOverlay: {
+		enabled: false,
+	}
 });

packages/astro/e2e/fixtures/prefetch/astro.config.mjs

@@ -2,5 +2,8 @@ import { defineConfig } from 'astro/config';
 
 // https://astro.build/config
 export default defineConfig({
+	devOverlay: {
+		enabled: false,
+	},
 	prefetch: true
 });

packages/astro/e2e/fixtures/tailwindcss/astro.config.mjs

@@ -9,6 +9,9 @@ export default defineConfig({
 			configFile: fileURLToPath(new URL('./tailwind.config.js', import.meta.url)),
 		}),
 	],
+	devOverlay: {
+		enabled: false,
+	},
 	vite: {
 		build: {
 			assetsInlineLimit: 0,

packages/astro/e2e/fixtures/view-transitions/astro.config.mjs

@@ -13,6 +13,9 @@ export default defineConfig({
 		'/redirect-two': '/two',
 		'/redirect-external': 'http://example.com/',
 	},
+	devOverlay: {
+		enabled: false,
+	},
 	vite: {
 		build: {
 			assetsInlineLimit: 0,

packages/astro/e2e/hmr.test.js

@@ -3,6 +3,9 @@ import { testFactory } from './test-utils.js';
 
 const test = testFactory({
 	root: './fixtures/hmr/',
+	devOverlay: {
+		enabled: false,
+	},
 });
 
 let devServer;

packages/astro/src/@types/astro.ts

@@ -1154,6 +1154,34 @@ export interface AstroUserConfig {
 		remotePatterns?: Partial<RemotePattern>[];
 	};
 
+	/**
+	 * @docs
+	 * @kind heading
+	 * @name Dev Overlay Options
+	 */
+	devOverlay?: {
+		/**
+		 * @docs
+		 * @name devOverlay.enabled
+		 * @type {boolean}
+		 * @default `true`
+		 * @description
+		 * Whether to enable the dev overlay. This overlay 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 overlay for yourself, run `npm run astro preferences disable devOverlay`. To disable the overlay for all your Astro projects, run `npm run astro preferences disable devOverlay --global`.
+		 */
+		enabled: boolean;
+		/**
+		 * @docs
+		 * @name devOverlay.defaultState
+		 * @type {'minimized' | 'expanded'}
+		 * @default `minimized`
+		 * @description
+		 * Whether the dev overlay should be expanded or minimized by default.
+		 */
+		defaultState: 'minimized' | 'expanded';
+	};
+
 	/**
 	 * @docs
 	 * @kind heading
@@ -1379,25 +1407,6 @@ export interface AstroUserConfig {
 		 */
 		optimizeHoistedScript?: boolean;
 
-		/**
-		 * @docs
-		 * @name experimental.devOverlay
-		 * @type {boolean}
-		 * @default `false`
-		 * @version 3.4.0
-		 * @description
-		 * Enable a dev overlay in development mode. This overlay allows you to inspect your page islands, see helpful audits on performance and accessibility, and more.
-		 *
-		 * ```js
-		 * {
-		 * 	experimental: {
-		 * 		devOverlay: true,
-		 * 	},
-		 * }
-		 * ```
-		 */
-		devOverlay?: boolean;
-
 		/**
 		 * @docs
 		 * @name experimental.i18n
@@ -2517,6 +2526,7 @@ export interface DevOverlayPlugin {
 export type DevOverlayMetadata = Window &
 	typeof globalThis & {
 		__astro_dev_overlay__: {
+			defaultState: AstroConfig['devOverlay']['defaultState'];
 			root: string;
 			version: string;
 			debugInfo: string;

packages/astro/src/core/compile/compile.ts

@@ -46,7 +46,8 @@ export async function compile({
 			scopedStyleStrategy: astroConfig.scopedStyleStrategy,
 			resultScopedSlot: true,
 			transitionsAnimationURL: 'astro/components/viewtransitions.css',
-			annotateSourceFile: !viteConfig.isProduction && astroConfig.experimental.devOverlay,
+			annotateSourceFile:
+				!viteConfig.isProduction && astroConfig.devOverlay && astroConfig.devOverlay.enabled,
 			preprocessStyle: createStylePreprocessor({
 				filename,
 				viteConfig,

packages/astro/src/core/config/schema.ts

@@ -41,6 +41,10 @@ const ASTRO_CONFIG_DEFAULTS = {
 	image: {
 		service: { entrypoint: 'astro/assets/services/sharp', config: {} },
 	},
+	devOverlay: {
+		enabled: true,
+		defaultState: 'minimized',
+	},
 	compressHTML: true,
 	server: {
 		host: false,
@@ -54,7 +58,6 @@ const ASTRO_CONFIG_DEFAULTS = {
 	redirects: {},
 	experimental: {
 		optimizeHoistedScript: false,
-		devOverlay: false,
 		contentCollectionCache: false,
 	},
 } satisfies AstroUserConfig & { server: { open: boolean } };
@@ -223,6 +226,14 @@ export const AstroConfigSchema = z.object({
 				.default([]),
 		})
 		.default(ASTRO_CONFIG_DEFAULTS.image),
+	devOverlay: z
+		.object({
+			enabled: z.boolean().default(ASTRO_CONFIG_DEFAULTS.devOverlay.enabled),
+			defaultState: z
+				.enum(['minimized', 'expanded'])
+				.default(ASTRO_CONFIG_DEFAULTS.devOverlay.defaultState),
+		})
+		.default(ASTRO_CONFIG_DEFAULTS.devOverlay),
 	markdown: z
 		.object({
 			syntaxHighlight: z
@@ -299,7 +310,6 @@ export const AstroConfigSchema = z.object({
 				.boolean()
 				.optional()
 				.default(ASTRO_CONFIG_DEFAULTS.experimental.optimizeHoistedScript),
-			devOverlay: z.boolean().optional().default(ASTRO_CONFIG_DEFAULTS.experimental.devOverlay),
 			i18n: z.optional(
 				z
 					.object({

packages/astro/src/runtime/client/dev-overlay/overlay.ts

@@ -1,5 +1,8 @@
 /* eslint-disable no-console */
-import type { DevOverlayPlugin as DevOverlayPluginDefinition } from '../../../@types/astro.js';
+import type {
+	DevOverlayMetadata,
+	DevOverlayPlugin as DevOverlayPluginDefinition,
+} from '../../../@types/astro.js';
 import { settings } from './settings.js';
 import { getIconElement, isDefinedIcon, type Icon } from './ui-library/icons.js';
 
@@ -23,6 +26,7 @@ export class AstroDevOverlay extends HTMLElement {
 	plugins: DevOverlayPlugin[] = [];
 	HOVER_DELAY = 750;
 	hasBeenInitialized = false;
+	// TODO: This should be dynamic based on the screen size or at least configurable, erika - 2023-11-29
 	customPluginsToShow = 3;
 
 	constructor() {
@@ -257,7 +261,12 @@ export class AstroDevOverlay extends HTMLElement {
 			}
 		</style>
 
-		<div id="dev-overlay">
+		<div id="dev-overlay"${
+			((window as DevOverlayMetadata)?.__astro_dev_overlay__?.defaultState ?? 'minimized') ===
+			'minimized'
+				? ' data-hidden '
+				: ''
+		}>
 			<div id="dev-bar">
 				<div id="bar-container">
 					${this.plugins

packages/astro/src/vite-plugin-astro-server/route.ts

@@ -12,8 +12,8 @@ import type {
 import { getInfoOutput } from '../cli/info/index.js';
 import { ASTRO_VERSION } from '../core/constants.js';
 import { AstroErrorData, isAstroError } from '../core/errors/index.js';
-import { sequence } from '../core/middleware/index.js';
 import { req } from '../core/messages.js';
+import { sequence } from '../core/middleware/index.js';
 import { loadMiddleware } from '../core/middleware/loadMiddleware.js';
 import {
 	createRenderContext,
@@ -384,7 +384,7 @@ async function getScriptsAndStyles({ pipeline, filePath }: GetScriptsAndStylesPa
 			children: '',
 		});
 
-		if (settings.config.experimental.devOverlay) {
+		if (settings.config.devOverlay.enabled) {
 			scripts.add({
 				props: {
 					type: 'module',
@@ -394,13 +394,12 @@ async function getScriptsAndStyles({ pipeline, filePath }: GetScriptsAndStylesPa
 			});
 
 			const additionalMetadata: DevOverlayMetadata['__astro_dev_overlay__'] = {
+				defaultState: settings.config.devOverlay.defaultState,
 				root: fileURLToPath(settings.config.root),
 				version: ASTRO_VERSION,
 				debugInfo: await getInfoOutput({ userConfig: settings.config, print: false }),
 			};
 
-			settings.config;
-
 			// Additional data for the dev overlay
 			scripts.add({
 				props: {},