aboutsummaryrefslogtreecommitdiff
path: root/ext/bg/js
diff options
context:
space:
mode:
Diffstat (limited to 'ext/bg/js')
-rw-r--r--ext/bg/js/settings/popup-preview-frame-main.js7
-rw-r--r--ext/bg/js/settings/popup-preview-frame.js132
2 files changed, 75 insertions, 64 deletions
diff --git a/ext/bg/js/settings/popup-preview-frame-main.js b/ext/bg/js/settings/popup-preview-frame-main.js
index a362efa5..7c4e2eb9 100644
--- a/ext/bg/js/settings/popup-preview-frame-main.js
+++ b/ext/bg/js/settings/popup-preview-frame-main.js
@@ -16,11 +16,12 @@
*/
/* global
- * SettingsPopupPreview
+ * PopupPreviewFrame
* api
*/
-(() => {
+(async () => {
api.forwardLogsToBackend();
- new SettingsPopupPreview();
+ const preview = new PopupPreviewFrame();
+ await preview.prepare();
})();
diff --git a/ext/bg/js/settings/popup-preview-frame.js b/ext/bg/js/settings/popup-preview-frame.js
index bd9357e9..28c95efb 100644
--- a/ext/bg/js/settings/popup-preview-frame.js
+++ b/ext/bg/js/settings/popup-preview-frame.js
@@ -23,37 +23,36 @@
* api
*/
-class SettingsPopupPreview {
+class PopupPreviewFrame {
constructor() {
- this.frontend = null;
- this.apiOptionsGetOld = api.optionsGet.bind(api);
- this.popup = null;
- this.popupSetCustomOuterCssOld = null;
- this.popupShown = false;
- this.themeChangeTimeout = null;
- this.textSource = null;
- this.optionsContext = null;
+ this._frontend = null;
+ this._frontendGetOptionsContextOld = null;
+ this._apiOptionsGetOld = null;
+ this._popup = null;
+ this._popupSetCustomOuterCssOld = null;
+ 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)],
- ['updateOptionsContext', ({optionsContext}) => this.updateOptionsContext(optionsContext)]
+ ['setText', this._setText.bind(this)],
+ ['setCustomCss', this._setCustomCss.bind(this)],
+ ['setCustomOuterCss', this._setCustomOuterCss.bind(this)],
+ ['updateOptionsContext', this._updateOptionsContext.bind(this)]
]);
-
- window.addEventListener('message', this.onMessage.bind(this), false);
}
- async prepare(optionsContext) {
- this.optionsContext = optionsContext;
+ async prepare() {
+ window.addEventListener('message', this._onMessage.bind(this), false);
// Setup events
- document.querySelector('#theme-dark-checkbox').addEventListener('change', this.onThemeDarkCheckboxChanged.bind(this), false);
+ document.querySelector('#theme-dark-checkbox').addEventListener('change', this._onThemeDarkCheckboxChanged.bind(this), false);
// Overwrite API functions
- api.optionsGet = this.apiOptionsGet.bind(this);
+ this._apiOptionsGetOld = api.optionsGet.bind(api);
+ api.optionsGet = this._apiOptionsGet.bind(this);
// Overwrite frontend
const {frameId} = await api.frameInformationGet();
@@ -61,24 +60,35 @@ class SettingsPopupPreview {
const popupFactory = new PopupFactory(frameId);
await popupFactory.prepare();
- this.popup = popupFactory.getOrCreatePopup();
- this.popup.setChildrenSupported(false);
+ this._popup = popupFactory.getOrCreatePopup();
+ this._popup.setChildrenSupported(false);
- this.popupSetCustomOuterCssOld = this.popup.setCustomOuterCss;
- this.popup.setCustomOuterCss = this.popupSetCustomOuterCss.bind(this);
+ this._popupSetCustomOuterCssOld = this._popup.setCustomOuterCss.bind(this._popup);
+ this._popup.setCustomOuterCss = this._popupSetCustomOuterCss.bind(this);
- this.frontend = new Frontend(this.popup);
- this.frontend.getOptionsContext = async () => this.optionsContext;
- await this.frontend.prepare();
- this.frontend.setDisabledOverride(true);
- this.frontend.canClearSelection = false;
+ this._frontend = new Frontend(this._popup);
+ this._frontendGetOptionsContextOld = this._frontend.getOptionsContext.bind(this._frontend);
+ this._frontend.getOptionsContext = this._getOptionsContext.bind(this);
+ await this._frontend.prepare();
+ this._frontend.setDisabledOverride(true);
+ this._frontend.canClearSelection = false;
// Update search
- this.updateSearch();
+ this._updateSearch();
+ }
+
+ // Private
+
+ async _getOptionsContext() {
+ let optionsContext = this._optionsContext;
+ if (optionsContext === null) {
+ optionsContext = this._frontendGetOptionsContextOld();
+ }
+ return optionsContext;
}
- async apiOptionsGet(...args) {
- const options = await this.apiOptionsGetOld(...args);
+ async _apiOptionsGet(...args) {
+ const options = await this._apiOptionsGetOld(...args);
options.general.enable = true;
options.general.debugInfo = false;
options.general.popupWidth = 400;
@@ -93,9 +103,9 @@ class SettingsPopupPreview {
return options;
}
- async popupSetCustomOuterCss(...args) {
+ async _popupSetCustomOuterCss(...args) {
// This simulates the stylesheet priorities when injecting using the web extension API.
- const result = await this.popupSetCustomOuterCssOld.call(this.popup, ...args);
+ const result = await this._popupSetCustomOuterCssOld(...args);
const node = document.querySelector('#client-css');
if (node !== null && result !== null) {
@@ -105,7 +115,7 @@ class SettingsPopupPreview {
return result;
}
- onMessage(e) {
+ _onMessage(e) {
if (e.origin !== this._targetOrigin) { return; }
const {action, params} = e.data;
@@ -115,49 +125,49 @@ class SettingsPopupPreview {
handler(params);
}
- onThemeDarkCheckboxChanged(e) {
+ _onThemeDarkCheckboxChanged(e) {
document.documentElement.classList.toggle('dark', e.target.checked);
- if (this.themeChangeTimeout !== null) {
- clearTimeout(this.themeChangeTimeout);
+ if (this._themeChangeTimeout !== null) {
+ clearTimeout(this._themeChangeTimeout);
}
- this.themeChangeTimeout = setTimeout(() => {
- this.themeChangeTimeout = null;
- this.popup.updateTheme();
+ this._themeChangeTimeout = setTimeout(() => {
+ this._themeChangeTimeout = null;
+ this._popup.updateTheme();
}, 300);
}
- setText(text) {
+ _setText({text}) {
const exampleText = document.querySelector('#example-text');
if (exampleText === null) { return; }
exampleText.textContent = text;
- this.updateSearch();
+ this._updateSearch();
}
- setInfoVisible(visible) {
+ _setInfoVisible(visible) {
const node = document.querySelector('.placeholder-info');
if (node === null) { return; }
node.classList.toggle('placeholder-info-visible', visible);
}
- setCustomCss(css) {
- if (this.frontend === null) { return; }
- this.popup.setCustomCss(css);
+ _setCustomCss({css}) {
+ if (this._frontend === null) { return; }
+ this._popup.setCustomCss(css);
}
- setCustomOuterCss(css) {
- if (this.frontend === null) { return; }
- this.popup.setCustomOuterCss(css, false);
+ _setCustomOuterCss({css}) {
+ if (this._frontend === null) { return; }
+ this._popup.setCustomOuterCss(css, false);
}
- async updateOptionsContext(optionsContext) {
- this.optionsContext = optionsContext;
- await this.frontend.updateOptions();
- await this.updateSearch();
+ async _updateOptionsContext({optionsContext}) {
+ this._optionsContext = optionsContext;
+ await this._frontend.updateOptions();
+ await this._updateSearch();
}
- async updateSearch() {
+ async _updateSearch() {
const exampleText = document.querySelector('#example-text');
if (exampleText === null) { return; }
@@ -169,17 +179,17 @@ class SettingsPopupPreview {
const source = new TextSourceRange(range, range.toString(), null, null);
try {
- await this.frontend.setTextSource(source);
+ await this._frontend.setTextSource(source);
} finally {
source.cleanup();
}
- this.textSource = source;
- await this.frontend.showContentCompleted();
+ this._textSource = source;
+ await this._frontend.showContentCompleted();
- if (this.popup.isVisibleSync()) {
- this.popupShown = true;
+ if (this._popup.isVisibleSync()) {
+ this._popupShown = true;
}
- this.setInfoVisible(!this.popupShown);
+ this._setInfoVisible(!this._popupShown);
}
}