diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 14f49bdd..d7a6492b 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -224,6 +224,7 @@ jobs: BASE_URL=http://localhost:13581 node test-channel-fluid-e2e.js 2>&1 | tee -a e2e-output.txt BASE_URL=http://localhost:13581 node test-table-fluid-e2e.js 2>&1 | tee -a e2e-output.txt BASE_URL=http://localhost:13581 node test-issue-1122-packets-filter-ux-e2e.js 2>&1 | tee -a e2e-output.txt + BASE_URL=http://localhost:13581 node test-issue-1128-packets-layout-e2e.js 2>&1 | tee -a e2e-output.txt - name: Collect frontend coverage (parallel) if: success() && github.event_name == 'push' diff --git a/public/packets.js b/public/packets.js index a397e171..5bc44c1f 100644 --- a/public/packets.js +++ b/public/packets.js @@ -1181,13 +1181,20 @@ } function updateTypeTrigger() { const total = Object.keys(typeMap).length; + // #1128 (Bug 3): trigger has bounded max-width so long selections like + // "TRACE,MULTIPART,GRP_TXT" get ellipsised. Always set the full label + // as the `title` attribute so the user can recover it via tooltip. + const fullList = [...selectedTypes].map(k => typeMap[k] || k).join(', '); if (selectedTypes.size === 0 || selectedTypes.size === total) { typeTrigger.textContent = 'All Types ▾'; + typeTrigger.title = 'Filter by packet type'; } else if (selectedTypes.size === 1) { const k = [...selectedTypes][0]; typeTrigger.textContent = (typeMap[k] || k) + ' ▾'; + typeTrigger.title = 'Selected: ' + fullList; } else { typeTrigger.textContent = selectedTypes.size + ' Types ▾'; + typeTrigger.title = 'Selected: ' + fullList; } } buildTypeMenu(); @@ -1853,6 +1860,12 @@ } if (window.__PERF_LOG_RENDER) console.log('[perf] renderVisibleRows: full rebuild %d entries, %.2fms', endIdx - startIdx, performance.now() - _rvr_t0); _finalizePathOverflow(tbody); + // #1128 (Bug 1): hop-resolver mutates chip text from hex prefix to a + // longer node name AFTER the initial finalize pass — chips that fit at + // first measurement overflow once names resolve, but no `+N` pill gets + // appended. Cheapest correct fix: re-measure on a delayed pass, after + // clearing the per-host `overflowChecked` guard so the recheck runs. + _scheduleReFinalizePathOverflow(tbody); return; } @@ -1887,6 +1900,7 @@ } if (window.__PERF_LOG_RENDER) console.log('[perf] renderVisibleRows: incremental head=%d tail=%d, %.2fms', headRowCount, tailRowCount, performance.now() - _rvr_t0); _finalizePathOverflow(tbody); + _scheduleReFinalizePathOverflow(tbody); } // #1124 (MAJOR-1): when path chips overflow `.path-hops` (capped at 22px / @@ -1928,6 +1942,48 @@ } } + // #1128 (Bug 1): re-run overflow finalize after hop-resolver async pass has + // had a chance to mutate chip text. Per-tbody so concurrent renders in + // different tbodies don't cancel each other (#1131 BLOCKER-2). Uses a + // MutationObserver bonded to the tbody to detect when hop-resolver finishes + // mutating .path-hops chip text, then runs finalize once mutations settle + // for 50ms — replaces the previous 120ms blind timeout, which regressed on + // slow networks where the resolver took longer than 120ms (#1131 MAJOR-1). + function _scheduleReFinalizePathOverflow(tbody) { + if (!tbody) return; + // If a quiesce timer is already armed for this tbody, leave it; new + // mutations will keep extending it. If an observer is already wired, + // we're done — it'll fire again on the next mutation. + if (tbody._rePathOverflowObserver) return; + var quiesceTimer = null; + var stopTimer = null; + function finalize() { + if (tbody._rePathOverflowObserver) { + try { tbody._rePathOverflowObserver.disconnect(); } catch (_e) {} + tbody._rePathOverflowObserver = null; + } + if (stopTimer) { clearTimeout(stopTimer); stopTimer = null; } + var hosts = tbody.querySelectorAll('.path-hops'); + for (var i = 0; i < hosts.length; i++) hosts[i].dataset.overflowChecked = ''; + _finalizePathOverflow(tbody); + } + if (typeof MutationObserver === 'function') { + var obs = new MutationObserver(function () { + if (quiesceTimer) clearTimeout(quiesceTimer); + quiesceTimer = setTimeout(finalize, 50); + }); + obs.observe(tbody, { subtree: true, childList: true, characterData: true }); + tbody._rePathOverflowObserver = obs; + // Hard upper bound — if hop-resolver never mutates (e.g. all chips + // already final), still run finalize once after a short delay so the + // overflow pill appears. + stopTimer = setTimeout(finalize, 1000); + } else { + // Fallback for environments without MutationObserver. + setTimeout(finalize, 120); + } + } + // Delegated click for path overflow pills — show popover of full path. function _wirePathOverflowPopover() { if (window.__pathOverflowWired) return; @@ -1962,8 +2018,18 @@ pop.innerHTML = inner; document.body.appendChild(pop); var r = pill.getBoundingClientRect(); - // Position below the pill, kept inside viewport. - var top = window.scrollY + r.bottom + 4; + // #1128 (Bug 2): position below by default, but flip ABOVE when there + // isn't enough room — keeps the popover anchored to the pill instead of + // hanging arbitrarily over adjacent rows / off-screen. + var pr0 = pop.getBoundingClientRect(); + var popH = pr0.height; + var roomBelow = window.innerHeight - r.bottom; + var top; + if (roomBelow < popH + 12 && r.top > popH + 12) { + top = window.scrollY + r.top - popH - 4; + } else { + top = window.scrollY + r.bottom + 4; + } var left = window.scrollX + r.left; pop.style.top = top + 'px'; pop.style.left = left + 'px'; diff --git a/public/style.css b/public/style.css index 15edad98..90edf327 100644 --- a/public/style.css +++ b/public/style.css @@ -1,5 +1,29 @@ /* === CoreScope — style.css === */ +/* ============================================================ + * Z-INDEX SCALE (single source of truth — issues #1128, #1131) + * ------------------------------------------------------------ + * Use these tokens for ANY new stacking context. Raw z-index + * literals in this file are legacy and being migrated. When + * touching a rule with a literal z-index, replace it with the + * appropriate token below. + * + * --z-base 0 document base, table cells + * --z-dropdown 100 in-flow dropdowns (multi-select, + * saved-filters, column-toggles) + * --z-popover 300 popovers anchored to a dropdown + * or table cell (path overflow, + * autocomplete row detail) + * --z-modal-backdrop 9000 full-viewport modal scrim + * --z-modal 9100 modal panels themselves + * --z-tooltip 9200 tooltips, ctx menus, hover popovers + * that must float above modals + * + * Migration policy: do NOT bulk-rewrite legacy values that + * currently work — risk/reward is poor. Migrate opportunistically + * when editing nearby rules. New rules MUST use the tokens. + * ============================================================ */ + /* ============================================================ * FLUID SCAFFOLDING (issue #1054) * ------------------------------------------------------------ @@ -85,10 +109,30 @@ --surface-1: #ffffff; --surface-2: #ffffff; --surface-3: #ffffff; + /* #1128 (Bug 4): `--surface` was referenced in 8+ rules (.fux-saved-menu, + * .fux-popover, .path-popover, .fux-ac-dropdown, .fux-ctx-menu, ...) but + * never defined → backgrounds resolved transparent → row content bled + * through dropdowns. Alias it to the opaque card surface. */ + --surface: var(--surface-1); --content-bg: var(--surface-0); --card-bg: var(--surface-1); --hover-bg: rgba(0,0,0, 0.04); --trace-ghost-color: #94a3b8; + + /* #1128: documented z-index scale. Use these custom props for any new + * stacking context decision. Existing legacy z-index values that work are + * left in place to avoid behavioural risk; new code must use these tokens. + * --z-base 0 document base, table cells + * --z-dropdown 100 in-flow dropdowns (multi-select, saved, columns) + * --z-popover 300 popovers anchored to dropdowns / cells + * --z-modal-backdrop 9000 / --z-modal 9100 / --z-tooltip 9200 + */ + --z-base: 0; + --z-dropdown: 100; + --z-popover: 300; + --z-modal-backdrop: 9000; + --z-modal: 9100; + --z-tooltip: 9200; } /* ⚠️ DARK THEME VARIABLES — KEEP BOTH BLOCKS IN SYNC @@ -109,6 +153,7 @@ --surface-1: #1a1a2e; --surface-2: #232340; --surface-3: #2d2d50; + --surface: var(--surface-1); --content-bg: var(--surface-0); --card-bg: var(--surface-1); --text: #e2e8f0; @@ -138,6 +183,7 @@ --surface-1: #1a1a2e; --surface-2: #232340; --surface-3: #2d2d50; + --surface: var(--surface-1); --content-bg: var(--surface-0); --card-bg: var(--surface-1); --text: #e2e8f0; @@ -523,7 +569,7 @@ input[type="week"] { * so the visual seam between groups stays readable even when wrapped. */ .filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; align-items: center; - row-gap: 6px; + row-gap: 12px; } .filter-bar input, .filter-bar select { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; @@ -1742,7 +1788,7 @@ button.ch-item.ch-item-encrypted .ch-badge { filter: grayscale(0.6); } .hash-cell-possible { background: var(--status-yellow); color: #fff; } .hash-cell-collision { color: #fff; } .hash-matrix-tooltip { - position: fixed; z-index: 9999; background: var(--surface-1); border: 1px solid var(--border); + position: fixed; z-index: var(--z-tooltip); background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.25); padding: 8px 12px; font-size: 12px; min-width: 160px; max-width: 260px; pointer-events: none; } @@ -1919,7 +1965,7 @@ button.ch-item.ch-item-encrypted .ch-badge { filter: grayscale(0.6); } .hop-conflict-btn { background: var(--status-yellow, #f59e0b); color: #000; border: none; border-radius: 4px; font-size: 11px; font-weight: 700; padding: 1px 5px; cursor: pointer; vertical-align: middle; margin-left: 3px; line-height: 1.2; } .hop-conflict-btn:hover { background: var(--status-yellow, #d97706); filter: brightness(0.85); } -.hop-conflict-popover { position: absolute; z-index: 9999; background: var(--surface-1); border: 1px solid var(--border); +.hop-conflict-popover { position: absolute; z-index: var(--z-tooltip); background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.25); width: 260px; max-height: 300px; overflow-y: auto; } .hop-conflict-header { padding: 10px 12px; font-size: 12px; font-weight: 700; border-bottom: 1px solid var(--border); color: var(--text-muted); } @@ -2278,6 +2324,12 @@ tr[data-hops]:hover { background: rgba(59,130,246,0.1); } font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); transition: all 0.15s; height: 34px; box-sizing: border-box; white-space: nowrap; line-height: 1; + /* #1128 (Bug 3): cap trigger width so a long selection like + * "TRACE,MULTIPART,GRP_TXT" doesn't balloon the row and overlap toolbar + * buttons. The full label remains accessible via the title tooltip. + * #1131 MAJOR-4: use clamp() so the cap scales with viewport width + * instead of being a hard 180px on every screen size. */ + max-width: clamp(120px, 18vw, 280px); overflow: hidden; text-overflow: ellipsis; } .multi-select-trigger:hover { border-color: var(--accent); color: var(--accent); } .multi-select-menu { @@ -2412,7 +2464,7 @@ tr[data-hops]:hover { background: rgba(59,130,246,0.1); } .audio-unlock-overlay { position: fixed; inset: 0; - z-index: 10000; + z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; @@ -2640,7 +2692,7 @@ tr[data-hops]:hover { background: rgba(59,130,246,0.1); } /* === Channel Color Picker (#674) === */ .cc-picker-popover { position: fixed; - z-index: 9999; + z-index: var(--z-tooltip); background: var(--bg-secondary, #1e1e1e); border: 1px solid var(--border-color, #333); border-radius: 8px; @@ -2996,13 +3048,13 @@ th.sort-active { color: var(--accent, #60a5fa); } .fux-help-btn:hover, .fux-saved-trigger:hover { background: var(--bg-hover, var(--surface)); } -.fux-popover { position: fixed; top: 60px; right: 24px; width: min(720px, 92vw); max-height: 80vh; overflow: auto; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.35); z-index: 10000; padding: 0; } +.fux-popover { position: fixed; top: 60px; right: 24px; width: min(720px, 92vw); max-height: 80vh; overflow: auto; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.35); z-index: var(--z-modal); padding: 0; } /* #1122: when help is opened inside .modal-overlay (real modal/backdrop), reset the absolute positioning so the flex-centered overlay places it. Also neutralise .modal default padding so the sticky header sits flush. */ .modal-overlay > .fux-popover { position: relative; top: auto; right: auto; left: auto; bottom: auto; padding: 0; max-width: min(720px, 92vw); width: min(720px, 92vw); } .modal.fux-popover { padding: 0; } -.fux-help-overlay { z-index: 10000; } +.fux-help-overlay { z-index: var(--z-modal); } /* #1124: keep the help modal inside the viewport. The backdrop alone is * enough visual separation; rows underneath stay rendered. */ .modal-overlay > .fux-popover { max-height: 80vh; overflow-y: auto; } @@ -3024,11 +3076,11 @@ th.sort-active { color: var(--accent, #60a5fa); } } .path-overflow-pill:hover { color: var(--text); background: var(--bg-hover, var(--surface)); } .path-popover { - position: absolute; z-index: 10500; + position: absolute; z-index: var(--z-popover); background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.35); - padding: 8px 10px; max-width: 480px; max-height: 60vh; overflow: auto; + padding: 8px 10px; max-width: min(360px, calc(100vw - 32px)); max-height: 240px; overflow: auto; font-family: var(--mono); font-size: 12px; } .path-popover .path-popover-title { font-family: var(--font); font-size: 11px; color: var(--text-muted); margin-bottom: 4px; } @@ -3047,18 +3099,18 @@ th.sort-active { color: var(--accent, #60a5fa); } .fux-examples { margin: 4px 0; padding-left: 20px; } .fux-examples li { margin: 2px 0; } -.fux-ac-dropdown { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; max-height: 280px; overflow-y: auto; z-index: 9999; box-shadow: 0 4px 12px rgba(0,0,0,0.25); margin-top: 2px; } +.fux-ac-dropdown { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; max-height: 280px; overflow-y: auto; z-index: var(--z-tooltip); box-shadow: 0 4px 12px rgba(0,0,0,0.25); margin-top: 2px; } .fux-ac-item { padding: 4px 10px; display: flex; justify-content: space-between; gap: 12px; cursor: pointer; font-size: 12px; } .fux-ac-item:hover, .fux-ac-item.active { background: var(--bg-hover, rgba(120,160,255,0.12)); } .fux-ac-val { font-family: var(--mono); color: var(--text); } .fux-ac-desc { color: var(--text-muted); font-size: 11px; max-width: 60%; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.fux-ctx-menu { position: absolute; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 4px 14px rgba(0,0,0,0.35); z-index: 10001; min-width: 200px; padding: 4px 0; } +.fux-ctx-menu { position: absolute; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 4px 14px rgba(0,0,0,0.35); z-index: var(--z-tooltip); min-width: 200px; padding: 4px 0; } .fux-ctx-item { display: block; width: 100%; text-align: left; background: transparent; border: none; color: var(--text); padding: 5px 12px; font-size: 12px; cursor: pointer; font-family: var(--mono); } .fux-ctx-item:hover { background: var(--bg-hover, rgba(120,160,255,0.12)); } -.fux-saved-menu { position: absolute; top: 100%; left: 0; min-width: 320px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; z-index: 9999; box-shadow: 0 4px 14px rgba(0,0,0,0.3); margin-top: 4px; padding: 4px 0; } +.fux-saved-menu { position: absolute; top: 100%; left: 0; min-width: 320px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; z-index: var(--z-tooltip); box-shadow: 0 4px 14px rgba(0,0,0,0.3); margin-top: 4px; padding: 4px 0; } .fux-saved-menu.hidden { display: none; } .fux-saved-header { padding: 6px 10px; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--border); } .fux-saved-item { display: flex; align-items: center; gap: 8px; padding: 5px 10px; cursor: pointer; font-size: 12px; } diff --git a/test-issue-1128-packets-layout-e2e.js b/test-issue-1128-packets-layout-e2e.js new file mode 100644 index 00000000..4edebc34 --- /dev/null +++ b/test-issue-1128-packets-layout-e2e.js @@ -0,0 +1,188 @@ +/** + * E2E (#1128): Packets page layout chaos. + * + * Asserts the user-visible properties broken by the 5 sub-bugs documented in + * specs/packets-layout-audit.md: + * + * 1. Bug 4 (--surface undefined): Saved-filter dropdown background must be + * OPAQUE — we read its computed `background-color`, parse the alpha and + * fail if the alpha channel is below 0.99. Same check applies to the + * `+N` path-overflow popover (`.path-popover`). + * 2. Bug 1 (path chip spill / no `+N`): every `.path-hops` host whose + * scrollWidth > clientWidth must have a `.path-overflow-pill` rendered + * after the hop-resolver mutation pass settles. + * 3. Bug 2 (`+N` popover position + z-index): when opened, the popover's + * z-index must be ≤ 9000 (under modal stack) and its top edge must be + * within 8px of the pill's top OR bottom edge — i.e. anchored to the + * pill, not floating arbitrarily across the table. + * 4. Bug 3 (filter-bar gap + multi-select trigger truncation): the + * `.filter-bar` row-gap must be ≥ 10px (controls are 34px tall, 6px gap + * allows visual overlap on wrap), and every `.multi-select-trigger` must + * have a CSS `max-width` ≤ 280px (clamp viewport-aware cap) so a long + * "TRACE,MULTIPART,..." label doesn't balloon the row. + * + * Usage: BASE_URL=http://localhost:13581 node test-issue-1128-packets-layout-e2e.js + */ +'use strict'; +const { chromium } = require('playwright'); + +const BASE = process.env.BASE_URL || 'http://localhost:13581'; + +let passed = 0, failed = 0; +async function step(name, fn) { + try { await fn(); passed++; console.log(' ✓ ' + name); } + catch (e) { failed++; console.error(' ✗ ' + name + ': ' + e.message); } +} +function assert(c, m) { if (!c) throw new Error(m || 'assertion failed'); } + +// Parse "rgba(r,g,b,a)" / "rgb(r,g,b)" → alpha (1 if rgb). +function parseAlpha(s) { + if (!s) return 0; + if (s === 'transparent') return 0; + var m = /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+)\s*)?\)$/i.exec(s); + if (!m) return 1; // assume opaque named color + return m[4] === undefined ? 1 : parseFloat(m[4]); +} + +(async () => { + const browser = await chromium.launch({ + headless: true, + executablePath: process.env.CHROMIUM_PATH || undefined, + args: ['--no-sandbox', '--disable-gpu', '--disable-dev-shm-usage'], + }); + const ctx = await browser.newContext({ viewport: { width: 1280, height: 900 } }); + const page = await ctx.newPage(); + page.setDefaultTimeout(8000); + page.on('pageerror', (e) => console.error('[pageerror]', e.message)); + + console.log(`\n=== #1128 packets layout E2E against ${BASE} ===`); + + await step('navigate to /packets and wait for table + rows', async () => { + await page.goto(BASE + '/#/packets', { waitUntil: 'domcontentloaded' }); + await page.waitForSelector('#packetFilterInput', { timeout: 8000 }); + await page.waitForFunction(() => !!document.querySelector('#filterUxBar'), { timeout: 8000 }); + await page.evaluate(() => { + const sel = document.getElementById('fTimeWindow'); + if (sel) { sel.value = '0'; sel.dispatchEvent(new Event('change', { bubbles: true })); } + }); + await page.waitForFunction( + () => Array.from(document.querySelectorAll('#pktBody tr')) + .filter(r => r.id !== 'vscroll-top' && r.id !== 'vscroll-bottom').length > 0, + { timeout: 8000 }); + // Allow hop-resolver async pass to settle so chips reflect resolved names. + await page.waitForTimeout(400); + }); + + await step('Bug 4: Saved-filter dropdown background is OPAQUE (alpha ≥ 0.99)', async () => { + // Open the saved menu + await page.evaluate(() => { + var btn = document.getElementById('filterSavedTrigger'); + if (btn) btn.click(); + }); + const result = await page.evaluate(() => { + var menu = document.getElementById('filterSavedMenu'); + if (!menu) return { error: 'no #filterSavedMenu' }; + // un-hide if needed (some impls toggle .hidden) + menu.classList.remove('hidden'); + var cs = getComputedStyle(menu); + return { bg: cs.backgroundColor, display: cs.display }; + }); + assert(!result.error, result.error); + var alpha = parseAlpha(result.bg); + assert(alpha >= 0.99, + 'Saved menu background not opaque: alpha=' + alpha + ' bg=' + result.bg + + ' (likely --surface undefined / Bug 4)'); + // close + await page.keyboard.press('Escape').catch(() => {}); + }); + + await step('Bug 1: every overflowing .path-hops has a .path-overflow-pill', async () => { + const result = await page.evaluate(() => { + var hosts = Array.from(document.querySelectorAll('#pktBody .path-hops')); + var offenders = []; + for (var i = 0; i < hosts.length; i++) { + var h = hosts[i]; + // Treat "overflowing" as scrollWidth strictly greater than clientWidth + // by more than 1 px to avoid sub-pixel rounding noise. + if (h.scrollWidth - h.clientWidth > 1) { + if (!h.querySelector('.path-overflow-pill')) { + offenders.push({ + sw: h.scrollWidth, cw: h.clientWidth, + chips: h.querySelectorAll('.hop, .hop-named').length, + }); + } + } + } + return { totalHosts: hosts.length, offenders: offenders.slice(0, 5) }; + }); + assert(result.totalHosts > 0, 'no .path-hops in fixture rows'); + assert(result.offenders.length === 0, + 'overflowing .path-hops without +N pill: ' + JSON.stringify(result.offenders)); + }); + + await step('Bug 2: +N popover anchored to pill + z-index ≤ 9000', async () => { + const found = await page.evaluate(() => { + var pill = document.querySelector('#pktBody .path-overflow-pill'); + if (!pill) return { skip: true }; + pill.scrollIntoView({ block: 'center' }); + return { skip: false }; + }); + if (found.skip) { + console.log(' (no +N pill present in fixture — skipping anchor check)'); + return; + } + // After scrollIntoView the virtual scroll may rebuild rows; wait then + // capture the pill's rect from the *current* DOM, then click it. + await page.waitForTimeout(250); + const result = await page.evaluate(() => { + var pill = document.querySelector('#pktBody .path-overflow-pill'); + if (!pill) return { error: 'pill vanished after scroll' }; + var br = pill.getBoundingClientRect(); + pill.click(); + var pop = document.querySelector('.path-popover'); + if (!pop) return { error: 'popover did not appear after pill click' }; + var pr = pop.getBoundingClientRect(); + var z = parseInt(getComputedStyle(pop).zIndex, 10) || 0; + var anchoredBelow = Math.abs(pr.top - br.bottom) <= 8; + var anchoredAbove = Math.abs(pr.bottom - br.top) <= 8; + return { z, anchoredBelow, anchoredAbove, + pr: { top: pr.top, bottom: pr.bottom }, + br: { top: br.top, bottom: br.bottom } }; + }); + assert(!result.error, result.error); + assert(result.z <= 9000, '+N popover z-index too high (over modal stack): ' + result.z); + assert(result.anchoredBelow || result.anchoredAbove, + '+N popover not anchored to pill: pop=' + JSON.stringify(result.pr) + + ' pill=' + JSON.stringify(result.br)); + }); + + await step('Bug 3: .filter-bar row-gap ≥ 10px AND .multi-select-trigger has bounded max-width', async () => { + const result = await page.evaluate(() => { + var bar = document.querySelector('.filter-bar'); + if (!bar) return { error: 'no .filter-bar' }; + var cs = getComputedStyle(bar); + var rg = parseFloat(cs.rowGap || cs.gap || '0'); + var triggers = Array.from(document.querySelectorAll('.multi-select-trigger')); + var unboundedTrigger = null; + for (var i = 0; i < triggers.length; i++) { + var mw = getComputedStyle(triggers[i]).maxWidth; + // "none" or empty == unbounded; numeric px > 280 == too loose + if (mw === 'none' || mw === '' ) { unboundedTrigger = { idx: i, mw }; break; } + var px = parseFloat(mw); + if (!isFinite(px) || px > 280) { unboundedTrigger = { idx: i, mw }; break; } + } + return { rowGap: rg, triggerCount: triggers.length, unboundedTrigger }; + }); + assert(!result.error, result.error); + assert(result.rowGap >= 10, + '.filter-bar row-gap too small (causes wrap overlap with 34px controls): ' + result.rowGap); + assert(result.triggerCount > 0, 'no .multi-select-trigger present (filter UX missing?)'); + assert(!result.unboundedTrigger, + '.multi-select-trigger lacks bounded max-width: ' + JSON.stringify(result.unboundedTrigger)); + }); + + await browser.close(); + + console.log(`\n=== Results: passed ${passed} failed ${failed} ===`); + process.exit(failed > 0 ? 1 : 0); +})().catch(e => { console.error(e); process.exit(1); });