fix: exceptions page ui fixes

This commit is contained in:
2026-02-11 12:01:12 +03:00
parent 4932b20991
commit 226f2efe4f
17 changed files with 161 additions and 12 deletions

View File

@@ -119,11 +119,16 @@
"exceptions_mode": { "message": "Modus:" },
"exceptions_mode_blacklist": { "message": "Blacklist — auf diesen Sites nicht hervorheben" },
"exceptions_mode_whitelist": { "message": "Whitelist — nur auf diesen Sites hervorheben" },
"exceptions_mode_option_blacklist": { "message": "Blacklist" },
"exceptions_mode_option_whitelist": { "message": "Whitelist" },
"exceptions_mode_hint_blacklist": { "message": "Auf diesen Sites nicht hervorheben." },
"exceptions_mode_hint_whitelist": { "message": "Nur auf diesen Sites hervorheben." },
"exceptions_list": {
"message": "Ausnahme-Websites:"
},
"exceptions_list_blacklist": { "message": "Sites ausschließen (Blacklist):" },
"exceptions_list_whitelist": { "message": "Sites einschließen (Whitelist):" },
"add_current_site": { "message": "Aktuelle Website hinzufügen" },
"clear_all": {
"message": "Alle löschen"
},

View File

@@ -131,6 +131,18 @@
"exceptions_mode_whitelist": {
"message": "Whitelist — only highlight on these sites"
},
"exceptions_mode_option_blacklist": {
"message": "Blacklist"
},
"exceptions_mode_option_whitelist": {
"message": "Whitelist"
},
"exceptions_mode_hint_blacklist": {
"message": "Don't highlight on these sites."
},
"exceptions_mode_hint_whitelist": {
"message": "Only highlight on these sites."
},
"exceptions_list": {
"message": "Exception Sites:"
},
@@ -140,6 +152,9 @@
"exceptions_list_whitelist": {
"message": "Sites to include (whitelist):"
},
"add_current_site": {
"message": "Add current site"
},
"clear_all": {
"message": "Clear all"
},

View File

@@ -125,11 +125,16 @@
"exceptions_mode": { "message": "Modo:" },
"exceptions_mode_blacklist": { "message": "Lista negra — no resaltar en estos sitios" },
"exceptions_mode_whitelist": { "message": "Lista blanca — solo resaltar en estos sitios" },
"exceptions_mode_option_blacklist": { "message": "Lista negra" },
"exceptions_mode_option_whitelist": { "message": "Lista blanca" },
"exceptions_mode_hint_blacklist": { "message": "No resaltar en estos sitios." },
"exceptions_mode_hint_whitelist": { "message": "Solo resaltar en estos sitios." },
"exceptions_list": {
"message": "Sitios de excepción:"
},
"exceptions_list_blacklist": { "message": "Sitios a excluir (lista negra):" },
"exceptions_list_whitelist": { "message": "Sitios a incluir (lista blanca):" },
"add_current_site": { "message": "Añadir sitio actual" },
"clear_all": {
"message": "Limpiar todo"
},

View File

@@ -125,11 +125,16 @@
"exceptions_mode": { "message": "Mode :" },
"exceptions_mode_blacklist": { "message": "Liste noire — ne pas surligner sur ces sites" },
"exceptions_mode_whitelist": { "message": "Liste blanche — surligner uniquement sur ces sites" },
"exceptions_mode_option_blacklist": { "message": "Liste noire" },
"exceptions_mode_option_whitelist": { "message": "Liste blanche" },
"exceptions_mode_hint_blacklist": { "message": "Ne pas surligner sur ces sites." },
"exceptions_mode_hint_whitelist": { "message": "Surligner uniquement sur ces sites." },
"exceptions_list": {
"message": "Sites d'exception :"
},
"exceptions_list_blacklist": { "message": "Sites à exclure (liste noire) :" },
"exceptions_list_whitelist": { "message": "Sites à inclure (liste blanche) :" },
"add_current_site": { "message": "Ajouter le site actuel" },
"clear_all": {
"message": "Tout effacer"
},

View File

