From 49d4b6dcf23f20bfb7f8771a2ae93bceb6a0ddc1 Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Thu, 7 Nov 2024 17:42:05 +0100
Subject: [PATCH 01/23] Add advanced fragment handling

---
 html-api-debugger/html-api-debugger.php    | 14 ++--
 html-api-debugger/html-api-integration.php | 62 ++++++-----------
 html-api-debugger/interactivity.php        | 18 ++---
 html-api-debugger/view.js                  | 79 +++++++++++-----------
 4 files changed, 76 insertions(+), 97 deletions(-)

diff --git a/html-api-debugger/html-api-debugger.php b/html-api-debugger/html-api-debugger.php
index b1fa774..a58c464 100644
--- a/html-api-debugger/html-api-debugger.php
+++ b/html-api-debugger/html-api-debugger.php
@@ -44,8 +44,7 @@ function () {
 						// phpcs:ignore Universal.Operators.DisallowShortTernary.Found
 						$html = $request->get_json_params()['html'] ?: '';
 						$options = array(
-							'quirks_mode' => $request->get_json_params()['quirksMode'] ?? false,
-							'full_parser' => $request->get_json_params()['fullParser'] ?? false,
+							'context_html' => $request->get_json_params()['contextHTML'] ?: null,
 						);
 						return prepare_html_result_object( $html, $options );
 					},
