usability improvements

ext/bg/js/options-form.js

@@ -28,7 +28,7 @@ function getFormData() {
     return optionsLoad().then(optionsOld => {
         const optionsNew = $.extend(true, {}, optionsOld);
 
-        optionsNew.general.autoStart = $('#activate-on-startup').prop('checked');
+        optionsNew.general.enable = $('#enable-search').prop('checked');
         optionsNew.general.audioPlayback = $('#audio-playback-buttons').prop('checked');
         optionsNew.general.groupResults = $('#group-terms-results').prop('checked');
         optionsNew.general.softKatakana = $('#soft-katakana-search').prop('checked');
@@ -87,7 +87,7 @@ $(document).ready(() => {
     Handlebars.partials = Handlebars.templates;
 
     optionsLoad().then(options => {
-        $('#activate-on-startup').prop('checked', options.general.autoStart);
+        $('#enable-search').prop('checked', options.general.enable);
         $('#audio-playback-buttons').prop('checked', options.general.audioPlayback);
         $('#group-terms-results').prop('checked', options.general.groupResults);
         $('#soft-katakana-search').prop('checked', options.general.softKatakana);
@@ -172,9 +172,7 @@ function populateDictionaries(options) {
 
         $('.dict-enabled, .dict-priority').change(onOptionsChanged);
         $('.dict-delete').click(onDictionaryDelete);
-    }).catch(error => {
+    }).catch(showDictionaryError).then(() => {
-        showDictionaryError(error);
-    }).then(() => {
         showDictionarySpinner(false);
         if (dictCount === 0) {
             dictWarning.show();
@@ -191,13 +189,17 @@ function onDictionaryPurge(e) {
     const dictControls = $('#dict-importer, #dict-groups').hide();
     const dictProgress = $('#dict-purge-progress').show();
 
-    return database().purge().catch(error => {
+    return database().purge().catch(showDictionaryError).then(() => {
-        showDictionaryError(error);
-    }).then(() => {
         showDictionarySpinner(false);
         dictControls.show();
         dictProgress.hide();
-        return optionsLoad().then(options => populateDictionaries(options));
+        return optionsLoad();
+    }).then(options => {
+        options.dictionaries = {};
+        return optionsSave(options).then(() => {
+            yomichan().setOptions(options);
+            populateDictionaries(options);
+        });
     });
 }
 
@@ -214,13 +216,11 @@ function onDictionaryDelete() {
 
     setProgress(0.0);
 
-    database().deleteDictionary(dictGroup.data('title'), (total, current) => setProgress(current / total * 100.0)).catch(error => {
+    database().deleteDictionary(dictGroup.data('title'), (total, current) => setProgress(current / total * 100.0)).catch(showDictionaryError).then(() => {
-        showDictionaryError(error);
-    }).then(() => {
         showDictionarySpinner(false);
         dictProgress.hide();
         dictControls.show();
-        return optionsLoad().then(options => populateDictionaries(options));
+        return optionsLoad().then(populateDictionaries);
     });
 }
 
@@ -241,11 +241,7 @@ function onDictionaryImport() {
         database().importDictionary(dictUrl.val(), (total, current) => setProgress(current / total * 100.0)).then(summary => {
             options.dictionaries[summary.title] = {enabled: true, priority: 0};
             return optionsSave(options).then(() => yomichan().setOptions(options));
-        }).then(() => {
+        }).then(() => populateDictionaries(options)).catch(showDictionaryError).then(() => {
-            return populateDictionaries(options);
-        }).catch(error => {
-            showDictionaryError(error);
-        }).then(() => {
             showDictionarySpinner(false);
             dictProgress.hide();
             dictImporter.show();
@@ -330,13 +326,7 @@ function populateAnkiDeckAndModel(options) {
             populateAnkiFields($('#anki-terms-model').val(options.anki.terms.model), options),
             populateAnkiFields($('#anki-kanji-model').val(options.anki.kanji.model), options)
         ]);
-    }).then(() => {
+    }).then(() => ankiFormat.show()).catch(showAnkiError).then(() => showAnkiSpinner(false));
-        ankiFormat.show();
-    }).catch(error => {
-        showAnkiError(error);
-    }).then(() => {
-        showAnkiSpinner(false);
-    });
 }
 
 function populateAnkiFields(element, options) {
@@ -386,11 +376,7 @@ function onAnkiModelChanged(e) {
         optionsNew.anki[tabId].fields = {};
         populateAnkiFields(element, optionsNew).then(() => {
             optionsSave(optionsNew).then(() => yomichan().setOptions(optionsNew));
-        }).catch(error => {
+        }).catch(showAnkiError).then(() => showAnkiSpinner(false));
-            showAnkiError(error);
-        }).then(() => {
-            showAnkiSpinner(false);
-        });
     });
 }
 
@@ -409,9 +395,5 @@ function onOptionsChanged(e) {
                 return populateAnkiDeckAndModel(optionsNew);
             }
         });
-    }).catch(error => {
+    }).catch(showAnkiError).then(() => showAnkiSpinner(false));
-        showAnkiError(error);
-    }).then(() => {
-        showAnkiSpinner(false);
-    });
 }

