Update Popup and DisplayFloat optionsContext from Frontend (#464)

* set optionsContext from Frontend

* update Popup+Display options on Frontend change

* remove popup setOptions

* only update DisplayFloat options from Frontend

* fix optionsContext usage

* fix preview frame arguments

* keep Frontend URL up to date

* cache url

* fix preview frame

* trigger modifyingProfileChange in correct places

* remove async from function not using await

* refactor optionsContext in Frontend

1 files changed, 17 insertions, 5 deletions

diff --git a/ext/bg/js/settings/popup-preview-frame.js b/ext/bg/js/settings/popup-preview-frame.js
index 420a7c5a..05a2a41b 100644
--- a/ext/bg/js/settings/popup-preview-frame.js
+++ b/ext/bg/js/settings/popup-preview-frame.js
@@ -32,19 +32,24 @@ class SettingsPopupPreview {
         this.popupShown = false;
         this.themeChangeTimeout = null;
         this.textSource = null;
+        this.optionsContext = null;
         this._targetOrigin = chrome.runtime.getURL('/').replace(/\/$/, '');
 
         this._windowMessageHandlers = new Map([
+            ['prepare', ({optionsContext}) => this.prepare(optionsContext)],
             ['setText', ({text}) => this.setText(text)],
             ['setCustomCss', ({css}) => this.setCustomCss(css)],
-            ['setCustomOuterCss', ({css}) => this.setCustomOuterCss(css)]
+            ['setCustomOuterCss', ({css}) => this.setCustomOuterCss(css)],
+            ['updateOptionsContext', ({optionsContext}) => this.updateOptionsContext(optionsContext)]
         ]);
-    }
 
-    async prepare() {
-        // Setup events
         window.addEventListener('message', this.onMessage.bind(this), false);
+    }
+
+    async prepare(optionsContext) {
+        this.optionsContext = optionsContext;
 
+        // Setup events
         document.querySelector('#theme-dark-checkbox').addEventListener('change', this.onThemeDarkCheckboxChanged.bind(this), false);
 
         // Overwrite API functions
@@ -62,8 +67,9 @@ class SettingsPopupPreview {
 
         this.frontend = new Frontend(this.popup);
 
+        this.frontend.getOptionsContext = async () => this.optionsContext;
         this.frontend.setEnabled = () => {};
-        this.frontend.searchClear = () => {};
+        this.frontend.onSearchClear = () => {};
 
         await this.frontend.prepare();
 
@@ -145,6 +151,12 @@ class SettingsPopupPreview {
         this.frontend.popup.setCustomOuterCss(css, false);
     }
 
+    async updateOptionsContext(optionsContext) {
+        this.optionsContext = optionsContext;
+        await this.frontend.updateOptions();
+        await this.updateSearch();
+    }
+
     async updateSearch() {
         const exampleText = document.querySelector('#example-text');
         if (exampleText === null) { return; }