Add separate whitelist and blocklist

background.js

@@ -15,7 +15,7 @@ loadRingIfNecessary();
 
 function defaultPrefs() {
   return {
-    siteList: [
+    siteBlacklist: [
       'facebook.com',
       'youtube.com',
       'twitter.com',
@@ -28,6 +28,7 @@ function defaultPrefs() {
       'addictinggames.com',
       'hulu.com'
     ],
+    siteWhitelist: [],
     durations: { // in seconds
       work: 25 * 60,
       break: 5 * 60
@@ -52,14 +53,20 @@ function updatePrefsFormat(prefs) {
   // compatibility issue. However, in more complicated situations, we need
   // to modify an old PREFS module's structure for compatibility.
 
-  if(prefs.hasOwnProperty('domainBlacklist')) {
-    // Upon adding the whitelist feature, the domainBlacklist property was
-    // renamed to siteList for clarity.
+  if(prefs.hasOwnProperty('siteList')) {
+    // Upon adding a separate blacklist and whitelist, the siteList property
+    // is renamed to either siteBlacklist or siteWhitelist.
 
-    prefs.siteList = prefs.domainBlacklist;
-    delete prefs.domainBlacklist;
+    if (prefs.whitelist) {
+      prefs.siteBlacklist = defaultPrefs().siteBlacklist;
+      prefs.siteWhitelist = prefs.siteList;
+    } else {
+      prefs.siteBlacklist = prefs.siteList;
+      prefs.siteWhitelist = defaultPrefs().siteWhitelist;
+    }
+    delete prefs.siteList;
     savePrefs(prefs);
-    console.log("Renamed PREFS.domainBlacklist to PREFS.siteList");
+    console.log("Renamed PREFS.siteList to PREFS.siteBlacklist/siteWhitelist");
   }
 
   if(!prefs.hasOwnProperty('showNotifications')) {
@@ -249,8 +256,9 @@ function domainsMatch(test, against) {
 }
 
 function isLocationBlocked(location) {
-  for(var k in PREFS.siteList) {
-    listedPattern = parseLocation(PREFS.siteList[k]);
+  var siteList = PREFS.whitelist ? PREFS.siteWhitelist : PREFS.siteBlacklist;
+  for(var k in siteList) {
+    listedPattern = parseLocation(siteList[k]);
     if(locationsMatch(location, listedPattern)) {
       // If we're in a whitelist, a matched location is not blocked => false
       // If we're in a blacklist, a matched location is blocked => true

options.html

@@ -36,7 +36,7 @@
         padding: 0;
       }
 
-      #site-list {
+      .site-list {
         border: 1px solid #aaa;
         height: 15em;
         width: 25em;
@@ -115,7 +115,8 @@ <h1 data-i18n="options_title"></h1>
           </select>
           <span data-i18n="options_site_list_header"></span>
         </header>
-        <textarea id="site-list"></textarea>
+        <textarea id="whitelist" class="site-list" ></textarea>
+        <textarea id="blacklist" class="site-list" ></textarea>
         <p class="note" data-i18n="options_site_list_info"></p>
         <p class="note" data-i18n="options_site_list_syntax"></p>
       </div>

options.js

@@ -21,8 +21,9 @@ for(var i = 0; i < localizedElements.length; i++) {
 */
 
 var form = document.getElementById('options-form'),
-  siteListEl = document.getElementById('site-list'),
-  whitelistEl = document.getElementById('blacklist-or-whitelist'),
+  siteWhitelistEl = document.getElementById('whitelist'),
+  siteBlacklistEl = document.getElementById('blacklist'),
+  whitelistSelectEl = document.getElementById('blacklist-or-whitelist'),
   showNotificationsEl = document.getElementById('show-notifications'),
   shouldRingEl = document.getElementById('should-ring'),
   clickRestartsEl = document.getElementById('click-restarts'),
@@ -58,33 +59,47 @@ form.onsubmit = function () {
   console.log(durations);
 
   background.setPrefs({
-    siteList:           siteListEl.value.split(/\r?\n/),
+    siteWhitelist:    siteWhitelistEl.value.split(/\r?\n/),
+    siteBlacklist:    siteBlacklistEl.value.split(/\r?\n/),
     durations:          durations,
     showNotifications:  showNotificationsEl.checked,
     shouldRing:         shouldRingEl.checked,
     clickRestarts:      clickRestartsEl.checked,
-    whitelist:          whitelistEl.selectedIndex == 1
+    whitelist:          whitelistSelectEl.selectedIndex == 1
   })
   saveSuccessfulEl.className = 'show';
   return false;
 }
 
-siteListEl.onfocus = formAltered;
+siteBlacklistEl.onfocus = formAltered;
+siteWhitelistEl.onfocus = formAltered;
 showNotificationsEl.onchange = formAltered;
 shouldRingEl.onchange = formAltered;
 clickRestartsEl.onchange = formAltered;
-whitelistEl.onchange = formAltered;
+whitelistSelectEl.onchange = function() { setListVisibility(); formAltered(); };
+
+function setListVisibility() {
+  if (whitelistSelectEl.selectedIndex) {
+    siteBlacklistEl.style.display = 'none';
+    siteWhitelistEl.style.display = 'inline';
+  } else {
+    siteBlacklistEl.style.display = 'inline';
+    siteWhitelistEl.style.display = 'none';
+  }
+}
 
 function formAltered() {
   saveSuccessfulEl.removeAttribute('class');
   timeFormatErrorEl.removeAttribute('class');
 }
 
-siteListEl.value = background.PREFS.siteList.join("\n");
+siteBlacklistEl.value = background.PREFS.siteBlacklist.join("\n");
+siteWhitelistEl.value = background.PREFS.siteWhitelist.join("\n");
 showNotificationsEl.checked = background.PREFS.showNotifications;
 shouldRingEl.checked = background.PREFS.shouldRing;
 clickRestartsEl.checked = background.PREFS.clickRestarts;
-whitelistEl.selectedIndex = background.PREFS.whitelist ? 1 : 0;
+whitelistSelectEl.selectedIndex = background.PREFS.whitelist ? 1 : 0;
+setListVisibility();
 
 var duration, minutes, seconds;
 for(var key in durationEls) {
@@ -102,8 +117,9 @@ for(var key in durationEls) {
 }
 
 function setInputDisabled(state) {
-  siteListEl.disabled = state;
-  whitelistEl.disabled = state;
+  siteBlacklistEl.disabled = state;
+  siteWhitelistEl.disabled = state;
+  whitelistSelectEl.disabled = state;
   for(var key in durationEls) {
     durationEls[key].disabled = state;
   }