fix(omnibox): restore find highlight styling
- commit
- 0269280d25d2404954a44e6bef21a612aef67c1d
- author
- bamen · · 2025-09-17 05:25 UTC
- parent
- 4ab2302
- signature
- unsigned
1 file · +37 -1
M gui/src/components/omnibox/find.ts +37 -1
| @@ -7,6 +7,40 @@ | |||
| 7 | 7 | import type { FindMatch, HighlightNode } from './types'; | |
| 8 | 8 | import { omniboxStore } from './stores.svelte.ts'; | |
| 9 | 9 | ||
| 10 | + | // Track whether we've injected highlight styles into the main document. | |
| 11 | + | let findStylesInjected = false; | |
| 12 | + | ||
| 13 | + | function ensureFindStyles(): void { | |
| 14 | + | if (findStylesInjected) { | |
| 15 | + | return; | |
| 16 | + | } | |
| 17 | + | ||
| 18 | + | try { | |
| 19 | + | const style = document.createElement('style'); | |
| 20 | + | style.id = 'dumber-find-styles'; | |
| 21 | + | style.textContent = ` | |
| 22 | + | .find-highlight { | |
| 23 | + | background-color: rgb(255 235 59); | |
| 24 | + | color: rgb(0 0 0); | |
| 25 | + | padding: 0 0.125rem; | |
| 26 | + | border-radius: 0.125rem; | |
| 27 | + | box-shadow: 0 0 0 1px rgb(200 185 0) inset; | |
| 28 | + | } | |
| 29 | + | ||
| 30 | + | .find-active { | |
| 31 | + | background-color: rgb(255 152 0) !important; | |
| 32 | + | color: rgb(0 0 0); | |
| 33 | + | box-shadow: 0 0 0 1px rgb(179 107 0) inset !important; | |
| 34 | + | } | |
| 35 | + | `; | |
| 36 | + | ||
| 37 | + | (document.head || document.documentElement).appendChild(style); | |
| 38 | + | findStylesInjected = true; | |
| 39 | + | } catch (error) { | |
| 40 | + | console.warn('Failed to inject find styles:', error); | |
| 41 | + | } | |
| 42 | + | } | |
| 43 | + | ||
| 10 | 44 | /** | |
| 11 | 45 | * Find text in the current page and highlight matches | |
| 12 | 46 | */ | |
| @@ -24,6 +58,8 @@ export function findInPage(query: string): void { | |||
| 24 | 58 | return; | |
| 25 | 59 | } | |
| 26 | 60 | ||
| 61 | + | ensureFindStyles(); | |
| 62 | + | ||
| 27 | 63 | // Get omnibox root to exclude from search | |
| 28 | 64 | const omniboxRoot = document.getElementById('dumber-omnibox-root'); | |
| 29 | 65 | const matches: FindMatch[] = []; | |
| @@ -199,4 +235,4 @@ export function jumpToMatch(delta: number): void { | |||
| 199 | 235 | ||
| 200 | 236 | omniboxStore.setSelectedIndex(newIndex); | |
| 201 | 237 | revealMatch(newIndex); | |
| 202 | - | }⏎̸ | |
| 238 | + | } | |
| @@ -7,6 +7,40 @@ | |||||
| 7 | import type { FindMatch, HighlightNode } from './types'; | 7 | import type { FindMatch, HighlightNode } from './types'; | ||
| 8 | import { omniboxStore } from './stores.svelte.ts'; | 8 | import { omniboxStore } from './stores.svelte.ts'; | ||
| 9 | 9 | ||||
| 10 | + | // Track whether we've injected highlight styles into the main document. | |||
| 11 | + | let findStylesInjected = false; | |||
| 12 | + | ||||
| 13 | + | function ensureFindStyles(): void { | |||
| 14 | + | if (findStylesInjected) { | |||
| 15 | + | return; | |||
| 16 | + | } | |||
| 17 | + | ||||
| 18 | + | try { | |||
| 19 | + | const style = document.createElement('style'); | |||
| 20 | + | style.id = 'dumber-find-styles'; | |||
| 21 | + | style.textContent = ` | |||
| 22 | + | .find-highlight { | |||
| 23 | + | background-color: rgb(255 235 59); | |||
| 24 | + | color: rgb(0 0 0); | |||
| 25 | + | padding: 0 0.125rem; | |||
| 26 | + | border-radius: 0.125rem; | |||
| 27 | + | box-shadow: 0 0 0 1px rgb(200 185 0) inset; | |||
| 28 | + | } | |||
| 29 | + | ||||
| 30 | + | .find-active { | |||
| 31 | + | background-color: rgb(255 152 0) !important; | |||
| 32 | + | color: rgb(0 0 0); | |||
| 33 | + | box-shadow: 0 0 0 1px rgb(179 107 0) inset !important; | |||
| 34 | + | } | |||
| 35 | + | `; | |||
| 36 | + | ||||
| 37 | + | (document.head || document.documentElement).appendChild(style); | |||
| 38 | + | findStylesInjected = true; | |||
| 39 | + | } catch (error) { | |||
| 40 | + | console.warn('Failed to inject find styles:', error); | |||
| 41 | + | } | |||
| 42 | + | } | |||
| 43 | + | ||||
| 10 | /** | 44 | /** | ||
| 11 | * Find text in the current page and highlight matches | 45 | * Find text in the current page and highlight matches | ||
| 12 | */ | 46 | */ | ||
| @@ -24,6 +58,8 @@ export function findInPage(query: string): void { | |||||
| 24 | return; | 58 | return; | ||
| 25 | } | 59 | } | ||
| 26 | 60 | ||||
| 61 | + | ensureFindStyles(); | |||
| 62 | + | ||||
| 27 | // Get omnibox root to exclude from search | 63 | // Get omnibox root to exclude from search | ||
| 28 | const omniboxRoot = document.getElementById('dumber-omnibox-root'); | 64 | const omniboxRoot = document.getElementById('dumber-omnibox-root'); | ||
| 29 | const matches: FindMatch[] = []; | 65 | const matches: FindMatch[] = []; | ||
| @@ -199,4 +235,4 @@ export function jumpToMatch(delta: number): void { | |||||
| 199 | 235 | ||||
| 200 | omniboxStore.setSelectedIndex(newIndex); | 236 | omniboxStore.setSelectedIndex(newIndex); | ||
| 201 | revealMatch(newIndex); | 237 | revealMatch(newIndex); | ||
| 202 | - | }⏎̸ | 238 | + | } |