Database change event (#826)

* Add api.triggerDatabaseUpdated and yomichan.on('databaseUpdated')

* Update databaseUpdated event usage

6 files changed, 29 insertions, 22 deletions

diff --git a/ext/bg/js/backend.js b/ext/bg/js/backend.js
index 0c7dc768..ceb1e257 100644
--- a/ext/bg/js/backend.js
+++ b/ext/bg/js/backend.js
@@ -115,7 +115,8 @@ class Backend {
             ['setAllSettings',               {async: true,  contentScript: false, handler: this._onApiSetAllSettings.bind(this)}],
             ['getOrCreateSearchPopup',       {async: true,  contentScript: true,  handler: this._onApiGetOrCreateSearchPopup.bind(this)}],
             ['isTabSearchPopup',             {async: true,  contentScript: true,  handler: this._onApiIsTabSearchPopup.bind(this)}],
-            ['getDefinitionAudio',           {async: true,  contentScript: true,  handler: this._onApiGetDefinitionAudio.bind(this)}]
+            ['getDefinitionAudio',           {async: true,  contentScript: true,  handler: this._onApiGetDefinitionAudio.bind(this)}],
+            ['triggerDatabaseUpdated',       {async: false, contentScript: true,  handler: this._onApiTriggerDatabaseUpdated.bind(this)}]
         ]);
         this._messageHandlersWithProgress = new Map([
             ['deleteDictionary',        {async: true,  contentScript: false, handler: this._onApiDeleteDictionary.bind(this)}]
@@ -709,6 +710,7 @@ class Backend {
     async _onApiPurgeDatabase() {
         this._translator.clearDatabaseCaches();
         await this._dictionaryDatabase.purge();
+        this._triggerDatabaseUpdated('dictionary', 'purge');
     }
 
     async _onApiGetMedia({targets}) {
@@ -751,6 +753,7 @@ class Backend {
     async _onApiDeleteDictionary({dictionaryName}, sender, onProgress) {
         this._translator.clearDatabaseCaches();
         await this._dictionaryDatabase.deleteDictionary(dictionaryName, {rate: 1000}, onProgress);
+        this._triggerDatabaseUpdated('dictionary', 'delete');
     }
 
     async _onApiModifySettings({targets, source}) {
@@ -807,6 +810,10 @@ class Backend {
         return this._getDefinitionAudio(sources, expression, reading, details);
     }
 
+    _onApiTriggerDatabaseUpdated({type, cause}) {
+        this._triggerDatabaseUpdated(type, cause);
+    }
+
     // Command handlers
 
     async _onCommandSearch(params) {
@@ -1720,4 +1727,8 @@ class Backend {
             default: throw new Error('Unknown image media type');
         }
     }
+
+    _triggerDatabaseUpdated(type, cause) {
+        this._sendMessageAllTabs('databaseUpdated', {type, cause});
+    }
 }
diff --git a/ext/bg/js/settings/dictionary-controller.js b/ext/bg/js/settings/dictionary-controller.js
index 9292d2c4..eccb0e88 100644
--- a/ext/bg/js/settings/dictionary-controller.js
+++ b/ext/bg/js/settings/dictionary-controller.js
@@ -307,8 +307,6 @@ class SettingsDictionaryEntryUI {
             prevention.end();
             this.isDeleting = false;
             progress.hidden = true;
-
-            this.parent.trigger('databaseUpdated');
         }
     }
 
@@ -397,13 +395,13 @@ class DictionaryController {
         );
         this._dictionaryUI.save = () => this._settingsController.save();
         this._dictionaryUI.preventPageExit = this._preventPageExit.bind(this);
-        this._dictionaryUI.on('databaseUpdated', this._onDatabaseUpdated.bind(this));
 
         document.querySelector('#dict-main').addEventListener('change', this._onDictionaryMainChanged.bind(this), false);
         document.querySelector('#database-enable-prefix-wildcard-searches').addEventListener('change', this._onDatabaseEnablePrefixWildcardSearchesChanged.bind(this), false);
 
         this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this));
-        this._settingsController.on('databaseUpdated', this._onDatabaseUpdated.bind(this));
+
+        yomichan.on('databaseUpdated', this._onDatabaseUpdated.bind(this));
 
         await this._onOptionsChanged();
         await this._onDatabaseUpdated();
diff --git a/ext/bg/js/settings/dictionary-import-controller.js b/ext/bg/js/settings/dictionary-import-controller.js
index b10c87d0..cce695d0 100644
--- a/ext/bg/js/settings/dictionary-import-controller.js
+++ b/ext/bg/js/settings/dictionary-import-controller.js
@@ -110,8 +110,6 @@ class DictionaryImportController {
             if (errors.length > 0) {
                 this._showErrors(errors);
             }
-
-            this._triggerDatabaseUpdated('purge');
         } catch (error) {
             this._showErrors([error]);
         } finally {
@@ -178,6 +176,7 @@ class DictionaryImportController {
             const dictionaryImporter = new DictionaryImporter();
             const archiveContent = await this._readFile(file);
             const {result, errors} = await dictionaryImporter.importDictionary(dictionaryDatabase, archiveContent, importDetails, onProgress);
+            api.triggerDatabaseUpdated('dictionary', 'import');
             const errors2 = await this._addDictionarySettings(result.sequenced, result.title);
 
             if (errors.length > 0) {
@@ -185,8 +184,6 @@ class DictionaryImportController {
                 allErrors.push(new Error(`Dictionary may not have been imported properly: ${allErrors.length} error${allErrors.length === 1 ? '' : 's'} reported.`));
                 this._showErrors(allErrors);
             }
-
-            this._triggerDatabaseUpdated('import');
         } finally {
             dictionaryDatabase.close();
         }
@@ -271,10 +268,6 @@ class DictionaryImportController {
         this._errorContainer.hidden = true;
     }
 
-    _triggerDatabaseUpdated(cause) {
-        this._settingsController.triggerDatabaseUpdated(cause);
-    }
-
     _readFile(file) {
         return new Promise((resolve, reject) => {
             const reader = new FileReader();
diff --git a/ext/bg/js/settings/settings-controller.js b/ext/bg/js/settings/settings-controller.js
index d2656beb..4e61e05c 100644
--- a/ext/bg/js/settings/settings-controller.js
+++ b/ext/bg/js/settings/settings-controller.js
@@ -125,10 +125,6 @@ class SettingsController extends EventDispatcher {
         return obj;
     }
 
-    triggerDatabaseUpdated(cause) {
-        this.trigger('databaseUpdated', {cause});
-    }
-
     // Private
 
     _setProfileIndex(value) {
diff --git a/ext/mixed/js/api.js b/ext/mixed/js/api.js
index fce8fbee..ad5846fa 100644
--- a/ext/mixed/js/api.js
+++ b/ext/mixed/js/api.js
@@ -197,6 +197,10 @@ const api = (() => {
             return this._invoke('getDefinitionAudio', {sources, expression, reading, details});
         }
 
+        triggerDatabaseUpdated(type, cause) {
+            return this._invoke('triggerDatabaseUpdated', {type, cause});
+        }
+
         // Invoke functions with progress
 
         deleteDictionary(dictionaryName, onProgress) {
diff --git a/ext/mixed/js/yomichan.js b/ext/mixed/js/yomichan.js
index 217721bd..47c63e38 100644
--- a/ext/mixed/js/yomichan.js
+++ b/ext/mixed/js/yomichan.js
@@ -56,11 +56,12 @@ const yomichan = (() => {
             this._isBackendReadyPromiseResolve = resolve;
 
             this._messageHandlers = new Map([
-                ['isReady',        {async: false, handler: this._onMessageIsReady.bind(this)}],
-                ['backendReady',   {async: false, handler: this._onMessageBackendReady.bind(this)}],
-                ['getUrl',         {async: false, handler: this._onMessageGetUrl.bind(this)}],
-                ['optionsUpdated', {async: false, handler: this._onMessageOptionsUpdated.bind(this)}],
-                ['zoomChanged',    {async: false, handler: this._onMessageZoomChanged.bind(this)}]
+                ['isReady',         {async: false, handler: this._onMessageIsReady.bind(this)}],
+                ['backendReady',    {async: false, handler: this._onMessageBackendReady.bind(this)}],
+                ['getUrl',          {async: false, handler: this._onMessageGetUrl.bind(this)}],
+                ['optionsUpdated',  {async: false, handler: this._onMessageOptionsUpdated.bind(this)}],
+                ['databaseUpdated', {async: false, handler: this._onMessageDatabaseUpdated.bind(this)}],
+                ['zoomChanged',     {async: false, handler: this._onMessageZoomChanged.bind(this)}]
             ]);
         }
 
@@ -290,6 +291,10 @@ const yomichan = (() => {
             this.trigger('optionsUpdated', {source});
         }
 
+        _onMessageDatabaseUpdated({type, cause}) {
+            this.trigger('databaseUpdated', {type, cause});
+        }
+
         _onMessageZoomChanged({oldZoomFactor, newZoomFactor}) {
             this.trigger('zoomChanged', {oldZoomFactor, newZoomFactor});
         }