detached 6415f04

fix(omnibox): polish favorite history cues

Make the omnibox header opaque and move favorite history emphasis back to the left row stripe so the list stays readable while favorites remain identifiable.
commit
6415f04fd39613e176a99ca903ea6e8a0c904e33
author
brice · · 2026-04-08 04:02 UTC
parent
7fd7cd4
signature
GPG VerifiedCD88F9E564E0102646FB6077A1A07C7C7C3E349D · arch-gpg Verified for the committer email
2 files · +45 -11
Unified
UnifiedSplit
M internal/ui/theme/css.go +11 -11
@@ -227,8 +227,8 @@ window.standalone-omnibox-window {
227227
228228 /* Header with History/Favorites toggle */
229229 .omnibox-header {
230- background-color: alpha(var(--surface), 0.34);
231- background-image: linear-gradient(to bottom, alpha(white, 0.03), alpha(black, 0.04));
230+ background-color: var(--surface);
231+ background-image: none;
232232 border-bottom: 0.0625em solid alpha(var(--border), 0.75);
233233 padding: 0.375em 0.75em;
234234 }
@@ -326,19 +326,19 @@ entry.omnibox-entry > *:focus-visible {
326326 border-left: 0.1875em solid var(--accent);
327327 }
328328
329-/* Favorite indicator in history mode - yellowish accent */
329+/* Favorite indicator in history mode - keep the row neutral and use the left selection stripe */
330330 .omnibox-row.omnibox-row-favorite {
331- background-color: alpha(var(--warning), 0.08);
331+ background-color: transparent;
332332 border-left: 0.1875em solid var(--warning);
333333 }
334334
335335 .omnibox-row.omnibox-row-favorite:hover {
336- background-color: alpha(var(--warning), 0.15);
336+ background-color: alpha(var(--accent), 0.12);
337337 border-left: 0.1875em solid var(--warning);
338338 }
339339
340340 .omnibox-row.omnibox-row-favorite:selected {
341- background-color: alpha(var(--warning), 0.2);
341+ background-color: alpha(var(--accent), 0.2);
342342 border-left: 0.1875em solid var(--warning);
343343 }
344344
@@ -374,15 +374,15 @@ entry.omnibox-entry > *:focus-visible {
374374 }
375375
376376 .omnibox-favorite-star {
377- color: var(--warning);
378- opacity: 0.9;
379- margin-left: 0.5em;
377+ color: mix(var(--warning), var(--muted), 0.45);
378+ opacity: 0.75;
379+ margin-left: 0.625em;
380380 margin-right: 0.125em;
381381 }
382382
383383 .omnibox-row:selected .omnibox-favorite-star {
384- color: var(--warning);
385- opacity: 1;
384+ color: mix(var(--warning), var(--text), 0.35);
385+ opacity: 0.88;
386386 }
387387
388388 .omnibox-row:selected .omnibox-suggestion-url {
@@ -227,8 +227,8 @@ window.standalone-omnibox-window {
227 227
228 /* Header with History/Favorites toggle */228 /* Header with History/Favorites toggle */
229 .omnibox-header {229 .omnibox-header {
230- background-color: alpha(var(--surface), 0.34);230+ background-color: var(--surface);
231- background-image: linear-gradient(to bottom, alpha(white, 0.03), alpha(black, 0.04));231+ background-image: none;
232 border-bottom: 0.0625em solid alpha(var(--border), 0.75);232 border-bottom: 0.0625em solid alpha(var(--border), 0.75);
233 padding: 0.375em 0.75em;233 padding: 0.375em 0.75em;
234 }234 }
@@ -326,19 +326,19 @@ entry.omnibox-entry > *:focus-visible {
326 border-left: 0.1875em solid var(--accent);326 border-left: 0.1875em solid var(--accent);
327 }327 }
328 328
329-/* Favorite indicator in history mode - yellowish accent */329+/* Favorite indicator in history mode - keep the row neutral and use the left selection stripe */
330 .omnibox-row.omnibox-row-favorite {330 .omnibox-row.omnibox-row-favorite {
331- background-color: alpha(var(--warning), 0.08);331+ background-color: transparent;
332 border-left: 0.1875em solid var(--warning);332 border-left: 0.1875em solid var(--warning);
333 }333 }
334 334
335 .omnibox-row.omnibox-row-favorite:hover {335 .omnibox-row.omnibox-row-favorite:hover {
336- background-color: alpha(var(--warning), 0.15);336+ background-color: alpha(var(--accent), 0.12);
337 border-left: 0.1875em solid var(--warning);337 border-left: 0.1875em solid var(--warning);
338 }338 }
339 339
340 .omnibox-row.omnibox-row-favorite:selected {340 .omnibox-row.omnibox-row-favorite:selected {
341- background-color: alpha(var(--warning), 0.2);341+ background-color: alpha(var(--accent), 0.2);
342 border-left: 0.1875em solid var(--warning);342 border-left: 0.1875em solid var(--warning);
343 }343 }
344 344
@@ -374,15 +374,15 @@ entry.omnibox-entry > *:focus-visible {
374 }374 }
375 375
376 .omnibox-favorite-star {376 .omnibox-favorite-star {
377- color: var(--warning);377+ color: mix(var(--warning), var(--muted), 0.45);
378- opacity: 0.9;378+ opacity: 0.75;
379- margin-left: 0.5em;379+ margin-left: 0.625em;
380 margin-right: 0.125em;380 margin-right: 0.125em;
381 }381 }
382 382
383 .omnibox-row:selected .omnibox-favorite-star {383 .omnibox-row:selected .omnibox-favorite-star {
384- color: var(--warning);384+ color: mix(var(--warning), var(--text), 0.35);
385- opacity: 1;385+ opacity: 0.88;
386 }386 }
387 387
388 .omnibox-row:selected .omnibox-suggestion-url {388 .omnibox-row:selected .omnibox-suggestion-url {
M internal/ui/theme/css_test.go +34 -0
@@ -17,3 +17,37 @@ func TestGenerateCSS_StandaloneOmniboxWindowUsesTransparentBackground(t *testing
1717 t.Fatalf("expected standalone omnibox window background to be transparent")
1818 }
1919 }
20+
21+func TestGenerateCSS_OmniboxHeaderIsOpaque(t *testing.T) {
22+ css := GenerateCSS(DefaultDarkPalette())
23+
24+ if !strings.Contains(css, ".omnibox-header {") {
25+ t.Fatalf("expected omnibox header selector in CSS")
26+ }
27+ if !strings.Contains(css, "background-color: var(--surface);") {
28+ t.Fatalf("expected omnibox header to use an opaque surface background")
29+ }
30+ if !strings.Contains(css, "background-image: none;") {
31+ t.Fatalf("expected omnibox header gradient to be disabled")
32+ }
33+}
34+
35+func TestGenerateCSS_FavoriteRowsOnlyTintTrailingAffordance(t *testing.T) {
36+ css := GenerateCSS(DefaultDarkPalette())
37+
38+ if !strings.Contains(css, ".omnibox-row.omnibox-row-favorite {") {
39+ t.Fatalf("expected favorite row selector in CSS")
40+ }
41+ if !strings.Contains(css, "border-left: 0.1875em solid var(--warning);") {
42+ t.Fatalf("expected favorite rows to mark the left edge with the warning color")
43+ }
44+ if strings.Contains(css, "border-right: 0.125em solid alpha(var(--warning), 0.55);") {
45+ t.Fatalf("expected favorite indicator to move off the right edge")
46+ }
47+ if !strings.Contains(css, "color: mix(var(--warning), var(--muted), 0.45);") {
48+ t.Fatalf("expected favorite star color to be softened")
49+ }
50+ if strings.Contains(css, ".omnibox-row.omnibox-row-favorite .omnibox-favorite-star-slot") {
51+ t.Fatalf("expected favorite highlight to move off the star slot")
52+ }
53+}
@@ -17,3 +17,37 @@ func TestGenerateCSS_StandaloneOmniboxWindowUsesTransparentBackground(t *testing
17 t.Fatalf("expected standalone omnibox window background to be transparent")17 t.Fatalf("expected standalone omnibox window background to be transparent")
18 }18 }
19 }19 }
20+
21+func TestGenerateCSS_OmniboxHeaderIsOpaque(t *testing.T) {
22+ css := GenerateCSS(DefaultDarkPalette())
23+
24+ if !strings.Contains(css, ".omnibox-header {") {
25+ t.Fatalf("expected omnibox header selector in CSS")
26+ }
27+ if !strings.Contains(css, "background-color: var(--surface);") {
28+ t.Fatalf("expected omnibox header to use an opaque surface background")
29+ }
30+ if !strings.Contains(css, "background-image: none;") {
31+ t.Fatalf("expected omnibox header gradient to be disabled")
32+ }
33+}
34+
35+func TestGenerateCSS_FavoriteRowsOnlyTintTrailingAffordance(t *testing.T) {
36+ css := GenerateCSS(DefaultDarkPalette())
37+
38+ if !strings.Contains(css, ".omnibox-row.omnibox-row-favorite {") {
39+ t.Fatalf("expected favorite row selector in CSS")
40+ }
41+ if !strings.Contains(css, "border-left: 0.1875em solid var(--warning);") {
42+ t.Fatalf("expected favorite rows to mark the left edge with the warning color")
43+ }
44+ if strings.Contains(css, "border-right: 0.125em solid alpha(var(--warning), 0.55);") {
45+ t.Fatalf("expected favorite indicator to move off the right edge")
46+ }
47+ if !strings.Contains(css, "color: mix(var(--warning), var(--muted), 0.45);") {
48+ t.Fatalf("expected favorite star color to be softened")
49+ }
50+ if strings.Contains(css, ".omnibox-row.omnibox-row-favorite .omnibox-favorite-star-slot") {
51+ t.Fatalf("expected favorite highlight to move off the star slot")
52+ }
53+}

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