[bmesuere]

Part of #1193: items 1, 2 and 4 (Run and Debug in the tab bar, a tab supplied by the host, a compact p-input), plus the narrow-width behaviour of these elements. The output panel, the debugger header and the container queries of the other panels (items 3, 5 and 6) are done in another branch.

What changed

Run and Debug in the tab bar (p-code-runner, p-button-lint). p-button-lint moved from below the editor pane into the row of p-editor-tabs. The row is 44px high and the buttons are 32px (--md-*-button-container-height). The 44px minimum is set by p-code-runner on its own tab bar; a p-editor-tabs elsewhere stays 36px. The buttons slot follows after a 1px divider, which only shows when the slot has content. Slotted buttons should be 32px high too; a taller one makes the whole row taller, and the tab bar grows with it so the two hairlines stay level. While debugging the row shows only Stop debugging: the slot and its divider are hidden. The add-file button also stays hidden while debugging, as before: adding files to a trace makes no sense, and the "+" in the render was a mockup inaccuracy. The demo app's example picker moved to the header, since an outlined select does not fit in a 44px toolbar. The header and its picker groups now wrap, so the header fits at 800px and at phone widths.

Narrow columns. The bar stays on one row as long as it can. p-code-runner measures the tabs and both forms of the buttons; when they do not fit, the run buttons (Run, Debug, Run doctests, Stop, Stop debugging) turn into 32px icon buttons with an aria-label and a tooltip. Below 30rem (p-code-runner is a size container named papyros-code-runner) they always are. When even the icons do not fit, for example with many file tabs, the labelled buttons wrap to a row of their own, and the divider never ends a row. The form that is not shown is laid out invisibly (visibility: hidden, absolutely positioned) rather than with display: none, so both forms can be measured; it is not focusable and not in the accessibility tree.

Slotted buttons come last: when the row still does not fit with icon run buttons, p-code-runner sets a compact-slotted attribute on itself, and the host compacts its own buttons with it. Papyros keeps the width of the slotted buttons with and without the attribute, so it does not flip back and forth. In Dodona's sandbox this keeps "Finalize and submit" labelled down to a code runner of about 400px, while Run and Debug are icons from about 500px:

p-code-runner[compact-slotted] .my-button-label { /* visually hidden */ }

