fix(ui): change escaping button bg on selected lines (#7944)

* add escape part of line to the list of selectors, so it doesn't cause a hole in selected lines
* fix duplicated element ID in template
* move some CSS out of base.css to dedicated files, so it is less cluttered

Before: https://codeberg.org/attachments/0eaa277b-98e7-42de-98a2-6aca99ffcbe4

After: https://codeberg.org/attachments/124bbb86-c377-4fef-a0e3-403e8c850275

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7944
Reviewed-by: floss4good <floss4good@noreply.codeberg.org>
Reviewed-by: Gusted <gusted@noreply.codeberg.org>

templates/repo/view_file.tmpl

@@ -135,7 +135,7 @@
 						{{range $idx, $code := .FileContent}}
 						{{$line := Eval $idx "+" 1}}
 						<tr>
-							<td id="L{{$line}}" class="lines-num"><span id="L{{$line}}" data-line-number="{{$line}}"></span></td>
+							<td class="lines-num"><span id="L{{$line}}" data-line-number="{{$line}}"></span></td>
 							{{if $.EscapeStatus.Escaped}}
 								<td class="lines-escape">{{if (index $.LineEscapeStatus $idx).Escaped}}<button class="toggle-escape-button btn interact-bg" title="{{if (index $.LineEscapeStatus $idx).HasInvisible}}{{ctx.Locale.Tr "repo.invisible_runes_line"}} {{end}}{{if (index $.LineEscapeStatus $idx).HasAmbiguous}}{{ctx.Locale.Tr "repo.ambiguous_runes_line"}}{{end}}"></button>{{end}}</td>
 							{{end}}

tests/e2e/declare_repos_test.go

@@ -53,6 +53,10 @@ func DeclareGitRepos(t *testing.T) func() {
 				CommitMsg: "Another commit which mentions @user1 in the title\nand @user2 in the text",
 			},
 		}),
+		newRepo(t, 2, "unicode-escaping", []FileChanges{{
+			Filename: "a-file",
+			Versions: []string{"{a}{а}"},
+		}}),
 		// add your repo declarations here
 	}
 

tests/e2e/repo-code.test.e2e.ts

@@ -1,7 +1,13 @@
+// Copyright 2024 The Forgejo Authors. All rights reserved.
+// SPDX-License-Identifier: GPL-3.0-or-later
+
 // @watch start
-// web_src/js/features/repo-code.js
-// web_src/css/repo.css
 // services/gitdiff/**
+// templates/repo/view_file.tmpl
+// web_src/css/repo.css
+// web_src/css/repo/file-view.css
+// web_src/js/features/repo-code.js
+// web_src/js/features/repo-unicode-escape.js
 // @watch end
 
 import {expect, type Page} from '@playwright/test';
@@ -16,7 +22,7 @@ async function assertSelectedLines(page: Page, nums: string[]) {
       .toStrictEqual(nums);
 
     // the first line selected has an action button
-    if (nums.length > 0) await expect(page.locator(`#L${nums[0]} .code-line-button`)).toBeVisible();
+    if (nums.length > 0) await expect(page.locator(`.lines-num:has(#L${nums[0]}) .code-line-button`)).toBeVisible();
   };
 
   await pageAssertions();
@@ -99,3 +105,25 @@ test.describe('As authenticated user', () => {
     await save_visual(page);
   });
 });
+
+test('Unicode escape highlight', async ({page}) => {
+  const unselectedBg = 'rgba(0, 0, 0, 0)';
+  const selectedBg = 'rgb(255, 237, 213)';
+
+  const response = await page.goto('/user2/unicode-escaping/src/branch/main/a-file');
+  expect(response?.status()).toBe(200);
+
+  await expect(page.locator('.unicode-escape-prompt')).toBeVisible();
+  expect(await page.locator('.lines-num').evaluate((el) => getComputedStyle(el).backgroundColor)).toBe(unselectedBg);
+  expect(await page.locator('.lines-escape').evaluate((el) => getComputedStyle(el).backgroundColor)).toBe(unselectedBg);
+  expect(await page.locator('.lines-code').evaluate((el) => getComputedStyle(el).backgroundColor)).toBe(unselectedBg);
+
+  await page.locator('#L1').click();
+  expect(await page.locator('.lines-num').evaluate((el) => getComputedStyle(el).backgroundColor)).toBe(selectedBg);
+  expect(await page.locator('.lines-escape').evaluate((el) => getComputedStyle(el).backgroundColor)).toBe(selectedBg);
+  expect(await page.locator('.lines-code').evaluate((el) => getComputedStyle(el).backgroundColor)).toBe(selectedBg);
+
+  await page.locator('.code-line-button').click();
+  await expect(page.locator('.tippy-box .view_git_blame[href$="/a-file#L1"]')).toBeVisible();
+  await expect(page.locator('.tippy-box .copy-line-permalink[data-url$="/a-file#L1"]')).toBeVisible();
+});

web_src/css/base.css

@@ -1119,41 +1119,6 @@ svg.text.purple,
   padding-left: 1ch;
 }
 
-.lines-escape {
-  width: 0;
-}
-
-.lines-code {
-  padding-left: 5px;
-}
-
-.file-view tr.active {
-  color: inherit !important;
-  background: inherit !important;
-}
-
-.file-view tr.active .lines-num,
-.file-view tr.active .lines-code {
-  background: var(--color-highlight-bg) !important;
-}
-
-.file-view tr.active:last-of-type .lines-code {
-  border-bottom-right-radius: var(--border-radius);
-}
-
-.file-view tr.active .lines-num {
-  position: relative;
-}
-
-.file-view tr.active .lines-num::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  width: 2px;
-  height: 100%;
-  background: var(--color-highlight-fg);
-}
-
 .code-inner {
   font: 12px var(--fonts-monospace);
   white-space: pre-wrap;

web_src/css/index.css

@@ -57,6 +57,7 @@
 @import "./form.css";
 
 @import "./repo.css";
+@import "./repo/file-view.css";
 @import "./repo/release-tag.css";
 @import "./repo/issue-card.css";
 @import "./repo/issue-label.css";

web_src/css/markup/content.css

@@ -561,6 +561,10 @@
   border-top-right-radius: 0 !important;
 }
 
+.file-view.markup {
+  padding: 2em;
+}
+
 .file-view.markup.orgmode li.unchecked::before {
   content: "[ ] ";
 }

web_src/css/repo.css

@@ -1684,9 +1684,6 @@ details.repo-search-result summary::marker {
   white-space: nowrap;
 }
 
-.file-view.markup {
-  padding: 2em;
-}
 .repository .activity-header {
   display: flex;
   justify-content: space-between;

web_src/css/repo/file-view.css

@@ -0,0 +1,39 @@
+.file-view tr.active {
+  color: inherit !important;
+  background: inherit !important;
+}
+
+.lines-escape {
+  width: 0;
+}
+
+.lines-code {
+  padding-left: 5px;
+}
+
+.file-view tr.active .lines-num,
+.file-view tr.active .lines-escape,
+.file-view tr.active .lines-code {
+  background: var(--color-highlight-bg) !important;
+}
+
+.file-view tr.active:last-of-type .lines-code {
+  border-bottom-right-radius: var(--border-radius);
+}
+
+.file-view tr.active .lines-num {
+  position: relative;
+}
+
+.file-view tr.active .interact-bg:hover {
+  background: var(--color-primary-alpha-50) !important;
+}
+
+.file-view tr.active .lines-num::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  width: 2px;
+  height: 100%;
+  background: var(--color-highlight-fg);
+}