audit-ui.ts — astro Source File

Source Code

import { escape as escapeHTML } from 'html-escaper';
import type { DevToolbarMetadata } from '../../../../../../types/public/toolbar.js';
import {
	attachTooltipToHighlight,
	createHighlight,
	getElementsPositionInDocument,
} from '../../utils/highlight.js';
import { getAnnotationsForElement } from '../annotations.js';
import type { Audit } from '../index.js';
import { type ResolvedAuditRule, resolveAuditRule } from '../rules/index.js';
import type { DevToolbarAuditListItem } from './audit-list-item.js';

function truncate(val: string, maxLength: number): string {
	return val.length > maxLength ? val.slice(0, maxLength - 1) + '…' : val;
}

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

// ... (119 more lines)