Merge e3d10b222b into 301eaf60bf

Fixes: https://github.com/go-gitea/gitea/issues/30940

<img width="1310" alt="Screenshot 2024-05-11 at 20 48 41"
src="https://github.com/go-gitea/gitea/assets/115237/f163dfd4-1299-421f-a99e-cd0c793e0e3d">

docs/content/administration/customizing-gitea.en-us.md

@@ -383,13 +383,28 @@ To make a custom theme available to all users:
   The value of `$GITEA_CUSTOM` of your instance can be queried by calling `gitea help` and looking up the value of "CustomPath".
 2. Add `<theme-name>` to the comma-separated list of setting `THEMES` in `app.ini`, or leave `THEMES` empty to allow all themes.
 
+A custom theme file named `theme-my-theme.css` will be displayed as `my-theme` on the user's theme selection page.
+It could add theme meta information into the custom theme CSS file to provide more information about the theme.
+
+If a custom theme is a dark theme, please set the global css variable `--is-dark-theme: true` in the `:root` block.
+This allows Gitea to adjust the Monaco code editor's theme accordingly.
+An "auto" theme could be implemented by using "theme-gitea-auto.css" as a reference.
+
+```css
+gitea-theme-meta-info {
+  --theme-display-name: "My Awesome Theme"; /* this theme will be display as "My Awesome Theme" on the UI */
+}
+:root {
+  --is-dark-theme: true; /* if it is a dark theme */
+  --color-primary: #112233;
+  /* more custom theme variables ... */
+}
+```
+
 Community themes are listed in [gitea/awesome-gitea#themes](https://gitea.com/gitea/awesome-gitea#themes).
 
 The default theme sources can be found [here](https://github.com/go-gitea/gitea/blob/main/web_src/css/themes).
 
-If your custom theme is considered a dark theme, set the global css variable `--is-dark-theme` to `true`.
-This allows Gitea to adjust the Monaco code editor's theme accordingly.
-
 ## Customizing fonts
 
 Fonts can be customized using CSS variables:

options/locale/locale_pt-PT.ini

@@ -3320,6 +3320,7 @@ self_check.database_collation_case_insensitive=A base de dados está a usar a co
 self_check.database_inconsistent_collation_columns=A base de dados está a usar a colação %s, mas estas colunas estão a usar colações diferentes. Isso poderá causar alguns problemas inesperados.
 self_check.database_fix_mysql=Para utilizadores do MySQL/MariaDB, pode usar o comando "gitea doctor convert" para resolver os problemas de colação. Também pode resolver o problema com comandos SQL "ALTER ... COLLATE ..." aplicados manualmente.
 self_check.database_fix_mssql=Para utilizadores do MSSQL só pode resolver o problema aplicando comandos SQL "ALTER ... COLLATE ..." manualmente, por enquanto.
+self_check.location_origin_mismatch=O URL corrente (%[1]s) não corresponde ao URL visto pelo Gitea (%[2]s). Se estiver a usar um reverse proxy, certifique-se que os cabeçalhos "Host" e "X-Forwarded-Proto" estão bem definidos.
 
 [action]
 create_repo=criou o repositório <a href="%s">%s</a>

options/locale/locale_zh-CN.ini

@@ -2398,7 +2398,7 @@ settings.ignore_stale_approvals_desc=对旧提交（过期审核）的批准将
 settings.require_signed_commits=需要签名提交
 settings.require_signed_commits_desc=拒绝推送未签名或无法验证的提交到分支
 settings.protect_branch_name_pattern=受保护的分支名称模式
-settings.protect_branch_name_pattern_desc=分支保护的名称匹配规则。语法请参阅 <a href="github.com/gobwas/glob">文档</a> 。如：main, release/**
+settings.protect_branch_name_pattern_desc=分支保护的名称匹配规则。语法请参阅 <a href="https://github.com/gobwas/glob">文档</a> 。如：main, release/**
 settings.protect_patterns=规则
 settings.protect_protected_file_patterns=受保护的文件模式(使用分号 ';' 分隔)：
 settings.protect_protected_file_patterns_desc=即使用户有权添加、编辑或删除此分支中的文件，也不允许直接更改受保护的文件。 可以使用分号 (';') 分隔多个模式。 见<a href='https://pkg.go.dev/github.com/gobwas/glob#Compile'>github.com/gobwas/glob</a>文档了解模式语法。例如： <code>.drone.yml</code>, <code>/docs/**/*.txt</code>

routers/web/user/setting/profile.go

@@ -319,13 +319,7 @@ func Repos(ctx *context.Context) {
 func Appearance(ctx *context.Context) {
 	ctx.Data["Title"] = ctx.Tr("settings.appearance")
 	ctx.Data["PageIsSettingsAppearance"] = true
-
-	allThemes := webtheme.GetAvailableThemes()
-	if webtheme.IsThemeAvailable(setting.UI.DefaultTheme) {
-		allThemes = util.SliceRemoveAll(allThemes, setting.UI.DefaultTheme)
-		allThemes = append([]string{setting.UI.DefaultTheme}, allThemes...) // move the default theme to the top
-	}
-	ctx.Data["AllThemes"] = allThemes
+	ctx.Data["AllThemes"] = webtheme.GetAvailableThemes()
 
 	var hiddenCommentTypes *big.Int
 	val, err := user_model.GetUserSetting(ctx, ctx.Doer.ID, user_model.SettingsKeyHiddenCommentTypes)

services/webtheme/webtheme.go

@@ -4,6 +4,7 @@
 package webtheme
 
 import (
+	"regexp"
 	"sort"
 	"strings"
 	"sync"
@@ -12,63 +13,154 @@ import (
 	"code.gitea.io/gitea/modules/log"
 	"code.gitea.io/gitea/modules/public"
 	"code.gitea.io/gitea/modules/setting"
+	"code.gitea.io/gitea/modules/util"
 )
 
 var (
-	availableThemes    []string
-	availableThemesSet container.Set[string]
-	themeOnce          sync.Once
+	availableThemes             []*ThemeMetaInfo
+	availableThemeInternalNames container.Set[string]
+	themeOnce                   sync.Once
 )
 
+const (
+	fileNamePrefix = "theme-"
+	fileNameSuffix = ".css"
+)
+
+type ThemeMetaInfo struct {
+	FileName     string
+	InternalName string
+	DisplayName  string
+}
+
+func parseThemeMetaInfoToMap(cssContent string) map[string]string {
+	/*
+		The theme meta info is stored in the CSS file's variables of `gitea-theme-meta-info` element,
+		which is a privately defined and is only used by backend to extract the meta info.
+		Not using ":root" because it is difficult to parse various ":root" blocks when importing other files,
+		it is difficult to control the overriding, and it's difficult to avoid user's customized overridden styles.
+	*/
+	metaInfoContent := cssContent
+	if pos := strings.LastIndex(metaInfoContent, "gitea-theme-meta-info"); pos >= 0 {
+		metaInfoContent = metaInfoContent[pos:]
+	}
+
+	reMetaInfoItem := `
+(
+\s*(--[-\w]+)
+\s*:
+\s*(
+("(\\"|[^"])*")
+|('(\\'|[^'])*')
+|([^'";]+)
+)
+\s*;
+\s*
+)
+`
+	reMetaInfoItem = strings.ReplaceAll(reMetaInfoItem, "\n", "")
+	reMetaInfoBlock := `\bgitea-theme-meta-info\s*\{(` + reMetaInfoItem + `+)\}`
+	re := regexp.MustCompile(reMetaInfoBlock)
+	matchedMetaInfoBlock := re.FindAllStringSubmatch(metaInfoContent, -1)
+	if len(matchedMetaInfoBlock) == 0 {
+		return nil
+	}
+	re = regexp.MustCompile(strings.ReplaceAll(reMetaInfoItem, "\n", ""))
+	matchedItems := re.FindAllStringSubmatch(matchedMetaInfoBlock[0][1], -1)
+	m := map[string]string{}
+	for _, item := range matchedItems {
+		v := item[3]
+		if strings.HasPrefix(v, `"`) {
+			v = strings.TrimSuffix(strings.TrimPrefix(v, `"`), `"`)
+			v = strings.ReplaceAll(v, `\"`, `"`)
+		} else if strings.HasPrefix(v, `'`) {
+			v = strings.TrimSuffix(strings.TrimPrefix(v, `'`), `'`)
+			v = strings.ReplaceAll(v, `\'`, `'`)
+		}
+		m[item[2]] = v
+	}
+	return m
+}
+
+func defaultThemeMetaInfoByFileName(fileName string) *ThemeMetaInfo {
+	themeInfo := &ThemeMetaInfo{
+		FileName:     fileName,
+		InternalName: strings.TrimSuffix(strings.TrimPrefix(fileName, fileNamePrefix), fileNameSuffix),
+	}
+	themeInfo.DisplayName = themeInfo.InternalName
+	return themeInfo
+}
+
+func defaultThemeMetaInfoByInternalName(fileName string) *ThemeMetaInfo {
+	return defaultThemeMetaInfoByFileName(fileNamePrefix + fileName + fileNameSuffix)
+}
+
+func parseThemeMetaInfo(fileName, cssContent string) *ThemeMetaInfo {
+	themeInfo := defaultThemeMetaInfoByFileName(fileName)
+	m := parseThemeMetaInfoToMap(cssContent)
+	if m == nil {
+		return themeInfo
+	}
+	themeInfo.DisplayName = m["--theme-display-name"]
+	return themeInfo
+}
+
 func initThemes() {
 	availableThemes = nil
 	defer func() {
-		availableThemesSet = container.SetOf(availableThemes...)
-		if !availableThemesSet.Contains(setting.UI.DefaultTheme) {
+		availableThemeInternalNames = container.Set[string]{}
+		for _, theme := range availableThemes {
+			availableThemeInternalNames.Add(theme.InternalName)
+		}
+		if !availableThemeInternalNames.Contains(setting.UI.DefaultTheme) {
 			setting.LogStartupProblem(1, log.ERROR, "Default theme %q is not available, please correct the '[ui].DEFAULT_THEME' setting in the config file", setting.UI.DefaultTheme)
 		}
 	}()
 	cssFiles, err := public.AssetFS().ListFiles("/assets/css")
 	if err != nil {
 		log.Error("Failed to list themes: %v", err)
-		availableThemes = []string{setting.UI.DefaultTheme}
+		availableThemes = []*ThemeMetaInfo{defaultThemeMetaInfoByInternalName(setting.UI.DefaultTheme)}
 		return
 	}
-	var foundThemes []string
-	for _, name := range cssFiles {
-		name, ok := strings.CutPrefix(name, "theme-")
-		if !ok {
-			continue
+	var foundThemes []*ThemeMetaInfo
+	for _, fileName := range cssFiles {
+		if strings.HasPrefix(fileName, fileNamePrefix) && strings.HasSuffix(fileName, fileNameSuffix) {
+			content, err := public.AssetFS().ReadFile("/assets/css/" + fileName)
+			if err != nil {
+				log.Error("Failed to read theme file %q: %v", fileName, err)
+				continue
+			}
+			foundThemes = append(foundThemes, parseThemeMetaInfo(fileName, util.UnsafeBytesToString(content)))
 		}
-		name, ok = strings.CutSuffix(name, ".css")
-		if !ok {
-			continue
-		}
-		foundThemes = append(foundThemes, name)
 	}
 	if len(setting.UI.Themes) > 0 {
 		allowedThemes := container.SetOf(setting.UI.Themes...)
 		for _, theme := range foundThemes {
-			if allowedThemes.Contains(theme) {
+			if allowedThemes.Contains(theme.InternalName) {
 				availableThemes = append(availableThemes, theme)
 			}
 		}
 	} else {
 		availableThemes = foundThemes
 	}
-	sort.Strings(availableThemes)
+	sort.Slice(availableThemes, func(i, j int) bool {
+		if availableThemes[i].InternalName == setting.UI.DefaultTheme {
+			return true
+		}
+		return availableThemes[i].DisplayName < availableThemes[j].DisplayName
+	})
 	if len(availableThemes) == 0 {
 		setting.LogStartupProblem(1, log.ERROR, "No theme candidate in asset files, but Gitea requires there should be at least one usable theme")
-		availableThemes = []string{setting.UI.DefaultTheme}
+		availableThemes = []*ThemeMetaInfo{defaultThemeMetaInfoByInternalName(setting.UI.DefaultTheme)}
 	}
 }
 
-func GetAvailableThemes() []string {
+func GetAvailableThemes() []*ThemeMetaInfo {
 	themeOnce.Do(initThemes)
 	return availableThemes
 }
 
-func IsThemeAvailable(name string) bool {
+func IsThemeAvailable(internalName string) bool {
 	themeOnce.Do(initThemes)
-	return availableThemesSet.Contains(name)
+	return availableThemeInternalNames.Contains(internalName)
 }

services/webtheme/webtheme_test.go

@@ -0,0 +1,37 @@
+// Copyright 2024 The Gitea Authors. All rights reserved.
+// SPDX-License-Identifier: MIT
+
+package webtheme
+
+import (
+	"testing"
+
+	"github.com/stretchr/testify/assert"
+)
+
+func TestParseThemeMetaInfo(t *testing.T) {
+	m := parseThemeMetaInfoToMap(`gitea-theme-meta-info {
+	--k1: "v1";
+	--k2: "v\"2";
+	--k3: 'v3';
+	--k4: 'v\'4';
+	--k5: v5;
+}`)
+	assert.Equal(t, map[string]string{
+		"--k1": "v1",
+		"--k2": `v"2`,
+		"--k3": "v3",
+		"--k4": "v'4",
+		"--k5": "v5",
+	}, m)
+
+	// if an auto theme imports others, the meta info should be extracted from the last one
+	// the meta in imported themes should be ignored to avoid incorrect overriding
+	m = parseThemeMetaInfoToMap(`
+@media (prefers-color-scheme: dark) { gitea-theme-meta-info { --k1: foo; } }
+@media (prefers-color-scheme: light) { gitea-theme-meta-info { --k1: bar; } }
+gitea-theme-meta-info {
+	--k2: real;
+}`)
+	assert.Equal(t, map[string]string{"--k2": "real"}, m)
+}

stylelint.config.js

@@ -141,7 +141,7 @@ export default {
     'custom-property-pattern': null,
     'declaration-block-no-duplicate-custom-properties': true,
     'declaration-block-no-duplicate-properties': [true, {ignore: ['consecutive-duplicates-with-different-values']}],
-    'declaration-block-no-redundant-longhand-properties': null,
+    'declaration-block-no-redundant-longhand-properties': [true, {ignoreShorthands: ['flex-flow', 'overflow']}],
     'declaration-block-no-shorthand-property-overrides': null,
     'declaration-block-single-line-max-declarations': null,
     'declaration-empty-line-before': null,

templates/repo/home.tmpl

@@ -45,7 +45,7 @@
 		{{$n := len .TreeNames}}
 		{{$l := Eval $n "-" 1}}
 		{{$isHomepage := (eq $n 0)}}
-		<div class="repo-button-row">
+		<div class="repo-button-row" data-is-homepage="{{$isHomepage}}">
 			<div class="repo-button-row-left">
 				{{template "repo/branch_dropdown" dict "root" . "ContainerClasses" "tw-mr-1"}}
 				{{if and .CanCompareOrPull .IsViewBranch (not .Repository.IsArchived)}}

templates/user/settings/appearance.tmpl

@@ -18,7 +18,7 @@
 					<label>{{ctx.Locale.Tr "settings.ui"}}</label>
 					<select name="theme" class="ui dropdown">
 						{{range $theme := .AllThemes}}
-						<option value="{{$theme}}" {{Iif (eq $.SignedUser.Theme $theme) "selected"}}>{{$theme}}</option>
+						<option value="{{$theme.InternalName}}" {{Iif (eq $.SignedUser.Theme $theme.InternalName) "selected"}}>{{$theme.DisplayName}}</option>
 						{{end}}
 					</select>
 				</div>

web_src/css/modules/grid.css

@@ -7,10 +7,7 @@
   flex-wrap: wrap;
   align-items: stretch;
   padding: 0;
-  margin-top: -1rem;
-  margin-bottom: -1rem;
-  margin-left: -1rem;
-  margin-right: -1rem;
+  margin: -1rem;
 }
 
 .ui.relaxed.grid {

web_src/css/modules/menu.css

@@ -553,13 +553,11 @@
   border-bottom: 2px solid var(--color-secondary);
 }
 .ui.secondary.pointing.menu .item {
-  border-bottom-color: transparent;
-  border-bottom-style: solid;
+  border-bottom: 2px solid transparent;
   border-radius: 0;
   align-self: flex-end;
   margin: 0 0 -2px;
   padding: 0.85714286em 1.14285714em;
-  border-bottom-width: 2px;
 }
 .ui.secondary.pointing.menu .ui.dropdown .menu .item {
   border-bottom-width: 0;

web_src/css/repo.css

@@ -2256,6 +2256,10 @@ td .commit-summary {
   justify-content: flex-end;
 }
 
+.repo-button-row[data-is-homepage="false"] .repo-button-row-right {
+  flex-grow: 0;
+}
+
 @media (max-width: 991px) {
   .repository:not(.wiki) .repo-button-row {
     flex-direction: column;

web_src/css/themes/theme-gitea-auto.css

@@ -1,2 +1,6 @@
 @import "./theme-gitea-light.css" (prefers-color-scheme: light);
 @import "./theme-gitea-dark.css" (prefers-color-scheme: dark);
+
+gitea-theme-meta-info {
+  --theme-display-name: "Auto";
+}

web_src/css/themes/theme-gitea-dark-protanopia-deuteranopia.css

@@ -1,5 +1,9 @@
 @import "./theme-gitea-dark.css";
 
+gitea-theme-meta-info {
+  --theme-display-name: "Dark (Red/Green Colorblind-Friendly)";
+}
+
 /* red/green colorblind-friendly colors */
 /* from GitHub: --diffBlob-addition-*, --diffBlob-deletion-*, etc */
 :root {

web_src/css/themes/theme-gitea-dark.css

@@ -1,6 +1,10 @@
 @import "../chroma/dark.css";
 @import "../codemirror/dark.css";
 
+gitea-theme-meta-info {
+  --theme-display-name: "Dark";
+}
+
 :root {
   --is-dark-theme: true;
   --color-primary: #4183c4;

web_src/css/themes/theme-gitea-light-protanopia-deuteranopia.css

@@ -1,5 +1,9 @@
 @import "./theme-gitea-light.css";
 
+gitea-theme-meta-info {
+  --theme-display-name: "Light (Red/Green Colorblind-Friendly)";
+}
+
 /* red/green colorblind-friendly colors */
 /* from GitHub: --diffBlob-addition-*, --diffBlob-deletion-*, etc */
 :root {

web_src/css/themes/theme-gitea-light.css

@@ -1,6 +1,10 @@
 @import "../chroma/light.css";
 @import "../codemirror/light.css";
 
+gitea-theme-meta-info {
+  --theme-display-name: "Light";
+}
+
 :root {
   --is-dark-theme: false;
   --color-primary: #4183c4;