astro Architecture Docs
Home / Class/ AstroDevToolbar Class — astro Architecture

AstroDevToolbar Class — astro Architecture

Architecture documentation for the AstroDevToolbar class in toolbar.ts from the astro codebase.

Class typescript DevToolbar

Entity Profile

Dependency Diagram

graph TD
  833f7e6d_4781_eb37_c633_27829bbb8361["AstroDevToolbar"]
  6a1a8bab_1e39_a18b_630a_7bc4ee8ce93a["toolbar.ts"]
  833f7e6d_4781_eb37_c633_27829bbb8361 -->|defined in| 6a1a8bab_1e39_a18b_630a_7bc4ee8ce93a
  8ce79036_208d_071a_573c_758b96155ddd["constructor()"]
  833f7e6d_4781_eb37_c633_27829bbb8361 -->|method| 8ce79036_208d_071a_573c_758b96155ddd
  e295abb8_a27c_a9ba_5daf_4ea2ac1d163e["init()"]
  833f7e6d_4781_eb37_c633_27829bbb8361 -->|method| e295abb8_a27c_a9ba_5daf_4ea2ac1d163e
  593d4863_5062_9efc_165f_2f1fac2dce1d["connectedCallback()"]
  833f7e6d_4781_eb37_c633_27829bbb8361 -->|method| 593d4863_5062_9efc_165f_2f1fac2dce1d
  9028096c_54ca_ca1e_b2cb_f6201ef5a538["attachEvents()"]
  833f7e6d_4781_eb37_c633_27829bbb8361 -->|method| 9028096c_54ca_ca1e_b2cb_f6201ef5a538
  7e14b19e_e40c_89de_0e1a_ee47b118ee6f["initApp()"]
  833f7e6d_4781_eb37_c633_27829bbb8361 -->|method| 7e14b19e_e40c_89de_0e1a_ee47b118ee6f
  794870ff_2fac_eb49_42a7_ffd9c75c0a9e["getAppTemplate()"]
  833f7e6d_4781_eb37_c633_27829bbb8361 -->|method| 794870ff_2fac_eb49_42a7_ffd9c75c0a9e
  f8b96f39_d45a_5dec_d67b_6b8090c40c52["getAppById()"]
  833f7e6d_4781_eb37_c633_27829bbb8361 -->|method| f8b96f39_d45a_5dec_d67b_6b8090c40c52
  b2d441c5_a363_0a99_57fc_b8f8854a4ea8["getAppCanvasById()"]
  833f7e6d_4781_eb37_c633_27829bbb8361 -->|method| b2d441c5_a363_0a99_57fc_b8f8854a4ea8
  360742fe_0e10_f36e_4863_bd7718e42016["getAppButtonById()"]
  833f7e6d_4781_eb37_c633_27829bbb8361 -->|method| 360742fe_0e10_f36e_4863_bd7718e42016
  8bc52765_9660_aff0_d7e3_374e4e252973["toggleAppStatus()"]
  833f7e6d_4781_eb37_c633_27829bbb8361 -->|method| 8bc52765_9660_aff0_d7e3_374e4e252973
  b54bc602_4007_3efe_883b_8c7b5af995e9["setAppStatus()"]
  833f7e6d_4781_eb37_c633_27829bbb8361 -->|method| b54bc602_4007_3efe_883b_8c7b5af995e9
  1f3e4d0c_afaf_aee1_6276_bff650989d71["isHidden()"]
  833f7e6d_4781_eb37_c633_27829bbb8361 -->|method| 1f3e4d0c_afaf_aee1_6276_bff650989d71
  efc01d18_85ec_e25d_5ba4_8115b21ae4ec["getActiveApp()"]
  833f7e6d_4781_eb37_c633_27829bbb8361 -->|method| efc01d18_85ec_e25d_5ba4_8115b21ae4ec

Relationship Graph

Source Code

packages/astro/src/runtime/client/dev-toolbar/toolbar.ts lines 22–576

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;
			}

			#dev-toolbar-root {
				position: fixed;
				bottom: 0px;
				z-index: 2000000010;
				display: flex;
				flex-direction: column;
				align-items: center;
				transition: bottom 0.35s cubic-bezier(0.485, -0.050, 0.285, 1.505);
				pointer-events: none;
			}

			#dev-toolbar-root[data-hidden] {
				bottom: -40px;
			}

			#dev-toolbar-root[data-hidden] #dev-bar .item {
				opacity: 0.2;
			}

			#dev-toolbar-root[data-placement="bottom-left"] {
				left: 16px;
			}
			#dev-toolbar-root[data-placement="bottom-center"] {
				left: 50%;
				transform: translateX(-50%);
			}
			#dev-toolbar-root[data-placement="bottom-right"] {
				right: 16px;
			}

			#dev-bar-hitbox-above,
			#dev-bar-hitbox-below {
				width: 100%;
				pointer-events: auto;
			}
			#dev-bar-hitbox-above {
				height: ${DEVBAR_HITBOX_ABOVE}px;
			}
			#dev-bar-hitbox-below {
				height: 16px;
			}
			#dev-bar {

Domain

Defined In

Source

Frequently Asked Questions

What is the AstroDevToolbar class?
AstroDevToolbar is a class in the astro codebase, defined in packages/astro/src/runtime/client/dev-toolbar/toolbar.ts.
Where is AstroDevToolbar defined?
AstroDevToolbar is defined in packages/astro/src/runtime/client/dev-toolbar/toolbar.ts at line 22.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free