Run doctests had the play icon of Run, so the two looked the same as icon buttons; it now has mdi-script-text-play. The run buttons after the first no longer get ref(undefined), which lit-html 3.3.2 (Dodona's version) throws on when a button is removed.

This overlaps with #581 (icon buttons on small screens) for the code bar.

A tab supplied by the host. p-code-runner takes two new slots:

• host-tab: the tab's label. The host puts its status icon and text in one element; Papyros lays out the children in a row and colours them like the other tabs.
• host-tab-panel: the content, rendered and styled by the host (it stays in the host's light DOM, so Dodona's own CSS applies). Papyros puts it in a scrollable panel below the tabs.

<p-code-runner>
  <span slot="host-tab"><i class="mdi mdi-close-circle-outline" aria-hidden="true"></i>Test #1</span>
  <div slot="host-tab-panel"><!-- the failing test, rendered by the host --></div>
</p-code-runner>

The tab appears while the host-tab slot has an element, after the add-file button and a divider. It is part of the file tablist: arrow keys, Home and End move between all tabs, Enter or Space opens one, aria-selected and the roving tabindex work as for the file tabs. The add-file button sits between the file tabs and the host tab, and a tablist may only contain tabs, so the tablist claims the host tab with aria-owns. The panel is named after the tab's text, and the name follows when the host changes that text or replaces the label element.

HOST_TAB and CODE_TAB are exported, so a host can open the tab with papyros.io.activeEditorTab = HOST_TAB. Both are symbols, so a file named code or host-tab opens as a file; every string in activeEditorTab is a file name. Starting a run selects the code again, as it already did for files, unless the run asks for another tab: papyros.runner.start(mode, { editorTab }) takes an optional RunOptions object (exported), and editorTab is the tab to select instead of the code. A host that debugs a failing test calls start(RunMode.Debug, { editorTab: HOST_TAB }). Setting activeEditorTab after start() is not reliable, because start() selects the tab before its first await and its promise only settles when the run ends. Removing the host-tab element while its tab is open selects the code. While activeEditorTab is HOST_TAB and the slot is still empty, the code panel and the Code tab show, and the host tab opens once its label arrives. The footer of the code pane keeps showing the run state while the host tab is open; the sentence in the render was a placeholder. The README documents the API.

Compact p-input. In One at a time, the text field and the Enter button are 40px high. The field was 56px (Material's default spacing) and the button stretched along with it. The padding around them is smaller and the button gets a return-key icon, as in the render. The placeholder is shorter ("Type input and press Enter", "Typ invoer en druk op Enter"), and p-input is a size container: below 25rem the Enter button turns into an icon button with an aria-label and a tooltip, so the placeholder fits at 358px in both languages. The title and the tabs did not change.

Screenshots

The column screenshots come from a test page that sets no Material spacing overrides (Dodona does not set them either). The "Copy to hand-in" button in the buttons slot is a 32px md-text-button that switches to an icon button through the container query above.

600px, before and after: Run and Debug move from below the editor into the tab bar, and the input row goes from 56px to 40px.

Before	After

Debugging with a host tab "Test #1" open.

Light	Dark

358px: icon buttons in one row with the tabs, and the Enter button as an icon; below that, debugging with the host tab open.

Light	Dark

The demo header wraps its picker groups.

800px	390px

How to test

1. yarn build:sw, yarn setup, then yarn start.
2. Run and debug a program: the buttons are in the tab bar, and while debugging only Stop debugging is there. Make the window narrow: when the tabs and the labelled buttons no longer fit on one row, and always below a code pane of 30rem, the buttons become icon buttons with tooltips. Add a wide button to the buttons slot from the console: it keeps its label until even the icon buttons leave no room, and then p-code-runner gets compact-slotted.
3. Add a host tab from the browser console:

   const runner = document.querySelector("p-app").shadowRoot.querySelector("p-code-runner");
   runner.insertAdjacentHTML("beforeend", '<span slot="host-tab">✗ Test #1</span><div slot="host-tab-panel">The failing test</div>');

   Check that the tab appears after a divider, that the arrow keys reach it from the Code tab, and that it shows the panel. Remove the span with runner.querySelector('[slot=host-tab]').remove() while it is open: the Code tab opens. A file named host-tab or code opens in the file viewer.
4. In the input panel, One at a time: the field and the Enter button are 40px high; in a narrow window the Enter button is an icon and the placeholder fits.

yarn test, yarn lint and yarn typecheck pass. New tests cover the host tab (absent, selected, arrow keys, removed while open, selected before its label arrives, label changes, file names that match the built-in tabs), the tab-bar height inside and outside p-code-runner, a debug run started with { editorTab: HOST_TAB } keeping the host tab, the hidden slot while debugging, the icon buttons in a narrow code pane, labelled buttons while they fit, icon buttons when a wide slotted button would wrap the bar, labelled buttons on their own row when icons would not fit either, compact-slotted only after the run buttons and its removal when the room comes back, a distinct icon per run mode, the 40px input row and the icon Enter button in a narrow input panel.

[bmesuere]

Found three reproducible issues: a filename collision, a stale accessible panel name, and header overflow. Details are attached inline. The existing targeted component and debugger state tests pass (19 tests). TypeScript and lint checks on the changed source files pass. Separate reproduction tests fail for each finding; the filename and header checks pass on the base commit.

[TomNaessens]

🤖 Three notes from a review requested by Tom; none of them blocks this PR.

[TomNaessens]

🤖 Approving at Tom's request. The three inline notes don't block this; the overlap with the playground stack is written up on #1168, #1169, #1170 and #1171.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.