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

@@ -1,17 +1,17 @@
 
-// Saves options to browser.storage
+// Saves options to chrome.storage
 function save_options() {
     var gh_url = document.getElementById('bypass_sites').value;
     var textareaEl = document.querySelector('#bypass_sites textarea');
     var sites_custom = {};
     if (textareaEl.value !== '')
         var sites_custom = JSON.parse(textareaEl.value);
-    browser.storage.sync.set({
+    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';
@@ -20,7 +20,7 @@ function save_options() {
     });
 }
 
-// Add custom site to browser.storage
+// Add custom site to chrome.storage
 function add_options() {
     var gh_url = document.getElementById('add_site').value;
     var inputEls = document.querySelectorAll('#add_site input');
@@ -46,7 +46,7 @@ function add_options() {
         sites_custom[title]['domain'] = sites_custom[title]['domain'].replace('www.', '');
 
     // add new site to local storage
-    browser.storage.sync.get({
+    chrome.storage.sync.get({
         sites_custom: {}
     }, function (items) {
         var sites_custom_old = items.sites_custom;
@@ -55,28 +55,60 @@ function add_options() {
             sites_custom_old[key] = sites_custom[key];
         }
 
-        browser.storage.sync.set({
+        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);
         });
     });
 }
 
-// Restores checkbox input states using the preferences stored in browser.storage.
+// 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);
+        });
+    });
+}
+
+// Restores checkbox input states using the preferences stored in chrome.storage.
 function renderOptions() {
-    browser.storage.sync.get({
+    chrome.storage.sync.get({
         sites_custom: {}
     }, 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);