Skip to content

Commit 747a782

Browse files
sirrealsirreal
committed
Replace table layout with CSS grid
1 parent 37a015a commit 747a782

File tree

3 files changed

+128
-150
lines changed

3 files changed

+128
-150
lines changed

‎html-api-debugger/interactivity.php

Lines changed: 113 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -72,149 +72,134 @@ function generate_page( string $html, array $options ): string {
7272
);
7373
ob_start();
7474
?>
75-
<table
76-
id="html-api-debugger-table"
75+
<div
7776
data-wp-interactive="<?php echo esc_attr( \HTML_API_Debugger\SLUG ); ?>"
7877
data-wp-watch--a="watch"
7978
data-wp-watch--b="watchDom"
8079
data-wp-run="run"
80+
class="html-api-debugger-container html-api-debugger--grid"
8181
>
82-
<tbody>
83-
<tr>
84-
<td>
85-
<h2>Input HTML</h2>
86-
<textarea
87-
id='input_html'
88-
autocapitalize="off"
89-
autocomplete="off"
90-
spellcheck="false"
91-
wrap="off"
92-
<?php wp_on_directive( 'input', 'handleInput' ); ?>
93-
><?php echo "\n" . esc_textarea( str_replace( "\0", '', $html ) ); ?></textarea>
94-
<p data-wp-bind--hidden="!state.htmlPreambleForProcessing">
95-
Note: Because HTML API operates in body at this time, this will be prepended:
96-
<br>
97-
<code data-wp-text="state.htmlPreambleForProcessing"></code>
98-
</p>
99-
</td>
100-
<td>
101-
<h2>Rendered output</h2>
102-
<iframe
103-
<?php wp_on_directive( 'load', 'onRenderedIframeLoad' ); ?>
104-
src="about:blank"
105-
id="rendered_iframe"
106-
referrerpolicy="no-referrer"
107-
sandbox="allow-forms allow-modals allow-popups allow-scripts allow-same-origin"></iframe>
108-
</td>
109-
</tr>
110-
<tr>
111-
<td colspan="2">
112-
<details>
113-
<summary>Document info</summary>
114-
<div class="col-wrapper">
115-
<div class="col">
116-
Rendering mode:&nbsp;<code data-wp-text="state.htmlapiResponse.result.compatMode"></code><br>
117-
Doctype name:&nbsp;<code data-wp-text="state.htmlApiDoctypeName"></code><br>
118-
Doctype publicId:&nbsp;<code data-wp-text="state.htmlApiDoctypePublicId"></code><br>
119-
Doctype systemId:&nbsp;<code data-wp-text="state.htmlApiDoctypeSystemId"></code>
120-
</div>
121-
<div class="col">
122-
Rendering mode:&nbsp;<code data-wp-text="state.DOM.renderingMode"></code><br>
123-
Doctype name:&nbsp;<code data-wp-text="state.DOM.doctypeName"></code><br>
124-
Doctype publicId:&nbsp;<code data-wp-text="state.DOM.doctypePublicId"></code><br>
125-
Doctype systemId:&nbsp;<code data-wp-text="state.DOM.doctypeSystemId"></code>
126-
</div>
127-
</div>
128-
</details>
129-
</td>
130-
</tr>
131-
<tr>
132-
<td><h2>Interpreted by HTML API</h2></td>
133-
<td><h2>Interpreted from DOM</h2></td>
134-
</tr>
135-
<tr>
136-
<td colspan="2">
137-
<div class="col-wrapper">
138-
<div
139-
class="col"
140-
data-wp-class--showClosers="state.showClosers"
141-
<?php wp_on_directive( 'click', 'handleSpanClick' ); ?>
142-
>
143-
<pre class="hide-on-empty error-holder" data-wp-text="state.htmlapiResponse.error"></pre>
144-
<ul id="html_api_result_holder" class="hide-on-empty" data-wp-ignore></ul>
145-
</div>
146-
<div class="col">
147-
<ul id="dom_tree" data-wp-ignore></ul>
148-
</div>
149-
</div>
150-
</td>
151-
</tr>
152-
<tr>
153-
<td><p>Click a node above to see its span details below.</p></td>
154-
</tr>
155-
<tr>
156-
<td colspan="2">
157-
<div>
158-
<label>Show closers <input type="checkbox" data-wp-bind--checked="state.showClosers" <?php wp_on_directive( 'input', 'handleShowClosersClick' ); ?>></label>
159-
<label>Show invisible <input type="checkbox" data-wp-bind--checked="state.showInvisible" <?php wp_on_directive( 'input', 'handleShowInvisibleClick' ); ?>></label>
160-
<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>
161-
<span data-wp-bind--hidden="!state.htmlapiResponse.supports.quirks_mode"><label>Quirks mode <input type="checkbox" data-wp-bind--checked="state.quirksMode" <?php wp_on_directive( 'input', 'handleQuirksModeClick' ); ?>></label></span>
162-
<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>
163-
</div>
164-
<div>
165-
<label>
166-
Hover information
167-
<select <?php wp_on_directive( 'change', 'hoverInfoChange' ); ?>>
168-
<option data-wp-bind--selected="state.hoverBreadcrumbs" value="breadcrumbs">(depth) Breadcrumbs…</option>
169-
<option data-wp-bind--selected="state.hoverInsertion" value="insertionMode">Insertion mode</option>
170-
</select>
171-
</label>
82+
<div>
83+
<h2>Input HTML</h2>
84+
<textarea
85+
id='input_html'
86+
autocapitalize="off"
87+
autocomplete="off"
88+
spellcheck="false"
89+
wrap="off"
90+
<?php wp_on_directive( 'input', 'handleInput' ); ?>
91+
><?php echo "\n" . esc_textarea( str_replace( "\0", '', $html ) ); ?></textarea>
92+
<p data-wp-bind--hidden="!state.htmlPreambleForProcessing">
93+
Note: Because HTML API operates in body at this time, this will be prepended:
94+
<br>
95+
<code data-wp-text="state.htmlPreambleForProcessing"></code>
96+
</p>
97+
</div>
98+
<div>
99+
<h2>Rendered output</h2>
100+
<iframe
101+
<?php wp_on_directive( 'load', 'onRenderedIframeLoad' ); ?>
102+
src="about:blank"
103+
id="rendered_iframe"
104+
referrerpolicy="no-referrer"
105+
sandbox="allow-forms allow-modals allow-popups allow-scripts allow-same-origin"></iframe>
106+
</div>
107+
<details class="full-width">
108+
<summary>Document info</summary>
109+
110+
<div class="html-api-debugger--grid">
111+
<div>
112+
Rendering mode:&nbsp;<code data-wp-text="state.htmlapiResponse.result.compatMode"></code><br>
113+
Doctype name:&nbsp;<code data-wp-text="state.htmlApiDoctypeName"></code><br>
114+
Doctype publicId:&nbsp;<code data-wp-text="state.htmlApiDoctypePublicId"></code><br>
115+
Doctype systemId:&nbsp;<code data-wp-text="state.htmlApiDoctypeSystemId"></code>
116+
</div>
117+
<div>
118+
Rendering mode:&nbsp;<code data-wp-text="state.DOM.renderingMode"></code><br>
119+
Doctype name:&nbsp;<code data-wp-text="state.DOM.doctypeName"></code><br>
120+
Doctype publicId:&nbsp;<code data-wp-text="state.DOM.doctypePublicId"></code><br>
121+
Doctype systemId:&nbsp;<code data-wp-text="state.DOM.doctypeSystemId"></code>
122+
</div>
123+
</div>
124+
</details>
125+
<div class="full-width html-api-debugger--grid">
126+
<div>
127+
<h2>Interpreted by HTML API</h2>
128+
<div <?php wp_on_directive( 'click', 'handleSpanClick' ); ?>>
129+
<pre class="error-holder" data-wp-bind--hidden="!state.htmlapiResponse.error" data-wp-text="state.htmlapiResponse.error"></pre>
130+
<div data-wp-bind--hidden="state.htmlapiResponse.error">
131+
<ul id="html_api_result_holder" data-wp-ignore></ul>
172132
</div>
173-
</td>
174-
</tr>
175-
<tr data-wp-bind--hidden="state.span">
176-
<td colspan="2">
133+
</div>
134+
<p>Click a node above to see its span details below.</p>
135+
</div>
136+
<div>
137+
<h2>Interpreted from DOM</h2>
138+
<ul id="dom_tree" data-wp-ignore></ul>
139+
</div>
140+
</div>
141+
142+
<div class="full-width">
143+
<div>
144+
<div>
145+
<label>Show closers <input type="checkbox" data-wp-bind--checked="state.showClosers" <?php wp_on_directive( 'input', 'handleShowClosersClick' ); ?>></label>
146+
<label>Show invisible <input type="checkbox" data-wp-bind--checked="state.showInvisible" <?php wp_on_directive( 'input', 'handleShowInvisibleClick' ); ?>></label>
147+
<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>
148+
<span data-wp-bind--hidden="!state.htmlapiResponse.supports.quirks_mode"><label>Quirks mode <input type="checkbox" data-wp-bind--checked="state.quirksMode" <?php wp_on_directive( 'input', 'handleQuirksModeClick' ); ?>></label></span>
149+
<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>
150+
</div>
151+
<div>
152+
<label>
153+
Hover information
154+
<select <?php wp_on_directive( 'change', 'hoverInfoChange' ); ?>>
155+
<option data-wp-bind--selected="state.hoverBreadcrumbs" value="breadcrumbs">(depth) Breadcrumbs…</option>
156+
<option data-wp-bind--selected="state.hoverInsertion" value="insertionMode">Insertion mode</option>
157+
</select>
158+
</label>
159+
</div>
160+
</div>
161+
162+
<div>
163+
<div data-wp-bind--hidden="state.span">
177164
<h2>Processed HTML</h2>
178165
<pre class="html-text" data-wp-text="state.hoverSpan"></pre>
179-
</td>
180-
</tr>
181-
<tr data-wp-bind--hidden="!state.span">
182-
<td colspan="2">
166+
</div>
167+
168+
<div data-wp-bind--hidden="!state.span">
183169
<h2>Processed HTML selected span</h2>
184170
<button <?php wp_on_directive( 'click', 'clearSpan' ); ?> type="button">Clear span selection 🧹</button>
185171
<div class="htmlSpanContainer">
186172
<pre class="html-text html-span" data-wp-text="state.hoverSpanSplit.0"></pre>
187173
<pre class="html-text html-span html selected span" data-wp-text="state.hoverSpanSplit.1"></pre>
188174
<pre class="html-text html-span" data-wp-text="state.hoverSpanSplit.2"></pre>
189175
</div>
190-
</td>
191-
</tr>
192-
<tr>
193-
<td colspan="2">
194-
<p>
195-
<label>
196-
<select id="htmlapi-wp-version">
197-
<option value="latest">latest</option>
198-
<option value="beta">beta</option>
199-
<option value="nightly">nightly</option>
200-
</select>
201-
</label>
202-
<button <?php wp_on_directive( 'click', 'handleCopyClick' ); ?> type="button">Copy shareable playground link</button><br>
203-
<label>
204-
<code>wordpress/develop</code> PR number:
205-
<input type="number" min="1" <?php wp_on_directive( 'input', 'handleCopyPrInput' ); ?>>
206-
</label>
207-
<button <?php wp_on_directive( 'click', 'handleCopyPrClick' ); ?>>Copy shareable playground link to PR</button>
208-
<button <?php wp_on_directive( 'click', 'handleCheckPrClick' ); ?> data-wp-bind--disabled="state.checkingForPRPlaygroundLink">Check PR</button>
209-
</p>
210-
<details>
211-
<summary>debug response</summary>
212-
<pre data-wp-text="state.formattedHtmlapiResponse"></pre>
213-
</details>
214-
</td>
215-
</tr>
216-
</tbody>
217-
</table>
176+
</div>
177+
</div>
178+
179+
<div>
180+
<p>
181+
<label>
182+
<select id="htmlapi-wp-version">
183+
<option value="latest">latest</option>
184+
<option value="beta">beta</option>
185+
<option value="nightly">nightly</option>
186+
</select>
187+
</label>
188+
<button <?php wp_on_directive( 'click', 'handleCopyClick' ); ?> type="button">Copy shareable playground link</button><br>
189+
<label>
190+
<code>wordpress/develop</code> PR number:
191+
<input type="number" min="1" <?php wp_on_directive( 'input', 'handleCopyPrInput' ); ?>>
192+
</label>
193+
<button <?php wp_on_directive( 'click', 'handleCopyPrClick' ); ?>>Copy shareable playground link to PR</button>
194+
<button <?php wp_on_directive( 'click', 'handleCheckPrClick' ); ?> data-wp-bind--disabled="state.checkingForPRPlaygroundLink">Check PR</button>
195+
</p>
196+
<details>
197+
<summary>debug response</summary>
198+
<pre data-wp-text="state.formattedHtmlapiResponse"></pre>
199+
</details>
200+
</div>
201+
</div>
202+
</div>
218203
<?php
219204
return wp_interactivity_process_directives( ob_get_clean() );
220205
}

