Render SQLite queries in Query Monitor debug panel

Author: JanJakes

integrations/query-monitor/plugin.php

@@ -0,0 +1,84 @@
+<?php // phpcs:disable WordPress.Files.FileName.InvalidClassFileName
+
+if ( ! class_exists( 'QM_Output_Html_DB_Queries' ) || ! class_exists( 'QM_Collectors' ) ) {
+	return;
+}
+
+/**
+ * Override Query Monitor's "QM_Output_Html_DB_Queries" to inject SQLite info.
+ */
+class SQLite_QM_Output_Html_DB_Queries extends QM_Output_Html_DB_Queries {
+	/**
+	 * Override the parent method to inject SQLite info.
+	 *
+	 * Currently, Query Monitor doesn't provide a way to customize the rendered
+	 * query HTML. To overcome this limitation, we capture the HTML generated by
+	 * the parent method and modify it to inject the SQLite query data.
+	 *
+	 * @param array<string, mixed> $row  The row data.
+	 * @param array<int, string>   $cols The column names.
+	 * @return void
+	 */
+	protected function output_query_row( array $row, array $cols ) {
+		// Capture the query row HTML.
+		ob_start();
+		parent::output_query_row( $row, $cols );
+		$data = ob_get_length() > 0 ? ob_get_clean() : '';
+
+		// Get the corresponding SQLite queries.
+		global $wpdb;
+		static $query_index = 0;
+		$sqlite_queries     = $wpdb->queries[ $query_index ]['sqlite_queries'] ?? array();
+		$sqlite_query_count = count( $sqlite_queries );
+		$query_index       += 1;
+
+		// Build the SQLite info HTML.
+		$sqlite_info  = sprintf(
+			'<div class="qm-info" style="margin: 15px 0 8px;">Executed %d SQLite %s:</div>',
+			$sqlite_query_count,
+			1 === $sqlite_query_count ? 'Query' : 'Queries'
+		);
+		$sqlite_info .= '<ol>';
+		foreach ( $sqlite_queries as $query ) {
+			$sqlite_info .= '<li class="qm-sqlite-query" style="list-style: decimal !important; margin-left: 20px !important;">';
+			$sqlite_info .= '<code>' . str_replace( '<br>', '', self::format_sql( $query['sql'] ) ) . '</code>';
+			$sqlite_info .= '</li>';
+		}
+		$sqlite_info .= '</ol>';
+
+		// Inject toggle button and SQLite info into the query row HTML.
+		$toggle_button  = '<button class="qm-toggle sqlite-toggle" data-on="+" data-off="-" aria-expanded="false" aria-label="Toggle SQLite queries" title="Toggle SQLite queries"><span aria-hidden="true">+</span></button>';
+		$toggle_content = sprintf( '<div class="qm-toggled" style="display: none;">%s</div>', $sqlite_info );
+
+		$data = str_replace( 'qm-row-sql', 'qm-row-sql qm-has-toggle', $data );
+		$data = preg_replace(
+			'/(<td class="qm-row-sql.*?">)(.*?)(<\/td>)/s',
+			implode(
+				array(
+					'$1',
+					str_replace( '$', '\\$', $toggle_button ),
+					'$2',
+					str_replace( '$', '\\$', $toggle_content ),
+					'$3',
+				)
+			),
+			$data
+		);
+		echo $data;
+	}
+}
+
+// Remove the default Query Monitor class and replace it with the custom one.
+remove_filter( 'qm/outputter/html', 'register_qm_output_html_db_queries', 20 );
+add_filter(
+	'qm/outputter/html',
+	function () {
+		$collector = QM_Collectors::get( 'db_queries' );
+		if ( $collector ) {
+			$output['db_queries'] = new SQLite_QM_Output_Html_DB_Queries( $collector );
+		}
+		return $output;
+	},
+	30,
+	2
+);

load.php

@@ -26,3 +26,8 @@
 require_once __DIR__ . '/deactivate.php';
 require_once __DIR__ . '/admin-notices.php';
 require_once __DIR__ . '/health-check.php';
+
+// Query Monitor integration:
+if ( defined( 'SQLITE_QUERY_MONITOR_LOADED' ) && SQLITE_QUERY_MONITOR_LOADED ) {
+	require_once __DIR__ . '/integrations/query-monitor/plugin.php';
+}

wp-includes/sqlite/class-wp-sqlite-db.php

@@ -508,6 +508,13 @@ public function query( $query ) {
 			} else {
 				$this->queries[ $i ]['result'] = (int) $return_val;
 			}
+
+			// Add SQLite query data.
+			if ( $this->dbh instanceof WP_SQLite_Driver ) {
+				$this->queries[ $i ]['sqlite_queries'] = $this->dbh->get_last_sqlite_queries();
+			} else {
+				$this->queries[ $i ]['sqlite_queries'] = $this->dbh->executed_sqlite_queries;
+			}
 		}
 		return $return_val;
 	}