Update badges (#1309)

* Update badge indications to be based off current profile

* Update warning badge to display when no dictionaries are enabled

* Show how many dictionaries are enabled

3 files changed, 55 insertions, 10 deletions

diff --git a/ext/bg/js/backend.js b/ext/bg/js/backend.js
index 60739aab..fb0596d5 100644
--- a/ext/bg/js/backend.js
+++ b/ext/bg/js/backend.js
@@ -1248,14 +1248,17 @@ class Backend {
                 color = '#f0ad4e';
                 status = 'Loading';
             }
-        } else if (!this._anyOptionsMatches((options) => options.general.enable)) {
-            text = 'off';
-            color = '#555555';
-            status = 'Disabled';
-        } else if (!this._anyOptionsMatches((options) => this._isAnyDictionaryEnabled(options))) {
-            text = '!';
-            color = '#f0ad4e';
-            status = 'No dictionaries installed';
+        } else {
+            const options = this._getProfileOptions({current: true});
+            if (!options.general.enable) {
+                text = 'off';
+                color = '#555555';
+                status = 'Disabled';
+            } else if (!this._isAnyDictionaryEnabled(options)) {
+                text = '!';
+                color = '#f0ad4e';
+                status = 'No dictionaries installed';
+            }
         }
 
         if (color !== null && typeof chrome.browserAction.setBadgeBackgroundColor === 'function') {
diff --git a/ext/bg/js/settings/dictionary-controller.js b/ext/bg/js/settings/dictionary-controller.js
index a25268d1..57ec5bee 100644
--- a/ext/bg/js/settings/dictionary-controller.js
+++ b/ext/bg/js/settings/dictionary-controller.js
@@ -154,6 +154,7 @@ class DictionaryEntry {
     _onEnabledChanged(e) {
         const {detail: {value}} = e;
         this._node.dataset.enabled = `${value}`;
+        this._dictionaryController.updateDictionariesEnabled();
     }
 
     _setupDetails(detailsTable) {
@@ -203,6 +204,9 @@ class DictionaryController {
         this._dictionaryEntryContainer = null;
         this._integrityExtraInfoContainer = null;
         this._dictionaryInstallCountNode = null;
+        this._dictionaryEnabledCountNode = null;
+        this._noDictionariesInstalledWarnings = null;
+        this._noDictionariesEnabledWarnings = null;
         this._deleteDictionaryModal = null;
         this._integrityExtraInfoNode = null;
         this._isDeleting = false;
@@ -213,10 +217,13 @@ class DictionaryController {
         this._dictionaryEntryContainer = document.querySelector('#dictionary-list');
         this._integrityExtraInfoContainer = document.querySelector('#dictionary-list-extra');
         this._dictionaryInstallCountNode = document.querySelector('#dictionary-install-count');
+        this._dictionaryEnabledCountNode = document.querySelector('#dictionary-enabled-count');
         this._noDictionariesInstalledWarnings = document.querySelectorAll('.no-dictionaries-installed-warning');
+        this._noDictionariesEnabledWarnings = document.querySelectorAll('.no-dictionaries-enabled-warning');
         this._deleteDictionaryModal = this._modalController.getModal('dictionary-confirm-delete');
 
         yomichan.on('databaseUpdated', this._onDatabaseUpdated.bind(this));
+        this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this));
 
         document.querySelector('#dictionary-confirm-delete-button').addEventListener('click', this._onDictionaryConfirmDelete.bind(this), false);
         if (this._checkIntegrityButton !== null) {
@@ -238,13 +245,23 @@ class DictionaryController {
         return this._settingsController.instantiateTemplate(name);
     }
 
+    async updateDictionariesEnabled() {
+        const options = await this._settingsController.getOptions();
+        this._updateDictionariesEnabledWarnings(options);
+    }
+
     // Private
 
+    _onOptionsChanged({options}) {
+        this._updateDictionariesEnabledWarnings(options);
+    }
+
     async _onDatabaseUpdated() {
         const token = {};
         this._databaseStateToken = token;
         this._dictionaries = null;
         const dictionaries = await this._settingsController.getDictionaryInfo();
+        const options = await this._settingsController.getOptions();
         if (this._databaseStateToken !== token) { return; }
         this._dictionaries = dictionaries;
 
@@ -264,12 +281,37 @@ class DictionaryController {
             node.hidden = hasDictionary;
         }
 
+        this._updateDictionariesEnabledWarnings(options);
+
         await this._ensureDictionarySettings(dictionaries);
         for (const dictionary of dictionaries) {
             this._createDictionaryEntry(dictionary);
         }
     }
 
+    _updateDictionariesEnabledWarnings(options) {
+        let enabledCount = 0;
+        if (this._dictionaries !== null) {
+            for (const {title} of this._dictionaries) {
+                if (Object.prototype.hasOwnProperty.call(options.dictionaries, title)) {
+                    const {enabled} = options.dictionaries[title];
+                    if (enabled) {
+                        ++enabledCount;
+                    }
+                }
+            }
+        }
+
+        const hasEnabledDictionary = (enabledCount > 0);
+        for (const node of this._noDictionariesEnabledWarnings) {
+            node.hidden = hasEnabledDictionary;
+        }
+
+        if (this._dictionaryEnabledCountNode !== null) {
+            this._dictionaryEnabledCountNode.textContent = `${enabledCount}`;
+        }
+    }
+
     _onDictionaryConfirmDelete(e) {
         e.preventDefault();
 
diff --git a/ext/bg/settings2.html b/ext/bg/settings2.html
index 02bddb71..3bad1217 100644
--- a/ext/bg/settings2.html
+++ b/ext/bg/settings2.html
@@ -22,7 +22,7 @@
     <div class="sidebar"><div class="sidebar-inner">
         <div class="sidebar-body">
             <a href="#!profile"          class="outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="profile"></span></span><span class="outline-item-label">Profile</span></a>
-            <a href="#!dictionaries"     class="outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="book"></span><span class="outline-item-left-warning-badge no-dictionaries-installed-warning" hidden><span class="icon" data-icon="exclamation-point-short"></span></span></span><span class="outline-item-label">Dictionaries</span></a>
+            <a href="#!dictionaries"     class="outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="book"></span><span class="outline-item-left-warning-badge no-dictionaries-enabled-warning" hidden><span class="icon" data-icon="exclamation-point-short"></span></span></span><span class="outline-item-label">Dictionaries</span></a>
             <a href="#!general"          class="outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="cog"></span></span><span class="outline-item-label">General</span></a>
             <a href="#!scanning"         class="outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="scanning"></span></span><span class="outline-item-label">Scanning</span></a>
             <a href="#!popup"            class="outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="popup"></span></span><span class="outline-item-label">Popup</span></a>
@@ -119,7 +119,7 @@
     <!-- Dictionaries -->
     <div class="heading-container">
         <div class="heading-container-icon"><span class="icon" data-icon="book"></span></div>
-        <div class="heading-container-left"><h2 id="dictionaries"><a href="#!dictionaries">Dictionaries</a> <span class="heading-sub-text no-wrap" data-modal-action="show,dictionaries">(<span id="dictionary-install-count">#</span> installed)</span></h2></div>
+        <div class="heading-container-left"><h2 id="dictionaries"><a href="#!dictionaries">Dictionaries</a> <span class="heading-sub-text no-wrap" data-modal-action="show,dictionaries">(<span id="dictionary-install-count">#</span> installed, <span id="dictionary-enabled-count">#</span> enabled)</span></h2></div>
     </div>
     <div class="settings-group">
         <div class="settings-item settings-item-button" data-modal-action="show,dictionaries"><div class="settings-item-inner">