1 files changed, 22 insertions, 0 deletions
diff --git a/ext/js/pages/settings/popup-preview-controller.js b/ext/js/pages/settings/popup-preview-controller.js
index 5194410c..bd335460 100644
--- a/ext/js/pages/settings/popup-preview-controller.js
+++ b/ext/js/pages/settings/popup-preview-controller.js
@@ -47,6 +47,14 @@ export class PopupPreviewController {
         this._customOuterCss.addEventListener('settingChanged', this._onCustomOuterCssChange.bind(this), false);
         this._frame.addEventListener('load', this._onFrameLoad.bind(this), false);
         this._settingsController.on('optionsContextChanged', this._onOptionsContextChange.bind(this));
+        this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this));
+        const languageSelect = querySelectorNotNull(document, '#language-select');
+        languageSelect.addEventListener(
+            /** @type {string} */ ('settingChanged'),
+            /** @type {EventListener} */ (this._onLanguageSelectChanged.bind(this)),
+            false
+        );
+
 
         this._frame.src = '/popup-preview.html';
     }
@@ -79,6 +87,20 @@ export class PopupPreviewController {
     }
 
     /**
+     * @param {import('settings-controller').EventArgument<'optionsChanged'>} details
+     */
+    _onOptionsChanged({options}) {
+        this._invoke('PopupPreviewFrame.optionsChanged', {options});
+    }
+
+    /**
+     * @param {import('dom-data-binder').SettingChangedEvent} settingChangedEvent
+     */
+    _onLanguageSelectChanged(settingChangedEvent) {
+        this._invoke('PopupPreviewFrame.setLanguageExampleText', {language: settingChangedEvent.detail.value});
+    }
+
+    /**
      * @param {string} action
      * @param {import('core').SerializableObject} params
      */