Implemented basic popup and emotion thermometer

KeepCalm Chrome Extension/css/style.css

@@ -0,0 +1,39 @@
+body {
+  font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
+  font-size: 100%;
+  padding: 0 10px 0 10px;
+  width: 300px;
+}
+h3,
+h4,
+h5 {
+  text-align: center;
+}
+section#keepcalm-content {
+  display: flex;
+}
+section#keepcalm-content .green {
+  color: #419900;
+}
+section#keepcalm-content .red {
+  color: #CF0B00;
+}
+section#keepcalm-content .gray {
+  color: #ACACAC;
+}
+section#keepcalm-content .thermometer {
+  display: block;
+  padding: 5px;
+  margin-top: auto;
+  margin-bottom: auto;
+}
+section#keepcalm-content .thermometer i {
+  font-size: 55pt;
+}
+section#keepcalm-content .info {
+  display: block;
+  padding: 5px;
+}
+section#keepcalm-content .info h4 {
+  font-weight: 200;
+}

KeepCalm Chrome Extension/css/style.less

@@ -0,0 +1,49 @@
+//Variables
+@theme-green: #419900;
+@theme-gray: #ACACAC;
+@theme-red: #CF0B00;
+
+body {
+    font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
+    font-size: 100%;
+    padding: 0 10px 0 10px;
+    width: 300px;
+}
+
+h3, h4, h5 {
+    text-align: center;
+}
+
+section#keepcalm-content {
+    display: flex;
+    .green {
+        color: @theme-green;
+    }
+
+    .red {
+        color: @theme-red;
+    }
+
+    .gray {
+        color: @theme-gray;
+    }
+
+    .thermometer {
+        display: block;
+        padding: 5px;
+        margin-top: auto;
+        margin-bottom: auto;
+        i {
+            font-size: 55pt;
+        }
+    }
+
+    .info {
+        display: block;
+        padding: 5px;
+
+        h4 {
+            font-weight: 200;
+        }
+    }
+}

KeepCalm Chrome Extension/js/background.js

@@ -1,8 +1,12 @@
 /**
  *
  * @param color to paint the icon
- * @param tab	the tab of the brawser to set the icon
+ * @param tab   the tab of the brawser to set the icon
  */
