opensource/coder
3
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2026-09-24 15:04:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(site/src/pages/AgentsPage): theme diff changed-line backgrounds (#25179)

Browse Source 
## Summary

- Update AgentsPage diff viewer CSS so changed lines use theme-aware git
added and deleted surfaces.
- Add unit coverage for the changed-line CSS variables and line-type
selectors.

## Dependencies

- None. This is independent of the theme mode API and dropdown stack.

## Validation

- `pnpm -C site exec vitest run --project=unit
src/pages/AgentsPage/components/ChatElements/tools/utils.test.ts`
- Pre-commit hook passed on the branch commit.
This commit is contained in:
Jaayden Halko
2026-05-14 14:11:30 +01:00
committed by GitHub
parent da2fa082bb
commit 3a070a83dd
2 changed files with 31 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/pages/AgentsPage/components/ChatElements/tools/utils.test.ts
+11
View File
@@ -855,6 +855,17 @@ describe("constants", () => {
it("diffViewerCSS includes border-left style", () => {
expect(diffViewerCSS).toContain("border-left");
});
it("diffViewerCSS uses theme-aware changed line backgrounds", () => {
expect(diffViewerCSS).toContain("--diffs-addition-color-override");
expect(diffViewerCSS).toContain("--diffs-deletion-color-override");
expect(diffViewerCSS).toContain("--diffs-bg-addition-override");
expect(diffViewerCSS).toContain("--diffs-bg-deletion-override");
expect(diffViewerCSS).toContain("var(--surface-git-added)");
expect(diffViewerCSS).toContain("var(--surface-git-deleted)");
expect(diffViewerCSS).toContain("[data-line-type='change-addition']");
expect(diffViewerCSS).toContain("[data-line-type='change-deletion']");
});
});
describe("parseServerEditResults", () => {
site/src/pages/AgentsPage/components/ChatElements/tools/utils.ts
+20 -3
View File
@@ -332,11 +332,27 @@ const DIFF_HEADER_CSS = [
"}",
].join(" ");
const CHANGE_LINE_CSS = [
":host {",
" --diffs-addition-color-override: hsl(var(--git-added));",
" --diffs-deletion-color-override: hsl(var(--git-deleted));",
" --diffs-bg-addition-override: hsl(var(--surface-git-added));",
" --diffs-bg-deletion-override: hsl(var(--surface-git-deleted));",
" --diffs-bg-addition-number-override: hsl(var(--surface-git-added));",
" --diffs-bg-deletion-number-override: hsl(var(--surface-git-deleted));",
"}",
"[data-line-type='change-addition']:not([data-selected-line]) {",
" background-color: hsl(var(--surface-git-added)) !important;",
"}",
"[data-line-type='change-deletion']:not([data-selected-line]) {",
" background-color: hsl(var(--surface-git-deleted)) !important;",
"}",
].join(" ");
export const diffViewerCSS = [
// Make context lines transparent so they blend with the page,
// but preserve the library's colored backgrounds on changed
// lines (change-addition / change-deletion) so the line-level
// tint and word-level emphasis highlights remain visible.
// while changed lines use the same theme-aware git surfaces as
// the file headers and stats.
"pre, [data-line]:not([data-selected-line]):not([data-line-type='change-addition']):not([data-line-type='change-deletion']), [data-diffs-header] { background-color: transparent !important; }",
"[data-diffs-header] { border-left: 1px solid var(--border); }",
// The library reserves a 6 px horizontal scrollbar track on
@@ -345,6 +361,7 @@ export const diffViewerCSS = [
"[data-code] { scrollbar-width: none !important; }",
"[data-code]::-webkit-scrollbar { height: 0 !important; }",
DIFF_HEADER_CSS,
CHANGE_LINE_CSS,
SELECTION_OVERRIDE_CSS,
SEPARATOR_CSS,
].join(" ");