Skip to content

Implement delegated root tab handling with logging #129

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
LennartvdM merged 1 commit into from
Nov 13, 2025
Merged

Implement delegated root tab handling with logging #129

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
154 changes: 78 additions & 76 deletions web/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { DEBUG } from './debug.js';
import { createRadialUrchin } from './ui/visuals/RadialUrchin.js';

console.info('[app] app.js loaded');

const tabList = document.querySelector('.tab-bar[role="tablist"]');
if (tabList instanceof HTMLElement && !tabList.hasAttribute('aria-orientation')) {
tabList.setAttribute('aria-orientation', 'horizontal');
Expand Down Expand Up @@ -1045,11 +1047,16 @@ let consoleIndicator;
let pendingAutoSwitch = false;

function focusTabPanel(targetTab) {
const panel = tabPanelMap.get(targetTab);
if (typeof targetTab !== 'string') {
return;
}
const normalized = targetTab.toLowerCase();
collectRootTabElements();
const panel = tabPanelMap.get(normalized);
if (!panel) {
return;
}
const heading = tabHeadings.get(targetTab);
const heading = tabHeadings.get(normalized);
const focusTarget = heading instanceof HTMLElement ? heading : panel;
if (focusTarget && typeof focusTarget.focus === 'function') {
try {
Expand All @@ -1060,28 +1067,32 @@ function focusTabPanel(targetTab) {
}
}

function goToRootTab(targetTab, options = {}) {
console.info('[root-tabs] switching to', targetTab);
const { focusPanel = false } = options;
if (typeof targetTab !== 'string') {
function goToRootTab(id) {
if (typeof id !== 'string' || !id) {
return;
}
const normalizedTarget = targetTab.toLowerCase();
console.info('[root-tabs] switching to', id);
const normalizedTarget = id.toLowerCase();
if (!tabOrder.includes(normalizedTarget)) {
return;
}

tabButtons.forEach((button) => {
const buttonId = (button.dataset.rootTab || button.dataset.tab || '').toLowerCase();
collectRootTabElements();

const tabs = document.querySelectorAll('[data-root-tab]');
const panels = document.querySelectorAll('[data-root-panel]');

tabs.forEach((button) => {
const buttonId = (button.dataset.rootTab || '').toLowerCase();
const isActive = buttonId === normalizedTarget;
button.classList.toggle('active', isActive);
button.classList.toggle('root-tab--active', isActive);
button.setAttribute('aria-selected', isActive ? 'true' : 'false');
button.setAttribute('tabindex', isActive ? '0' : '-1');
});

tabPanels.forEach((panel) => {
const panelId = (panel.dataset.rootPanel || panel.dataset.tab || '').toLowerCase();
panels.forEach((panel) => {
const panelId = (panel.dataset.rootPanel || '').toLowerCase();
const isActive = panelId === normalizedTarget;
panel.classList.toggle('active', isActive);
panel.classList.toggle('root-panel--active', isActive);
Expand All @@ -1101,61 +1112,68 @@ function goToRootTab(targetTab, options = {}) {
});
pendingAutoSwitch = false;
}
if (focusPanel) {
focusTabPanel(normalizedTarget);
}
}

function initRootTabs() {
if (!document.body || document.body.dataset.rootTabsHydrated === '1') {
if (!document.body) {
return;
}
if (document.body.dataset.rootTabsHydrated === '1') {
console.info('[root-tabs] already hydrated');
return;
}

collectRootTabElements();

const tabs = tabButtons;
const panels = tabPanels;

console.info(
'[root-tabs] found tabs:',
tabs.map((tab) => tab.dataset.rootTab || tab.dataset.tab || '')
);
console.info(
'[root-tabs] found panels:',
panels.map((panel) => panel.dataset.rootPanel || panel.dataset.tab || '')
);

document.body.dataset.rootTabsHydrated = '1';

if (tabs.length === 0 || panels.length === 0) {
const bar = document.querySelector('[data-root-tabs]');
if (!bar) {
console.warn('[root-tabs] no [data-root-tabs] container found');
return;
}

tabs.forEach((tab) => {
tab.addEventListener('click', (event) => {
console.info('[root-tabs] click on', tab.dataset.rootTab || tab.dataset.tab);
event.preventDefault();
const targetId = tab.dataset.rootTab || tab.dataset.tab;
if (targetId) {
goToRootTab(targetId, { focusPanel: true });
}
});
console.info('[root-tabs] hydrating');

collectRootTabElements();

bar.addEventListener('click', (event) => {
const btn = event.target.closest('[data-root-tab]');
if (!btn) {
return;
}
event.preventDefault();
const id = btn.dataset.rootTab;
if (!id) {
return;
}
console.info('[root-tabs] click on', id);
goToRootTab(id);
focusTabPanel(id);
});

const defaultTabButton =
tabs.find((button) => button.classList.contains('root-tab--active')) ||
tabs.find((button) => button.classList.contains('active')) ||
tabs[0];
tabButtons.forEach((button) => {
button.addEventListener('keydown', handleRootTabKeydown);
});

if (consoleTabButton) {
consoleTabButton.style.display = 'inline-flex';
consoleTabButton.style.alignItems = 'center';
consoleTabButton.style.justifyContent = 'center';

const defaultTarget =
defaultTabButton?.dataset.rootTab ||
defaultTabButton?.dataset.tab ||
tabOrder[0];
consoleIndicator = document.createElement('span');
consoleIndicator.textContent = '•';
consoleIndicator.setAttribute('aria-hidden', 'true');
consoleIndicator.style.marginLeft = '4px';
consoleIndicator.style.fontSize = '10px';
consoleIndicator.style.color = '#22d3ee';
consoleIndicator.style.opacity = '0';
consoleIndicator.style.transition = 'opacity 0.2s ease';
consoleIndicator.style.pointerEvents = 'none';
consoleTabButton.append(consoleIndicator);
}

if (defaultTarget) {
goToRootTab(defaultTarget, { focusPanel: false });
} else if (tabOrder.length > 0) {
goToRootTab(tabOrder[0], { focusPanel: false });
const firstActive = document.querySelector('[data-root-tab].root-tab--active');
const first = firstActive || document.querySelector('[data-root-tab]');
if (first && first.dataset.rootTab) {
goToRootTab(first.dataset.rootTab);
}
}

Expand All @@ -1164,28 +1182,16 @@ registerIntentHandler(INTENT_TYPES.NAVIGATE_TAB, (payload = {}) => {
if (!target) {
return;
}
const shouldFocus = payload.focusPanel === true;
goToRootTab(target, { focusPanel: shouldFocus });
goToRootTab(target);
if (payload.focusPanel === true) {
focusTabPanel(target);
}
});

initRootTabs();

if (consoleTabButton) {
consoleTabButton.style.display = 'inline-flex';
consoleTabButton.style.alignItems = 'center';
consoleTabButton.style.justifyContent = 'center';

consoleIndicator = document.createElement('span');
consoleIndicator.textContent = '•';
consoleIndicator.setAttribute('aria-hidden', 'true');
consoleIndicator.style.marginLeft = '4px';
consoleIndicator.style.fontSize = '10px';
consoleIndicator.style.color = '#22d3ee';
consoleIndicator.style.opacity = '0';
consoleIndicator.style.transition = 'opacity 0.2s ease';
consoleIndicator.style.pointerEvents = 'none';
consoleTabButton.append(consoleIndicator);
}
document.addEventListener('DOMContentLoaded', () => {
console.info('[app] DOMContentLoaded');
initRootTabs();
});

function handleRootTabKeydown(event) {
const { key } = event;
Expand Down Expand Up @@ -1241,10 +1247,6 @@ function handleRootTabKeydown(event) {
}
}

tabButtons.forEach((button) => {
button.addEventListener('keydown', handleRootTabKeydown);
});

function tabFromShortcutKey(key) {
const numericKey = Number.parseInt(key, 10);
if (Number.isNaN(numericKey)) {
Expand Down
15 changes: 8 additions & 7 deletions web/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,15 @@
</head>
<body>
<div class="workbench">
<nav class="tab-bar" role="tablist" aria-label="Workbench tabs">
<nav
id="root-tab-bar"
class="tab-bar"
role="tablist"
aria-label="Workbench tabs"
data-root-tabs
>
<button
class="tab root-tab root-tab--active active"
class="tab root-tab root-tab--active"
type="button"
id="tab-visuals"
role="tab"
Expand Down Expand Up @@ -107,7 +113,6 @@ <h2 class="tab-panel-title" data-tab-heading tabindex="-1">Visuals</h2>
aria-labelledby="tab-config"
data-tab="config"
data-root-panel="config"
hidden
tabindex="-1"
>
<h2 class="tab-panel-title" data-tab-heading tabindex="-1">Config</h2>
Expand Down Expand Up @@ -241,7 +246,6 @@ <h2 class="tab-panel-title" data-tab-heading tabindex="-1">Config</h2>
aria-labelledby="tab-console"
data-tab="console"
data-root-panel="console"
hidden
tabindex="-1"
>
<h2 class="tab-panel-title" data-tab-heading tabindex="-1">Console</h2>
Expand All @@ -253,7 +257,6 @@ <h2 class="tab-panel-title" data-tab-heading tabindex="-1">Console</h2>
aria-labelledby="tab-json"
data-tab="json"
data-root-panel="json"
hidden
tabindex="-1"
>
<h2 class="tab-panel-title" data-tab-heading tabindex="-1">JSON</h2>
Expand All @@ -265,7 +268,6 @@ <h2 class="tab-panel-title" data-tab-heading tabindex="-1">JSON</h2>
aria-labelledby="tab-fixtures"
data-tab="fixtures"
data-root-panel="fixtures"
hidden
tabindex="-1"
>
<h2 class="tab-panel-title" data-tab-heading tabindex="-1">Fixtures</h2>
Expand All @@ -277,7 +279,6 @@ <h2 class="tab-panel-title" data-tab-heading tabindex="-1">Fixtures</h2>
aria-labelledby="tab-logs"
data-tab="logs"
data-root-panel="logs"
hidden
tabindex="-1"
>
<h2 class="tab-panel-title" data-tab-heading tabindex="-1">Logs</h2>
Expand Down
5 changes: 5 additions & 0 deletions web/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,9 +94,14 @@ body {
color: #ffffff;
}

.root-tab {
opacity: 0.7;
}

.root-tab--active {
background: #3a3f4f;
color: #ffffff;
opacity: 1;
}

.tab-content {
Expand Down