diff options
Diffstat (limited to 'src/popup/popup.js')
| -rw-r--r-- | src/popup/popup.js | 184 |
1 files changed, 182 insertions, 2 deletions
diff --git a/src/popup/popup.js b/src/popup/popup.js index eb213f5..3bd0cd9 100644 --- a/src/popup/popup.js +++ b/src/popup/popup.js @@ -1,6 +1,11 @@ 'use strict'; -import { LANGUAGES, ERROR_CODES, RUNTIME_MESSAGES } from '../shared/constants.js'; +import { + LANGUAGES, + ERROR_CODES, + RUNTIME_MESSAGES, + POPUP_STATUSES +} from '../shared/constants.js'; import { defaultSettings, sanitizeSettings } from '../shared/settings-schema.js'; const $enabled = /** @type {HTMLInputElement} */ (document.getElementById('enabled-toggle')); @@ -10,9 +15,171 @@ const $modelStatus = /** @type {HTMLParagraphElement} */ (document.getElementByI const $language = /** @type {HTMLSelectElement} */ (document.getElementById('language-select')); const $openOptions = /** @type {HTMLButtonElement} */ (document.getElementById('open-options')); +// Mode navigation + translation result mode elements +const $navSettings = /** @type {HTMLButtonElement} */ (document.getElementById('nav-settings')); +const $navTranslation = /** @type {HTMLButtonElement} */ (document.getElementById('nav-translation')); +const $settingsMode = /** @type {HTMLElement} */ (document.getElementById('settings-mode')); +const $translationMode = /** @type {HTMLElement} */ (document.getElementById('translation-mode')); +const $translationStatus = /** @type {HTMLParagraphElement} */ (document.getElementById('translation-status')); +const $translationMeta = /** @type {HTMLParagraphElement} */ (document.getElementById('translation-meta')); +const $translationText = /** @type {HTMLDivElement} */ (document.getElementById('translation-text')); +const $translationError = /** @type {HTMLParagraphElement} */ (document.getElementById('translation-error')); +const $copyTranslation = /** @type {HTMLButtonElement} */ (document.getElementById('copy-translation')); +const $regenerateTranslation = /** @type {HTMLButtonElement} */ (document.getElementById('regenerate-translation')); +const $openOptionsFromTranslation = /** @type {HTMLButtonElement} */ (document.getElementById('open-options-from-translation')); + /** @type {string[]} current model list for change detection */ let knownModels = []; +// --------------------------------------------------------------------- +// Mode switching +// --------------------------------------------------------------------- + +/** @param {'settings'|'translation'} mode */ +function showMode(mode) { + const translation = mode === 'translation'; + $settingsMode.hidden = translation; + $translationMode.hidden = !translation; + $navSettings.classList.toggle('active', !translation); + $navTranslation.classList.toggle('active', translation); + $navSettings.setAttribute('aria-pressed', String(!translation)); + $navTranslation.setAttribute('aria-pressed', String(translation)); +} + +$navSettings.addEventListener('click', () => { + showMode('settings'); + void persistMode('settings'); +}); +$navTranslation.addEventListener('click', () => { + showMode('translation'); + void persistMode('translation'); + void refreshTranslationState(); +}); + +$openOptionsFromTranslation.addEventListener('click', () => { + browser.runtime.openOptionsPage(); +}); + +/** + * Remember the tab the user picked so the next popup open restores it + * instead of always jumping to the translation tab. + * @param {'settings'|'translation'} mode + */ +async function persistMode(mode) { + try { + await browser.storage.local.set({ popupMode: mode }); + } catch { + // non-fatal + } +} + +// --------------------------------------------------------------------- +// Translation result mode +// --------------------------------------------------------------------- + +const STATUS_LABELS = { + [POPUP_STATUSES.IDLE]: '待機中', + [POPUP_STATUSES.STARTING]: '翻訳を準備中…', + [POPUP_STATUSES.STREAMING]: '受信中…', + [POPUP_STATUSES.COMPLETED]: '完了', + [POPUP_STATUSES.ERROR]: 'エラー', + [POPUP_STATUSES.CANCELLED]: '中断' +}; + +function renderTranslationState(state) { + if (!state || typeof state !== 'object') return; + const status = typeof state.status === 'string' ? state.status : POPUP_STATUSES.IDLE; + const busy = status === POPUP_STATUSES.STARTING || status === POPUP_STATUSES.STREAMING; + + $translationStatus.textContent = STATUS_LABELS[status] || status; + + if (state.model) { + $translationMeta.hidden = false; + $translationMeta.textContent = `Ollama / ${state.model}`; + } else { + $translationMeta.hidden = true; + } + + // Plain-text rendering only (Security.md §7.4). + $translationText.textContent = typeof state.translatedText === 'string' ? state.translatedText : ''; + + if (state.error) { + $translationError.hidden = false; + $translationError.textContent = state.error; + } else { + $translationError.hidden = true; + } + + $copyTranslation.disabled = busy || !(state.translatedText && state.translatedText.length > 0); + $regenerateTranslation.disabled = busy || !state.sourceText; +} + +async function refreshTranslationState() { + try { + const response = await browser.runtime.sendMessage({ type: RUNTIME_MESSAGES.GET_POPUP_STATE }); + if (response && response.ok && response.state) { + renderTranslationState(response.state); + return response.state; + } + } catch { + // background unavailable; leave the current view + } + return null; +} + +// --------------------------------------------------------------------- +// Live state updates: subscribe to the shared background state so an +// open popup receives streaming chunks in real time (Design.md §7.4). +// --------------------------------------------------------------------- + +try { + const statePort = browser.runtime.connect({ name: 'popup-state' }); + statePort.onMessage.addListener((message) => { + if (message && message.type === 'popup-state' && message.state) { + renderTranslationState(message.state); + } + }); + // onDisconnect: popup is closing or the background restarted; nothing to do. +} catch { + // Port may be unavailable in non-extension test contexts; polling in + // refreshTranslationState() still covers the initial state. +} + +$copyTranslation.addEventListener('click', () => { + const text = $translationText.textContent || ''; + if (!text) return; + void (async () => { + try { + await navigator.clipboard.writeText(text); + $translationStatus.textContent = 'コピーしました'; + } catch { + // No execCommand fallback (deprecated): show failure only. + $translationStatus.textContent = 'コピーできませんでした'; + } + })(); +}); + +$regenerateTranslation.addEventListener('click', () => { + void (async () => { + try { + const response = await browser.runtime.sendMessage({ type: RUNTIME_MESSAGES.REGENERATE_LAST }); + if (response && response.ok) { + await refreshTranslationState(); + } else { + $translationError.hidden = false; + $translationError.textContent = '再生成を開始できませんでした。'; + } + } catch { + $translationError.hidden = false; + $translationError.textContent = '再生成を開始できませんでした。'; + } + })(); +}); + +// --------------------------------------------------------------------- +// Settings mode (existing behavior) +// --------------------------------------------------------------------- + function fillLanguages(selected) { $language.textContent = ''; for (const lang of LANGUAGES) { @@ -138,10 +305,23 @@ void (async () => { // If the model list loaded and no model is saved yet, persist the // auto-selected first model so the stored settings match the UI. if (knownModels.length > 0) { - const result = await browser.storage.local.get({ settings: null }); + const result = await browser.storage.local.get({ settings: null, popupMode: null }); const stored = sanitizeSettings(result.settings || defaultSettings()); if (!stored.model) { await persist({ model: $model.value }); } + // Decide the initial mode. Active/recent translation wins; otherwise + // restore the tab the user last picked (default: settings). + const state = await refreshTranslationState(); + const active = state && (state.status === 'starting' || state.status === 'streaming'); + if (active) { + showMode('translation'); + } else if (result.popupMode === 'translation' && state && state.translatedText && state.translatedText.length > 0) { + showMode('translation'); + } else { + showMode('settings'); + } + } else { + showMode('settings'); } })();
\ No newline at end of file |