@@ -125,11 +125,16 @@
"exceptions_mode": { "message": "मोड:" },
"exceptions_mode_blacklist": { "message": "ब्लैकलिस्ट — इन साइटों पर हाइलाइट न करें" },
"exceptions_mode_whitelist": { "message": "व्हाइटलिस्ट — केवल इन साइटों पर हाइलाइट करें" },
"exceptions_mode_option_blacklist": { "message": "ब्लैकलिस्ट" },
"exceptions_mode_option_whitelist": { "message": "व्हाइटलिस्ट" },
"exceptions_mode_hint_blacklist": { "message": "इन साइटों पर हाइलाइट न करें।" },
"exceptions_mode_hint_whitelist": { "message": "केवल इन साइटों पर हाइलाइट करें।" },
"exceptions_list": {
"message": "अपवाद साइटें:"
},
"exceptions_list_blacklist": { "message": "बहिष्कृत साइटें (ब्लैकलिस्ट):" },
"exceptions_list_whitelist": { "message": "शामिल साइटें (व्हाइटलिस्ट):" },
"add_current_site": { "message": "वर्तमान साइट जोड़ें" },
"clear_all": {
"message": "सभी साफ करें"
},

View File

@@ -125,11 +125,16 @@
"exceptions_mode": { "message": "Modalità:" },
"exceptions_mode_blacklist": { "message": "Lista nera — non evidenziare su questi siti" },
"exceptions_mode_whitelist": { "message": "Lista bianca — evidenziare solo su questi siti" },
"exceptions_mode_option_blacklist": { "message": "Lista nera" },
"exceptions_mode_option_whitelist": { "message": "Lista bianca" },
"exceptions_mode_hint_blacklist": { "message": "Non evidenziare su questi siti." },
"exceptions_mode_hint_whitelist": { "message": "Evidenziare solo su questi siti." },
"exceptions_list": {
"message": "Siti di eccezione:"
},
"exceptions_list_blacklist": { "message": "Siti da escludere (lista nera):" },
"exceptions_list_whitelist": { "message": "Siti da includere (lista bianca):" },
"add_current_site": { "message": "Aggiungi sito attuale" },
"clear_all": {
"message": "Cancella tutto"
},

View File

@@ -125,11 +125,16 @@
"exceptions_mode": { "message": "モード:" },
"exceptions_mode_blacklist": { "message": "ブラックリスト — これらのサイトではハイライトしない" },
"exceptions_mode_whitelist": { "message": "ホワイトリスト — これらのサイトでのみハイライト" },
"exceptions_mode_option_blacklist": { "message": "ブラックリスト" },
"exceptions_mode_option_whitelist": { "message": "ホワイトリスト" },
"exceptions_mode_hint_blacklist": { "message": "これらのサイトではハイライトしません。" },
"exceptions_mode_hint_whitelist": { "message": "これらのサイトでのみハイライトします。" },
"exceptions_list": {
"message": "例外サイト:"
},
"exceptions_list_blacklist": { "message": "除外するサイト(ブラックリスト):" },
"exceptions_list_whitelist": { "message": "含めるサイト(ホワイトリスト):" },
"add_current_site": { "message": "現在のサイトを追加" },
"clear_all": {
"message": "すべてクリア"
},

View File

@@ -125,11 +125,16 @@
"exceptions_mode": { "message": "모드:" },
"exceptions_mode_blacklist": { "message": "차단 목록 — 이 사이트에서 강조 안 함" },
"exceptions_mode_whitelist": { "message": "허용 목록 — 이 사이트에서만 강조" },
"exceptions_mode_option_blacklist": { "message": "차단 목록" },
"exceptions_mode_option_whitelist": { "message": "허용 목록" },
"exceptions_mode_hint_blacklist": { "message": "이 사이트에서 강조하지 않습니다." },
"exceptions_mode_hint_whitelist": { "message": "이 사이트에서만 강조합니다." },
"exceptions_list": {
"message": "예외 사이트:"
},
"exceptions_list_blacklist": { "message": "제외할 사이트 (차단 목록):" },
"exceptions_list_whitelist": { "message": "포함할 사이트 (허용 목록):" },
"add_current_site": { "message": "현재 사이트 추가" },
"clear_all": {
"message": "모두 지우기"
},

View File

@@ -125,11 +125,16 @@
"exceptions_mode": { "message": "Modus:" },
"exceptions_mode_blacklist": { "message": "Zwarte lijst — niet markeren op deze sites" },
"exceptions_mode_whitelist": { "message": "Witte lijst — alleen markeren op deze sites" },
"exceptions_mode_option_blacklist": { "message": "Zwarte lijst" },
"exceptions_mode_option_whitelist": { "message": "Witte lijst" },
"exceptions_mode_hint_blacklist": { "message": "Niet markeren op deze sites." },
"exceptions_mode_hint_whitelist": { "message": "Alleen markeren op deze sites." },
"exceptions_list": {
"message": "Uitzondering sites:"
},
"exceptions_list_blacklist": { "message": "Uit te sluiten sites (zwarte lijst):" },
"exceptions_list_whitelist": { "message": "Toe te voegen sites (witte lijst):" },
"add_current_site": { "message": "Huidige site toevoegen" },
"clear_all": {
"message": "Alles wissen"
},

