Add JS for SQLite query display in QM 4.0 shadow DOM

Inject <details> elements into QM 4.0's Preact-rendered DB queries
panel inside the shadow DOM. Waits for DOMContentLoaded so QM has
attached the shadow root, then uses a debounced MutationObserver to
re-inject after panel switches and re-renders.

Author: JanJakes

packages/plugin-sqlite-database-integration/integrations/query-monitor/query-monitor-sqlite.js

@@ -0,0 +1,81 @@
+const STYLE = `
+	details.qm-sqlite {
+		margin: 6px 0 0;
+	}
+	details.qm-sqlite summary {
+		cursor: pointer;
+	}
+	details.qm-sqlite ol {
+		margin: 6px 0 0;
+		padding-left: 24px;
+		list-style: decimal;
+	}
+`;
+
+const container = document.getElementById( 'query-monitor-container' );
+const sqliteData = window.QueryMonitorData?.data?.sqlite?.data?.queries;
+
+if ( container && sqliteData ) {
+	// QM attaches the shadow root in its own DOMContentLoaded listener.
+	// Our module is loaded after QM's, so our listener fires after QM's.
+	document.addEventListener( 'DOMContentLoaded', () => {
+		const shadowRoot = container.shadowRoot;
+		if ( ! shadowRoot ) {
+			return;
+		}
+		inject( shadowRoot, sqliteData );
+
+		// Re-inject after Preact re-renders (panel switches, filters, etc.).
+		// Debounced to avoid excessive work during rapid DOM updates.
+		let timer;
+		new MutationObserver( () => {
+			clearTimeout( timer );
+			timer = setTimeout( () => inject( shadowRoot, sqliteData ), 100 );
+		} ).observe( shadowRoot, { childList: true, subtree: true } );
+	} );
+}
+
+function inject( shadowRoot, data ) {
+	if ( ! shadowRoot.querySelector( 'style.qm-sqlite-style' ) ) {
+		const style = document.createElement( 'style' );
+		style.className = 'qm-sqlite-style';
+		style.textContent = STYLE;
+		shadowRoot.appendChild( style );
+	}
+
+	for ( const [ index, row ] of shadowRoot.querySelectorAll( 'tbody tr' ).entries() ) {
+		injectRow( row, data[ index ] );
+	}
+}
+
+function injectRow( row, queries ) {
+	if ( ! queries?.length || row.querySelector( 'details.qm-sqlite' ) ) {
+		return;
+	}
+	const sqlCode = row.querySelector( 'td code' );
+	if ( ! sqlCode ) {
+		return;
+	}
+
+	const details = document.createElement( 'details' );
+	details.className = 'qm-sqlite';
+
+	// Prevent QM's row click handlers from firing when toggling.
+	details.addEventListener( 'click', ( e ) => e.stopPropagation() );
+
+	const summary = document.createElement( 'summary' );
+	summary.textContent = `Executed ${ queries.length } SQLite ${ queries.length === 1 ? 'Query' : 'Queries' }`;
+
+	const ol = document.createElement( 'ol' );
+	for ( const sql of queries ) {
+		const li = document.createElement( 'li' );
+		li.className = 'qm-sqlite-query';
+		const code = document.createElement( 'code' );
+		code.textContent = sql;
+		li.append( code );
+		ol.append( li );
+	}
+
+	details.append( summary, ol );
+	sqlCode.parentElement.append( details );
+}