ext/bg/js/options.js

@@ -20,7 +20,7 @@
 function optionsSetDefaults(options) {
     const defaults = {
         general: {
-            autoStart: true,
+            enable: true,
             audioPlayback: true,
             groupResults: true,
             softKatakana: true,

ext/bg/js/yomichan.js

@@ -26,18 +26,12 @@ class Yomichan {
         this.translator = new Translator();
         this.anki = new AnkiNull();
         this.options = null;
-        this.setEnabled(false);
 
         chrome.runtime.onMessage.addListener(this.onMessage.bind(this));
-        chrome.browserAction.onClicked.addListener(this.onBrowserAction.bind(this));
         chrome.runtime.onInstalled.addListener(this.onInstalled.bind(this));
+        chrome.browserAction.onClicked.addListener(e => chrome.runtime.openOptionsPage());
 
-        this.translator.prepare().then(optionsLoad).then(options => {
+        this.translator.prepare().then(optionsLoad).then(this.setOptions.bind(this));
-            this.setOptions(options);
-            if (this.options.general.autoStart) {
-                this.setEnabled(true);
-            }
-        });
     }
 
     onInstalled(details) {
@@ -57,19 +51,26 @@ class Yomichan {
         return true;
     }
 
-    onBrowserAction() {
+    // setEnabled(enabled) {
-        this.setEnabled(!this.enabled);
+    //     this.enabled = enabled;
-    }
+    //     this.tabInvokeAll('setEnabled', this.enabled);
-
+    //     chrome.browserAction.setBadgeText({text: enabled ? '' : 'off'});
-    setEnabled(enabled) {
+    // }
-        this.enabled = enabled;
-        this.tabInvokeAll('setEnabled', this.enabled);
-        chrome.browserAction.setBadgeText({text: enabled ? '' : 'off'});
-    }
 
     setOptions(options) {
         this.options = options;
 
+        let usable = false;
+        for (const title in options.dictionaries) {
+            if (options.dictionaries[title].enabled) {
+                usable = true;
+                break;
+            }
+        }
+
+        chrome.browserAction.setBadgeBackgroundColor({color: '#f0ad4e'});
+        chrome.browserAction.setBadgeText({text: usable ? '' : '!'});
+
         if (options.anki.enable) {
             this.anki = new AnkiConnect(this.options.anki.server);
         } else {
@@ -132,10 +133,6 @@ class Yomichan {
         return note;
     }
 
-    api_getEnabled({callback}) {
-        callback({result: this.enabled});
-    }
-
     api_getOptions({callback}) {
         promiseCallback(optionsLoad(), callback);
     }

ext/bg/options.html

@@ -26,7 +26,7 @@
                 <h3>General Options</h3>
 
                 <div class="checkbox">
-                    <label><input type="checkbox" id="activate-on-startup"> Activate on startup</label>
+                    <label><input type="checkbox" id="enable-search"> Enable search</label>
                 </div>
 
                 <div class="checkbox">

ext/fg/js/driver.js

@@ -24,21 +24,16 @@ class Driver {
         this.lastMousePos = null;
         this.lastTextSource = null;
         this.pendingLookup = false;
-        this.enabled = false;
         this.options = null;
 
-        chrome.runtime.onMessage.addListener(this.onBgMessage.bind(this));
+        getOptions().then(options => {
-        window.addEventListener('mouseover', this.onMouseOver.bind(this));
-        window.addEventListener('mousedown', this.onMouseDown.bind(this));
-        window.addEventListener('mousemove', this.onMouseMove.bind(this));
-        window.addEventListener('resize', e => this.searchClear());
-
-        Promise.all([getOptions(), isEnabled()]).then(([options, enabled]) => {
             this.options = options;
-            this.enabled = enabled;
+            window.addEventListener('mouseover', this.onMouseOver.bind(this));
-        }).catch(error => {
+            window.addEventListener('mousedown', this.onMouseDown.bind(this));
-            this.handleError(error);
+            window.addEventListener('mousemove', this.onMouseMove.bind(this));
-        });
+            window.addEventListener('resize', e => this.searchClear());
+            chrome.runtime.onMessage.addListener(this.onBgMessage.bind(this));
+        }).catch(this.handleError.bind(this));
     }
 
     popupTimerSet(callback) {
@@ -63,7 +58,7 @@ class Driver {
         this.lastMousePos = {x: e.clientX, y: e.clientY};
         this.popupTimerClear();
 
-        if (!this.enabled) {
+        if (!this.options.general.enable) {
             return;
         }
 
@@ -198,12 +193,6 @@ class Driver {
     api_setOptions(options) {
         this.options = options;
     }
-
-    api_setEnabled(enabled) {
-        if (!(this.enabled = enabled)) {
-            this.searchClear();
-        }
-    }
 }
 
 window.driver = new Driver();

ext/fg/js/util.js

@@ -38,10 +38,6 @@ function showError(error) {
     window.alert(`Error: ${error}`);
 }
 
-function isEnabled() {
-    return invokeBgApi('getEnabled', {});
-}
-
 function getOptions() {
     return invokeBgApi('getOptions', {});
 }