feat: add global icon color override - #457
Conversation
There was a problem hiding this comment.
🟡 Changes recommended
Unresolved moderate findings affect favicon classification and accessibility.
Get a fresh assessment by requesting another Copilot review.
Pull request overview
Adds a global icon color override, per-icon overrides, SVG/PNG recoloring, favicon detection, tests, and localization updates.
Changes:
- Added global and per-icon color settings.
- Implemented icon recoloring with favicon preservation.
- Updated schemas, popup/menu UI, styles, tests, and locales.
File summaries
| File | Summary |
|---|---|
packages/shared/src/types/command.ts |
Extends command icon configuration types. |
packages/extension/src/types/schema.ts |
Updates command and folder validation. |
packages/extension/src/types/schema.test.ts |
Tests the new schema fields. |
packages/extension/src/types/index.ts |
Updates extension-side types. |
packages/extension/src/services/option/userStyles.ts |
Adds icon color style attributes. |
packages/extension/src/lib/favicon.ts |
Adds favicon detection. Moderate (2 votes): suffix-only host comparison can misclassify unrelated sites. |
packages/extension/src/lib/favicon.test.ts |
Tests favicon detection. |
packages/extension/src/hooks/usePopupContext.tsx |
Provides icon color state through popup context. |
packages/extension/src/const.ts |
Adds icon color constants. |
packages/extension/src/components/Popup.tsx |
Applies global icon color. |
packages/extension/src/components/option/field/IconField.tsx |
Adds the per-icon override switch. Moderate (2 votes): the switch lacks an accessible name. |
packages/extension/src/components/option/editor/UserStyleList.tsx |
Adds icon color to the settings list. |
packages/extension/src/components/option/editor/FolderEditDialog.tsx |
Adds folder icon-color defaults. |
packages/extension/src/components/option/editor/CommandEditDialog.tsx |
Adds command icon-color defaults. |
packages/extension/src/components/menu/MenuItem.tsx |
Handles icon recoloring and favicon status. |
packages/extension/src/components/menu/MenuImage.tsx |
Implements SVG/PNG recoloring. Moderate (2 votes): empty-alt decorative images retain an empty role="img"/ARIA label. |
packages/extension/src/components/menu/MenuImage.test.tsx |
Tests recolored icon rendering. |
packages/extension/src/components/menu/MenuFolder.tsx |
Applies folder icon settings. Moderate (1 vote): forcing isFavicon={false} recolors recognized folder favicons. |
packages/extension/src/components/menu/Menu.tsx |
Shares original icon URLs through context. |
packages/extension/src/components/menu/Menu.module.css |
Adds mask display styles. |
packages/extension/public/_locales/zh_CN/messages.json |
Adds messages; three remain in English. Nit (1 vote): translate them into Chinese. |
packages/extension/public/_locales/ru/messages.json |
Adds messages; three remain in English. Nit (1 vote): translate them into Russian. |
packages/extension/public/_locales/pt_PT/messages.json |
Adds messages; three remain in English. Nit (1 vote): translate them into Portuguese. |
packages/extension/public/_locales/pt_BR/messages.json |
Adds messages; three remain in English. Nit (1 vote): translate them into Portuguese. |
packages/extension/public/_locales/ms/messages.json |
Adds messages; three remain in English. Nit (1 vote): translate them into Malay. |
packages/extension/public/_locales/ko/messages.json |
Adds messages; three remain in English. Nit (1 vote): translate them into Korean. |
packages/extension/public/_locales/ja/messages.json |
Adds Japanese messages. |
packages/extension/public/_locales/it/messages.json |
Adds messages; three remain in English. Nit (1 vote): translate them into Italian. |
packages/extension/public/_locales/id/messages.json |
Adds messages; three remain in English. Nit (1 vote): translate them into Indonesian. |
packages/extension/public/_locales/hi/messages.json |
Adds messages; three remain in English. Nit (1 vote): translate them into Hindi. |
packages/extension/public/_locales/fr/messages.json |
Adds messages; three remain in English. Nit (1 vote): translate them into French. |
packages/extension/public/_locales/es/messages.json |
Adds messages; three remain in English. Nit (1 vote): translate them into Spanish. |
packages/extension/public/_locales/en/messages.json |
Adds English messages. |
packages/extension/public/_locales/de/messages.json |
Adds messages; three remain in English. Nit (1 vote): translate them into German. |
Review details
Suppressed comments (13)
packages/extension/public/_locales/de/messages.json:726
- このロケールで追加されたアイコン色設定の3メッセージが英語のままです。周辺の既存メッセージはドイツ語化されているため、この設定だけ英語表示になります。3キーをドイツ語に翻訳してください。
"Option_userStyles_option_icon_color": {
"message": "Icon Color"
},
"Option_userStyles_desc_icon_color": {
"message": "Specify icon color. Default: #0F172A"
packages/extension/public/_locales/es/messages.json:726
- このロケールで追加されたアイコン色設定の3メッセージが英語のままです。周辺の既存メッセージはスペイン語化されているため、この設定だけ英語表示になります。3キーをスペイン語に翻訳してください。
"Option_userStyles_option_icon_color": {
"message": "Icon Color"
},
"Option_userStyles_desc_icon_color": {
"message": "Specify icon color. Default: #0F172A"
packages/extension/public/_locales/fr/messages.json:726
- このロケールで追加されたアイコン色設定の3メッセージが英語のままです。周辺の既存メッセージはフランス語化されているため、この設定だけ英語表示になります。3キーをフランス語に翻訳してください。
"Option_userStyles_option_icon_color": {
"message": "Icon Color"
},
"Option_userStyles_desc_icon_color": {
"message": "Specify icon color. Default: #0F172A"
packages/extension/public/_locales/hi/messages.json:726
- このロケールで追加されたアイコン色設定の3メッセージが英語のままです。周辺の既存メッセージはヒンディー語化されているため、この設定だけ英語表示になります。3キーをヒンディー語に翻訳してください。
"Option_userStyles_option_icon_color": {
"message": "Icon Color"
},
"Option_userStyles_desc_icon_color": {
"message": "Specify icon color. Default: #0F172A"
packages/extension/public/_locales/id/messages.json:726
- このロケールで追加されたアイコン色設定の3メッセージが英語のままです。周辺の既存メッセージはインドネシア語化されているため、この設定だけ英語表示になります。3キーをインドネシア語に翻訳してください。
"Option_userStyles_option_icon_color": {
"message": "Icon Color"
},
"Option_userStyles_desc_icon_color": {
"message": "Specify icon color. Default: #0F172A"
packages/extension/public/_locales/it/messages.json:726
- このロケールで追加されたアイコン色設定の3メッセージが英語のままです。周辺の既存メッセージはイタリア語化されているため、この設定だけ英語表示になります。3キーをイタリア語に翻訳してください。
"Option_userStyles_option_icon_color": {
"message": "Icon Color"
},
"Option_userStyles_desc_icon_color": {
"message": "Specify icon color. Default: #0F172A"
packages/extension/public/_locales/ko/messages.json:726
- このロケールで追加されたアイコン色設定の3メッセージが英語のままです。周辺の既存メッセージは韓国語化されているため、この設定だけ英語表示になります。3キーを韓国語に翻訳してください。
"Option_userStyles_option_icon_color": {
"message": "Icon Color"
},
"Option_userStyles_desc_icon_color": {
"message": "Specify icon color. Default: #0F172A"
packages/extension/public/_locales/ms/messages.json:726
- このロケールで追加されたアイコン色設定の3メッセージが英語のままです。周辺の既存メッセージはマレー語化されているため、この設定だけ英語表示になります。3キーをマレー語に翻訳してください。
"Option_userStyles_option_icon_color": {
"message": "Icon Color"
},
"Option_userStyles_desc_icon_color": {
"message": "Specify icon color. Default: #0F172A"
packages/extension/public/_locales/pt_BR/messages.json:726
- このロケールで追加されたアイコン色設定の3メッセージが英語のままです。周辺の既存メッセージはポルトガル語化されているため、この設定だけ英語表示になります。3キーをポルトガル語に翻訳してください。
"Option_userStyles_option_icon_color": {
"message": "Icon Color"
},
"Option_userStyles_desc_icon_color": {
"message": "Specify icon color. Default: #0F172A"
packages/extension/public/_locales/pt_PT/messages.json:726
- このロケールで追加されたアイコン色設定の3メッセージが英語のままです。周辺の既存メッセージはポルトガル語化されているため、この設定だけ英語表示になります。3キーをポルトガル語に翻訳してください。
"Option_userStyles_option_icon_color": {
"message": "Icon Color"
},
"Option_userStyles_desc_icon_color": {
"message": "Specify icon color. Default: #0F172A"
packages/extension/public/_locales/ru/messages.json:726
- このロケールで追加されたアイコン色設定の3メッセージが英語のままです。周辺の既存メッセージはロシア語化されているため、この設定だけ英語表示になります。3キーをロシア語に翻訳してください。
"Option_userStyles_option_icon_color": {
"message": "Icon Color"
},
"Option_userStyles_desc_icon_color": {
"message": "Specify icon color. Default: #0F172A"
packages/extension/public/_locales/zh_CN/messages.json:726
- このロケールで追加されたアイコン色設定の3メッセージが英語のままです。周辺の既存メッセージは中国語化されているため、この設定だけ英語表示になります。3キーを中国語に翻訳してください。
"Option_userStyles_option_icon_color": {
"message": "Icon Color"
},
"Option_userStyles_desc_icon_color": {
"message": "Specify icon color. Default: #0F172A"
packages/extension/src/components/menu/MenuFolder.tsx:147
- ここで
isFavicon={false}を固定すると、フォルダにfavicon.icoなどの認識可能なブランドアイコンを設定しても常に UI アイコン扱いになり、グローバル色でマスクされます。フォルダについてもキャッシュ前の URL を保持してisFaviconIconで判定するか、この値を自動判定に委ねてください。
isFavicon={false}
- Files reviewed: 34/34 changed files
- Comments generated: 3
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
|
@CoffeePatch I especially like the technique of applying a custom color to monochrome PNG icons using CSS masks. There are a few points regarding the specification and detection logic that I'd like you to review and,
Thanks again for working on this! |
… icon library check - Replace custom registrable domain parsing with tldts - Keep isIconLibrary generic and keep service-specific asset checks explicit - Determine favicon classification based on actual icon URL instead of command openMode - Update favicon detection tests
…me setting - Rename overrideGlobalIconColor to excludeFromGlobalIconColor across types, schemas, and locales - Automatically preserve original colors for genuine favicons without persisting manual settings - Enable recoloring for custom icons when manual exclusion is off - Keep manual exclusion toggle functional for custom icons
…icon protection - Add tests for MenuItem and MenuImage rendering paths with custom icons and genuine favicons - Add tests for dynamic URL changes and state preservation in IconField - Verify recoloring for AI Prompt command with custom Flaticon/Iconfinder PNGs
|
Thank you for the suggestions! I have addressed all three points:
I also added tests and verified the changes with lint, TypeScript checks, the extension build, and manual browser testing. |
Summary
Verification