Blend the edit mode backgrounds#909
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
This PR improves edit-mode selection rendering by ensuring the selection overlay visually composites with the underlying diff line background, including better handling of rounded selection corners.
Changes:
- Move diff line background painting to a
[data-line]::afterlayer so the translucent selection overlay can blend over it. - Update the current-line highlight styling to avoid double-tinting by basing it on
--diffs-computed-diff-line-bg. - Add an editor helper to read a line’s painted background color and pass it into selection-corner masking via a CSS variable.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| packages/diffs/src/editor/editor.ts | Reads the line’s painted background color and plumbs it into selection-corner rendering. |
| packages/diffs/src/editor/editor.css | Refactors line background rendering to a ::after layer and updates selection-corner masking/background behavior. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const cornerBg = this.#lineBackgroundColor(line); | ||
| const css = | ||
| `width:${ch}px;transform:translateX(${left}px) translateY(${top}px);` + | ||
| (cornerBg !== undefined | ||
| ? `--diffs-selection-corner-bg:${cornerBg};` |
| [data-line] { | ||
| cursor: text; | ||
| /* Transparent so the line's in-flow background can't hide the selection | ||
| overlay (z-index -10); the line color moves to the ::after layer below it. */ | ||
| background-color: transparent; | ||
| } |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 576be40f99
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| // Painted background color of a line, read from the [data-line]::after layer | ||
| // (the line element itself is transparent in edit mode). Returns undefined when | ||
| // that layer is transparent (e.g. context lines). | ||
| #lineBackgroundColor(line: number): string | undefined { |
There was a problem hiding this comment.
is it possible to use color-mix in editor.css instead of dynamically adding --diffs-selection-corner-bg?
There was a problem hiding this comment.
I don't think so, because the selection is on another layer, so it has no access to the line color. data-editor-overlay is where the selection range lives. That said, I do think we'll need to cache some of the values if we decide to go this route.
necolas
left a comment
necolas
left a comment
There was a problem hiding this comment.
lgtm once agents are appeased
Rounded selection corner masks capture the resolved line-background color when the selection is drawn, so a theme swap (light/dark toggle or theme name change) left them showing wrong-colored corners on diff-colored lines until the selection moved. The tokenizer now fires an onThemeChange callback from #emitThemeChange (covering the system observer, matchMedia, and syncTheme paths, and the editor re-renders the selection overlay on the next frame so the corners recompute against the new colors. EOF )
This adds some functionality to blend the selection color of edit mode with the diff line background.