sim: frame log is a real <table> - #60
Merged
Merged
Conversation
Replaces the CSS-grid column header + <details>/<summary> rows (which needed three PRs to keep aligned) with a proper <table>: fixed layout + explicit widths on the narrow columns align the cells for free, and a sticky <thead> stays put while the rows scroll. Each frame is its own <tbody class="frame-row">: a <tr.frame-summary> of <td>s that toggles a hidden <tr.frame-detail> (click or Enter/Space, with aria-expanded). Idle separators and refusal notices are their own single-cell <tbody> rows. Filtering, the clear button, RTT, and the raw-bytes panes are unchanged.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Option 2 from the follow-up list — the deferred semantic-table rewrite of the frame log.
Why
The header row was a CSS grid, each frame row was a
<details>/<summary>grid, and keeping the two grids aligned across font sizes and the optionalconncolumn took three separate fix PRs (#48–#51). A real<table>aligns columns for free.What
<table class="sim-frames-table">withtable-layout: fixed; explicit widths on#/kind/rtt/bytes, anddirection/functionshare the remaining width.<thead>— the labelled header now scrolls-locks at the top of the pane instead of being a separate element above it. Header cells are real<th title="…">.<tbody class="frame-row">per frame (multiple tbodies is valid): a<tr class="frame-summary">of<td>s that toggles a<tr class="frame-detail" hidden>holding the decoded envelope + raw-bytes panes. Toggle on click or Enter/Space,role="button"+aria-expanded, replacing<details>'s built-in behaviour.<tbody>rows (colspan), stilldata-kind/data-conntagged so the filters andclearwork unchanged.--frame-grid/--frame-grid-connand the whole.sim-frames-cols/summarygrid block.Tests
polish — the frame log is a real <table> whose rows expand in place: asserts the<table>+<thead>structure, one<tbody>per frame, the collapsed-by-default detail row, and click-to-expand witharia-expanded..frame-row,.frame-body,.frame-delta,.frame-idle,.frame-refused, filters, counts) pass unchanged —.frame-rowis now the<tbody>and.frame-bodyis still a descendant of it.yarn test30 pass ·yarn buildclean.Not verified
Sticky-header behaviour and the fixed-layout column alignment are layout features linkedom doesn't render — worth an eyeball in the browser.