Update rule list as soon as a new rule is added

I.e. by saving. Also reflect changes in the rule list when the rule's
scope is modified.

1 files changed, 3 insertions, 1 deletions

diff --git a/extension/popup/main.js b/extension/popup/main.js
index c628447..1bf653a 100644
--- a/extension/popup/main.js
+++ b/extension/popup/main.js
@@ -33,6 +33,7 @@ function changeContentScreen(id) {
 function loadTrackList(opts) {
     const {tab, rule, saveRule, deleteRule} = opts;
     const {music} = rule;
+    saveRule();
     return browser.storage.sync.get('tracks').then(({tracks = []}) => {
         const ul = document.getElementById('track-list');
         while (ul.firstChild) {
@@ -385,7 +386,8 @@ Promise.all([
                             siteSettings.push(rule);
                         }
                         return browser.storage.sync.set({siteSettings})
-                            .then(() => browser.runtime.sendMessage({music: rule.music}));
+                            .then(() => browser.runtime.sendMessage({music: rule.music}))
+                            .then(() => reloadRuleList());
                     },
                     deleteRule: () => {
                         changeScreen('loading-screen');