detached 7e507f9

style(omnibox): soften default-order badge

Restyle the header badge as a passive state chip so it stops competing with primary actions. The smaller neutral treatment still hints interactivity on hover without reading like a button.
commit
7e507f9b153e17e9a7384a815b6e8b010b2f924b
author
brice · · 2026-04-12 04:10 UTC
parent
32b1250
signature
GPG VerifiedCD88F9E564E0102646FB6077A1A07C7C7C3E349D · arch-gpg Verified for the committer email
2 files · +50 -0
Split
UnifiedSplit
M internal/ui/theme/css.go +18 -0
@@ -407,6 +407,24 @@ entry.omnibox-entry > text:focus-visible {
407407 font-weight: 600;
408408 }
409409
410+/* Header badge used for omnibox state */
411+.omnibox-header-badge {
412+ background-color: alpha(var(--surface-variant), 0.65);
413+ color: var(--muted);
414+ border: 0.0625em solid alpha(var(--border), 0.85);
415+ border-radius: 0.1875em;
416+ padding: 0.0625em 0.375em;
417+ font-size: 0.6875em;
418+ font-weight: 500;
419+ transition: background-color 100ms ease-in-out, border-color 100ms ease-in-out, color 100ms ease-in-out;
420+}
421+
422+.omnibox-header-badge:hover {
423+ background-color: shade(var(--surface-variant), 1.08);
424+ border-color: var(--border);
425+ color: var(--text);
426+}
427+
410428 /* Zoom indicator in omnibox header */
411429 .omnibox-zoom-indicator {
412430 background-color: alpha(var(--accent), 0.2);
@@ -407,6 +407,24 @@ entry.omnibox-entry > text:focus-visible {
407 font-weight: 600;407 font-weight: 600;
408 }408 }
409 409
410+/* Header badge used for omnibox state */
411+.omnibox-header-badge {
412+ background-color: alpha(var(--surface-variant), 0.65);
413+ color: var(--muted);
414+ border: 0.0625em solid alpha(var(--border), 0.85);
415+ border-radius: 0.1875em;
416+ padding: 0.0625em 0.375em;
417+ font-size: 0.6875em;
418+ font-weight: 500;
419+ transition: background-color 100ms ease-in-out, border-color 100ms ease-in-out, color 100ms ease-in-out;
420+}
421+
422+.omnibox-header-badge:hover {
423+ background-color: shade(var(--surface-variant), 1.08);
424+ border-color: var(--border);
425+ color: var(--text);
426+}
427+
410 /* Zoom indicator in omnibox header */428 /* Zoom indicator in omnibox header */
411 .omnibox-zoom-indicator {429 .omnibox-zoom-indicator {
412 background-color: alpha(var(--accent), 0.2);430 background-color: alpha(var(--accent), 0.2);
M internal/ui/theme/css_test.go +32 -0
@@ -34,6 +34,38 @@ func TestGenerateCSS_OmniboxHeaderIsOpaque(t *testing.T) {
3434 }
3535 }
3636
37+func TestGenerateCSS_OmniboxHeaderBadgeSelectorsExist(t *testing.T) {
38+ css := GenerateCSS(DefaultDarkPalette())
39+
40+ if !strings.Contains(css, ".omnibox-header-badge {") {
41+ t.Fatalf("expected omnibox header badge selector in CSS")
42+ }
43+ if !strings.Contains(css, ".omnibox-header-badge:hover {") {
44+ t.Fatalf("expected omnibox header badge hover selector in CSS")
45+ }
46+}
47+
48+func TestGenerateCSS_OmniboxHeaderBadgeUsesPassiveNeutralChipStyling(t *testing.T) {
49+ css := GenerateCSS(DefaultDarkPalette())
50+
51+ badgeRe := regexp.MustCompile(`(?s)\.omnibox-header-badge\s*\{[^}]*background-color:\s*alpha\(var\(--surface-variant\),\s*0\.65\);[^}]*color:\s*var\(--muted\);[^}]*border:\s*0\.0625em solid alpha\(var\(--border\),\s*0\.85\);[^}]*border-radius:\s*0\.1875em;[^}]*padding:\s*0\.0625em 0\.375em;[^}]*font-size:\s*0\.6875em;`)
52+ if !badgeRe.MatchString(css) {
53+ t.Fatalf("expected omnibox header badge to use passive neutral chip styling")
54+ }
55+
56+ hoverRe := regexp.MustCompile(`(?s)\.omnibox-header-badge:hover\s*\{[^}]*background-color:\s*shade\(var\(--surface-variant\),\s*1\.08\);[^}]*border-color:\s*var\(--border\);[^}]*color:\s*var\(--text\);`)
57+ if !hoverRe.MatchString(css) {
58+ t.Fatalf("expected omnibox header badge hover styling to stay neutral while hinting interactivity")
59+ }
60+
61+ if strings.Contains(css, ".omnibox-header-badge {\n\tbackground-color: alpha(var(--accent),") {
62+ t.Fatalf("expected omnibox header badge resting state to avoid accent-based styling")
63+ }
64+ if strings.Contains(css, ".omnibox-header-badge {\n\tcolor: var(--accent);") {
65+ t.Fatalf("expected omnibox header badge resting text to avoid accent color")
66+ }
67+}
68+
3769 func TestGenerateCSS_FavoriteRowsOnlyTintTrailingAffordance(t *testing.T) {
3870 css := GenerateCSS(DefaultDarkPalette())
3971
@@ -34,6 +34,38 @@ func TestGenerateCSS_OmniboxHeaderIsOpaque(t *testing.T) {
34 }34 }
35 }35 }
36 36
37+func TestGenerateCSS_OmniboxHeaderBadgeSelectorsExist(t *testing.T) {
38+ css := GenerateCSS(DefaultDarkPalette())
39+
40+ if !strings.Contains(css, ".omnibox-header-badge {") {
41+ t.Fatalf("expected omnibox header badge selector in CSS")
42+ }
43+ if !strings.Contains(css, ".omnibox-header-badge:hover {") {
44+ t.Fatalf("expected omnibox header badge hover selector in CSS")
45+ }
46+}
47+
48+func TestGenerateCSS_OmniboxHeaderBadgeUsesPassiveNeutralChipStyling(t *testing.T) {
49+ css := GenerateCSS(DefaultDarkPalette())
50+
51+ badgeRe := regexp.MustCompile(`(?s)\.omnibox-header-badge\s*\{[^}]*background-color:\s*alpha\(var\(--surface-variant\),\s*0\.65\);[^}]*color:\s*var\(--muted\);[^}]*border:\s*0\.0625em solid alpha\(var\(--border\),\s*0\.85\);[^}]*border-radius:\s*0\.1875em;[^}]*padding:\s*0\.0625em 0\.375em;[^}]*font-size:\s*0\.6875em;`)
52+ if !badgeRe.MatchString(css) {
53+ t.Fatalf("expected omnibox header badge to use passive neutral chip styling")
54+ }
55+
56+ hoverRe := regexp.MustCompile(`(?s)\.omnibox-header-badge:hover\s*\{[^}]*background-color:\s*shade\(var\(--surface-variant\),\s*1\.08\);[^}]*border-color:\s*var\(--border\);[^}]*color:\s*var\(--text\);`)
57+ if !hoverRe.MatchString(css) {
58+ t.Fatalf("expected omnibox header badge hover styling to stay neutral while hinting interactivity")
59+ }
60+
61+ if strings.Contains(css, ".omnibox-header-badge {\n\tbackground-color: alpha(var(--accent),") {
62+ t.Fatalf("expected omnibox header badge resting state to avoid accent-based styling")
63+ }
64+ if strings.Contains(css, ".omnibox-header-badge {\n\tcolor: var(--accent);") {
65+ t.Fatalf("expected omnibox header badge resting text to avoid accent color")
66+ }
67+}
68+
37 func TestGenerateCSS_FavoriteRowsOnlyTintTrailingAffordance(t *testing.T) {69 func TestGenerateCSS_FavoriteRowsOnlyTintTrailingAffordance(t *testing.T) {
38 css := GenerateCSS(DefaultDarkPalette())70 css := GenerateCSS(DefaultDarkPalette())
39 71

Keyboard shortcuts

Single-key shortcuts are on. ctrl k and esc work whatever this says.

ctrl k :
go to a section, branch, tag, file or repository
?
this list
j k
move the row cursor down / up
enter
open the row under the cursor; on Files, a directory opens or closes in place
↑ ↓ ← → home end
in the file tree (focus on a row): previous / next row, close / open a directory or go to its parent / first entry, first / last row. They never open a file
l h
on Files: open a directory or a file / close a directory or go up to its parent, then to the parent page. Elsewhere: into the side panel (on a merge request, its files) / back to the content; there j k move between its controls
g g G
first / last row
/
filter the list; on Files, find a file anywhere in the repository (esc clears, enter opens the best match)
b
switch branch or tag
g s g f g c g b g m g i g r g a
tabs: summary, files, commits, branches & tags, merge requests, issues, releases, actions (when available)
g h
home
w
wide mode: use the whole width of the screen, or not (remembered)
y
copy a permalink pinned to the commit
d u x
diff: split / unified / collapse or expand all
e E
diff: the whole file in view / every file, with the lines the hunks hide
n
merge request: next note in the diff
esc
close a dialog, leave a field

Branches 8

Tags 42

↑↓ moveenter openesc close