‎html-api-debugger/readme.txt

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,3 +76,4 @@ Add a page to wp-admin for debugging the HTML API.
7676
* Allow copying playground links to specific wordpress-develop PRs.
7777

7878
= 1.6 =
79+
* Replace TABLE based layout with CSS grid.

‎html-api-debugger/style.css

Lines changed: 14 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,22 @@
1-
#html-api-debugger-table {
1+
.html-api-debugger--grid {
2+
display: grid;
3+
grid-template-columns: 50% 50%;
4+
grid-template-rows: auto;
5+
row-gap: 0.2em;
6+
column-gap: 0.4em;
7+
}
8+
9+
.html-api-debugger-container {
210
width: 100%;
3-
table-layout: fixed;
411
padding: 20px 20px 0 0;
512

6-
.col-wrapper {
7-
display: flex;
8-
column-gap: 0.2em;
13+
&,
14+
* {
15+
box-sizing: border-box;
916
}
1017

11-
.col {
12-
flex: 1 0 50%;
18+
.full-width {
19+
grid-column: 1 / -1;
1320
}
1421

1522
pre {
@@ -26,26 +33,12 @@
2633
font-size: inherit;
2734
}
2835

29-
td {
30-
vertical-align: top;
31-
}
32-
33-
tr:first-child td:first-child {
34-
position: relative;
35-
}
36-
3736
textarea {
3837
width: 100%;
3938
min-height: 200px;
4039
font-family: monospace;
4140
}
4241

43-
.hide-on-empty {
44-
&:empty {
45-
display: none;
46-
}
47-
}
48-
4942
.error-holder {
5043
padding: 1em;
5144
background: pink;
@@ -101,7 +94,6 @@
10194
border: inset thin;
10295
padding: 0.5em 0.5em 0.5em 1em;
10396
color: black;
104-
min-height: 100%;
10597
font-family: monospace;
10698
background: white;
10799
margin: 0;

0 commit comments

Comments
 (0)