Update custom sites (user-interface)

Now delete custom sites from list.

options.html

@@ -18,6 +18,7 @@
   <div>
     Selected sites will have their cookies cleared and referer set to Google. You should
     uncheck sites you have an account with or else you will be logged out at every visit.
+    Add your <a href="options_custom.html">custom sites</a>.
   </div>
   <br/>
   <div id='bypass_sites'></div>

options_custom.html

@@ -18,9 +18,8 @@
   <div>
     Add new site: enter unique title/domain (without www.)<br/>
     & options for googlebot/block javascript (only on (sub)domain).<br/>
-    Enable new site in options (cookies removed by default).<br/>
-    Redefine options of custom site by adding entry with same title.
-  <br/><br/>
+    Enable new site in <a href="options.html">options</a> (cookies removed by default).
+    <br/><br/>
   </div>
   <div id='add_site'></div>
     <br/>
@@ -28,6 +27,18 @@
     <button id="add">Add</button>
   </span> 
   <div style="clear:both;"></div>
+  <div>
+  <div>
+    List of custom sites<br/>
+    Disable deleted sites in <a href="options.html">options</a>.
+  <br/><br/>
+  </div>
+  <div id='custom_sites'></div>
+    <br/>
+  <span style='float:left;padding-bottom:20px'>
+    <button id="delete">Delete</button>
+  </span> 
+  <div style="clear:both;"></div>
   <div>
     Current custom sites (edit textarea & save).<br/>
     Saves only when valid json-text; clear & save to reset.<br/>

options_custom.js

@@ -9,9 +9,9 @@ function save_options() {
     chrome.storage.sync.set({
         sites_custom: sites_custom
     }, function () {
-        // Update status to let user know options were saved.
+        // Update status to let user know custom sites were saved.
         var status = document.getElementById('status');
-        status.textContent = 'Options saved.';
+        status.textContent = 'Custom sites saved.';
         setTimeout(function () {
             status.textContent = '';
             location.href = 'options.html';
@@ -58,12 +58,43 @@ function add_options() {
         chrome.storage.sync.set({
             sites_custom: sites_custom_old
         }, function () {
-            // Update status to let user know options were saved.
+            // Update status to let user know new custom site was added.
             var status = document.getElementById('status');
             status.textContent = 'Site added.';
             setTimeout(function () {
                 status.textContent = '';
-                location.href = 'options.html';
+                renderOptions();
+                //location.href = 'options.html';
+                //window.close();
+            }, 800);
+        });
+    });
+}
+
+// Delete custom site to chrome.storage
+function delete_options() {
+    var gh_url = document.getElementById('custom_sites').value;
+    var selectEl = document.querySelector('#custom_sites select');
+    var sites_custom = {};
+    var remove_key = selectEl.value;
+
+    // delete site from local storage
+    chrome.storage.sync.get({
+        sites_custom: {}
+    }, function (items) {
+        var sites_custom_old = items.sites_custom;
+        delete sites_custom_old[remove_key];
+
+        chrome.storage.sync.set({
+            sites_custom: sites_custom_old
+        }, function () {
+            // Update status to let user know custom site was deleted.
+            var status = document.getElementById('status');
+            status.textContent = 'Site deleted.';
+            setTimeout(function () {
+                status.textContent = '';
+                renderOptions();
+                //location.href = 'options.html';
                 //window.close();
             }, 800);
         });
@@ -77,6 +108,7 @@ function renderOptions() {
     }, function (items) {
         var sites_custom = items.sites_custom;
         var sitesEl = document.getElementById('bypass_sites');
+        sitesEl.innerHTML = '';
         var labelEl = document.createElement('label');
         var textareaEl = document.createElement('textarea');
         textareaEl.value = JSON.stringify(sites_custom);
@@ -87,6 +119,7 @@ function renderOptions() {
 
         // add site
         var add_sitesEl = document.getElementById('add_site');
+        add_sitesEl.innerHTML = '';
         var inputEl;
         var add_checkboxes = {
             'title': 0,
@@ -106,9 +139,30 @@ function renderOptions() {
             labelEl.appendChild(document.createTextNode(' ' + key));
             add_sitesEl.appendChild(labelEl);
         }
+
+        // list of custom sites
+        var custom_sitesEl = document.getElementById('custom_sites');
+        custom_sitesEl.innerHTML = '';
+        labelEl = document.createElement('label');
+        var selectEl = document.createElement('select');
+        selectEl.id = 'sites';
+        selectEl.size = 6;
+        var optionEl;
+        for (var key in sites_custom) {
+            optionEl = document.createElement('option');
+            optionEl.text = key + ': ' + sites_custom[key]['domain'] +
+                (sites_custom[key]['googlebot'] ? ' | googlebot' : '') + (sites_custom[key]['block_javascript'] ? ' | block javascript' : '');
+            optionEl.value = key;
+            selectEl.add(optionEl);
+        }
+        labelEl.appendChild(selectEl);
+        //labelEl.appendChild(document.createTextNode(''));
+        custom_sitesEl.appendChild(labelEl);
+
     });
 }
 
 document.addEventListener('DOMContentLoaded', renderOptions);
 document.getElementById('save').addEventListener('click', save_options);
-document.getElementById('add').addEventListener('click', add_options);
+document.getElementById('add').addEventListener('click', add_options);
+document.getElementById('delete').addEventListener('click', delete_options);