Display document title

Author: sirreal

html-api-debugger/html-api-integration.php

@@ -76,6 +76,7 @@ function get_tree( string $html, array $options ): array {
 	$is_fragment_processor = false;
 
 	$compat_mode               = 'BackCompat';
+	$document_title            = null;
 	$doctype_name              = null;
 	$doctype_public_identifier = null;
 	$doctype_system_identifier = null;
@@ -99,10 +100,19 @@ function get_tree( string $html, array $options ): array {
 					break;
 
 				case '#tag':
+					if ( $document_title === null && $context_processor->get_tag() === 'TITLE' && $context_processor->get_namespace() === 'html' ) {
+						$document_title = $context_processor->get_modifiable_text();
+					}
+
 					$context_processor->set_bookmark( 'final_node' );
 					break;
 			}
 		}
+
+		if ( $document_title === null ) {
+			$document_title = '';
+		}
+
 		if ( $context_processor->has_bookmark( 'final_node' ) ) {
 			$context_processor->seek( 'final_node' );
 			/**
@@ -205,6 +215,10 @@ function get_tree( string $html, array $options ): array {
 			case '#tag':
 				$tag_name = $processor->get_qualified_tag_name();
 
+				if ( $document_title === null && $tag_name === 'TITLE' && $processor->get_namespace() === 'html' ) {
+					$document_title = $processor->get_modifiable_text();
+				}
+
 				$attributes      = array();
 				$attribute_names = $processor->get_attribute_names_with_prefix( '' );
 				if ( null !== $attribute_names ) {
@@ -399,13 +413,24 @@ function get_tree( string $html, array $options ): array {
 		throw new Exception( 'Paused at incomplete token.' );
 	}
 
+	/*
+	 * Strip and collapse ASCII whitespace.
+	 *
+	 * https://html.spec.whatwg.org/multipage/dom.html#document.title
+	 * https://infra.spec.whatwg.org/#strip-and-collapse-ascii-whitespace
+	 */
+	$document_title = trim( preg_replace( "/[\t\n\f\r ]+/", ' ', $document_title ), "\t\n\f\r " );
+
 	return array(
 		'tree' => $tree,
 		'playback' => $playback,
 		'compatMode' => $compat_mode,
+		'documentTitle' => $document_title,
+
 		'doctypeName' => $doctype_name,
 		'doctypePublicId' => $doctype_public_identifier,
 		'doctypeSystemId' => $doctype_system_identifier,
+
 		'contextNode' => $context_node,
 	);
 }

html-api-debugger/interactivity.php

@@ -24,6 +24,7 @@ function generate_page( string $html, array $options ): string {
 		array(
 			'DOM' => array(
 				'renderingMode' => '',
+				'documentTitle' => '',
 				'doctypeName' => '',
 				'doctypeSystemId' => '',
 				'doctypePublicId' => '',
@@ -42,9 +43,10 @@ function generate_page( string $html, array $options ): string {
 			'hoverInsertion' => false,
 			'checkingForPRPlaygroundLink' => false,
 
-			'htmlApiDoctypeName' => $htmlapi_response['result']['doctypeName'] ?? '[unknown]',
-			'htmlApiDoctypePublicId' => $htmlapi_response['result']['doctypePublicId'] ?? '[unknown]',
-			'htmlApiDoctypeSytemId' => $htmlapi_response['result']['doctypeSystemId'] ?? '[unknown]',
+			'htmlApiDocumentTitle' => $htmlapi_response['result']['documentTitle'] ?? null,
+			'htmlApiDoctypeName' => $htmlapi_response['result']['doctypeName'] ?? null,
+			'htmlApiDoctypePublicId' => $htmlapi_response['result']['doctypePublicId'] ?? null,
+			'htmlApiDoctypeSytemId' => $htmlapi_response['result']['doctypeSystemId'] ?? null,
 			'normalizedHtml' => $htmlapi_response['normalizedHtml'] ?? '',
 
 			'playbackLength' => isset( $htmlapi_response['result']['playback'] )
@@ -90,13 +92,15 @@ class="html-api-debugger-container html-api-debugger--grid"
 		<div class="html-api-debugger--grid">
 			<div>
 				Rendering mode:&nbsp;<code data-wp-text="state.htmlapiResponse.result.compatMode"></code><br>
+				Document title:&nbsp;<code data-wp-text="state.htmlApiDocumentTitle"></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><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>
+				Document title:&nbsp;<code data-wp-text="state.DOM.documentTitle"></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><br>

html-api-debugger/readme.txt

@@ -16,6 +16,7 @@ Please file issues and pull requests on the [GitHub repository](https://github.c
 == Changelog ==
 
 = 2.4 =
+* Display document title.
 
 = 2.3 =
 * Inline tree copy buttons.

html-api-debugger/view.js

@@ -35,6 +35,7 @@ let mutationObserver = null;
  *
  * @typedef DOM
  * @property {string|undefined} renderingMode
+ * @property {string|undefined} documentTitle
  * @property {string|undefined} doctypeName
  * @property {string|undefined} doctypeSystemId
  * @property {string|undefined} doctypePublicId
@@ -53,7 +54,7 @@ let mutationObserver = null;
  * @typedef HtmlApiResponse
  * @property {any} error
  * @property {Supports} supports
- * @property {{tree: any, compatMode:string, doctypeName:string, doctypePublicId:string, doctypeSystemId:string, playback: ReadonlyArray<[string,any]> }|null} result
+ * @property {{tree: any, compatMode: string, documentTitle: string|null, doctypeName: string|null, doctypePublicId: string|null, doctypeSystemId: string|null, playback: ReadonlyArray<[string,any]> }|null} result
  * @property {string|null} normalizedHtml
  * @property {string} html
  *
@@ -74,6 +75,7 @@ let mutationObserver = null;
  * @property {string|undefined} playbackHTML
  * @property {number|null} playbackPoint
  * @property {number|null} playbackLength
+ * @property {string|null} htmlApiDocumentTitle
  * @property {string|null} htmlApiDoctypeName
  * @property {string|null} htmlApiDoctypePublicId
  * @property {string|null} htmlApiDoctypeSystemId
@@ -194,12 +196,20 @@ const store = createStore(NS, {
 			localStorage.getItem(`${NS}-hoverInfo`)
 		),
 
+		get htmlApiDocumentTitle() {
+			return store.state.showInvisible
+				? store.state.htmlapiResponse.result?.documentTitle &&
+						replaceInvisible(store.state.htmlapiResponse.result.documentTitle)
+				: store.state.htmlapiResponse.result?.documentTitle;
+		},
+
 		get htmlApiDoctypeName() {
 			return store.state.showInvisible
 				? store.state.htmlapiResponse.result?.doctypeName &&
 						replaceInvisible(store.state.htmlapiResponse.result.doctypeName)
 				: store.state.htmlapiResponse.result?.doctypeName;
 		},
+
 		get htmlApiDoctypePublicId() {
 			return store.state.showInvisible
 				? store.state.htmlapiResponse.result?.doctypePublicId &&
@@ -377,6 +387,7 @@ const store = createStore(NS, {
 		// @ts-expect-error It better be defined!
 		const doc = RENDERED_IFRAME.contentWindow.document;
 
+		store.state.DOM.documentTitle = doc.title;
 		store.state.DOM.renderingMode = doc.compatMode;
 		store.state.DOM.doctypeName = doc.doctype?.name;
 		store.state.DOM.doctypeSystemId = doc.doctype?.systemId;