phase: 116_modal_scrollbar_theme
All verification complete — every gate re-run independently and green. Final report: **Phase 116 final verification pass — all green (work was already in the tree; verified, nothing to fix)** - **Verified** `styles.css`: `--scrollbar-thumb`/`--scrollbar-track` tokens in `:root` (color-mix derivations — follow the saved theme, not in BUILTIN_COLORS; contrast 3.73:1 ≥ 3:1, recomputed independently) + scoped rules `.doc-modal .doc-raw` (overflow-x already owned by the element) - **Verified** E2E test 8 `test_raw_code_block_themed_scrollbar`: overflow, scroll action, computed-style theme assertions, screenshot - **Screenshots visually confirmed**: headed `doc_modal_scrollbar_themed_1280.png` shows muted rounded thumb on dark track, no native light-gray bar; headless suite shot records scrolled state (headless Chromium paints no bar UI — documented in test docstring) **Test / lint / coverage (re-run by me):** - `uv run pytest tests/e2e/test_document_viewer.py -v --no-cov` → **8 passed** (isolation) - `uv run pytest --cov=app --cov-report=term` → **2457 passed, app/ 99%** (>90% ✓) - `uv run pytest tests/e2e/test_dark_tech_theme.py -v --no-cov` → **6 passed** (no token collision) - `uv run ruff check .` → clean; `uv run pyright` → 0 errors, 0 warnings **Completion criteria:** 1. Modal scrolls horizontally, scrollbar themed, screenshot shows no native bar — ✅ 2. No global scrollbar change (all new selectors under `.doc-modal`; grep-confirmed), regressions green — ✅ 3. pytest green, coverage >90%, e2e isolated green, ruff+pyright clean — ✅ 4. `--no-gpg-sign` commit + phase move — harness job (left uncommitted in working tree, per rules) **No defects found; no deviations. Next pending phase:** none — `todo/` contains only phase 116.
This commit is contained in:
@@ -1,39 +0,0 @@
|
||||
# Phase 116 — Document modal: themed code-block scrollbar (TODO L3)
|
||||
|
||||
**Source:** `TODO.md` L88–99 — "L3 — Document modal: native unstyled horizontal scrollbar in the code block (cosmetic) (2026-09-15, brain-of-reese interactive test)"
|
||||
**Story:** `document-viewer.md` — the modal belongs to the document-viewer story (the same-page chip viewer, phase 26).
|
||||
**Context:** The document modal (the almost-fullscreen chip viewer, `.doc-modal` — `frontend/assets/styles.css:4117+`) shows the raw content in a code block; long lines (e.g. a `quest::say(...)` line in a quest `.pl` file) overflow horizontally and reveal the **browser-native, unstyled scrollbar** (light-gray bar) — it clashes with the dark theme, and long lines clip at the right edge.
|
||||
|
||||
## Objective
|
||||
The modal's code block scrolls horizontally with a themed scrollbar (`scrollbar-color` for Firefox, `::-webkit-scrollbar` pseudos for Chromium), consistent with the dark theme; long lines stay unwrapped (code stays code) and scroll instead of clipping.
|
||||
|
||||
## Dependencies
|
||||
- `115_doc_draft_discard` (todo) — pipeline predecessor (execution order) only; no code dependency (CSS + one E2E file).
|
||||
|
||||
## Design (shared by all tasks — the executor reads this, not the chat)
|
||||
- **Theme tokens (task 01):** two CSS custom properties in the theme's token block: `--scrollbar-thumb` (a muted theme color, ≥3:1 against the track — a scrollbar is a UI component, non-text contrast AA) and `--scrollbar-track` (near the code-block background). Scope: the modal's raw-content code element **only** (confirm the exact selector from `frontend/assets/document-modal.js` / the `.doc-modal` rules) — no global scrollbar restyle (out of scope; the TODO asks only about the modal).
|
||||
- **Rules (task 01):** on the modal code block: `overflow-x: auto` (confirm present — add if the element relies on an ancestor), `scrollbar-width: thin`, `scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track)` (Firefox), and the Chromium pair: `::-webkit-scrollbar { height: 8px }`, `::-webkit-scrollbar-track { background: var(--scrollbar-track) }`, `::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px }`.
|
||||
- **E2E (task 02):** the document-viewer story gains a check: open the modal on a document with a long line → the code block is horizontally scrollable (`scrollWidth > clientWidth`; a scroll action moves it) → a screenshot to `.agents/screenshots/` (house convention) as the visual record.
|
||||
|
||||
## Tasks
|
||||
1. `01_themed_scrollbar.md` — the theme tokens + the scoped scrollbar rules.
|
||||
2. `02_scrollbar_e2e_check.md` — the E2E scroll check + screenshot.
|
||||
|
||||
## Testing & Quality
|
||||
- E2E: `tests/e2e/test_document_viewer.py` (existing — extend, task 02); run in isolation: `uv run pytest tests/e2e/test_document_viewer.py -v --no-cov`.
|
||||
- CSS: no unit layer for CSS — the E2E check + screenshot are the gate; the dark-theme suite (`tests/e2e/test_dark_tech_theme.py`) must stay green (no token collision).
|
||||
- Coverage: n/a (no app/ code change) — the validate.sh gate stays green.
|
||||
|
||||
## Completion Criteria
|
||||
- [ ] The modal's code block scrolls horizontally; the scrollbar is themed — the screenshot in `.agents/screenshots/` shows no native light-gray bar.
|
||||
- [ ] No global scrollbar change (the new selector is scoped under `.doc-modal` — grep); the other pages are visually unchanged (regression suites green).
|
||||
- [ ] `uv run pytest` green; coverage >90%; the e2e file green in isolation; `uv run ruff check . && uv run pyright` clean.
|
||||
- [ ] One `--no-gpg-sign` commit; phase dir moved to `complete/` by the pipeline gate.
|
||||
|
||||
## Locked decisions
|
||||
- **A1 — keep horizontal scroll (NO line-wrap) for the code content (owner-confirmed 2026-09-14, roadmap confirmation — the TODO's "consider wrapping long lines per content type" is rejected for code: wrapping breaks code readability; the themed scrollbar is the fix).**
|
||||
|
||||
## Commit
|
||||
```bash
|
||||
git add frontend/ tests/ .agents/phases/ && git commit --no-gpg-sign -m "style(ui): theme the document modal's code-block horizontal scrollbar (scrollbar-color + webkit pseudos)"
|
||||
```
|
||||
@@ -1,23 +0,0 @@
|
||||
# Task 01 — Themed scrollbar for the modal code block
|
||||
|
||||
**Phase:** `116_modal_scrollbar_theme` · **Source:** `TODO.md:90–96` — "In the document modal (the almost-fullscreen chip viewer), the raw-content code block overflows horizontally and reveals the **browser-native, unstyled scrollbar** (light-gray bar) — it clashes with the dark theme, and long lines clip at the right edge (observed on a quest `.pl` file whose `quest::say(...)` line exceeds the modal width). Style the scrollbar to match the theme (`scrollbar-color` for Firefox, `::-webkit-scrollbar` pseudos for Chromium), or consider wrapping long lines per content type."
|
||||
|
||||
## Objective
|
||||
The modal's raw-content code block gets a themed horizontal scrollbar (both engine families), scoped to the modal.
|
||||
|
||||
## Work
|
||||
1. `frontend/assets/styles.css` — find the modal code block's exact selector (the `.doc-modal` raw-content `<pre>`/code element — how `frontend/assets/document-modal.js` renders the content; the `.doc-modal-panel` rules start ~L4135):
|
||||
- ensure `overflow-x: auto` on the scrolling element (add it if the element relies on an ancestor for the overflow);
|
||||
- add the scoped rules: `scrollbar-width: thin`, `scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track)`, and `::-webkit-scrollbar { height: 8px }` / `::-webkit-scrollbar-track { background: var(--scrollbar-track) }` / `::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px }`.
|
||||
2. `frontend/assets/styles.css` — define `--scrollbar-thumb` / `--scrollbar-track` in the theme's token block (derive from existing theme colors — the thumb must be visibly distinct from the track, ≥3:1 non-text contrast).
|
||||
3. Do NOT restyle scrollbars elsewhere — the new selector stays scoped under `.doc-modal` (the TODO's scope).
|
||||
4. ASSUMPTION: no line-wrap (locked A1, phase level) — the code stays unwrapped and scrolls.
|
||||
|
||||
## Testing & Quality
|
||||
- E2E: the scroll check (task 02).
|
||||
- Coverage: n/a (CSS) — the suite stays green.
|
||||
|
||||
## Completion Criteria
|
||||
- [ ] The modal code block's horizontal scrollbar is themed for Chromium (webkit pseudos) and Firefox (`scrollbar-color`) — the task-02 screenshot shows no native light-gray bar.
|
||||
- [ ] No other page's scrollbar changes (the new selector is scoped under `.doc-modal`).
|
||||
- [ ] `uv run pytest` green (in particular `tests/e2e/test_dark_tech_theme.py`).
|
||||
@@ -1,24 +0,0 @@
|
||||
# Task 02 — E2E: the modal scrollbar check + screenshot
|
||||
|
||||
**Phase:** `116_modal_scrollbar_theme` · **Source:** `TODO.md:98–99` — "Acceptance: the modal's code block scrolls horizontally with a themed scrollbar; screenshot check in the document-viewer E2E story."
|
||||
|
||||
## Objective
|
||||
The document-viewer E2E story asserts the modal code block scrolls horizontally and records a screenshot of the themed scrollbar.
|
||||
|
||||
## Work
|
||||
1. `tests/e2e/test_document_viewer.py` (existing — extend) — a test:
|
||||
- open the document modal on a document with a line longer than the modal width (check the fixture KB's contents first; if no fixture doc qualifies, pick the longest existing line and assert `scrollWidth > clientWidth` against it — note the choice in the test docstring);
|
||||
- the code block element: `scrollWidth > clientWidth` (the overflow is real);
|
||||
- a horizontal scroll action (`scrollLeft` / `scrollBy`) actually moves it (the scroll works, no clipping);
|
||||
- the themed rule is in effect: `getComputedStyle` exposes `scrollbar-color` (the webkit pseudos are not exposed via computed style — that half is covered by the screenshot);
|
||||
- a screenshot to `.agents/screenshots/` (house convention — check the exact path other screenshot tests use).
|
||||
2. Run in isolation: `uv run pytest tests/e2e/test_document_viewer.py -v --no-cov` (DB up).
|
||||
3. Regression: the existing `test_document_viewer.py` tests stay green.
|
||||
|
||||
## Testing & Quality
|
||||
- E2E: the scroll behavior + the screenshot (the acceptance).
|
||||
- Coverage: n/a.
|
||||
|
||||
## Completion Criteria
|
||||
- [ ] The new E2E test green in isolation; the screenshot shows the themed scrollbar (no native light-gray bar).
|
||||
- [ ] `uv run pytest` green; `uv run ruff check . && uv run pyright` clean.
|
||||
Reference in New Issue
Block a user