feat: add advanced context actions and optional translation

options/menu-settings.js

@@ -0,0 +1,42 @@
+import { normalizeLanguage } from '../lib/settings.js';
+
+export const MENU_SETTING_KEYS = ['contextMenuMode', 'showTranslate', 'translationMode', 'translationLanguage'];
+export function initializeMenuSettings({ document, onChange }) {
+  const field = id => document.getElementById(id);
+  function update() {
+    const advanced = field('contextMenuMode').value === 'advanced';
+    const translation = advanced && field('showTranslate').checked;
+    const preferred = translation && field('translationMode').value === 'preferred';
+    field('advanced-settings').hidden = !advanced;
+    field('translation-settings').hidden = !translation;
+    field('preferred-language-field').hidden = !preferred;
+    const valid = Boolean(normalizeLanguage(field('translationLanguage').value));
+    field('language-validation').textContent = preferred && !valid
+      ? 'Enter a language using up to 100 characters. Until then, Translate will ask each time.' : '';
+    field('translationLanguage').setAttribute('aria-invalid', String(preferred && !valid));
+  }
+  for (const id of MENU_SETTING_KEYS) {
+    const changed = () => { update(); onChange(); };
+    field(id).addEventListener('input', changed);
+    field(id).addEventListener('change', changed);
+  }
+  return {
+    render(settings) {
+      for (const id of MENU_SETTING_KEYS) {
+        const element = field(id);
+        if (element === document.activeElement) continue;
+        if (id === 'showTranslate') element.checked = settings[id];
+        else element.value = settings[id];
+      }
+      update();
+    },
+    collect() {
+      return {
+        contextMenuMode: field('contextMenuMode').value,
+        showTranslate: field('showTranslate').checked,
+        translationMode: field('translationMode').value,
+        translationLanguage: normalizeLanguage(field('translationLanguage').value),
+      };
+    },
+  };
+}