Delay turning off PawBlock from the popup

Suggested by #4.

CHANGELOG.md

@@ -4,6 +4,8 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/).
 
 ## [Unreleased]
+### Changed
+- Delay turning off PawBlock from the toolbar popup
 
 ## [0.4.0] - 2018-01-22
 ### Changed

__tests__/.eslintrc.json

@@ -1,5 +1,6 @@
 {
   "env": {
-    "jest": true
+    "jest": true,
+    "node": true
   }
 }

__tests__/popup-test.js

@@ -1,9 +1,13 @@
+const fs = require('fs');
+const path = require('path');
+
 test('action popup', () => {
-  document.body.innerHTML = `
-    <a id="on-button"></a>
-    <a id="off-button"></a>
-    <a id="options-link"></a>
-  `;
+  const popup = fs.readFileSync(
+    path.join(__dirname, '../extension/popup.html'),
+    'utf-8'
+  );
+
+  document.write(popup);
 
   window.browser = {
     storage: {

extension/options.html

@@ -53,7 +53,7 @@ <h2 id="status-title" class="title is-3">
                     </p>
                 </div>
 
-                <p>This can also be quickly toggled using the toolbar button.</p>
+                <p>This can also be toggled using the toolbar button.</p>
 
                 <hr>
 

extension/popup.html

@@ -19,7 +19,7 @@ <h1 class="title is-4">
             </h1>
         </section>
 
-        <div id="buttons" class="field has-addons">
+        <div id="status-buttons" class="buttons field has-addons">
             <p class="control">
                 <a id="on-button" class="button">On</a>
             </p>
@@ -28,6 +28,25 @@ <h1 class="title is-4">
             </p>
         </div>
 
+        <div id="are-you-sure">
+            <p>Are you <b><i>sure</i></b> you want to turn it off?</p>
+
+            <div id="confirm-buttons" class="buttons field is-grouped">
+                <p class="control">
+                    <a id="cancel-button" class="button is-success">
+                        Never mind!
+                    </a>
+                </p>
+                <p class="control">
+                    <a id="confirm-button" class="button is-danger">
+                        Yes
+                    </a>
+                </p>
+            </div>
+
+            <img id="animal" src="images/sad-pug.svg">
+        </div>
+
         <a id="options-link">Edit your options</a>
 
         <script src="scripts/popup.js"></script>

extension/scripts/popup.js

@@ -5,10 +5,17 @@ if (
   window.browser = window.chrome;
 }
 
-var onButton = document.querySelector('#on-button');
-var offButton = document.querySelector('#off-button');
+const onButton = document.querySelector('#on-button');
+const offButton = document.querySelector('#off-button');
+const areYouSure = document.querySelector('#are-you-sure');
+const cancelButton = document.querySelector('#cancel-button');
+const confirmButton = document.querySelector('#confirm-button');
+let pawblockOn = false;
+let countdown;
 
 function setStatus(on, saveToStorage) {
+  pawblockOn = on;
+
   if (on) {
     onButton.classList.add('is-info');
     offButton.classList.remove('is-info');
@@ -23,7 +30,7 @@ function setStatus(on, saveToStorage) {
       if (error) {
         console.error('Failed to set the status:', error.message);
       } else {
-        var status = on ? 'on' : 'off';
+        const status = on ? 'on' : 'off';
         browser.browserAction.setIcon({
           path: {
             '16': 'images/icon-16-' + status + '.png',
@@ -39,7 +46,7 @@ function setStatus(on, saveToStorage) {
 
 function restoreSettings() {
   browser.storage.sync.get({on: true}, function(items) {
-    var error = browser.runtime.lastError;
+    const error = browser.runtime.lastError;
     if (error) {
       console.error('Failed to retrieve settings:', error.message);
     } else {
@@ -51,11 +58,69 @@ function restoreSettings() {
 document.addEventListener('DOMContentLoaded', restoreSettings);
 
 onButton.addEventListener('click', function() {
+  if (pawblockOn) {
+    return;
+  }
+
   setStatus(true, true);
 });
 
 offButton.addEventListener('click', function() {
+  if (!pawblockOn) {
+    return;
+  }
+
+  areYouSure.style.display = 'block';
+
+  confirmButton.setAttribute('disabled', 'true');
+  let counter = 5;
+  confirmButton.innerText = counter;
+
+  if (countdown) {
+    clearInterval(countdown);
+  }
+
+  countdown = setInterval(() => {
+    counter--;
+    confirmButton.innerText = counter;
+    if (counter <= 0) {
+      clearInterval(countdown);
+      confirmButton.removeAttribute('disabled');
+      confirmButton.innerText = 'Yes';
+    }
+  }, 1000);
+});
+
+cancelButton.addEventListener('click', () => {
+  areYouSure.style.display = '';
+
+  if (countdown) {
+    clearInterval(countdown);
+    countdown = null;
+  }
+});
+
+cancelButton.addEventListener('mouseenter', () => {
+  document.querySelector('#animal').src = 'images/happy-cat.svg';
+});
+
+cancelButton.addEventListener('mouseleave', () => {
+  document.querySelector('#animal').src = 'images/sad-pug.svg';
+});
+
+confirmButton.addEventListener('click', () => {
+  if (confirmButton.getAttribute('disabled')) {
+    return;
+  }
+
   setStatus(false, true);
+
+  areYouSure.style.display = '';
+
+  if (countdown) {
+    clearInterval(countdown);
+    countdown = null;
+  }
 });
 
 document.querySelector('#options-link').addEventListener('click', function() {

extension/styles/popup.css

@@ -16,10 +16,26 @@ h1 {
     margin-bottom: 0.2em;
 }
 
-#buttons {
+#status-buttons, #confirm-buttons {
     justify-content: center;
 }
 
+#confirm-buttons {
+    margin-top: 15px;
+}
+
+.button {
+    min-width: 100px;
+}
+
 #on-button, #off-button {
     min-width: 55px;
 }
+
+#are-you-sure {
+    display: none;
+}
+
+img {
+    max-width: 150px;
+}