buildAuditTooltip() — astro Function Reference

Architecture documentation for the buildAuditTooltip() function in audit-ui.ts from the astro codebase.

Function typescript DevToolbar ToolbarClient called by 1

Entity Profile

DevToolbar→ ToolbarClient→ buildAuditTooltip() — astro Function Reference

Dependency Diagram

graph TD
  06258773_76c5_ab84_3fe7_7ac9cc382207["buildAuditTooltip()"]
  d8edbadc_4bcf_95cc_05c1_73dd76db87a8["audit-ui.ts"]
  06258773_76c5_ab84_3fe7_7ac9cc382207 -->|defined in| d8edbadc_4bcf_95cc_05c1_73dd76db87a8
  9f3390ee_a97d_3811_33c2_635c8f65c91b["createAuditUI()"]
  9f3390ee_a97d_3811_33c2_635c8f65c91b -->|calls| 06258773_76c5_ab84_3fe7_7ac9cc382207
  style 06258773_76c5_ab84_3fe7_7ac9cc382207 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/runtime/client/dev-toolbar/apps/audit/ui/audit-ui.ts lines 61–94

function buildAuditTooltip(rule: ResolvedAuditRule, element: Element) {
	const tooltip = document.createElement('astro-dev-toolbar-tooltip');
	const { title, message } = rule;

	tooltip.sections = [
		{
			icon: 'warning',
			title: escapeHTML(title),
		},
		{
			content: escapeHTML(message),
		},
	];

	const { file: elementFile, location: elementPosition } = getAnnotationsForElement(element) ?? {};

	if (elementFile) {
		const elementFileWithPosition = elementFile + (elementPosition ? ':' + elementPosition : '');

		tooltip.sections.push({
			content: elementFileWithPosition.slice(
				(window as DevToolbarMetadata).__astro_dev_toolbar__.root.length - 1, // We want to keep the final slash, so minus one.
			),
			clickDescription: 'Click to go to file',
			async clickAction() {
				// NOTE: The path here has to be absolute and without any errors (no double slashes etc)
				// or Vite will silently fail to open the file. Quite annoying.
				await fetch('/__open-in-editor?file=' + encodeURIComponent(elementFileWithPosition));
			},
		});
	}

	return tooltip;
}