+
+let results = null;
+
+
 function alterIcon(color, tab) {
 	chrome.browserAction.setIcon(
 		{
@@ -35,7 +39,19 @@ chrome.runtime.onMessage.addListener(
 			"from a content script:" + sender.tab.url :
 			"from the extension");
 
-		sendResponse({status: "OK"});
-		let color = request.color;
-		alterIcon(color, sender.tab);
+		if (request.method === 'setResults') {
+			results = request.results;
+			sendResponse({status: "Results updated"});
+		}
+
+		// When we get a message from the popup
+		else if (request.method === 'getResults'){
+			sendResponse(results);
+		}
+
+		else if (request.method === 'setIcon'){
+			let color = request.color;
+			sendResponse({status: "Icon Updated"});
+			alterIcon(color, sender.tab);
+		}
 	});

KeepCalm Chrome Extension/js/main.js

@@ -1,10 +1,52 @@
 document.addEventListener('DOMContentLoaded', function () {
-		let imageResult = document.getElementById('image-result');
-		let img = document.createElement("img");
-		img.setAttribute("src", "http://lorempixel.com/400/400/cats/");
-		// Explicitly set the width/height to minimize the number of reflows. For
-		// a single image, this does not matter, but if you're going to embed
-		// multiple external images in your page, then the absence of width/height
-		// attributes causes the popup to resize multiple times.
-		imageResult.appendChild(img);
+	//gets the atual results of classifications
+	chrome.runtime.sendMessage({'method': 'getResults'}, function (response) {
+		console.log(response);
+
+		let keepcalmSection = document.getElementById("keepcalm-content"),
+			statusIcon = keepcalmSection.querySelector(".thermometer i"),
+			infoContainer = keepcalmSection.querySelector(".info");
+
+		console.log(infoContainer);
+
+		if (response) {
+			let titleElement = document.createElement('div');
+			titleElement.innerHTML = `O texto <b> "${response.text}"</b> foi classificado como:"`;
+			let resultComponent = document.createElement('h3');
+			resultComponent.innerText = response.effectiveResult;
+
+			if (response.effectiveResult === "Agressivo") {
+				clearClassList(statusIcon);
+				statusIcon.classList.add("fas", "fa-thermometer-full", "red");
+			}
+			else if (response.effectiveResult === "Não Agressivo") {
+				clearClassList(statusIcon);
+				statusIcon.classList.add("fas", "fa-thermometer-empty", "green");
+			}
+
+			infoContainer.innerHTML = "";
+			infoContainer.appendChild(titleElement);
+			infoContainer.appendChild(resultComponent);
+
+		}
+		else {
+			clearClassList(statusIcon);
+			statusIcon.classList.add("fas", "fa-thermometer-empty", "gray");
+
+			let titleElement = document.createElement('h4');
+			titleElement.innerText = "KeepCalm é um detector de conteúdo agressivo que monitora o que você digita na internet.";
+
+			infoContainer.innerHTML = "";
+			infoContainer.appendChild(titleElement)
+
+		}
+	});
 });
+
+/**
+ * Clear all classes of a Html Element
+ * @param element to be cleared
+ */
+function clearClassList(element) {
+	element.className = "";
+}

KeepCalm Chrome Extension/js/watcher.js

@@ -4,22 +4,23 @@
 
 (function () {
 	"use strict";
-	let serverHost = "http://localhost:8082/classify";
+	let serverHost = "http://localhost:8083/classify";
 
+	//get all input fields and apply listener
 	let inputFields = document.querySelectorAll("input, textarea");
-
 	inputFields.forEach((inputField) => {
 		inputField.addEventListener("input", debounce(getClassification, 2000));
 	});
 
+	//inject CSS style on page
 	let style = document.createElement('style');
 	style.type = 'text/css';
 	style.innerHTML = '.keepcalm-agressive { border-color: red; border-width: 3px; border-radius: 3px; }';
 	document.getElementsByTagName('head')[0].appendChild(style);
 
 
 	/**
-	 * Makes a request to server to obtain classification for the text inputed on target element and event
+	 * Makes a request to server to obtain classification for the text inputed on target element and event, then call the browser to update the icon and popup
 	 */
 	function getClassification() {
 		console.log("Obtendo classificação...");
@@ -35,27 +36,28 @@
 			xmlHttp.onload = function (data) {
 				let results = JSON.parse(xmlHttp.responseText);
 				console.log(results);
-				let iconColor = "green";
+				let iconColor = "gray";
 
-				if (results.effectiveResult === "Agressivo") {
-					iconColor = "red";
-					targetField.classList.add("keepcalm-agressive");
-				}
-				else {
-					iconColor = "green";
-					targetField.classList.remove("keepcalm-agressive");
+				if (results) {
+					if (results.effectiveResult === "Agressivo") {
+						iconColor = "red";
+						targetField.classList.add("keepcalm-agressive");
+					}
+					else {
+						iconColor = "green";
+						targetField.classList.remove("keepcalm-agressive");
+					}
 				}
 
-				//sends a message to the background script
-				chrome.runtime.sendMessage({color: iconColor}, function (response) {
-					console.log(response.status);
-				});
+				setIconOnTab(iconColor);
+				setResultsOnPopup(results)
 			};
-
 			xmlHttp.send(JSON.stringify({"target": targetText}));
 		}
 		else {
 			targetField.classList.remove("keepcalm-agressive");
+			setIconOnTab("gray");
+			setResultsOnPopup(null);
 		}
 	}
 
@@ -82,4 +84,22 @@
 		};
 	}
 
+	/**
+	 * Sends a message to the background script whith the icon color
+	 * @param color the be set on browser tab
+	 */
+	function setIconOnTab(color) {
+		chrome.runtime.sendMessage({method: 'setIcon', color: color}, function (response) {
+			console.log(response.status);
+		});
+	}
+
+	/**
+	 * Sends a message to the popup with the server results
+	 * @param results
+	 */
+	function setResultsOnPopup(results) {
+		chrome.runtime.sendMessage({method: 'setResults', 'results': results});
+	}
+
 }());