From 1a1209ce306612dd8600818ee431b8da4e7e76f3 Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Thu, 21 Nov 2024 14:03:57 +0100 Subject: [PATCH 01/13] Start adding CSS selector support --- html-api-debugger/interactivity.php | 6 +++- html-api-debugger/print-html-tree.js | 6 ++++ html-api-debugger/style.css | 4 +++ html-api-debugger/view.js | 45 ++++++++++++++++++++++++++++ 4 files changed, 60 insertions(+), 1 deletion(-) diff --git a/html-api-debugger/interactivity.php b/html-api-debugger/interactivity.php index 4fb7e43..f2b6a4f 100644 --- a/html-api-debugger/interactivity.php +++ b/html-api-debugger/interactivity.php @@ -147,7 +147,11 @@ class="context-html" rows="2" data-wp-on-async--input="handleContextHtmlInput" > - + + +
+ +

diff --git a/html-api-debugger/print-html-tree.js b/html-api-debugger/print-html-tree.js index 378150c..1a675f9 100644 --- a/html-api-debugger/print-html-tree.js +++ b/html-api-debugger/print-html-tree.js @@ -5,6 +5,7 @@ import { replaceInvisible } from '@html-api-debugger/replace-invisible-chars'; * @property {boolean} [showClosers] * @property {boolean} [showInvisible] * @property {boolean} [showVirtual] + * @property {string|null} [selector] * @property {'breadcrumbs'|'insertionMode'} [hoverInfo] */ @@ -21,6 +22,11 @@ export function printHtmlApiTree(node, ul, options = {}) { for (let i = 0; i < node.childNodes.length; i += 1) { const li = document.createElement('li'); li.className = `t${node.childNodes[i].nodeType}`; + + if (options.selector && node.childNodes[i].matches?.(options.selector)) { + li.classList.add('matches-selector'); + } + if (node.childNodes[i].nodeType === Node.prototype.DOCUMENT_TYPE_NODE) { li.appendChild(document.createTextNode('DOCTYPE: ')); } diff --git a/html-api-debugger/style.css b/html-api-debugger/style.css index 9094aed..83d3f07 100644 --- a/html-api-debugger/style.css +++ b/html-api-debugger/style.css @@ -32,6 +32,10 @@ grid-column: 1 / -1; } + .matches-selector { + outline: 1px dotted hotpink; + } + pre { background-color: #fff; border: inset 1px; diff --git a/html-api-debugger/view.js b/html-api-debugger/view.js index c3345c0..dd5e054 100644 --- a/html-api-debugger/view.js +++ b/html-api-debugger/view.js @@ -67,6 +67,8 @@ let mutationObserver = null; * * * @typedef State + * @property {string|null} selector + * @property {string|null} selectorErrorMessage * @property {boolean} showClosers * @property {boolean} showInvisible * @property {boolean} showVirtual @@ -139,6 +141,7 @@ const store = createStore(NS, { showInvisible: store.state.showInvisible, showVirtual: store.state.showVirtual, hoverInfo: store.state.hoverInfo, + selector: store.state.selector, }; }, @@ -688,6 +691,48 @@ const store = createStore(NS, { const val = /** @type {HTMLInputElement} */ (e.target).valueAsNumber; store.state.playbackPoint = val - 1; }, + + /** @param {InputEvent} e */ + handleSelectorChange(e) { + const val = /** @type {HTMLInputElement} */ (e.target).value.trim() || null; + if (val) { + try { + // Test whether the selector is valid before setting it so it isn't applied. + document.createDocumentFragment().querySelector(val); + store.state.selector = val; + store.state.selectorErrorMessage = null; + return; + } catch (/** @type {unknown} */ e) { + if (e instanceof DOMException && e.name === 'SyntaxError') { + let msg = e.message; + + /* + * The error message includes methods about our test. + * Chrome: + * > Failed to execute 'querySelector' on 'DocumentFragment': 'foo >' is not a valid selector. + * Firefox: + * > DocumentFragment.querySelector: 'foo >' is not a valid selector + * Safari: + * > 'foo >' is not a valid selector. + * + * Try to strip the irrelevant parts. + */ + let idx = msg.indexOf(val); + if (idx > 0) { + if (msg[idx - 1] === '"' || msg[idx - 1] === "'") { + idx -= 1; + } + msg = msg.slice(idx); + } + + store.state.selectorErrorMessage = msg; + } else { + throw e; + } + } + } + store.state.selector = null; + }, }); /** @param {keyof State} stateKey */ From 37a0787a786e54702bd39ff50406825e44e9e8b2 Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Thu, 21 Nov 2024 16:01:45 +0100 Subject: [PATCH 02/13] Monospace font improvements Monospace bold in safari was very bad! --- html-api-debugger/style.css | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/html-api-debugger/style.css b/html-api-debugger/style.css index 83d3f07..433723e 100644 --- a/html-api-debugger/style.css +++ b/html-api-debugger/style.css @@ -7,6 +7,9 @@ } .html-api-debugger-container { + --monospace-font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, + Consolas, Liberation Mono, monospace; + width: 100%; padding: 20px 20px 0 0; @@ -36,6 +39,11 @@ outline: 1px dotted hotpink; } + code, + pre { + font-family: var(--monospace-font-family); + } + pre { background-color: #fff; border: inset 1px; @@ -53,12 +61,12 @@ #input_html { width: 100%; min-height: 200px; - font-family: monospace; + font-family: var(--monospace-font-family); } .context-html { width: 100%; - font-family: monospace; + font-family: var(--monospace-font-family); &:placeholder-shown { font-style: italic; @@ -146,7 +154,7 @@ border: inset 1px; padding: 0.5em 0.5em 0.5em 1em; color: black; - font-family: monospace; + font-family: var(--monospace-font-family); background: white; margin: 0; @@ -169,7 +177,7 @@ .t2 { font-style: normal; - font-family: monospace; + font-family: var(--monospace-font-family); } .t2 .name { From a5c285378d16a98e28576ac305deffbd9b0d5d06 Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Wed, 27 Nov 2024 17:45:52 +0100 Subject: [PATCH 03/13] PICKME: make the context html better --- html-api-debugger/interactivity.php | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/html-api-debugger/interactivity.php b/html-api-debugger/interactivity.php index f2b6a4f..a72ec58 100644 --- a/html-api-debugger/interactivity.php +++ b/html-api-debugger/interactivity.php @@ -63,6 +63,17 @@ function generate_page( string $html, array $options ): string { data-wp-init="run" class="html-api-debugger-container html-api-debugger--grid" > +
+ +

Input HTML

- -

From 398d9e0a6b83a574ebaba8cccda962b0671167d9 Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Wed, 27 Nov 2024 17:46:12 +0100 Subject: [PATCH 04/13] Use a textarea for the selector --- html-api-debugger/interactivity.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/html-api-debugger/interactivity.php b/html-api-debugger/interactivity.php index a72ec58..4a9535f 100644 --- a/html-api-debugger/interactivity.php +++ b/html-api-debugger/interactivity.php @@ -151,7 +151,7 @@ class="context-html"
- +

From 2637b724fe54f87c3954c731f98b0f1c7792a4ac Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Thu, 28 Nov 2024 19:10:31 +0100 Subject: [PATCH 05/13] fixup! PICKME: make the context html better --- html-api-debugger/interactivity.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/html-api-debugger/interactivity.php b/html-api-debugger/interactivity.php index 4a9535f..e8ccf7d 100644 --- a/html-api-debugger/interactivity.php +++ b/html-api-debugger/interactivity.php @@ -63,7 +63,7 @@ function generate_page( string $html, array $options ): string { data-wp-init="run" class="html-api-debugger-container html-api-debugger--grid" > -
+
-

@@ -166,6 +165,13 @@ class="context-html"
+
+ +
+

+

Processed HTML

From d493216ee62af07950351d75853cb0887185cd17 Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Tue, 10 Dec 2024 18:02:23 +0100 Subject: [PATCH 10/13] Fix wp-each issue with non-arrays --- html-api-debugger/interactivity.php | 5 +++-- html-api-debugger/view.js | 5 +++++ 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/html-api-debugger/interactivity.php b/html-api-debugger/interactivity.php index f350db6..c67b8bc 100644 --- a/html-api-debugger/interactivity.php +++ b/html-api-debugger/interactivity.php @@ -47,6 +47,7 @@ function generate_page( string $html, array $options ): string { 'htmlApiDoctypeName' => $htmlapi_response['result']['doctypeName'] ?? null, 'htmlApiDoctypePublicId' => $htmlapi_response['result']['doctypePublicId'] ?? null, 'htmlApiDoctypeSytemId' => $htmlapi_response['result']['doctypeSystemId'] ?? null, + 'treeWarnings' => $htmlapi_response['result']['warnings'] ?? array(), 'normalizedHtml' => $htmlapi_response['normalizedHtml'] ?? '', 'playbackLength' => isset( $htmlapi_response['result']['playback'] ) @@ -165,8 +166,8 @@ class="context-html"
-
-