From 23d5da2ffc591c0b42e3e6caad91b0287d553423 Mon Sep 17 00:00:00 2001
From: EvolvedCode <nickstathas@outlook.com>
Date: Mon, 17 Oct 2016 21:09:51 +0300
Subject: [PATCH] Final

---
 beastify/README.md              |  3 +++
 beastify/popup/choose_beast.css |  7 +------
 beastify/popup/choose_beast.js  | 16 ++++++++--------
 3 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/beastify/README.md b/beastify/README.md
index 26443f1..54c9864 100644
--- a/beastify/README.md
+++ b/beastify/README.md
@@ -18,6 +18,8 @@ the name of the chosen beast.
 When the content script receives this message, it replaces the current page
 content with an image of the chosen beast.
 
+When the user clicks the reset button, the page reloads, and reverts to its original form.
+
 ## What it shows ##
 
 * write a browser action with a popup
@@ -25,3 +27,4 @@ content with an image of the chosen beast.
 * inject a content script programmatically using `tabs.executeScript()`
 * send a message from the main extension to a content script
 * use web accessible resources to enable web pages to load packaged content
+* reload web pages
diff --git a/beastify/popup/choose_beast.css b/beastify/popup/choose_beast.css
index 5f6f456..36c1068 100644
--- a/beastify/popup/choose_beast.css
+++ b/beastify/popup/choose_beast.css
@@ -10,7 +10,7 @@ html, body {
   cursor: pointer;
 }
 
-.button:hover {
+.beast:hover {
   background-color: #CFF2F2;
 }
 
@@ -25,8 +25,3 @@ html, body {
 .clear:hover {
   background-color: #EAEA9D;
 }
-
-.inactive {
-  opacity: 0;
-  pointer-events: none;
-}
diff --git a/beastify/popup/choose_beast.js b/beastify/popup/choose_beast.js
index 7355e78..c7dcb7b 100644
--- a/beastify/popup/choose_beast.js
+++ b/beastify/popup/choose_beast.js
@@ -12,18 +12,18 @@ function beastNameToURL(beastName) {
   }
 }
 
-
 /*
 Listen for clicks in the popup.
 
-If the click is not on one of the beasts, return early.
+If the click is on one of the beasts:
+  Inject the "beastify.js" content script in the active tab.
 
-Otherwise, the text content of the node is the name of the beast we want.
+  Then get the active tab and send "beastify.js" a message
+  containing the URL to the chosen beast's image.
 
-Inject the "beastify.js" content script in the active tab.
-
-Then get the active tab and send "beastify.js" a message
-containing the URL to the chosen beast's image.
+If it's on a button wich contains class "clear":
+  Reload the page.
+  Close the popup. This is needed, as the content script malfunctions after page reloads.
 */
 document.addEventListener("click", function(e) {
   if (e.target.classList.contains("beast")) {
@@ -37,7 +37,7 @@ document.addEventListener("click", function(e) {
     chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
       chrome.tabs.sendMessage(tabs[0].id, {beastURL: chosenBeastURL});
     });
-    
+
     return;
   }
   else if (e.target.classList.contains("clear")) {