alex/yomichan
1
Fork 0
Code Releases Activity

Popup preview frame refactor (#572)

Browse Source 
* Use private variables

* Use private methods

* Update overrides

* Make prepare called in the entry point function

* Change format of handlers

* Change where _apiOptionsGetOld is assigned

* Rename class
This commit is contained in:
toasted-nutbread 2020-05-29 20:29:19 -04:00 committed by GitHub
parent 9624566d2a
commit df040b104a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 75 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
ext/bg/js/settings/popup-preview-frame-main.js
View File

@ -16,11 +16,12 @@
*/ */
/* global /* global
* SettingsPopupPreview * PopupPreviewFrame
* api * api
*/ */
(() => { (async () => {
api.forwardLogsToBackend(); api.forwardLogsToBackend();
new SettingsPopupPreview(); const preview = new PopupPreviewFrame();
await preview.prepare();
})(); })();

132
ext/bg/js/settings/popup-preview-frame.js
View File

@ -23,37 +23,36 @@
* api * api
*/ */
class SettingsPopupPreview { class PopupPreviewFrame {
constructor() { constructor() {
this.frontend = null; this._frontend = null;
this.apiOptionsGetOld = api.optionsGet.bind(api); this._frontendGetOptionsContextOld = null;
this.popup = null; this._apiOptionsGetOld = null;
this.popupSetCustomOuterCssOld = null; this._popup = null;
this.popupShown = false; this._popupSetCustomOuterCssOld = null;
this.themeChangeTimeout = null; this._popupShown = false;
this.textSource = null; this._themeChangeTimeout = null;
this.optionsContext = null; this._textSource = null;
this._optionsContext = null;
this._targetOrigin = chrome.runtime.getURL('/').replace(/\/$/, ''); this._targetOrigin = chrome.runtime.getURL('/').replace(/\/$/, '');
this._windowMessageHandlers = new Map([ this._windowMessageHandlers = new Map([
['prepare', ({optionsContext}) => this.prepare(optionsContext)], ['setText', this._setText.bind(this)],
['setText', ({text}) => this.setText(text)], ['setCustomCss', this._setCustomCss.bind(this)],
['setCustomCss', ({css}) => this.setCustomCss(css)], ['setCustomOuterCss', this._setCustomOuterCss.bind(this)],
['setCustomOuterCss', ({css}) => this.setCustomOuterCss(css)], ['updateOptionsContext', this._updateOptionsContext.bind(this)]
['updateOptionsContext', ({optionsContext}) => this.updateOptionsContext(optionsContext)]
]); ]);
window.addEventListener('message', this.onMessage.bind(this), false);
} }
async prepare(optionsContext) { async prepare() {
this.optionsContext = optionsContext; window.addEventListener('message', this._onMessage.bind(this), false);
// Setup events // 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 // Overwrite API functions
api.optionsGet = this.apiOptionsGet.bind(this); this._apiOptionsGetOld = api.optionsGet.bind(api);
api.optionsGet = this._apiOptionsGet.bind(this);
// Overwrite frontend // Overwrite frontend
const {frameId} = await api.frameInformationGet(); const {frameId} = await api.frameInformationGet();
@ -61,24 +60,35 @@ class SettingsPopupPreview {
const popupFactory = new PopupFactory(frameId); const popupFactory = new PopupFactory(frameId);
await popupFactory.prepare(); await popupFactory.prepare();
this.popup = popupFactory.getOrCreatePopup(); this._popup = popupFactory.getOrCreatePopup();
this.popup.setChildrenSupported(false); this._popup.setChildrenSupported(false);
this.popupSetCustomOuterCssOld = this.popup.setCustomOuterCss; this._popupSetCustomOuterCssOld = this._popup.setCustomOuterCss.bind(this._popup);
this.popup.setCustomOuterCss = this.popupSetCustomOuterCss.bind(this); this._popup.setCustomOuterCss = this._popupSetCustomOuterCss.bind(this);
this.frontend = new Frontend(this.popup); this._frontend = new Frontend(this._popup);
this.frontend.getOptionsContext = async () => this.optionsContext; this._frontendGetOptionsContextOld = this._frontend.getOptionsContext.bind(this._frontend);
await this.frontend.prepare(); this._frontend.getOptionsContext = this._getOptionsContext.bind(this);
this.frontend.setDisabledOverride(true); await this._frontend.prepare();
this.frontend.canClearSelection = false; this._frontend.setDisabledOverride(true);
this._frontend.canClearSelection = false;
// Update search // Update search
this.updateSearch(); this._updateSearch();
} }
async apiOptionsGet(...args) { // Private
const options = await this.apiOptionsGetOld(...args);
async _getOptionsContext() {
let optionsContext = this._optionsContext;
if (optionsContext === null) {
optionsContext = this._frontendGetOptionsContextOld();
}
return optionsContext;
}
async _apiOptionsGet(...args) {
const options = await this._apiOptionsGetOld(...args);
options.general.enable = true; options.general.enable = true;
options.general.debugInfo = false; options.general.debugInfo = false;
options.general.popupWidth = 400; options.general.popupWidth = 400;
@ -93,9 +103,9 @@ class SettingsPopupPreview {
return options; return options;
} }
async popupSetCustomOuterCss(...args) { async _popupSetCustomOuterCss(...args) {
// This simulates the stylesheet priorities when injecting using the web extension API. // 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'); const node = document.querySelector('#client-css');
if (node !== null && result !== null) { if (node !== null && result !== null) {
@ -105,7 +115,7 @@ class SettingsPopupPreview {
return result; return result;
} }
onMessage(e) { _onMessage(e) {
if (e.origin !== this._targetOrigin) { return; } if (e.origin !== this._targetOrigin) { return; }
const {action, params} = e.data; const {action, params} = e.data;
@ -115,49 +125,49 @@ class SettingsPopupPreview {
handler(params); handler(params);
} }
onThemeDarkCheckboxChanged(e) { _onThemeDarkCheckboxChanged(e) {
document.documentElement.classList.toggle('dark', e.target.checked); document.documentElement.classList.toggle('dark', e.target.checked);
if (this.themeChangeTimeout !== null) { if (this._themeChangeTimeout !== null) {
clearTimeout(this.themeChangeTimeout); clearTimeout(this._themeChangeTimeout);
} }
this.themeChangeTimeout = setTimeout(() => { this._themeChangeTimeout = setTimeout(() => {
this.themeChangeTimeout = null; this._themeChangeTimeout = null;
this.popup.updateTheme(); this._popup.updateTheme();
}, 300); }, 300);
} }
setText(text) { _setText({text}) {
const exampleText = document.querySelector('#example-text'); const exampleText = document.querySelector('#example-text');
if (exampleText === null) { return; } if (exampleText === null) { return; }
exampleText.textContent = text; exampleText.textContent = text;
this.updateSearch(); this._updateSearch();
} }
setInfoVisible(visible) { _setInfoVisible(visible) {
const node = document.querySelector('.placeholder-info'); const node = document.querySelector('.placeholder-info');
if (node === null) { return; } if (node === null) { return; }
node.classList.toggle('placeholder-info-visible', visible); node.classList.toggle('placeholder-info-visible', visible);
} }
setCustomCss(css) { _setCustomCss({css}) {
if (this.frontend === null) { return; } if (this._frontend === null) { return; }
this.popup.setCustomCss(css); this._popup.setCustomCss(css);
} }
setCustomOuterCss(css) { _setCustomOuterCss({css}) {
if (this.frontend === null) { return; } if (this._frontend === null) { return; }
this.popup.setCustomOuterCss(css, false); this._popup.setCustomOuterCss(css, false);
} }
async updateOptionsContext(optionsContext) { async _updateOptionsContext({optionsContext}) {
this.optionsContext = optionsContext; this._optionsContext = optionsContext;
await this.frontend.updateOptions(); await this._frontend.updateOptions();
await this.updateSearch(); await this._updateSearch();
} }
async updateSearch() { async _updateSearch() {
const exampleText = document.querySelector('#example-text'); const exampleText = document.querySelector('#example-text');
if (exampleText === null) { return; } if (exampleText === null) { return; }
@ -169,17 +179,17 @@ class SettingsPopupPreview {
const source = new TextSourceRange(range, range.toString(), null, null); const source = new TextSourceRange(range, range.toString(), null, null);
try { try {
await this.frontend.setTextSource(source); await this._frontend.setTextSource(source);
} finally { } finally {
source.cleanup(); source.cleanup();
} }
this.textSource = source; this._textSource = source;
await this.frontend.showContentCompleted(); await this._frontend.showContentCompleted();
if (this.popup.isVisibleSync()) { if (this._popup.isVisibleSync()) {
this.popupShown = true; this._popupShown = true;
} }
this.setInfoVisible(!this.popupShown); this._setInfoVisible(!this._popupShown);
} }
} }