Add: handle styleUpdated message

background/style-manager.js

@@ -281,7 +281,7 @@ const styleManager = (() => {
     // FIXME: do we want to cache this? Who would like to open popup rapidly
     // or search the DB with the same URL?
     const result = [];
-    const datas = !id ? styles.values.map(s => s.data) :
+    const datas = !id ? [...styles.values()].map(s => s.data) :
       styles.has(id) ? [styles.get(id).data] : [];
     for (const data of datas) {
       let excluded = false;

popup/popup.js

@@ -53,7 +53,7 @@ function onRuntimeMessage(msg) {
     case 'styleUpdated':
     case 'exclusionsUpdated':
       if (msg.reason === 'editPreview' || msg.reason === 'editPreviewEnd') return;
-      handleUpdate(msg.style);
+      handleUpdate(msg);
       break;
     case 'styleDeleted':
       handleDelete(msg.style.id);
@@ -499,20 +499,31 @@ Object.assign(handleEvent, {
 });
 
 
-function handleUpdate(style) {
+function handleUpdate({style, reason}) {
-  if ($(ENTRY_ID_PREFIX + style.id)) {
+  if (!tabURL) return;
-    createStyleElement({style, check: true});
+
+  fetchStyle()
+    .then(style => {
+      if (!style) {
+        return;
+      }
+      if ($(ENTRY_ID_PREFIX + style.id)) {
+        createStyleElement({style});
         return;
       }
-  if (!tabURL) return;
-  // Add an entry when a new style for the current url is installed
-  API.getStylesByUrl(tabURL, style.id).then(([style]) => {
-    if (style) {
       document.body.classList.remove('blocked');
       $$.remove('.blocked-info, #no-styles');
-      createStyleElement({style, check: true});
+      createStyleElement({style});
+    })
+    .catch(console.error);
+
+  function fetchStyle() {
+    if (reason === 'toggle' && $(ENTRY_ID_PREFIX + style.id)) {
+      return Promise.resolve(style);
+    }
+    return API.getStylesByUrl(tabURL, style.id)
+      .then(([style]) => style);
   }
-  });
 }