View File

@@ -125,11 +125,16 @@
"exceptions_mode": { "message": "Tryb:" },
"exceptions_mode_blacklist": { "message": "Czarna lista — nie podświetlaj na tych stronach" },
"exceptions_mode_whitelist": { "message": "Biała lista — podświetlaj tylko na tych stronach" },
"exceptions_mode_option_blacklist": { "message": "Czarna lista" },
"exceptions_mode_option_whitelist": { "message": "Biała lista" },
"exceptions_mode_hint_blacklist": { "message": "Nie podświetlaj na tych stronach." },
"exceptions_mode_hint_whitelist": { "message": "Podświetlaj tylko na tych stronach." },
"exceptions_list": {
"message": "Strony wyjątków:"
},
"exceptions_list_blacklist": { "message": "Strony do wykluczenia (czarna lista):" },
"exceptions_list_whitelist": { "message": "Strony do uwzględnienia (biała lista):" },
"add_current_site": { "message": "Dodaj bieżącą witrynę" },
"clear_all": {
"message": "Wyczyść wszystko"
},

View File

@@ -125,11 +125,16 @@
"exceptions_mode": { "message": "Modo:" },
"exceptions_mode_blacklist": { "message": "Lista negra — não destacar nestes sites" },
"exceptions_mode_whitelist": { "message": "Lista branca — destacar apenas nestes sites" },
"exceptions_mode_option_blacklist": { "message": "Lista negra" },
"exceptions_mode_option_whitelist": { "message": "Lista branca" },
"exceptions_mode_hint_blacklist": { "message": "Não destacar nestes sites." },
"exceptions_mode_hint_whitelist": { "message": "Destacar apenas nestes sites." },
"exceptions_list": {
"message": "Sites de exceção:"
},
"exceptions_list_blacklist": { "message": "Sites a excluir (lista negra):" },
"exceptions_list_whitelist": { "message": "Sites a incluir (lista branca):" },
"add_current_site": { "message": "Adicionar site atual" },
"clear_all": {
"message": "Limpar tudo"
},

View File

@@ -125,11 +125,16 @@
"exceptions_mode": { "message": "Режим:" },
"exceptions_mode_blacklist": { "message": "Чёрный список — не подсвечивать на этих сайтах" },
"exceptions_mode_whitelist": { "message": "Белый список — подсвечивать только на этих сайтах" },
"exceptions_mode_option_blacklist": { "message": "Чёрный список" },
"exceptions_mode_option_whitelist": { "message": "Белый список" },
"exceptions_mode_hint_blacklist": { "message": "Не подсвечивать на этих сайтах." },
"exceptions_mode_hint_whitelist": { "message": "Подсвечивать только на этих сайтах." },
"exceptions_list": {
"message": "Сайты-исключения:"
},
"exceptions_list_blacklist": { "message": "Исключить сайты (чёрный список):" },
"exceptions_list_whitelist": { "message": "Включить сайты (белый список):" },
"add_current_site": { "message": "Добавить текущий сайт" },
"clear_all": {
"message": "Очистить все"
},

View File

@@ -125,11 +125,16 @@
"exceptions_mode": { "message": "Mod:" },
"exceptions_mode_blacklist": { "message": "Kara liste — bu sitelerde vurgulama" },
"exceptions_mode_whitelist": { "message": "Beyaz liste — yalnızca bu sitelerde vurgula" },
"exceptions_mode_option_blacklist": { "message": "Kara liste" },
"exceptions_mode_option_whitelist": { "message": "Beyaz liste" },
"exceptions_mode_hint_blacklist": { "message": "Bu sitelerde vurgulama." },
"exceptions_mode_hint_whitelist": { "message": "Yalnızca bu sitelerde vurgula." },
"exceptions_list": {
"message": "İstisna Siteleri:"
},
"exceptions_list_blacklist": { "message": "Hariç tutulacak siteler (kara liste):" },
"exceptions_list_whitelist": { "message": "Dahil edilecek siteler (beyaz liste):" },
"add_current_site": { "message": "Mevcut siteyi ekle" },
"clear_all": {
"message": "Hepsini Temizle"
},

View File