@@ -111,14 +110,19 @@ function () {
 				function () {
 					require_once __DIR__ . '/interactivity.php';
 
+					$options = array(
+						'context_html' => null,
+					);
+
 					$html = '';
 					// phpcs:disable WordPress.Security.NonceVerification.Recommended
 					if ( isset( $_GET['html'] ) && is_string( $_GET['html'] ) ) {
 						$html = stripslashes( $_GET['html'] );
 					}
-
-					$options = array();
-					// @todo Add query args for other options
+					if ( isset( $_GET['contextHTML'] ) && is_string( $_GET['contextHTML'] ) ) {
+						$options['context_html'] = stripslashes( $_GET['contextHTML'] );
+					}
+					// phpcs:enable WordPress.Security.NonceVerification.Recommended
 
 					// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
 					echo namespace\Interactivity\generate_page( $html, $options );
diff --git a/html-api-debugger/html-api-integration.php b/html-api-debugger/html-api-integration.php
index 3e428ab..fd8ca9f 100644
--- a/html-api-debugger/html-api-integration.php
+++ b/html-api-debugger/html-api-integration.php
@@ -12,8 +12,7 @@
  * Get information about HTML API supported features
  */
 function get_supports(): array {
-	$html_processor_rc       = new ReflectionClass( WP_HTML_Processor::class );
-	$html_processor_state_rc = new ReflectionClass( WP_HTML_Processor_State::class );
+	$html_processor_rc = new ReflectionClass( WP_HTML_Processor::class );
 
 	return array(
 		'is_virtual' => $html_processor_rc->hasMethod( 'is_virtual' ),
@@ -21,6 +20,7 @@ function get_supports(): array {
 		'quirks_mode' => $html_processor_rc->hasProperty( 'compat_mode' ),
 		'doctype' => method_exists( WP_HTML_Processor::class, 'get_doctype_info' ),
 		'normalize' => method_exists( WP_HTML_Processor::class, 'normalize' ),
+		'create_fragment_advanced' => method_exists( WP_HTML_Processor::class, 'create_fragment_at_current_node' ),
 	);
 }
 
@@ -53,22 +53,25 @@ function get_tree( string $html, array $options ): array {
 	$processor_bookmarks = new ReflectionProperty( WP_HTML_Processor::class, 'bookmarks' );
 	$processor_bookmarks->setAccessible( true );
 
-	$use_full_parser = method_exists( WP_HTML_Processor::class, 'create_full_parser' ) && ( $options['full_parser'] ?? false );
-
-	$processor = $use_full_parser
-		? WP_HTML_Processor::create_full_parser( $html )
-		: WP_HTML_Processor::create_fragment( $html );
-
-	$doctype_value = $use_full_parser ? '' : 'html';
 	if (
-		! $use_full_parser &&
-		( $options['quirks_mode'] ?? false ) &&
-		property_exists( WP_HTML_Processor::class, 'compat_mode' ) &&
-		defined( WP_HTML_Processor::class . '::QUIRKS_MODE' )
+		method_exists( WP_HTML_Processor::class, 'create_fragment_at_current_node' ) &&
+		$options['context_html']
 	) {
-		$processor_compat_mode = new ReflectionProperty( WP_HTML_Processor::class, 'compat_mode' );
-		$processor_compat_mode->setValue( $processor, WP_HTML_Processor::QUIRKS_MODE );
-		$doctype_value = '';
+		$context_processor = WP_HTML_Processor::create_full_parser( $options['context_html'] );
+
+		while ( $context_processor->next_tag() ) {
+			$context_processor->set_bookmark( 'final_node' );
+		}
+		if ( $context_processor->has_bookmark( 'final_node' ) ) {
+			$context_processor->seek( 'final_node' );
+			$processor = $context_processor->create_fragment_at_current_node( $html );
+		}
+
+		if ( ! isset( $processor ) ) {
+			throw new Exception( 'Could not create processor from context HTML.' );
+		}
+	} else {
+		$processor = WP_HTML_Processor::create_full_parser( $html );
 	}
 
 	$rc = new ReflectionClass( WP_HTML_Processor::class );
@@ -120,33 +123,6 @@ function get_tree( string $html, array $options ): array {
 	);
 
 	$cursor = array( 0 );
-	if ( ! $use_full_parser ) {
-		$tree['childNodes'][] = array(
-			'nodeType' => NODE_TYPE_DOCUMENT_TYPE,
-			'nodeName' => $doctype_value,
-			'nodeValue' => '',
-		);
-		$tree['childNodes'][] = array(
-			'nodeType' => NODE_TYPE_ELEMENT,
-			'nodeName' => 'HTML',
-			'attributes' => array(),
-			'childNodes' => array(
-				array(
-					'nodeType' => NODE_TYPE_ELEMENT,
-					'nodeName' => 'HEAD',
-					'attributes' => array(),
-					'childNodes' => array(),
-				),
-				array(
-					'nodeType' => NODE_TYPE_ELEMENT,
-					'nodeName' => 'BODY',
-					'attributes' => array(),
-					'childNodes' => array(),
-				),
-			),
-		);
-		$cursor               = array( 1, 1 );
-	}
 
 	$compat_mode               = 'CSS1Compat';
 	$doctype_name              = null;
diff --git a/html-api-debugger/interactivity.php b/html-api-debugger/interactivity.php
index a406b74..735fa86 100644
--- a/html-api-debugger/interactivity.php
+++ b/html-api-debugger/interactivity.php
@@ -56,8 +56,7 @@ function generate_page( string $html, array $options ): string {
 			'showClosers' => false,
 			'showInvisible' => false,
 			'showVirtual' => false,
-			'quirksMode' => false,
-			'fullParser' => false,
+			'contextHTML' => $options['context_html'] ?? '',
 
 			'hoverInfo' => 'breadcrumbs',
 			'hoverBreadcrumbs' => true,
@@ -76,6 +75,7 @@ function generate_page( string $html, array $options ): string {
 	data-wp-interactive="<?php echo esc_attr( \HTML_API_Debugger\SLUG ); ?>"
 	data-wp-watch--a="watch"
 	data-wp-watch--b="watchDom"
+	data-wp-watch--url="watchURL"
 	data-wp-run="run"
 	class="html-api-debugger-container html-api-debugger--grid"
 >
@@ -89,11 +89,6 @@ class="html-api-debugger-container html-api-debugger--grid"
 			wrap="off"
 			<?php wp_on_directive( 'input', 'handleInput' ); ?>
 		><?php echo "\n" . esc_textarea( str_replace( "\0", '', $html ) ); ?></textarea>
-		<p data-wp-bind--hidden="!state.htmlPreambleForProcessing">
-			Note: Because HTML API operates in body at this time, this will be prepended:
-			<br>
-			<code data-wp-text="state.htmlPreambleForProcessing"></code>
-		</p>
 	</div>
 	<div>
 		<h2>Rendered output</h2>
@@ -153,8 +148,13 @@ class="html-api-debugger-container html-api-debugger--grid"
 				<label>Show closers <input type="checkbox" data-wp-bind--checked="state.showClosers" <?php wp_on_directive( 'input', 'handleShowClosersClick' ); ?>></label>
 				<label>Show invisible <input type="checkbox" data-wp-bind--checked="state.showInvisible" <?php wp_on_directive( 'input', 'handleShowInvisibleClick' ); ?>></label>
 				<span data-wp-bind--hidden="!state.htmlapiResponse.supports.is_virtual"><label>Show virtual <input type="checkbox" data-wp-bind--checked="state.showVirtual" <?php wp_on_directive( 'input', 'handleShowVirtualClick' ); ?>></label></span>
-				<span data-wp-bind--hidden="!state.htmlapiResponse.supports.quirks_mode"><label>Quirks mode <input type="checkbox" data-wp-bind--checked="state.quirksMode" data-wp-bind--disabled="state.fullParser" <?php wp_on_directive( 'input', 'handleQuirksModeClick' ); ?>></label></span>
-				<span data-wp-bind--hidden="!state.htmlapiResponse.supports.full_parser"><label>Full parser <input type="checkbox" data-wp-bind--checked="state.fullParser" <?php wp_on_directive( 'input', 'handleFullParserClick' ); ?>></label></span>
+				<div data-wp-bind--hidden="!state.htmlapiResponse.supports.create_fragment_advanced">
+					<label>Context html
+						<textarea
+							<?php wp_on_directive( 'input', 'handleContextHtmlInput' ); ?>
+						><?php echo "\n" . esc_textarea( str_replace( "\0", '', $options['context_html'] ?? '' ) ); ?></textarea>
+				</label>
+				</div>
 			</div>
 			<div>
 				<label>
diff --git a/html-api-debugger/view.js b/html-api-debugger/view.js
index f578902..c053733 100644
--- a/html-api-debugger/view.js
+++ b/html-api-debugger/view.js
@@ -61,17 +61,14 @@ let mutationObserver = null;
  * @property {string|null} htmlApiDoctypePublicId
  * @property {string|null} htmlApiDoctypeSystemId
  * @property {string|null} normalizedHtml
- * @property {string} htmlPreambleForProcessing
  * @property {string} formattedHtmlapiResponse
  * @property {HtmlApiResponse} htmlapiResponse
  * @property {URL} playgroundLink
  * @property {string} html
- * @property {string} htmlForProcessing
  * @property {boolean} showClosers
  * @property {boolean} showInvisible
  * @property {boolean} showVirtual
- * @property {boolean} quirksMode
- * @property {boolean} fullParser
+ * @property {string} contextHTML
  * @property {number|null} previewCorePrNumber
  * @property {number|null} previewGutenbergPrNumber
  * @property {Link|null} previewCoreLink
@@ -100,14 +97,17 @@ let mutationObserver = null;
  * @property {()=>void} handleShowInvisibleClick
  * @property {()=>void} handleShowClosersClick
  * @property {()=>void} handleShowVirtualClick
- * @property {()=>Promise<void>} handleQuirksModeClick
- * @property {()=>Promise<void>} handleFullParserClick
+ * @property {()=>void} handleContextHtmlInput
  *
  * @property {()=>void} handleCopyClick
  * @property {()=>void} handleCopyPrInput
  * @property {()=>void} handleCopyPrClick
  *
  * @property {()=>void} onRenderedIframeLoad
+ *
+ * @property {()=>void} watch
+ * @property {()=>void} watchDom
+ * @property {()=>void} watchURL
  */
 
 const createStore = /** @type {typeof I.store<Store>} */ (I.store);
@@ -119,8 +119,6 @@ const store = createStore(NS, {
 		showClosers: Boolean(localStorage.getItem(`${NS}-showClosers`)),
 		showInvisible: Boolean(localStorage.getItem(`${NS}-showInvisible`)),
 		showVirtual: Boolean(localStorage.getItem(`${NS}-showVirtual`)),
-		quirksMode: Boolean(localStorage.getItem(`${NS}-quirksMode`)),
-		fullParser: Boolean(localStorage.getItem(`${NS}-fullParser`)),
 
 		playbackPoint: null,
 		previewCorePrNumber: null,
@@ -218,6 +216,9 @@ const store = createStore(NS, {
 			if (store.state.html) {
 				searchParams.set('html', store.state.html);
 			}
+			if (store.state.contextHTML) {
+				searchParams.set('contextHTML', store.state.contextHTML);
+			}
 			const base = '/wp-admin/admin.php';
 			const u = new URL(
 				'https://playground.wordpress.net/?plugin=html-api-debugger',
@@ -226,23 +227,6 @@ const store = createStore(NS, {
 			return u;
 		},
 
-		get htmlPreambleForProcessing() {
-			if (store.state.fullParser) {
-				return '';
-			}
-			const doctype = `<!DOCTYPE${
-				store.state.htmlapiResponse.supports.quirks_mode &&
-				store.state.quirksMode
-					? ''
-					: ' html'
-			}>`;
-			return `${doctype}<html><body>`;
-		},
-
-		get htmlForProcessing() {
-			return store.state.htmlPreambleForProcessing + store.state.html;
-		},
-
 		get htmlForDisplay() {
 			/** @type {string | undefined} */
 			const html = store.state.playbackHTML ?? store.state.htmlapiResponse.html;
@@ -325,16 +309,9 @@ const store = createStore(NS, {
 		store.render();
 
 		// browsers "eat" some characters from search params…
-		// newlines seem especially problematic in chrome
-		// lets clean up the URL
-		const u = new URL(document.location.href);
-		if (store.state.html) {
-			u.searchParams.set('html', store.state.html);
-			history.replaceState(null, '', u);
-		} else if (u.searchParams.has('html')) {
-			u.searchParams.delete('html');
-			history.replaceState(null, '', u);
-		}
+		// newlines seem especially problematic in chrome.
+		// Let's clean up the URL
+		store.watchURL();
 
 		mutationObserver = new MutationObserver(() => {
 			store.state.hasMutatedDom = true;
@@ -429,8 +406,6 @@ const store = createStore(NS, {
 	handleShowInvisibleClick: getToggleHandler('showInvisible'),
 	handleShowClosersClick: getToggleHandler('showClosers'),
 	handleShowVirtualClick: getToggleHandler('showVirtual'),
-	handleQuirksModeClick: getToggleHandlerWithRefetch('quirksMode'),
-	handleFullParserClick: getToggleHandlerWithRefetch('fullParser'),
 
 	/** @param {Event} e */
 	hoverInfoChange: (e) => {
@@ -443,6 +418,23 @@ const store = createStore(NS, {
 		store.render();
 	},
 
+	watchURL() {
+		const u = new URL(document.location.href);
+		let shouldReplace = false;
+		for (const param of /** @type {const} */ (['html', 'contextHTML'])) {
+			if (store.state[param]) {
+				u.searchParams.set(param, store.state[param]);
+				shouldReplace = true;
+			} else if (u.searchParams.has(param)) {
+				u.searchParams.delete(param);
+				shouldReplace = true;
+			}
+		}
+		if (shouldReplace) {
+			history.replaceState(null, '', u);
+		}
+	},
+
 	// @ts-expect-error This will be transformed by the Interactivity API runtime when called through the store.
 	/** @returns {Promise<void>} */
 	callAPI: function* () {
@@ -455,8 +447,7 @@ const store = createStore(NS, {
 				method: 'POST',
 				body: JSON.stringify({
 					html: store.state.html,
-					quirksMode: store.state.quirksMode,
-					fullParser: store.state.fullParser,
+					contextHTML: store.state.contextHTML,
 				}),
 				headers: {
 					'Content-Type': 'application/json',
@@ -549,7 +540,7 @@ const store = createStore(NS, {
 		mutationObserver?.disconnect();
 		store.state.hasMutatedDom = false;
 
-		const html = store.state.playbackHTML ?? store.state.htmlForProcessing;
+		const html = store.state.playbackHTML ?? store.state.html;
 
 		iframeDocument.open();
 		iframeDocument.write(html);
@@ -579,6 +570,14 @@ const store = createStore(NS, {
 		}
 	},
 
+	/** @param {InputEvent} e */
+	handleContextHtmlInput: function* (e) {
+		const val = /** @type {HTMLInputElement} */ (e.target).value;
+		store.state.contextHTML = val.trim();
+
+		yield store.callAPI();
+	},
+
 	/** @param {InputEvent} e */
 	handleCopyCorePrInput(e) {
 		const val = /** @type {HTMLInputElement} */ (e.target).valueAsNumber;

From f4480d69637602e9308f8cc86cc67c6bdc360cc0 Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Thu, 7 Nov 2024 18:18:38 +0100
Subject: [PATCH 02/23] Align context node in DOM checking

---
 html-api-debugger/html-api-integration.php |  5 +++++
 html-api-debugger/interactivity.php        |  4 +++-
 html-api-debugger/view.js                  | 22 +++++++++++++++++++---
 3 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/html-api-debugger/html-api-integration.php b/html-api-debugger/html-api-integration.php
index fd8ca9f..255dff6 100644
--- a/html-api-debugger/html-api-integration.php
+++ b/html-api-debugger/html-api-integration.php
@@ -124,6 +124,11 @@ function get_tree( string $html, array $options ): array {
 
 	$cursor = array( 0 );
 
+	if ( $context_processor ) {
+		$tree   = array();
+		$cursor = array();
+	}
+
 	$compat_mode               = 'CSS1Compat';
 	$doctype_name              = null;
 	$doctype_public_identifier = null;
diff --git a/html-api-debugger/interactivity.php b/html-api-debugger/interactivity.php
index 735fa86..cf79dc8 100644
--- a/html-api-debugger/interactivity.php
+++ b/html-api-debugger/interactivity.php
@@ -117,7 +117,8 @@ class="html-api-debugger-container html-api-debugger--grid"
 				Rendering mode:&nbsp;<code data-wp-text="state.DOM.renderingMode"></code><br>
 				Doctype name:&nbsp;<code data-wp-text="state.DOM.doctypeName"></code><br>
 				Doctype publicId:&nbsp;<code data-wp-text="state.DOM.doctypePublicId"></code><br>
-				Doctype systemId:&nbsp;<code data-wp-text="state.DOM.doctypeSystemId"></code>
+				Doctype systemId:&nbsp;<code data-wp-text="state.DOM.doctypeSystemId"></code><br>
+				Context node:&nbsp;<code data-wp-text="state.DOM.contextNode"></code>
 			</div>
 		</div>
 	</details>
@@ -151,6 +152,7 @@ class="html-api-debugger-container html-api-debugger--grid"
 				<div data-wp-bind--hidden="!state.htmlapiResponse.supports.create_fragment_advanced">
 					<label>Context html
 						<textarea
+							placeholder="<!DOCTYPE html><body>"
 							<?php wp_on_directive( 'input', 'handleContextHtmlInput' ); ?>
 						><?php echo "\n" . esc_textarea( str_replace( "\0", '', $options['context_html'] ?? '' ) ); ?></textarea>
 				</label>
diff --git a/html-api-debugger/view.js b/html-api-debugger/view.js
index c053733..1186357 100644
--- a/html-api-debugger/view.js
+++ b/html-api-debugger/view.js
@@ -31,7 +31,7 @@ let mutationObserver = null;
  * @property {string|undefined} doctypeName
  * @property {string|undefined} doctypeSystemId
  * @property {string|undefined} doctypePublicId
- *
+ * @property {string|undefined} contextNode
  *
  * @typedef HTMLAPISpan
  * @property {number} start
@@ -328,8 +328,22 @@ const store = createStore(NS, {
 		store.state.DOM.doctypeSystemId = doc.doctype?.systemId;
 		store.state.DOM.doctypePublicId = doc.doctype?.publicId;
 
+		/** @type {Element|null} */
+		let contextElement = null;
+		if (store.state.contextHTML) {
+			const walker = doc.createTreeWalker(doc, NodeFilter.SHOW_ELEMENT);
+			while (walker.nextNode()) {
+				// @ts-expect-error It's an Element!
+				contextElement = walker.currentNode;
+			}
+			if (contextElement) {
+				store.state.DOM.contextNode = contextElement.outerHTML;
+				contextElement.innerHTML = store.state.html;
+			}
+		}
+
 		printHtmlApiTree(
-			doc,
+			contextElement ?? doc,
 			// @ts-expect-error
 			document.getElementById('dom_tree'),
 			{
@@ -339,6 +353,7 @@ const store = createStore(NS, {
 				hoverInfo: store.state.hoverInfo,
 			},
 		);
+
 		mutationObserver?.observe(doc, {
 			subtree: true,
 			childList: true,
@@ -540,7 +555,8 @@ const store = createStore(NS, {
 		mutationObserver?.disconnect();
 		store.state.hasMutatedDom = false;
 
-		const html = store.state.playbackHTML ?? store.state.html;
+		const html =
+			store.state.playbackHTML ?? (store.state.contextHTML || store.state.html);
 
 		iframeDocument.open();
 		iframeDocument.write(html);

From 153a448c8be96a7d61fa04773bc685762084b0b0 Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Thu, 7 Nov 2024 18:27:04 +0100
Subject: [PATCH 03/23] Set innerHTML and read from context node in DOM

---
 html-api-debugger/html-api-integration.php | 2 ++
 html-api-debugger/interactivity.php        | 3 ++-
 html-api-debugger/view.js                  | 2 +-
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/html-api-debugger/html-api-integration.php b/html-api-debugger/html-api-integration.php
index 255dff6..21959b9 100644
--- a/html-api-debugger/html-api-integration.php
+++ b/html-api-debugger/html-api-integration.php
@@ -133,6 +133,7 @@ function get_tree( string $html, array $options ): array {
 	$doctype_name              = null;
 	$doctype_public_identifier = null;
 	$doctype_system_identifier = null;
+	$context_node              = $context_processor ? $context_processor->get_tag() : null;
 
 	$playback = array();
 
@@ -388,6 +389,7 @@ function get_tree( string $html, array $options ): array {
 		'doctypeName' => $doctype_name,
 		'doctypePublicId' => $doctype_public_identifier,
 		'doctypeSystemId' => $doctype_system_identifier,
+		'contextNode' => $context_node,
 	);
 }
 
diff --git a/html-api-debugger/interactivity.php b/html-api-debugger/interactivity.php
index cf79dc8..81248fc 100644
--- a/html-api-debugger/interactivity.php
+++ b/html-api-debugger/interactivity.php
@@ -111,7 +111,8 @@ class="html-api-debugger-container html-api-debugger--grid"
 				Rendering mode:&nbsp;<code data-wp-text="state.htmlapiResponse.result.compatMode"></code><br>
 				Doctype name:&nbsp;<code data-wp-text="state.htmlApiDoctypeName"></code><br>
 				Doctype publicId:&nbsp;<code data-wp-text="state.htmlApiDoctypePublicId"></code><br>
-				Doctype systemId:&nbsp;<code data-wp-text="state.htmlApiDoctypeSystemId"></code>
+				Doctype systemId:&nbsp;<code data-wp-text="state.htmlApiDoctypeSystemId"></code><br>
+				Context node:&nbsp;<code data-wp-text="state.htmlapiResponse.result.contextNode"></code>
 			</div>
 			<div>
 				Rendering mode:&nbsp;<code data-wp-text="state.DOM.renderingMode"></code><br>
diff --git a/html-api-debugger/view.js b/html-api-debugger/view.js
index 1186357..d675a51 100644
--- a/html-api-debugger/view.js
+++ b/html-api-debugger/view.js
@@ -337,7 +337,7 @@ const store = createStore(NS, {
 				contextElement = walker.currentNode;
 			}
 			if (contextElement) {
-				store.state.DOM.contextNode = contextElement.outerHTML;
+				store.state.DOM.contextNode = contextElement.nodeName;
 				contextElement.innerHTML = store.state.html;
 			}
 		}

From 6b00a40248480637d09f35e32c8a81435ecff0a5 Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Thu, 7 Nov 2024 22:06:29 +0100
Subject: [PATCH 04/23] Improve rendering for fragment parsers

---
 html-api-debugger/html-api-integration.php | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/html-api-debugger/html-api-integration.php b/html-api-debugger/html-api-integration.php
index 21959b9..1a885a2 100644
--- a/html-api-debugger/html-api-integration.php
+++ b/html-api-debugger/html-api-integration.php
@@ -53,6 +53,8 @@ function get_tree( string $html, array $options ): array {
 	$processor_bookmarks = new ReflectionProperty( WP_HTML_Processor::class, 'bookmarks' );
 	$processor_bookmarks->setAccessible( true );
 
+	$is_fragment_processor = false;
+
 	if (
 		method_exists( WP_HTML_Processor::class, 'create_fragment_at_current_node' ) &&
 		$options['context_html']
@@ -70,6 +72,8 @@ function get_tree( string $html, array $options ): array {
 		if ( ! isset( $processor ) ) {
 			throw new Exception( 'Could not create processor from context HTML.' );
 		}
+
+		$is_fragment_processor = true;
 	} else {
 		$processor = WP_HTML_Processor::create_full_parser( $html );
 	}
@@ -124,7 +128,7 @@ function get_tree( string $html, array $options ): array {
 
 	$cursor = array( 0 );
 
-	if ( $context_processor ) {
+	if ( $is_fragment_processor ) {
 		$tree   = array();
 		$cursor = array();
 	}
@@ -133,7 +137,7 @@ function get_tree( string $html, array $options ): array {
 	$doctype_name              = null;
 	$doctype_public_identifier = null;
 	$doctype_system_identifier = null;
-	$context_node              = $context_processor ? $context_processor->get_tag() : null;
+	$context_node              = isset( $context_processor ) ? $context_processor->get_tag() : null;
 
 	$playback = array();
 
@@ -152,7 +156,8 @@ function get_tree( string $html, array $options ): array {
 			break;
 		}
 
-		if ( ( count( $cursor ) + 1 ) > $get_current_depth() ) {
+		// Breadcrumbs and depth are off by one because they include an extra context node.
+		if ( ( count( $cursor ) + 1 ) > ( $get_current_depth() - ( $is_fragment_processor ? 1 : 0 ) ) ) {
 			array_pop( $cursor );
 		}
 		$current = &$tree;

From 779b373a09c71c5bee263dd2201bad0f1c8ec9ef Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Thu, 7 Nov 2024 22:07:27 +0100
Subject: [PATCH 05/23] Simplofy flow when adding elements to tree

---
 html-api-debugger/html-api-integration.php | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/html-api-debugger/html-api-integration.php b/html-api-debugger/html-api-integration.php
index 1a885a2..e2807c0 100644
--- a/html-api-debugger/html-api-integration.php
+++ b/html-api-debugger/html-api-integration.php
@@ -251,15 +251,13 @@ function get_tree( string $html, array $options ): array {
 
 				if (
 					$processor->is_tag_closer() ||
+					WP_HTML_Processor::is_void( $tag_name ) ||
 					( $namespace !== 'html' && $processor->has_self_closing_flag() )
 				) {
 					break;
 				}
 
-				if ( ! WP_HTML_Processor::is_void( $tag_name ) ) {
-					$cursor[] = count( $current['childNodes'] ) - 1;
-				}
-
+				$cursor[] = count( $current['childNodes'] ) - 1;
 				break;
 
 			case '#text':

From 08c08aca048f551060cb92cea8a8dae643e6c900 Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Thu, 7 Nov 2024 22:07:46 +0100
Subject: [PATCH 06/23] Remove redundant watchDom

---
 html-api-debugger/interactivity.php |  3 +--
 html-api-debugger/view.js           | 18 ------------------
 2 files changed, 1 insertion(+), 20 deletions(-)

diff --git a/html-api-debugger/interactivity.php b/html-api-debugger/interactivity.php
index 81248fc..2740a11 100644
--- a/html-api-debugger/interactivity.php
+++ b/html-api-debugger/interactivity.php
@@ -73,8 +73,7 @@ function generate_page( string $html, array $options ): string {
 	?>
 <div
 	data-wp-interactive="<?php echo esc_attr( \HTML_API_Debugger\SLUG ); ?>"
-	data-wp-watch--a="watch"
-	data-wp-watch--b="watchDom"
+	data-wp-watch--main="watch"
 	data-wp-watch--url="watchURL"
 	data-wp-run="run"
 	class="html-api-debugger-container html-api-debugger--grid"
diff --git a/html-api-debugger/view.js b/html-api-debugger/view.js
index d675a51..671683d 100644
--- a/html-api-debugger/view.js
+++ b/html-api-debugger/view.js
@@ -106,7 +106,6 @@ let mutationObserver = null;
  * @property {()=>void} onRenderedIframeLoad
  *
  * @property {()=>void} watch
- * @property {()=>void} watchDom
  * @property {()=>void} watchURL
  */
 
@@ -531,23 +530,6 @@ const store = createStore(NS, {
 		}
 	},
 
-	watchDom() {
-		const doc =
-			// @ts-expect-error
-			document.getElementById('rendered_iframe').contentWindow.document;
-		printHtmlApiTree(
-			doc,
-			// @ts-expect-error
-			document.getElementById('dom_tree'),
-			{
-				showClosers: store.state.showClosers,
-				showInvisible: store.state.showInvisible,
-				showVirtual: store.state.showVirtual,
-				hoverInfo: store.state.hoverInfo,
-			},
-		);
-	},
-
 	render() {
 		// @ts-expect-error This should not be null.
 		const iframeDocument = RENDERED_IFRAME.contentWindow.document;

From 4c338f30f39a604fec590c899b163496aba580f6 Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Thu, 7 Nov 2024 22:13:38 +0100
Subject: [PATCH 07/23] Fix playback to work with fragments

---
 html-api-debugger/view.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/html-api-debugger/view.js b/html-api-debugger/view.js
index 671683d..5cbb41a 100644
--- a/html-api-debugger/view.js
+++ b/html-api-debugger/view.js
@@ -131,6 +131,7 @@ const store = createStore(NS, {
 				store.state.playbackPoint
 			]?.[1];
 		},
+
 		get playbackHTML() {
 			if (store.state.playbackPoint === null) {
 				return undefined;
@@ -337,7 +338,7 @@ const store = createStore(NS, {
 			}
 			if (contextElement) {
 				store.state.DOM.contextNode = contextElement.nodeName;
-				contextElement.innerHTML = store.state.html;
+				contextElement.innerHTML = store.state.playbackHTML ?? store.state.html;
 			}
 		}
 
@@ -538,7 +539,7 @@ const store = createStore(NS, {
 		store.state.hasMutatedDom = false;
 
 		const html =
-			store.state.playbackHTML ?? (store.state.contextHTML || store.state.html);
+			store.state.contextHTML || (store.state.playbackHTML ?? store.state.html);
 
 		iframeDocument.open();
 		iframeDocument.write(html);

From 66a8cb5cf0a1a5ff85430433bccb38888d897ab5 Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Thu, 7 Nov 2024 22:37:55 +0100
Subject: [PATCH 08/23] Improve context html display

---
 html-api-debugger/interactivity.php |  4 +++-
 html-api-debugger/style.css         | 11 ++++++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/html-api-debugger/interactivity.php b/html-api-debugger/interactivity.php
index 2740a11..11f6024 100644
--- a/html-api-debugger/interactivity.php
+++ b/html-api-debugger/interactivity.php
@@ -152,7 +152,9 @@ class="html-api-debugger-container html-api-debugger--grid"
 				<div data-wp-bind--hidden="!state.htmlapiResponse.supports.create_fragment_advanced">
 					<label>Context html
 						<textarea
-							placeholder="<!DOCTYPE html><body>"
+							class="context-html"
+							placeholder="Provide a fragment context, for example:&#x0A;<!DOCTYPE html><body>"
+							rows="2"
 							<?php wp_on_directive( 'input', 'handleContextHtmlInput' ); ?>
 						><?php echo "\n" . esc_textarea( str_replace( "\0", '', $options['context_html'] ?? '' ) ); ?></textarea>
 				</label>
diff --git a/html-api-debugger/style.css b/html-api-debugger/style.css
index 0f93751..26884fd 100644
--- a/html-api-debugger/style.css
+++ b/html-api-debugger/style.css
@@ -41,12 +41,21 @@
 		font-size: inherit;
 	}
 
-	textarea {
+	#input_html {
 		width: 100%;
 		min-height: 200px;
 		font-family: monospace;
 	}
 
+	.context-html {
+		width: 100%;
+		font-family: monospace;
+
+		&:placeholder-shown {
+			font-style: italic;
+		}
+	}
+
 	.error-holder {
 		padding: 1em;
 		background: pink;

From 4c18c6eef865d7caca01523eaf7bd394388bf915 Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Fri, 8 Nov 2024 11:01:33 +0100
Subject: [PATCH 09/23] Fix context_node name

---
 html-api-debugger/html-api-integration.php | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/html-api-debugger/html-api-integration.php b/html-api-debugger/html-api-integration.php
index e2807c0..0ff47fa 100644
--- a/html-api-debugger/html-api-integration.php
+++ b/html-api-debugger/html-api-integration.php
@@ -137,7 +137,11 @@ function get_tree( string $html, array $options ): array {
 	$doctype_name              = null;
 	$doctype_public_identifier = null;
 	$doctype_system_identifier = null;
-	$context_node              = isset( $context_processor ) ? $context_processor->get_tag() : null;
+	$context_node              = isset( $context_processor )
+		? ( method_exists( $context_processor, 'get_qualified_tag_name' )
+				? $context_processor->get_qualified_tag_name()
+				: $context_processor->get_tag() )
+		: null;
 
 	$playback = array();
 

From 4b808601388534c7923b099c000bec19f6ad969d Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Fri, 8 Nov 2024 11:12:01 +0100
Subject: [PATCH 10/23] Fix bug with empty tree at context node

---
 html-api-debugger/html-api-integration.php | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/html-api-debugger/html-api-integration.php b/html-api-debugger/html-api-integration.php
index 0ff47fa..8bc4ba7 100644
--- a/html-api-debugger/html-api-integration.php
+++ b/html-api-debugger/html-api-integration.php
@@ -129,7 +129,9 @@ function get_tree( string $html, array $options ): array {
 	$cursor = array( 0 );
 
 	if ( $is_fragment_processor ) {
-		$tree   = array();
+		$tree   = array(
+			'childNodes' => array(),
+		);
 		$cursor = array();
 	}
 

From 32ec32aac459ecd1fe81819e32b029eeffb47186 Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Fri, 8 Nov 2024 11:39:04 +0100
Subject: [PATCH 11/23] Prep for 2.2

---
 html-api-debugger/html-api-debugger.php | 6 +++---
 html-api-debugger/readme.txt            | 8 ++++++--
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/html-api-debugger/html-api-debugger.php b/html-api-debugger/html-api-debugger.php
index a58c464..878ce1c 100644
--- a/html-api-debugger/html-api-debugger.php
+++ b/html-api-debugger/html-api-debugger.php
@@ -3,9 +3,9 @@
  * Plugin Name:       HTML API Debugger
  * Plugin URI:        https://github.com/sirreal/html-api-debugger
  * Description:       Add a page to wp-admin for debugging the HTML API.
- * Version:           2.1
+ * Version:           2.2
  * Requires at least: 6.6
- * Tested up to:      6.7
+ * Tested up to:      6.8
  * Author:            Jon Surrell
  * Author URI:        https://profiles.wordpress.org/jonsurrell/
  * License:           GPLv2 or later
@@ -22,7 +22,7 @@
 require_once __DIR__ . '/html-api-integration.php';
 
 const SLUG    = 'html-api-debugger';
-const VERSION = '2.1';
+const VERSION = '2.2';
 
 /** Set up the plugin. */
 function init() {
diff --git a/html-api-debugger/readme.txt b/html-api-debugger/readme.txt
index 5b6bbb0..57bfd06 100644
--- a/html-api-debugger/readme.txt
+++ b/html-api-debugger/readme.txt
@@ -2,8 +2,8 @@
 Contributors: jonsurrell
 Tags: HTML API, development, debug
 Requires at least: 6.6
-Tested up to: 6.7
-Stable tag: 2.1
+Tested up to: 6.8
+Stable tag: 2.2
 License: GPLv2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
 
@@ -11,6 +11,10 @@ Add a page to wp-admin for debugging the HTML API.
 
 == Changelog ==
 
+= 2.2 =
+* Drop basic fragment parsing and quirks mode support.
+* Add advanced context and fragment parsing when supported (WordPress 6.8+).
+
 = 2.1 =
 * Add text-wrap styling fallback for unsupported browsers.
 

From e30a5d07191728f5b34f114511b7f89836a2c038 Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Fri, 8 Nov 2024 13:05:40 +0100
Subject: [PATCH 12/23] Update supports type

---
 html-api-debugger/view.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/html-api-debugger/view.js b/html-api-debugger/view.js
index 5cbb41a..92fe405 100644
--- a/html-api-debugger/view.js
+++ b/html-api-debugger/view.js
@@ -39,9 +39,8 @@ let mutationObserver = null;
  *
  *
  * @typedef Supports
+ * @property {boolean} create_fragment_advanced
  * @property {boolean} is_virtual
- * @property {boolean} quirks_mode
- * @property {boolean} full_parser
  * @property {boolean} normalize
  *
  *

From cc35878f4808fadde19c6da4d29a1c07b3b73386 Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Fri, 8 Nov 2024 13:08:04 +0100
Subject: [PATCH 13/23] Fix context usage in case its unsupported

---
 html-api-debugger/view.js | 32 +++++++++++++++++++++-----------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/html-api-debugger/view.js b/html-api-debugger/view.js
index 92fe405..002f979 100644
--- a/html-api-debugger/view.js
+++ b/html-api-debugger/view.js
@@ -68,6 +68,7 @@ let mutationObserver = null;
  * @property {boolean} showInvisible
  * @property {boolean} showVirtual
  * @property {string} contextHTML
+ * @property {string|null} contextHTMLForUse
  * @property {number|null} previewCorePrNumber
  * @property {number|null} previewGutenbergPrNumber
  * @property {Link|null} previewCoreLink
@@ -140,6 +141,12 @@ const store = createStore(NS, {
 			]?.[0];
 		},
 
+		get contextHTMLForUse() {
+			return store.state.htmlapiResponse.supports.create_fragment_advanced
+				? store.state.contextHTML.trim() || null
+				: null;
+		},
+
 		/** @type {Link|null} */
 		get previewCoreLink() {
 			if (!store.state.previewCorePrNumber) {
@@ -215,8 +222,8 @@ const store = createStore(NS, {
 			if (store.state.html) {
 				searchParams.set('html', store.state.html);
 			}
-			if (store.state.contextHTML) {
-				searchParams.set('contextHTML', store.state.contextHTML);
+			if (store.state.contextHTMLForUse) {
+				searchParams.set('contextHTML', store.state.contextHTMLForUse);
 			}
 			const base = '/wp-admin/admin.php';
 			const u = new URL(
@@ -329,7 +336,7 @@ const store = createStore(NS, {
 
 		/** @type {Element|null} */
 		let contextElement = null;
-		if (store.state.contextHTML) {
+		if (store.state.contextHTMLForUse) {
 			const walker = doc.createTreeWalker(doc, NodeFilter.SHOW_ELEMENT);
 			while (walker.nextNode()) {
 				// @ts-expect-error It's an Element!
@@ -435,9 +442,12 @@ const store = createStore(NS, {
 	watchURL() {
 		const u = new URL(document.location.href);
 		let shouldReplace = false;
-		for (const param of /** @type {const} */ (['html', 'contextHTML'])) {
-			if (store.state[param]) {
-				u.searchParams.set(param, store.state[param]);
+		for (const [param, prop] of /** @type {const} */ ([
+			['html', 'html'],
+			['contextHTML', 'contextHTMLForUse'],
+		])) {
+			if (store.state[prop]) {
+				u.searchParams.set(param, store.state[prop]);
 				shouldReplace = true;
 			} else if (u.searchParams.has(param)) {
 				u.searchParams.delete(param);
@@ -461,7 +471,7 @@ const store = createStore(NS, {
 				method: 'POST',
 				body: JSON.stringify({
 					html: store.state.html,
-					contextHTML: store.state.contextHTML,
+					contextHTML: store.state.contextHTMLForUse,
 				}),
 				headers: {
 					'Content-Type': 'application/json',
@@ -538,7 +548,9 @@ const store = createStore(NS, {
 		store.state.hasMutatedDom = false;
 
 		const html =
-			store.state.contextHTML || (store.state.playbackHTML ?? store.state.html);
+			store.state.contextHTMLForUse ??
+			store.state.playbackHTML ??
+			store.state.html;
 
 		iframeDocument.open();
 		iframeDocument.write(html);
@@ -570,9 +582,7 @@ const store = createStore(NS, {
 
 	/** @param {InputEvent} e */
 	handleContextHtmlInput: function* (e) {
-		const val = /** @type {HTMLInputElement} */ (e.target).value;
-		store.state.contextHTML = val.trim();
-
+		store.state.contextHTML = /** @type {HTMLInputElement} */ (e.target).value;
 		yield store.callAPI();
 	},
 

From d3b96009c2e743c6e47cec37f09a32fad94cbc6c Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Fri, 8 Nov 2024 13:08:19 +0100
Subject: [PATCH 14/23] Remove unused function

---
 html-api-debugger/view.js | 17 -----------------
 1 file changed, 17 deletions(-)

diff --git a/html-api-debugger/view.js b/html-api-debugger/view.js
index 002f979..4237fcb 100644
--- a/html-api-debugger/view.js
+++ b/html-api-debugger/view.js
@@ -651,20 +651,3 @@ function getToggleHandler(stateKey) {
 		}
 	};
 }
-
-/**
- * @param {keyof State} stateKey
- * @return {(e: Event) => Promise<void>}
- */
-function getToggleHandlerWithRefetch(stateKey) {
-	const f1 = getToggleHandler(stateKey);
-
-	/**
-	 * @param {Event} e
-	 */
-	// @ts-expect-error The iAPI runtime transforms the generator to an async function.
-	return function* (e) {
-		f1(e);
-		yield store.callAPI();
-	};
-}

From 8aba8e0a5b82dda8781960eeb89b39e5b6b3b80e Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Fri, 8 Nov 2024 13:14:05 +0100
Subject: [PATCH 15/23] Drop support for 6.6

---
 html-api-debugger/html-api-debugger.php    | 2 +-
 html-api-debugger/html-api-integration.php | 1 -
 html-api-debugger/interactivity.php        | 2 --
 html-api-debugger/readme.txt               | 3 ++-
 4 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/html-api-debugger/html-api-debugger.php b/html-api-debugger/html-api-debugger.php
index 878ce1c..e9da626 100644
--- a/html-api-debugger/html-api-debugger.php
+++ b/html-api-debugger/html-api-debugger.php
@@ -4,7 +4,7 @@
  * Plugin URI:        https://github.com/sirreal/html-api-debugger
  * Description:       Add a page to wp-admin for debugging the HTML API.
  * Version:           2.2
- * Requires at least: 6.6
+ * Requires at least: 6.7
  * Tested up to:      6.8
  * Author:            Jon Surrell
  * Author URI:        https://profiles.wordpress.org/jonsurrell/
diff --git a/html-api-debugger/html-api-integration.php b/html-api-debugger/html-api-integration.php
index 8bc4ba7..62b22e1 100644
--- a/html-api-debugger/html-api-integration.php
+++ b/html-api-debugger/html-api-integration.php
@@ -24,7 +24,6 @@ function get_supports(): array {
 	);
 }
 
-
 /**
  * Get the normalized HTML.
  *
diff --git a/html-api-debugger/interactivity.php b/html-api-debugger/interactivity.php
index 11f6024..adf853e 100644
--- a/html-api-debugger/interactivity.php
+++ b/html-api-debugger/interactivity.php
@@ -196,8 +196,6 @@ class="context-html"
 					<option value="nightly">nightly</option>
 					<option value="beta">beta</option>
 					<option value="6.7">6.7</option>
-					<option value="6.6">6.6</option>
-					<option value="6.5">6.5</option>
 				</select>
 			</label>
 			<button <?php wp_on_directive( 'click', 'handleCopyClick' ); ?> type="button">Copy shareable playground link</button><br>
diff --git a/html-api-debugger/readme.txt b/html-api-debugger/readme.txt
index 57bfd06..c2819dd 100644
--- a/html-api-debugger/readme.txt
+++ b/html-api-debugger/readme.txt
@@ -1,7 +1,7 @@
 === HTML API Debugger ===
 Contributors: jonsurrell
 Tags: HTML API, development, debug
-Requires at least: 6.6
+Requires at least: 6.7
 Tested up to: 6.8
 Stable tag: 2.2
 License: GPLv2 or later
@@ -12,6 +12,7 @@ Add a page to wp-admin for debugging the HTML API.
 == Changelog ==
 
 = 2.2 =
+* Drop support for WordPress 6.7.
 * Drop basic fragment parsing and quirks mode support.
 * Add advanced context and fragment parsing when supported (WordPress 6.8+).
 

From 9256fd2d11e335f58c59378387896a637c644b49 Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Fri, 8 Nov 2024 13:25:27 +0100
Subject: [PATCH 16/23] Cleanup unused supports

---
 html-api-debugger/html-api-integration.php | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/html-api-debugger/html-api-integration.php b/html-api-debugger/html-api-integration.php
index 62b22e1..2e74ff5 100644
--- a/html-api-debugger/html-api-integration.php
+++ b/html-api-debugger/html-api-integration.php
@@ -6,7 +6,6 @@
 use ReflectionMethod;
 use ReflectionProperty;
 use WP_HTML_Processor;
-use WP_HTML_Processor_State;
 
 /**
  * Get information about HTML API supported features
@@ -16,9 +15,6 @@ function get_supports(): array {
 
 	return array(
 		'is_virtual' => $html_processor_rc->hasMethod( 'is_virtual' ),
-		'full_parser' => method_exists( WP_HTML_Processor::class, 'create_full_parser' ),
-		'quirks_mode' => $html_processor_rc->hasProperty( 'compat_mode' ),
-		'doctype' => method_exists( WP_HTML_Processor::class, 'get_doctype_info' ),
 		'normalize' => method_exists( WP_HTML_Processor::class, 'normalize' ),
 		'create_fragment_advanced' => method_exists( WP_HTML_Processor::class, 'create_fragment_at_current_node' ),
 	);

From 51f48858d715befb798f283e0ce4d51fd776aa19 Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Fri, 8 Nov 2024 13:59:47 +0100
Subject: [PATCH 17/23] Remove code to support WP < 6.7

---
 html-api-debugger/html-api-integration.php | 128 ++++++++-------------
 html-api-debugger/interactivity.php        |   4 +-
 html-api-debugger/view.js                  |  39 +++----
 3 files changed, 64 insertions(+), 107 deletions(-)

diff --git a/html-api-debugger/html-api-integration.php b/html-api-debugger/html-api-integration.php
index 2e74ff5..1ba28e5 100644
--- a/html-api-debugger/html-api-integration.php
+++ b/html-api-debugger/html-api-integration.php
@@ -2,7 +2,6 @@
 namespace HTML_API_Debugger\HTML_API_Integration;
 
 use Exception;
-use ReflectionClass;
 use ReflectionMethod;
 use ReflectionProperty;
 use WP_HTML_Processor;
@@ -11,11 +10,7 @@
  * Get information about HTML API supported features
  */
 function get_supports(): array {
-	$html_processor_rc = new ReflectionClass( WP_HTML_Processor::class );
-
 	return array(
-		'is_virtual' => $html_processor_rc->hasMethod( 'is_virtual' ),
-		'normalize' => method_exists( WP_HTML_Processor::class, 'normalize' ),
 		'create_fragment_advanced' => method_exists( WP_HTML_Processor::class, 'create_fragment_at_current_node' ),
 	);
 }
@@ -27,9 +22,6 @@ function get_supports(): array {
  * @return string|null The normalized HTML or null if not supported.
  */
 function get_normalized_html( string $html ): ?string {
-	if ( ! method_exists( WP_HTML_Processor::class, 'normalize' ) ) {
-		return null;
-	}
 	return WP_HTML_Processor::normalize( $html );
 }
 
@@ -61,6 +53,12 @@ function get_tree( string $html, array $options ): array {
 		}
 		if ( $context_processor->has_bookmark( 'final_node' ) ) {
 			$context_processor->seek( 'final_node' );
+			/**
+			 * The main processor used for tree building.
+			 *
+			 * @var WP_HTML_Processor|null $processor
+			 * @disregard P1013
+			 */
 			$processor = $context_processor->create_fragment_at_current_node( $html );
 		}
 
@@ -73,48 +71,16 @@ function get_tree( string $html, array $options ): array {
 		$processor = WP_HTML_Processor::create_full_parser( $html );
 	}
 
-	$rc = new ReflectionClass( WP_HTML_Processor::class );
-
-	$is_virtual = function () {
-		return null;
-	};
-
-	if ( $rc->hasMethod( 'is_virtual' ) ) {
-		$processor_is_virtual = new ReflectionMethod( WP_HTML_Processor::class, 'is_virtual' );
-		$processor_is_virtual->setAccessible( true );
-		$is_virtual = function () use ( $processor_is_virtual, $processor ) {
-			return $processor_is_virtual->invoke( $processor );
-		};
-	}
-
-	$get_current_depth = method_exists( WP_HTML_Processor::class, 'get_current_depth' )
-		? function () use ( $processor ): int {
-			return $processor->get_current_depth();
-		}
-		: function () use ( $processor ): int {
-			return count( $processor->get_breadcrumbs() );
-		};
-
-	$get_tag_name = method_exists( WP_HTML_Processor::class, 'get_qualified_tag_name' )
-		? function () use ( $processor ): string {
-			return $processor->get_qualified_tag_name();
-		}
-		: function () use ( $processor ): string {
-			return $processor->get_tag();
-		};
-
-	$get_attribute_name = method_exists( WP_HTML_Processor::class, 'get_qualified_attribute_name' )
-		? function ( string $attribute_name ) use ( $processor ): string {
-			return $processor->get_qualified_attribute_name( $attribute_name );
-		}
-		: function ( string $attribute_name ): string {
-			return $attribute_name;
-		};
-
 	if ( null === $processor ) {
-		throw new Exception( 'could not process html' );
+		throw new Exception( 'Could not create processor.' );
 	}
 
+	$processor_is_virtual = new ReflectionMethod( WP_HTML_Processor::class, 'is_virtual' );
+	$processor_is_virtual->setAccessible( true );
+	$is_virtual = function () use ( $processor_is_virtual, $processor ) {
+		return $processor_is_virtual->invoke( $processor );
+	};
+
 	$tree = array(
 		'nodeType' => NODE_TYPE_DOCUMENT,
 		'nodeName' => '#document',
@@ -135,9 +101,7 @@ function get_tree( string $html, array $options ): array {
 	$doctype_public_identifier = null;
 	$doctype_system_identifier = null;
 	$context_node              = isset( $context_processor )
-		? ( method_exists( $context_processor, 'get_qualified_tag_name' )
-				? $context_processor->get_qualified_tag_name()
-				: $context_processor->get_tag() )
+		? $context_processor->get_qualified_tag_name()
 		: null;
 
 	$playback = array();
@@ -158,7 +122,7 @@ function get_tree( string $html, array $options ): array {
 		}
 
 		// Breadcrumbs and depth are off by one because they include an extra context node.
-		if ( ( count( $cursor ) + 1 ) > ( $get_current_depth() - ( $is_fragment_processor ? 1 : 0 ) ) ) {
+		if ( ( count( $cursor ) + 1 ) > ( $processor->get_current_depth() - ( $is_fragment_processor ? 1 : 0 ) ) ) {
 			array_pop( $cursor );
 		}
 		$current = &$tree;
@@ -169,31 +133,30 @@ function get_tree( string $html, array $options ): array {
 		$token_type = $processor->get_token_type();
 
 		switch ( $token_type ) {
+			// @todo this should be set on the context processor if present.
 			case '#doctype':
-				if ( method_exists( WP_HTML_Processor::class, 'get_doctype_info' ) ) {
-					$doctype = $processor->get_doctype_info();
+				$doctype = $processor->get_doctype_info();
 
-					$doctype_name              = $doctype->name;
-					$doctype_public_identifier = $doctype->public_identifier;
-					$doctype_system_identifier = $doctype->system_identifier;
-
-					if ( $doctype->indicated_compatability_mode === 'quirks' ) {
-						$compat_mode = 'BackCompat';
-					}
+				$doctype_name              = $doctype->name;
+				$doctype_public_identifier = $doctype->public_identifier;
+				$doctype_system_identifier = $doctype->system_identifier;
 
-					$current['childNodes'][] = array(
-						'nodeType' => NODE_TYPE_DOCUMENT_TYPE,
-						'nodeName' => $doctype_name,
-						'_span' => $bookmark,
-						'_mode' => $processor_state->getValue( $processor )->insertion_mode,
-						'_bc' => $processor->get_breadcrumbs(),
-						'_depth' => $get_current_depth(),
-					);
+				if ( $doctype->indicated_compatability_mode === 'quirks' ) {
+					$compat_mode = 'BackCompat';
 				}
+
+				$current['childNodes'][] = array(
+					'nodeType' => NODE_TYPE_DOCUMENT_TYPE,
+					'nodeName' => $doctype_name,
+					'_span' => $bookmark,
+					'_mode' => $processor_state->getValue( $processor )->insertion_mode,
+					'_bc' => $processor->get_breadcrumbs(),
+					'_depth' => $processor->get_current_depth(),
+				);
 				break;
 
 			case '#tag':
-				$tag_name = $get_tag_name();
+				$tag_name = $processor->get_qualified_tag_name();
 
 				$attributes      = array();
 				$attribute_names = $processor->get_attribute_names_with_prefix( '' );
@@ -211,13 +174,13 @@ function get_tree( string $html, array $options ): array {
 						$attributes[] = array(
 							'nodeType' => NODE_TYPE_ATTRIBUTE,
 							'specified' => true,
-							'nodeName' => $get_attribute_name( $attribute_name ),
+							'nodeName' => $processor->get_qualified_attribute_name( $attribute_name ),
 							'nodeValue' => $val,
 						);
 					}
 				}
 
-				$namespace = method_exists( WP_HTML_Processor::class, 'get_namespace' ) ? $processor->get_namespace() : 'html';
+				$namespace = $processor->get_namespace();
 
 				$self = array(
 					'nodeType' => NODE_TYPE_ELEMENT,
@@ -229,7 +192,7 @@ function get_tree( string $html, array $options ): array {
 					'_mode' => $processor_state->getValue( $processor )->insertion_mode,
 					'_bc' => $processor->get_breadcrumbs(),
 					'_virtual' => $is_virtual(),
-					'_depth' => $get_current_depth(),
+					'_depth' => $processor->get_current_depth(),
 					'_namespace' => $namespace,
 				);
 
@@ -244,7 +207,7 @@ function get_tree( string $html, array $options ): array {
 						'_mode' => $processor_state->getValue( $processor )->insertion_mode,
 						'_bc' => array_merge( $processor->get_breadcrumbs(), array( '#text' ) ),
 						'_virtual' => $is_virtual(),
-						'_depth' => $get_current_depth() + 1,
+						'_depth' => $processor->get_current_depth() + 1,
 					);
 				}
 
@@ -270,7 +233,7 @@ function get_tree( string $html, array $options ): array {
 					'_mode' => $processor_state->getValue( $processor )->insertion_mode,
 					'_bc' => $processor->get_breadcrumbs(),
 					'_virtual' => $is_virtual(),
-					'_depth' => $get_current_depth(),
+					'_depth' => $processor->get_current_depth(),
 				);
 
 				$current['childNodes'][] = $self;
@@ -285,7 +248,7 @@ function get_tree( string $html, array $options ): array {
 					'_mode' => $processor_state->getValue( $processor )->insertion_mode,
 					'_bc' => $processor->get_breadcrumbs(),
 					'_virtual' => $is_virtual(),
-					'_depth' => $get_current_depth(),
+					'_depth' => $processor->get_current_depth(),
 				);
 
 				$current['childNodes'][] = $self;
@@ -300,7 +263,7 @@ function get_tree( string $html, array $options ): array {
 					'_mode' => $processor_state->getValue( $processor )->insertion_mode,
 					'_bc' => $processor->get_breadcrumbs(),
 					'_virtual' => $is_virtual(),
-					'_depth' => $get_current_depth(),
+					'_depth' => $processor->get_current_depth(),
 				);
 				$current['childNodes'][] = $self;
 				break;
@@ -314,7 +277,7 @@ function get_tree( string $html, array $options ): array {
 					'_mode' => $processor_state->getValue( $processor )->insertion_mode,
 					'_bc' => $processor->get_breadcrumbs(),
 					'_virtual' => $is_virtual(),
-					'_depth' => $get_current_depth(),
+					'_depth' => $processor->get_current_depth(),
 				);
 				$current['childNodes'][] = $self;
 				break;
@@ -326,7 +289,7 @@ function get_tree( string $html, array $options ): array {
 					'_mode' => $processor_state->getValue( $processor )->insertion_mode,
 					'_bc' => $processor->get_breadcrumbs(),
 					'_virtual' => $is_virtual(),
-					'_depth' => $get_current_depth(),
+					'_depth' => $processor->get_current_depth(),
 				);
 				switch ( $processor->get_comment_type() ) {
 					case WP_HTML_Processor::COMMENT_AS_ABRUPTLY_CLOSED_COMMENT:
@@ -374,16 +337,19 @@ function get_tree( string $html, array $options ): array {
 	$playback[] = array( $last_html, $tree );
 
 	if ( null !== $processor->get_last_error() ) {
-		if ( method_exists( WP_HTML_Processor::class, 'get_unsupported_exception' ) && $processor->get_unsupported_exception() ) {
+		if ( $processor->get_unsupported_exception() ) {
 			throw $processor->get_unsupported_exception();
-		} else {
+		} elseif ( $processor->get_last_error() ) {
 			// phpcs:ignore WordPress.Security.EscapeOutput.ExceptionNotEscaped
 			throw new Exception( $processor->get_last_error() );
+		} else {
+			throw new Exception( 'Unknown error.' );
 		}
 	}
 
+	// This could perhaps be ignored or surfaced in the response.
 	if ( $processor->paused_at_incomplete_token() ) {
-		throw new Exception( 'Paused at incomplete token' );
+		throw new Exception( 'Paused at incomplete token.' );
 	}
 
 	return array(
diff --git a/html-api-debugger/interactivity.php b/html-api-debugger/interactivity.php
index adf853e..bad948a 100644
--- a/html-api-debugger/interactivity.php
+++ b/html-api-debugger/interactivity.php
@@ -98,7 +98,7 @@ class="html-api-debugger-container html-api-debugger--grid"
 			referrerpolicy="no-referrer"
 			sandbox="allow-forms allow-modals allow-popups allow-scripts allow-same-origin"></iframe>
 	</div>
-	<details class="full-width" data-wp-bind--hidden="!state.htmlapiResponse.supports.normalize">
+	<details class="full-width">
 		<summary>HTML API Normalized HTML</summary>
 		<pre class="html-text" data-wp-text="state.normalizedHtml"></pre>
 	</details>
@@ -148,7 +148,7 @@ class="html-api-debugger-container html-api-debugger--grid"
 			<div>
 				<label>Show closers <input type="checkbox" data-wp-bind--checked="state.showClosers" <?php wp_on_directive( 'input', 'handleShowClosersClick' ); ?>></label>
 				<label>Show invisible <input type="checkbox" data-wp-bind--checked="state.showInvisible" <?php wp_on_directive( 'input', 'handleShowInvisibleClick' ); ?>></label>
-				<span data-wp-bind--hidden="!state.htmlapiResponse.supports.is_virtual"><label>Show virtual <input type="checkbox" data-wp-bind--checked="state.showVirtual" <?php wp_on_directive( 'input', 'handleShowVirtualClick' ); ?>></label></span>
+				<span><label>Show virtual <input type="checkbox" data-wp-bind--checked="state.showVirtual" <?php wp_on_directive( 'input', 'handleShowVirtualClick' ); ?>></label></span>
 				<div data-wp-bind--hidden="!state.htmlapiResponse.supports.create_fragment_advanced">
 					<label>Context html
 						<textarea
diff --git a/html-api-debugger/view.js b/html-api-debugger/view.js
index 4237fcb..05d057f 100644
--- a/html-api-debugger/view.js
+++ b/html-api-debugger/view.js
@@ -26,6 +26,7 @@ let mutationObserver = null;
  * @property {string} href
  * @property {string} text
  *
+ *
  * @typedef DOM
  * @property {string|undefined} renderingMode
  * @property {string|undefined} doctypeName
@@ -33,6 +34,7 @@ let mutationObserver = null;
  * @property {string|undefined} doctypePublicId
  * @property {string|undefined} contextNode
  *
+ *
  * @typedef HTMLAPISpan
  * @property {number} start
  * @property {number} length
@@ -40,8 +42,6 @@ let mutationObserver = null;
  *
  * @typedef Supports
  * @property {boolean} create_fragment_advanced
- * @property {boolean} is_virtual
- * @property {boolean} normalize
  *
  *
  * @typedef HtmlApiResponse
@@ -83,30 +83,25 @@ let mutationObserver = null;
  * @property {boolean} hasMutatedDom
  * @property {HTMLAPISpan|false} span
  * @property {string} htmlForDisplay
- */
 
-/**
+  *
+  *
  * @typedef Store
- * @property {State} state
- * @property {()=>void} clearSpan
- * @property {()=>void} render
  * @property {()=>Promise<void>} callAPI
- *
- * @property {()=>void} handleInput
- *
- * @property {()=>void} handleShowInvisibleClick
- * @property {()=>void} handleShowClosersClick
- * @property {()=>void} handleShowVirtualClick
+ * @property {()=>void} clearSpan
  * @property {()=>void} handleContextHtmlInput
- *
  * @property {()=>void} handleCopyClick
- * @property {()=>void} handleCopyPrInput
  * @property {()=>void} handleCopyPrClick
- *
+ * @property {()=>void} handleCopyPrInput
+ * @property {()=>void} handleInput
+ * @property {()=>void} handleShowClosersClick
+ * @property {()=>void} handleShowInvisibleClick
+ * @property {()=>void} handleShowVirtualClick
  * @property {()=>void} onRenderedIframeLoad
- *
+ * @property {()=>void} render
  * @property {()=>void} watch
  * @property {()=>void} watchURL
+ * @property {State} state
  */
 
 const createStore = /** @type {typeof I.store<Store>} */ (I.store);
@@ -193,10 +188,7 @@ const store = createStore(NS, {
 		},
 
 		get normalizedHtml() {
-			if (
-				!store.state.htmlapiResponse.supports.normalize ||
-				!store.state.htmlapiResponse.normalizedHtml
-			) {
+			if (!store.state.htmlapiResponse.normalizedHtml) {
 				return '';
 			}
 			return store.state.showInvisible
@@ -459,8 +451,6 @@ const store = createStore(NS, {
 		}
 	},
 
-	// @ts-expect-error This will be transformed by the Interactivity API runtime when called through the store.
-	/** @returns {Promise<void>} */
 	callAPI: function* () {
 		inFlightRequestAbortController?.abort('request superseded');
 		inFlightRequestAbortController = new AbortController();
@@ -486,6 +476,8 @@ const store = createStore(NS, {
 			if (!response.ok) {
 				throw response;
 			}
+
+			// @ts-expect-error It's fine.
 			data = yield response.json();
 		} catch (/** @type {any} */ err) {
 			if (err === 'request superseded' || err instanceof DOMException) {
@@ -536,7 +528,6 @@ const store = createStore(NS, {
 			/** @type {HTMLUListElement} */ (
 				document.getElementById('html_api_result_holder')
 			).innerHTML = '';
-			return;
 		}
 	},
 

From b31f3a228b555dd2a7d854772ee19bab9e6986b6 Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Fri, 8 Nov 2024 14:07:41 +0100
Subject: [PATCH 18/23] Remove more back-compat code

---
 html-api-debugger/interactivity.php | 49 ++++++++---------------------
 1 file changed, 13 insertions(+), 36 deletions(-)

diff --git a/html-api-debugger/interactivity.php b/html-api-debugger/interactivity.php
index bad948a..e0a6cf9 100644
--- a/html-api-debugger/interactivity.php
+++ b/html-api-debugger/interactivity.php
@@ -1,27 +1,6 @@
 <?php
 namespace HTML_API_Debugger\Interactivity;
 
-/**
- * Make an "on" directive
- *
- * Depending on supported behavior, this can be sync or async.
- *
- * @param string $on The event name.
- * @param string $directive The directive name.
- */
-function wp_on_directive( string $on, string $directive ): void {
-	static $supports_async_on = null;
-	if ( null === $supports_async_on ) {
-		$supports_async_on = version_compare( get_bloginfo( 'version' ), '6.6', '>=' );
-	}
-
-	echo $supports_async_on ?
-		// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
-		"data-wp-on-async--{$on}=\"{$directive}\"" :
-		// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
-		"data-wp-on--{$on}=\"{$directive}\"";
-}
-
 /**
  * Generate the WP Admin page HTML.
  *
@@ -86,13 +65,13 @@ class="html-api-debugger-container html-api-debugger--grid"
 			autocomplete="off"
 			spellcheck="false"
 			wrap="off"
-			<?php wp_on_directive( 'input', 'handleInput' ); ?>
+			data-wp-on-async--input="handleInput"
 		><?php echo "\n" . esc_textarea( str_replace( "\0", '', $html ) ); ?></textarea>
 	</div>
 	<div>
 		<h2>Rendered output</h2>
 		<iframe
-			<?php wp_on_directive( 'load', 'onRenderedIframeLoad' ); ?>
+			data-wp-on-async--load="onRenderedIframeLoad"
 			src="about:blank"
 			id="rendered_iframe"
 			referrerpolicy="no-referrer"
@@ -126,10 +105,8 @@ class="html-api-debugger-container html-api-debugger--grid"
 		<div>
 			<h2>Interpreted by HTML API</h2>
 			<div
-				<?php
-					wp_on_directive( 'mouseover', 'handleSpanOver' );
-					wp_on_directive( 'mouseleave', 'clearSpan' );
-				?>
+				data-wp-on-async--mouseover="handleSpanOver"
+				data-wp-on-async--mouseleave="clearSpan"
 			>
 				<pre class="error-holder" data-wp-bind--hidden="!state.htmlapiResponse.error" data-wp-text="state.htmlapiResponse.error"></pre>
 				<div data-wp-bind--hidden="state.htmlapiResponse.error">
@@ -146,16 +123,16 @@ class="html-api-debugger-container html-api-debugger--grid"
 	<div class="full-width">
 		<div>
 			<div>
-				<label>Show closers <input type="checkbox" data-wp-bind--checked="state.showClosers" <?php wp_on_directive( 'input', 'handleShowClosersClick' ); ?>></label>
-				<label>Show invisible <input type="checkbox" data-wp-bind--checked="state.showInvisible" <?php wp_on_directive( 'input', 'handleShowInvisibleClick' ); ?>></label>
-				<span><label>Show virtual <input type="checkbox" data-wp-bind--checked="state.showVirtual" <?php wp_on_directive( 'input', 'handleShowVirtualClick' ); ?>></label></span>
+				<label>Show closers <input type="checkbox" data-wp-bind--checked="state.showClosers" data-wp-on-async--input="handleShowClosersClick"></label>
+				<label>Show invisible <input type="checkbox" data-wp-bind--checked="state.showInvisible" data-wp-on-async--input="handleShowInvisibleClick"></label>
+				<span><label>Show virtual <input type="checkbox" data-wp-bind--checked="state.showVirtual" data-wp-on-async--input="handleShowVirtualClick"></label></span>
 				<div data-wp-bind--hidden="!state.htmlapiResponse.supports.create_fragment_advanced">
 					<label>Context html
 						<textarea
 							class="context-html"
 							placeholder="Provide a fragment context, for example:&#x0A;<!DOCTYPE html><body>"
 							rows="2"
-							<?php wp_on_directive( 'input', 'handleContextHtmlInput' ); ?>
+							data-wp-on-async--input="handleContextHtmlInput"
 						><?php echo "\n" . esc_textarea( str_replace( "\0", '', $options['context_html'] ?? '' ) ); ?></textarea>
 				</label>
 				</div>
@@ -163,7 +140,7 @@ class="context-html"
 			<div>
 				<label>
 					Hover information
-					<select <?php wp_on_directive( 'change', 'hoverInfoChange' ); ?>>
+					<select data-wp-on-async--change="hoverInfoChange">
 						<option data-wp-bind--selected="state.hoverBreadcrumbs" value="breadcrumbs">(depth) Breadcrumbs…</option>
 						<option data-wp-bind--selected="state.hoverInsertion" value="insertionMode">Insertion mode</option>
 					</select>
@@ -198,18 +175,18 @@ class="context-html"
 					<option value="6.7">6.7</option>
 				</select>
 			</label>
-			<button <?php wp_on_directive( 'click', 'handleCopyClick' ); ?> type="button">Copy shareable playground link</button><br>
+			<button data-wp-on-async--click="handleCopyClick" type="button">Copy shareable playground link</button><br>
 		</p>
 		<p>
 			<label>
 				<code>WordPress/develop</code> PR number:
-				<input type="number" min="1" <?php wp_on_directive( 'input', 'handleCopyCorePrInput' ); ?>>
+				<input type="number" min="1" data-wp-on-async--input="handleCopyCorePrInput">
 			</label>
 			<label>
 				<code>WordPress/gutenberg</code> PR number:
-				<input type="number" min="1" <?php wp_on_directive( 'input', 'handleCopyGutenbergPrInput' ); ?>>
+				<input type="number" min="1" data-wp-on-async--input="handleCopyGutenbergPrInput">
 			</label>
-			<button <?php wp_on_directive( 'click', 'handleCopyPrClick' ); ?>>Copy shareable playground link to PR</button>
+			<button data-wp-on-async--click="handleCopyPrClick">Copy shareable playground link to PR</button>
 			<span data-wp-bind--hidden="!state.previewCoreLink">
 				<a
 					data-wp-bind--href="state.previewCoreLink.href"

From 34fdfe802c733ce7c9ce7e17dbf8fa07f0626447 Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Fri, 8 Nov 2024 15:58:10 +0100
Subject: [PATCH 19/23] Update normalization for same behavior

---
 html-api-debugger/html-api-debugger.php    |  2 +-
 html-api-debugger/html-api-integration.php | 32 ++++++++++++++++++++--
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/html-api-debugger/html-api-debugger.php b/html-api-debugger/html-api-debugger.php
index e9da626..bda930d 100644
--- a/html-api-debugger/html-api-debugger.php
+++ b/html-api-debugger/html-api-debugger.php
@@ -145,7 +145,7 @@ function prepare_html_result_object( string $html, array $options = null ): arra
 		'html' => $html,
 		'error' => null,
 		'result' => null,
-		'normalizedHtml' => HTML_API_Integration\get_normalized_html( $html ),
+		'normalizedHtml' => HTML_API_Integration\get_normalized_html( $html, $options ),
 	);
 
 	try {
diff --git a/html-api-debugger/html-api-integration.php b/html-api-debugger/html-api-integration.php
index 1ba28e5..a63abb2 100644
--- a/html-api-debugger/html-api-integration.php
+++ b/html-api-debugger/html-api-integration.php
@@ -19,10 +19,38 @@ function get_supports(): array {
  * Get the normalized HTML.
  *
  * @param string $html The HTML.
+ * @param array  $options The options.
  * @return string|null The normalized HTML or null if not supported.
  */
-function get_normalized_html( string $html ): ?string {
-	return WP_HTML_Processor::normalize( $html );
+function get_normalized_html( string $html, array $options ): ?string {
+	if (
+		method_exists( WP_HTML_Processor::class, 'create_fragment_at_current_node' ) &&
+		$options['context_html']
+	) {
+		$context_processor = WP_HTML_Processor::create_full_parser( $options['context_html'] );
+
+		while ( $context_processor->next_tag() ) {
+			$context_processor->set_bookmark( 'final_node' );
+		}
+		if ( $context_processor->has_bookmark( 'final_node' ) ) {
+			$context_processor->seek( 'final_node' );
+			/**
+			 * The main processor used for tree building.
+			 *
+			 * @var WP_HTML_Processor|null $processor
+			 * @disregard P1013
+			 */
+			$processor = $context_processor->create_fragment_at_current_node( $html );
+		}
+	} else {
+		$processor = WP_HTML_Processor::create_full_parser( $html );
+	}
+
+	if ( ! isset( $processor ) ) {
+		return null;
+	}
+
+	return $processor->serialize();
 }
 
 /**

From b33e79f0d0d9732827caa3f59021634fc6ef904f Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Fri, 8 Nov 2024 16:06:09 +0100
Subject: [PATCH 20/23] Improve comment

---
 html-api-debugger/html-api-integration.php | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/html-api-debugger/html-api-integration.php b/html-api-debugger/html-api-integration.php
index a63abb2..7119c89 100644
--- a/html-api-debugger/html-api-integration.php
+++ b/html-api-debugger/html-api-integration.php
@@ -149,7 +149,9 @@ function get_tree( string $html, array $options ): array {
 			break;
 		}
 
-		// Breadcrumbs and depth are off by one because they include an extra context node.
+		// Depth needs and adjustment because:
+		// - Nodes in a full tree are all placed under a document node.
+		// - Nodes in a fragment tree start at the root.
 		if ( ( count( $cursor ) + 1 ) > ( $processor->get_current_depth() - ( $is_fragment_processor ? 1 : 0 ) ) ) {
 			array_pop( $cursor );
 		}

From 941740c81794dd07ec738d216d16cabf50f3de6e Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Fri, 8 Nov 2024 17:37:58 +0100
Subject: [PATCH 21/23] Fix .length usage on php playback array

---
 html-api-debugger/interactivity.php | 8 ++++++--
 html-api-debugger/view.js           | 5 +++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/html-api-debugger/interactivity.php b/html-api-debugger/interactivity.php
index e0a6cf9..2604fa0 100644
--- a/html-api-debugger/interactivity.php
+++ b/html-api-debugger/interactivity.php
@@ -46,6 +46,10 @@ function generate_page( string $html, array $options ): string {
 			'htmlApiDoctypePublicId' => $htmlapi_response['result']['doctypePublicId'] ?? '[unknown]',
 			'htmlApiDoctypeSytemId' => $htmlapi_response['result']['doctypeSystemId'] ?? '[unknown]',
 			'normalizedHtml' => $htmlapi_response['normalizedHtml'] ?? '',
+
+			'playbackLength' => isset( $htmlapi_response['result']['playback'] )
+				? count( $htmlapi_response['result']['playback'] )
+				: 0,
 		)
 	);
 	ob_start();
@@ -157,8 +161,8 @@ class="context-html"
 						type="range"
 						min="2"
 						style="width:100%"
-						data-wp-bind--max="state.htmlapiResponse.result.playback.length"
-						data-wp-bind--value="state.htmlapiResponse.result.playback.length"
+						data-wp-bind--max="state.playbackLength"
+						data-wp-bind--value="state.playbackLength"
 						data-wp-on--input="handlePlaybackChange"
 					>
 				</label>
diff --git a/html-api-debugger/view.js b/html-api-debugger/view.js
index 05d057f..b946b66 100644
--- a/html-api-debugger/view.js
+++ b/html-api-debugger/view.js
@@ -56,6 +56,7 @@ let mutationObserver = null;
  * @property {any|undefined} playbackTree
  * @property {string|undefined} playbackHTML
  * @property {number|null} playbackPoint
+ * @property {number|null} playbackLength
  * @property {string|null} htmlApiDoctypeName
  * @property {string|null} htmlApiDoctypePublicId
  * @property {string|null} htmlApiDoctypeSystemId
@@ -136,6 +137,10 @@ const store = createStore(NS, {
 			]?.[0];
 		},
 
+		get playbackLength() {
+			return store.state.htmlapiResponse.result?.playback?.length;
+		},
+
 		get contextHTMLForUse() {
 			return store.state.htmlapiResponse.supports.create_fragment_advanced
 				? store.state.contextHTML.trim() || null

From 3d07bacfce5566bd181cef30883e244c159cde42 Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Fri, 8 Nov 2024 17:44:33 +0100
Subject: [PATCH 22/23] Improve iframe watching

---
 html-api-debugger/interactivity.php |  3 +-
 html-api-debugger/view.js           | 54 ++++++++++++++++++-----------
 2 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/html-api-debugger/interactivity.php b/html-api-debugger/interactivity.php
index 2604fa0..01cb12e 100644
--- a/html-api-debugger/interactivity.php
+++ b/html-api-debugger/interactivity.php
@@ -58,7 +58,7 @@ function generate_page( string $html, array $options ): string {
 	data-wp-interactive="<?php echo esc_attr( \HTML_API_Debugger\SLUG ); ?>"
 	data-wp-watch--main="watch"
 	data-wp-watch--url="watchURL"
-	data-wp-run="run"
+	data-wp-init="run"
 	class="html-api-debugger-container html-api-debugger--grid"
 >
 	<div>
@@ -75,7 +75,6 @@ class="html-api-debugger-container html-api-debugger--grid"
 	<div>
 		<h2>Rendered output</h2>
 		<iframe
-			data-wp-on-async--load="onRenderedIframeLoad"
 			src="about:blank"
 			id="rendered_iframe"
 			referrerpolicy="no-referrer"
diff --git a/html-api-debugger/view.js b/html-api-debugger/view.js
index b946b66..b8fcd95 100644
--- a/html-api-debugger/view.js
+++ b/html-api-debugger/view.js
@@ -99,6 +99,7 @@ let mutationObserver = null;
  * @property {()=>void} handleShowInvisibleClick
  * @property {()=>void} handleShowVirtualClick
  * @property {()=>void} onRenderedIframeLoad
+ * @property {()=>void} redrawDOMTreeFromIframe
  * @property {()=>void} render
  * @property {()=>void} watch
  * @property {()=>void} watchURL
@@ -301,6 +302,10 @@ const store = createStore(NS, {
 	},
 
 	run() {
+		RENDERED_IFRAME.addEventListener('load', store.onRenderedIframeLoad, {
+			passive: true,
+		});
+
 		// The HTML parser will replace null bytes from the HTML.
 		// Force print them if we have null bytes.
 		if (store.state.html.includes('\0')) {
@@ -318,11 +323,37 @@ const store = createStore(NS, {
 
 		mutationObserver = new MutationObserver(() => {
 			store.state.hasMutatedDom = true;
-			store.onRenderedIframeLoad();
+			store.redrawDOMTreeFromIframe();
 		});
 	},
 
 	onRenderedIframeLoad() {
+		store.redrawDOMTreeFromIframe();
+
+		// @ts-expect-error It better be defined!
+		const doc = RENDERED_IFRAME.contentWindow.document;
+
+		mutationObserver?.observe(doc, {
+			subtree: true,
+			childList: true,
+			attributes: true,
+			characterData: true,
+		});
+		Array.prototype.forEach.call(
+			doc.getElementsByTagNameNS('http://www.w3.org/1999/xhtml', 'template'),
+			/** @param {HTMLTemplateElement} template */
+			(template) => {
+				mutationObserver?.observe(template.content, {
+					subtree: true,
+					childList: true,
+					attributes: true,
+					characterData: true,
+				});
+			},
+		);
+	},
+
+	redrawDOMTreeFromIframe() {
 		// @ts-expect-error It better be defined!
 		const doc = RENDERED_IFRAME.contentWindow.document;
 
@@ -356,25 +387,6 @@ const store = createStore(NS, {
 				hoverInfo: store.state.hoverInfo,
 			},
 		);
-
-		mutationObserver?.observe(doc, {
-			subtree: true,
-			childList: true,
-			attributes: true,
-			characterData: true,
-		});
-		Array.prototype.forEach.call(
-			doc.getElementsByTagNameNS('http://www.w3.org/1999/xhtml', 'template'),
-			/** @param {HTMLTemplateElement} template */
-			(template) => {
-				mutationObserver?.observe(template.content, {
-					subtree: true,
-					childList: true,
-					attributes: true,
-					characterData: true,
-				});
-			},
-		);
 	},
 
 	/** @param {InputEvent} e */
@@ -539,8 +551,8 @@ const store = createStore(NS, {
 	render() {
 		// @ts-expect-error This should not be null.
 		const iframeDocument = RENDERED_IFRAME.contentWindow.document;
-
 		mutationObserver?.disconnect();
+
 		store.state.hasMutatedDom = false;
 
 		const html =

From 74ea19a91c98ce9ead9cdaa0884614fa795571da Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Fri, 8 Nov 2024 18:13:54 +0100
Subject: [PATCH 23/23] Fix bug with non-html void tag check

---
 html-api-debugger/html-api-integration.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/html-api-debugger/html-api-integration.php b/html-api-debugger/html-api-integration.php
index 7119c89..b3aa8f9 100644
--- a/html-api-debugger/html-api-integration.php
+++ b/html-api-debugger/html-api-integration.php
@@ -245,7 +245,7 @@ function get_tree( string $html, array $options ): array {
 
 				if (
 					$processor->is_tag_closer() ||
-					WP_HTML_Processor::is_void( $tag_name ) ||
+					( $namespace === 'html' && WP_HTML_Processor::is_void( $tag_name ) ) ||
 					( $namespace !== 'html' && $processor->has_self_closing_flag() )
 				) {
 					break;