1 files changed, 17 insertions, 41 deletions

diff --git a/extension/popup/main.js b/extension/popup/main.js
index 6175e36..06aca18 100644
--- a/extension/popup/main.js
+++ b/extension/popup/main.js
@@ -9,7 +9,7 @@ function changeScreen(id) {
 }
 
 function loadTrackList(opts) {
-    const {hostname, siteSettings} = opts;
+    const {tab, hostname, siteSettings} = opts;
     const site = siteSettings[hostname] || [];
     return browser.storage.sync.get('tracks').then(({tracks = []}) => {
         const ul = document.getElementById('track-list');
@@ -67,9 +67,17 @@ function loadTrackList(opts) {
             deleteButton.addEventListener('click', () => {
                 if (confirm(`This will delete "${track}" from ALL sites - this cannot be undone. Are you sure?`)) {
                     changeScreen('loading-screen');
-                    browser.storage.sync.set({tracks: tracks.filter(t => t !== track)})
-                        .then(() => loadTrackList(opts))
-                        .then(() => changeScreen('main-screen'));
+                    tracks = tracks.filter(t => t !== track);
+                    for (const site of Object.values(siteSettings)) {
+                        while (site.includes(track)) {
+                            site.splice(site.indexOf(track, 1));
+                        }
+                    }
+                    Promise.all([
+                        browser.runtime.sendMessage({type: 'deleteTrack', trackName: track}),
+                        browser.storage.sync.set({tracks, siteSettings})
+                            .then(() => loadTrackList(opts))
+                    ]).then(() => changeScreen('main-screen'));
                 }
             });
         }
@@ -85,41 +93,9 @@ function loadTrackList(opts) {
         addButton.appendChild(document.createTextNode('Create Track'));
         addButton.title = `Creates a new track, which will be an option present in all sites.`;
 
-        let newTrackInput = null;
         addButton.addEventListener('click', () => {
-            if (newTrackInput) {
-                newTrackInput.focus();
-                return;
-            }
-
-            const li = document.createElement('li');
-            li.classList.add('track');
-            ul.insertBefore(li, actionLi);
-
-            newTrackInput = document.createElement('input');
-            li.appendChild(newTrackInput);
-
-            const saveButton = document.createElement('button');
-            li.appendChild(saveButton);
-
-            saveButton.appendChild(document.createTextNode('Save'));
-
-            saveButton.addEventListener('click', () => {
-                while (li.firstChild) {
-                    li.removeChild(li.firstChild);
-                }
-                li.appendChild(document.createTextNode('Saving...'));
-
-                const name = newTrackInput.value.trim();
-                if (name.length) {
-                    changeScreen('loading-screen');
-                    browser.storage.sync.set({tracks: tracks.concat([name])})
-                        .then(() => loadTrackList(opts))
-                        .then(() => changeScreen('main-screen'));
-                }
-            });
-
-            newTrackInput.focus();
+            browser.tabs.sendMessage(tab.id, {createTrack: true});
+            window.close();
         });
 
         const disableButton = document.createElement('button');
@@ -161,14 +137,14 @@ Promise.all([
                 .then(() => browser.runtime.sendMessage({hostname}));
         });
 
-        return hostname;
+        return {tab, hostname};
     })(),
     browser.storage.sync.get('siteSettings')
         .then(({siteSettings = {}}) => siteSettings)
 ])
-    .then(([hostname, siteSettings]) => {
+    .then(([{tab, hostname}, siteSettings]) => {
         if (hostname) {
-            return loadTrackList({hostname, siteSettings})
+            return loadTrackList({tab, hostname, siteSettings})
                 .then(() => changeScreen('main-screen'));
         } else {
             changeScreen('invalid-host-screen');