toolbar.ts — astro Source File

Source Code

import type { ResolvedDevToolbarApp as DevToolbarAppDefinition } from '../../../types/public/toolbar.js';
import { serverHelpers, type ToolbarAppEventTarget } from './helpers.js';
import { settings } from './settings.js';
import { getIconElement, type Icon, isDefinedIcon } from './ui-library/icons.js';
import type { Placement } from './ui-library/window.js';

export type DevToolbarApp = DevToolbarAppDefinition & {
	builtIn: boolean;
	active: boolean;
	status: 'ready' | 'loading' | 'error';
	notification: {
		state: boolean;
		level?: 'error' | 'warning' | 'info';
	};
	eventTarget: ToolbarAppEventTarget;
};
const WS_EVENT_NAME = 'astro-dev-toolbar';

const HOVER_DELAY = 2 * 1000;
const DEVBAR_HITBOX_ABOVE = 42;

export class AstroDevToolbar extends HTMLElement {
	shadowRoot: ShadowRoot;
	delayedHideTimeout: number | undefined;
	devToolbarContainer: HTMLDivElement | undefined;
	apps: DevToolbarApp[] = [];
	hasBeenInitialized = false;
	// TODO: This should be dynamic based on the screen size or at least configurable, erika - 2023-11-29
	customAppsToShow = 3;

	constructor() {
		super();
		this.shadowRoot = this.attachShadow({ mode: 'open' });
	}

	/**
	 * All one-time DOM setup runs through here. Only ever call this once,
	 * in connectedCallback(), and protect it from being called again.
	 */
	init() {
		this.shadowRoot.innerHTML = `
		<style>
			:host {
				/* Important! Reset all inherited styles to initial */
				all: initial;
				z-index: 999999;
				view-transition-name: astro-dev-toolbar;
				display: contents;

				/* Hide the dev toolbar on window.print() (CTRL + P) */
				@media print {
					display: none;
				}
			}

			::view-transition-old(astro-dev-toolbar),
			::view-transition-new(astro-dev-toolbar) {
				animation: none;
			}

// ... (545 more lines)