@@ -125,11 +125,16 @@
"exceptions_mode": { "message": "模式:" },
"exceptions_mode_blacklist": { "message": "黑名单 — 不在这些网站上高亮" },
"exceptions_mode_whitelist": { "message": "白名单 — 仅在这些网站上高亮" },
"exceptions_mode_option_blacklist": { "message": "黑名单" },
"exceptions_mode_option_whitelist": { "message": "白名单" },
"exceptions_mode_hint_blacklist": { "message": "不在这些网站上高亮。" },
"exceptions_mode_hint_whitelist": { "message": "仅在这些网站上高亮。" },
"exceptions_list": {
"message": "例外网站:"
},
"exceptions_list_blacklist": { "message": "要排除的网站(黑名单):" },
"exceptions_list_whitelist": { "message": "要包含的网站(白名单):" },
"add_current_site": { "message": "添加当前网站" },
"clear_all": {
"message": "清除全部"
},

View File

@@ -1138,7 +1138,7 @@ body {
.exceptions-mode-select {
width: 100%;
min-height: 32px;
padding: 0 10px;
padding: 0 28px 0 10px;
font-size: var(--text-base);
color: var(--text-color);
background: var(--input-bg);
@@ -1147,6 +1147,14 @@ body {
cursor: pointer;
}
.exceptions-mode-hint {
margin: 0;
font-size: var(--text-xs);
color: var(--text-color);
opacity: 0.6;
line-height: 1.3;
}
.exceptions-add-row {
display: flex;
align-items: center;
@@ -1188,6 +1196,30 @@ body {
font-size: 14px;
}
.exceptions-add-current-link {
align-self: flex-start;
background: none;
border: none;
padding: 0;
font-size: var(--text-xs);
color: var(--accent);
cursor: pointer;
transition: opacity 0.2s, color 0.2s;
flex-shrink: 0;
text-align: left;
}
.exceptions-add-current-link:hover {
opacity: 0.9;
text-decoration: underline;
}
.exceptions-add-current-link:disabled {
opacity: 0.5;
cursor: not-allowed;
text-decoration: none;
}
.exceptions-list-wrapper {
display: flex;
flex-direction: column;
@@ -1285,15 +1317,15 @@ body {
.exception-remove {
background: none;
border: none;
padding: 4px;
padding: 2px;
cursor: pointer;
flex-shrink: 0;
transition: color 0.2s;
display: flex;
align-items: center;
justify-content: center;
color: #9ca3af;
opacity: 0;
color: var(--text-color);
opacity: 0.5;
}
.exception-item:hover .exception-remove {
@@ -1302,10 +1334,11 @@ body {
.exception-remove:hover {
color: var(--danger);
background: none;
}
.exception-remove i {
font-size: 12px;
font-size: 10px;
}

View File

@@ -224,16 +224,13 @@
<div class="tab-content" data-tab-content="exceptions">
<div class="tab-inner">
<div class="exceptions-section">
<label class="section-label">
<i class="fa-solid fa-ban"></i>
<span data-i18n="site_exceptions">Site Exceptions</span>
</label>
<div class="exceptions-mode-card">
<span class="exceptions-mode-label" data-i18n="exceptions_mode">Mode</span>
<select id="exceptionsModeSelect" class="exceptions-mode-select" aria-label="Exceptions mode">
<option value="blacklist" data-i18n="exceptions_mode_blacklist">Blacklist — don't highlight on these sites</option>
<option value="whitelist" data-i18n="exceptions_mode_whitelist">Whitelist — only highlight on these sites</option>
<option value="blacklist" data-i18n="exceptions_mode_option_blacklist">Blacklist</option>
<option value="whitelist" data-i18n="exceptions_mode_option_whitelist">Whitelist</option>
</select>
<p class="exceptions-mode-hint" id="exceptionsModeHint" aria-live="polite"></p>
</div>
<div class="exceptions-add-row">
<input type="text" id="exceptionDomainInput" class="exception-domain-input" data-i18n="exception_domain_placeholder" placeholder="example.com" />
@@ -241,6 +238,7 @@
<i class="fa-solid fa-plus"></i>
</button>
</div>
<button type="button" class="exceptions-add-current-link" id="addCurrentSiteBtn" data-i18n="add_current_site">Add current site</button>
<div class="exceptions-list-wrapper">
<div class="exceptions-list-header">
<span class="exceptions-mode-label" id="exceptionsListLabel" data-i18n="exceptions_list">Exception Sites</span>

View File

@@ -1212,9 +1212,11 @@ export class PopupController {
await StorageService.update('exceptionsMode', this.exceptionsMode);
MessageService.sendToAllTabs({ type: 'EXCEPTIONS_LIST_UPDATED' });
this.updateExceptionsModeLabel();
this.updateExceptionsModeHint();
});
document.getElementById('addExceptionBtn')?.addEventListener('click', () => this.addExceptionFromInput());
document.getElementById('addCurrentSiteBtn')?.addEventListener('click', () => this.addCurrentSiteToExceptions());
(document.getElementById('exceptionDomainInput') as HTMLInputElement)?.addEventListener('keydown', (e) => {
if (e.key === 'Enter') this.addExceptionFromInput();
});
@@ -1223,6 +1225,7 @@ export class PopupController {
if (confirm(chrome.i18n.getMessage('confirm_clear_exceptions') || 'Clear all exceptions?')) {
this.exceptionsList = [];
this.renderExceptions();
this.updateAddCurrentSiteButton();
await StorageService.update('exceptionsList', this.exceptionsList);
MessageService.sendToAllTabs({ type: 'EXCEPTIONS_LIST_UPDATED' });
}
@@ -1234,6 +1237,7 @@ export class PopupController {
const domain = (button as HTMLElement).dataset.domain!;
this.exceptionsList = this.exceptionsList.filter(d => d !== domain);
this.renderExceptions();
this.updateAddCurrentSiteButton();
await StorageService.update('exceptionsList', this.exceptionsList);
MessageService.sendToAllTabs({ type: 'EXCEPTIONS_LIST_UPDATED' });
}
@@ -1423,6 +1427,8 @@ export class PopupController {
this.renderExceptions();
this.updateExceptionsModeSelect();
this.updateExceptionsModeLabel();
this.updateExceptionsModeHint();
this.updateAddCurrentSiteButton();
this.updateFormValues();
}
@@ -1683,6 +1689,23 @@ export class PopupController {
});
}
private async addCurrentSiteToExceptions(): Promise<void> {
let host = this.currentTabHost;
if (!host) {
await this.getCurrentTab();
host = this.currentTabHost;
}
if (!host) return;
const domain = host.toLowerCase();
if (this.exceptionsList.includes(domain)) return;
this.exceptionsList.push(domain);
this.renderExceptions();
await StorageService.update('exceptionsList', this.exceptionsList);
MessageService.sendToAllTabs({ type: 'EXCEPTIONS_LIST_UPDATED' });
this.updateAddCurrentSiteButton();
}
private updateExceptionsModeSelect(): void {
const select = document.getElementById('exceptionsModeSelect') as HTMLSelectElement | null;
if (select) select.value = this.exceptionsMode;
@@ -1695,6 +1718,21 @@ export class PopupController {
label.textContent = chrome.i18n.getMessage(key) || (this.exceptionsMode === 'whitelist' ? 'Sites to highlight (whitelist):' : 'Sites to exclude (blacklist):');
}
private updateExceptionsModeHint(): void {
const hint = document.getElementById('exceptionsModeHint');
if (!hint) return;
const key = this.exceptionsMode === 'whitelist' ? 'exceptions_mode_hint_whitelist' : 'exceptions_mode_hint_blacklist';
hint.textContent = chrome.i18n.getMessage(key) || (this.exceptionsMode === 'whitelist' ? 'Only highlight on these sites.' : 'Don\'t highlight on these sites.');
}
private updateAddCurrentSiteButton(): void {
const btn = document.getElementById('addCurrentSiteBtn') as HTMLButtonElement | null;
if (!btn) return;
const host = this.currentTabHost.toLowerCase();
const alreadyInList = host !== '' && this.exceptionsList.includes(host);
btn.disabled = !host || alreadyInList;
}
private renderExceptions(): void {
const container = document.getElementById('exceptionsList');
if (!container) return;
@@ -1709,7 +1747,7 @@ export class PopupController {
<span class="exception-domain-icon"><i class="fa-solid fa-at"></i></span>
<span class="exception-domain">${DOMUtils.escapeHtml(domain)}</span>
<button type="button" class="exception-remove" data-domain="${DOMUtils.escapeHtml(domain)}" title="${DOMUtils.escapeHtml(chrome.i18n.getMessage('remove') || 'Remove')}" aria-label="${DOMUtils.escapeHtml(chrome.i18n.getMessage('remove') || 'Remove')}">
<i class="fa-solid fa-trash"></i>
<i class="fa-solid fa-xmark"></i>
</button>
</div>`
).join('');