Context popup improvements (#1039)

* Refactor context-main.js

* Simplify tags

* Use flex layout

* Use image masks for icons, update styles

* Remove old classes

* Add profile button

* Add support for profile selection

* Add title

* Swap the options and search link order

* Fix title

1 files changed, 106 insertions, 52 deletions

diff --git a/ext/bg/js/context-main.js b/ext/bg/js/context-main.js
index 72abe554..e7cff04c 100644
--- a/ext/bg/js/context-main.js
+++ b/ext/bg/js/context-main.js
@@ -19,73 +19,127 @@
  * api
  */
 
-function showExtensionInfo(manifest) {
-    const node = document.getElementById('extension-info');
-    if (node === null) { return; }
+class DisplayController {
+    constructor() {
+        this._optionsFull = null;
+    }
 
-    node.textContent = `${manifest.name} v${manifest.version}`;
-}
+    async prepare() {
+        const manifest = chrome.runtime.getManifest();
+
+        this._showExtensionInfo(manifest);
+        this._setupEnvironment();
+        this._setupButtonEvents('.action-open-search', 'search', chrome.runtime.getURL('/bg/search.html'));
+        this._setupButtonEvents('.action-open-options', 'options', chrome.runtime.getURL(manifest.options_ui.page));
+        this._setupButtonEvents('.action-open-help', 'help', 'https://foosoft.net/projects/yomichan/');
+
+        const optionsFull = await api.optionsGetFull();
+        this._optionsFull = optionsFull;
 
-function setupButtonEvents(selector, command, url) {
-    const nodes = document.querySelectorAll(selector);
-    for (const node of nodes) {
-        node.addEventListener('click', (e) => {
-            if (e.button !== 0) { return; }
-            api.commandExec(command, {mode: e.ctrlKey ? 'newTab' : 'existingOrNewTab'});
-            e.preventDefault();
-        }, false);
-        node.addEventListener('auxclick', (e) => {
-            if (e.button !== 1) { return; }
-            api.commandExec(command, {mode: 'newTab'});
-            e.preventDefault();
-        }, false);
-
-        if (typeof url === 'string') {
-            node.href = url;
-            node.target = '_blank';
-            node.rel = 'noopener';
+        const {profiles, profileCurrent} = optionsFull;
+        const primaryProfile = (profileCurrent >= 0 && profileCurrent < profiles.length) ? profiles[profileCurrent] : null;
+        if (primaryProfile !== null) {
+            this._setupOptions(primaryProfile);
         }
+
+        this._updateProfileSelect(profiles, profileCurrent);
+
+        setTimeout(() => {
+            document.body.dataset.loaded = 'true';
+        }, 10);
     }
-}
 
-async function setupEnvironment() {
-    // Firefox mobile opens this page as a full webpage.
-    const {browser} = await api.getEnvironmentInfo();
-    document.documentElement.dataset.mode = (browser === 'firefox-mobile' ? 'full' : 'mini');
-}
+    // Private
+
+    _showExtensionInfo(manifest) {
+        const node = document.getElementById('extension-info');
+        if (node === null) { return; }
+
+        node.textContent = `${manifest.name} v${manifest.version}`;
+    }
+
+    _setupButtonEvents(selector, command, url) {
+        const nodes = document.querySelectorAll(selector);
+        for (const node of nodes) {
+            node.addEventListener('click', (e) => {
+                if (e.button !== 0) { return; }
+                api.commandExec(command, {mode: e.ctrlKey ? 'newTab' : 'existingOrNewTab'});
+                e.preventDefault();
+            }, false);
+            node.addEventListener('auxclick', (e) => {
+                if (e.button !== 1) { return; }
+                api.commandExec(command, {mode: 'newTab'});
+                e.preventDefault();
+            }, false);
+
+            if (typeof url === 'string') {
+                node.href = url;
+                node.target = '_blank';
+                node.rel = 'noopener';
+            }
+        }
+    }
+
+    async _setupEnvironment() {
+        // Firefox mobile opens this page as a full webpage.
+        const {browser} = await api.getEnvironmentInfo();
+        document.documentElement.dataset.mode = (browser === 'firefox-mobile' ? 'full' : 'mini');
+    }
+
+    _setupOptions({options}) {
+        const extensionEnabled = options.general.enable;
+        const onToggleChanged = () => api.commandExec('toggle');
+        for (const toggle of document.querySelectorAll('#enable-search,#enable-search2')) {
+            toggle.checked = extensionEnabled;
+            toggle.addEventListener('change', onToggleChanged, false);
+        }
+    }
+
+    _updateProfileSelect(profiles, profileCurrent) {
+        const select = document.querySelector('#profile-select');
+        const optionGroup = document.querySelector('#profile-select-option-group');
+        const fragment = document.createDocumentFragment();
+        for (let i = 0, ii = profiles.length; i < ii; ++i) {
+            const {name} = profiles[i];
+            const option = document.createElement('option');
+            option.textContent = name;
+            option.value = `${i}`;
+            fragment.appendChild(option);
+        }
+        optionGroup.textContent = '';
+        optionGroup.appendChild(fragment);
+        select.value = `${profileCurrent}`;
+
+        select.addEventListener('change', this._onProfileSelectChange.bind(this), false);
+    }
 
-async function setupOptions() {
-    const optionsContext = {
-        depth: 0,
-        url: window.location.href
-    };
-    const options = await api.optionsGet(optionsContext);
-
-    const extensionEnabled = options.general.enable;
-    const onToggleChanged = () => api.commandExec('toggle');
-    for (const toggle of document.querySelectorAll('#enable-search,#enable-search2')) {
-        toggle.checked = extensionEnabled;
-        toggle.addEventListener('change', onToggleChanged, false);
+    _onProfileSelectChange(e) {
+        const value = parseInt(e.currentTarget.value, 10);
+        if (typeof value === 'number' && Number.isFinite(value) && value >= 0 && value <= this._optionsFull.profiles.length) {
+            this._setPrimaryProfileIndex(value);
+        }
     }
 
-    setTimeout(() => {
-        document.body.dataset.loaded = 'true';
-    }, 10);
+    async _setPrimaryProfileIndex(value) {
+        return await api.modifySettings(
+            [{
+                action: 'set',
+                path: 'profileCurrent',
+                value,
+                scope: 'global'
+            }]
+        );
+    }
 }
 
 (async () => {
     api.forwardLogsToBackend();
     await yomichan.backendReady();
 
-    const manifest = chrome.runtime.getManifest();
-
     api.logIndicatorClear();
-    showExtensionInfo(manifest);
-    setupEnvironment();
-    setupOptions();
-    setupButtonEvents('.action-open-search', 'search', chrome.runtime.getURL('/bg/search.html'));
-    setupButtonEvents('.action-open-options', 'options', chrome.runtime.getURL(manifest.options_ui.page));
-    setupButtonEvents('.action-open-help', 'help', 'https://foosoft.net/projects/yomichan/');
+
+    const displayController = new DisplayController();
+    displayController.prepare();
 
     yomichan.ready();
 })();