createAuditUI() — astro Function Reference

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

Function typescript DevToolbar ToolbarClient calls 2

Entity Profile

DevToolbar→ ToolbarClient→ createAuditUI() — astro Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

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

export function createAuditUI(audit: Audit, audits: Audit[]) {
	const rect = audit.auditedElement.getBoundingClientRect();
	const highlight = createHighlight(rect, 'warning', { 'data-audit-code': audit.rule.code });

	const resolvedAuditRule = resolveAuditRule(audit.rule, audit.auditedElement);
	const tooltip = buildAuditTooltip(resolvedAuditRule, audit.auditedElement);
	const card = buildAuditCard(resolvedAuditRule, highlight, audit.auditedElement, audits);

	// If a highlight is hovered or focused, highlight the corresponding card for it
	(['focus', 'mouseover'] as const).forEach((event) => {
		const attribute = event === 'focus' ? 'active' : 'hovered';
		highlight.addEventListener(event, () => {
			if (event === 'focus') {
				audits.forEach((adt) => {
					if (adt.card) adt.card.toggleAttribute('active', false);
				});
				if (!card.isManualFocus) card.scrollIntoView();
				card.toggleAttribute('active', true);
			} else {
				card.toggleAttribute(attribute, true);
			}
		});
	});

	highlight.addEventListener('mouseout', () => {
		card.toggleAttribute('hovered', false);
	});

	// Set the highlight/tooltip as being fixed position the highlighted element
	// is fixed. We do this so that we don't mistakenly take scroll position
	// into account when setting the tooltip/highlight positioning.
	//
	// We only do this once due to how expensive computed styles are to calculate,
	// and are unlikely to change. If that turns out to be wrong, reconsider this.
	const { isFixed } = getElementsPositionInDocument(audit.auditedElement);
	if (isFixed) {
		tooltip.style.position = highlight.style.position = 'fixed';
	}

	attachTooltipToHighlight(highlight, tooltip, audit.auditedElement);

	return { highlight, card };
}