Added whitelist mode support in popup UI

popup.css

@@ -1,3 +1,7 @@
+/***********/
+/* GENERAL */
+/***********/
+
 html {
 	font-size: 16px;
 	box-sizing: border-box;
@@ -9,6 +13,11 @@ body {
 	margin: 0;
 	padding: 0;
 }
+
+/***********/
+/* BUTTONS */
+/***********/
+
 button {
 	-webkit-appearance: none;
 	-moz-appearance: none;
@@ -25,6 +34,11 @@ button:focus {
 button::selection {
 	background-color: transparent;
 }
+
+/***************/
+/* MAIN BUTTON */
+/***************/
+
 .main-button-container {
 	display: flex;
 	flex-flow: column;
@@ -70,6 +84,18 @@ button.main-button::after {
 button.main-button.active::after {
 	opacity: 1.0;
 }
+
+button.main-button.whitelist::after {
+	opacity: 0.15;
+}
+button.main-button.whitelist.active::after {
+	opacity: 0.0;
+}
+
+/*********************/
+/* AUXILIARY BUTTONS */
+/*********************/
+
 .aux-button-container {
 	display: flex;
 	flex-flow: column;
@@ -96,6 +122,15 @@ button.options-button::after {
 	content: "Options";
 	margin: 0 3px 0 0;
 }
+
+/********/
+/* MISC */
+/********/
+
+.misc {
+	height: 4rem;
+	position: relative;
+}
 button.reload-button {
 	background-color: #ffd;
 	margin: 4px;
@@ -123,8 +158,3 @@ button.reload-button::before {
 	font-size: 2rem;
 	font-weight: 900;
 }
-
-.misc {
-	height: 4rem;
-	position: relative;
-}

popup.js

@@ -49,7 +49,17 @@ function toggleState() {
 			);
 		}
 	} else { // if whitelist mode
-		// TODO: code this!
+		if (ASK.pageExcluded) {
+		/*	In this case, stickies are NOT being killed. We must remove all
+			applicable exclusion patterns. */
+			ASK.exclusionPatterns = ASK.exclusionPatterns.filter(pattern =>
+				!ASK.activeTabLocation.match(new RegExp(pattern))
+			);
+		} else {
+		/*	In this case, stickies ARE being killed. We must add an exclusion
+			pattern. */
+			ASK.exclusionPatterns.push(regExpForCurrentTab());
+		}
 	}
 	recalculatePatternEffects();
 }
@@ -91,18 +101,20 @@ function updateState(result) {
 
 function updateUIState() {
 	let button = document.querySelector("button.main-button");
-	if (ASK.mode == "blacklist" && ASK.pageMatched && !ASK.pageExcluded) {
-		button.classList.toggle("active", true);
-// 		button.innerHTML = "X";
-	} else if (ASK.mode == "blacklist" && (!ASK.pageMatched || ASK.pageExcluded)) {
-		button.classList.toggle("active", false);
-// 		button.innerHTML = "O";
-	} else if (ASK.mode == "whitelist" && !ASK.pageExcluded) {
-		button.classList.toggle("active", false);
-// 		button.innerHTML = "X";
-	} else if (ASK.mode == "whitelist" && ASK.pageExcluded) {
-		button.classList.toggle("active", true);
-// 		button.innerHTML = "O";
+	if (ASK.mode == "blacklist") {
+		if (ASK.pageMatched && !ASK.pageExcluded) {
+			button.classList.toggle("active", true);
+		} else {
+			button.classList.toggle("active", false);
+		}
+		button.classList.toggle("whitelist", false);
+	} else {
+		if (!ASK.pageExcluded) {
+			button.classList.toggle("active", false);
+		} else {
+			button.classList.toggle("active", true);
+		}
+		button.classList.toggle("whitelist", true);
 	}
 }