Skip to content

web: subtly band grouped ranges in the tracer instruction list#265

Closed
gnidan wants to merge 2 commits into
mainfrom
ui-instruction-banding
Closed

web: subtly band grouped ranges in the tracer instruction list#265
gnidan wants to merge 2 commits into
mainfrom
ui-instruction-banding

Conversation

@gnidan

@gnidan gnidan commented Jul 16, 2026

Copy link
Copy Markdown
Member

Follow-up to #262 (call badges). Adds the subtle grouped-range highlighting from the design exploration — quiet bands + light labels so you can see where instructions group, coexisting with the call badges.

  • Consecutive instructions that belong to one group get a faint background band (a subtle tint + hairline on alternating groups) and a light label.
  • A small control in the Instructions panel header switches the grouping:
    • function (default) — coarse bands per enclosing activation, labeled with the function name. Pairs with the call badges: the band shows you're inside a function, the ➜ call / ↵ return badges mark where it's entered/returned.
    • source — finer bands per source statement/expression, labeled with the source line.
    • off — today's flat list.
  • Genuinely subtle: no indentation, collapsing, or sticky headers. Just quiet bands + labels.

Presentation only — grouped from the same source ranges and invoke/return contexts already used for the source highlight and call-info banner. Best seen on the deploy preview: open any example with a call (e.g. "Function call and return") and flip the grouping control.

Add quiet grouped-range highlighting to the instruction list, coexisting
with the call badges from #262. Consecutive instructions belonging to one
group get a faint background band and a light label; a small control in
the panel header switches the grouping:

- function: coarse bands per enclosing activation, labeled with the
  function name (pairs with the call badges, which mark entry/return);
- source: finer bands per source statement/expression, labeled with the
  source line;
- off: today's flat list.

Presentation only — grouped from the same source ranges and invoke/return
contexts already used for the highlight and call-info banner. No
indentation, collapsing, or sticky headers.
@github-actions

github-actions Bot commented Jul 16, 2026

Copy link
Copy Markdown
Contributor
PR Preview Action v1.8.1
Preview removed because the pull request was closed.
2026-07-16 06:06 UTC

Source-range group labels can be a whole function definition (~100
chars). Truncate to one line with an ellipsis and expose the full text
via a title tooltip, and cap the label at the panel width so a long
source line can't widen the drawer or wrap.
@gnidan

gnidan commented Jul 16, 2026

Copy link
Copy Markdown
Member Author

Setting the banding aside for now — the grouped-range presentation needs a clearer sense of what information to surface before it's worth building. The call badges (#262) cover the immediate need.

@gnidan gnidan closed this Jul 16, 2026
@gnidan
gnidan deleted the ui-instruction-banding branch July 16, 2026 06:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant