fine tuning warning page

4 files changed, 61 insertions, 22 deletions

diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
index 4ac3abc..b3b7a13 100644
--- a/src/_locales/en/messages.json
+++ b/src/_locales/en/messages.json
@@ -512,8 +512,16 @@
     "description": "English: Close this window"
   },
   "docblockedProceed": {
-    "message": "Proceed at your own risk",
-    "description": "English: Proceed at your own risk"
+    "message": "Disable strict blocking for {{hostname}}",
+    "description": "English: Disable strict blocking for {{hostname}} ..."
+  },
+  "docblockedDisableTemporary": {
+    "message": "Temporarily",
+    "description": "English: Temporarily"
+  },
+  "docblockedDisablePermanent": {
+    "message": "Permanently",
+    "description": "English: Permanently"
   },
   "dummy":{
     "message":"This entry must be the last one",
diff --git a/src/document-blocked.html b/src/document-blocked.html
index 3e9f35b..ee06972 100644
--- a/src/document-blocked.html
+++ b/src/document-blocked.html
@@ -13,14 +13,11 @@ body > div {
     margin: 1.5em 0;
     }
 body > div > p {
-    margin: 2px 0;
+    margin: 4px 0;
     }
 body > div > p:first-child {
     margin: 1.5em 0 0 0;
     }
-body > div > p:last-child {
-    margin: 0 0 1.5em 0;
-    }
 .code {
     background-color: rgba(0, 0, 0, 0.1);
     display: inline-block;
@@ -30,7 +27,7 @@ body > div > p:last-child {
     }
 button {
     cursor: pointer;
-    margin: 0 1em;
+    margin: 0 1em 0.25em 1em;
     padding: 0.25em 0.5em;
     font-size: inherit;
     }
@@ -66,8 +63,13 @@ button {
     </div>
 
 <div>
-    <p data-i18n="docblockedProceed"></p>
-    <p><a id="yolo" class="what" href></a></p>
+    <p id="proceed"></p>
+    <p><button id="proceedTemporary" data-i18n="docblockedDisableTemporary" type="button"></button>
+    <button id="proceedPermanent" data-i18n="docblockedDisablePermanent" type="button"></button></p>
+    </div>
+
+<div style="display: none;">
+    <span id="proceedTemplate"><span></span><span class="code"></span><span></span></span>
     </div>
 
 <script src="js/vapi-common.js"></script>
diff --git a/src/js/document-blocked.js b/src/js/document-blocked.js
index 7108100..f830966 100644
--- a/src/js/document-blocked.js
+++ b/src/js/document-blocked.js
@@ -30,30 +30,58 @@
 /******************************************************************************/
 
 var messager = vAPI.messaging.channel('document-blocked.js');
+var details = {};
 
-var matches = /details=([^&]+)/.exec(window.location.search);
-if ( matches === null ) {
-    return;
-}
-var details = JSON.parse(atob(matches[1]));
+(function() {
+    var matches = /details=([^&]+)/.exec(window.location.search);
+    if ( matches === null ) {
+        return;
+    }
+    details = JSON.parse(atob(matches[1]));
+})();
 
 /******************************************************************************/
 
-var yolo = function(ev) {
-    var onReady = function() {
-        window.location.replace(details.url);
-    };
+var proceedToURL = function() {
+    window.location.replace(details.url);
+};
+
+/******************************************************************************/
 
+var proceedTemporary = function() {
     messager.send({
         what: 'temporarilyWhitelistDocument',
         url: details.url
-    }, onReady);
+    }, proceedToURL);
+};
 
-    ev.preventDefault();
+/******************************************************************************/
+
+var proceedPermanent = function() {
+    messager.send({
+        what: 'toggleHostnameSwitch',
+        name: 'dontBlockDoc',
+        hostname: details.hn,
+        state: true
+    }, proceedToURL);
 };
 
 /******************************************************************************/
 
+(function() {
+    var matches = /^(.*)\{\{hostname\}\}(.*)$/.exec(vAPI.i18n('docblockedProceed'));
+    if ( matches === null ) {
+        return;
+    }
+    var proceed = uDom('#proceedTemplate').clone();
+    proceed.descendants('span:nth-of-type(1)').text(matches[1]);
+    proceed.descendants('span:nth-of-type(2)').text(details.hn);
+    proceed.descendants('span:nth-of-type(3)').text(matches[2]);
+    uDom('#proceed').append(proceed);
+})();
+
+/******************************************************************************/
+
 uDom('.what').text(details.url);
 uDom('#why').text(details.why.slice(3));
 
@@ -65,8 +93,8 @@ if ( window.history.length > 1 ) {
     uDom('#back').css('display', 'none');
 }
 
-uDom('#yolo').attr('href', details.url)
-             .on('click', yolo);
+uDom('#proceedTemporary').attr('href', details.url).on('click', proceedTemporary);
+uDom('#proceedPermanent').attr('href', details.url).on('click', proceedPermanent);
 
 })();
 
diff --git a/src/js/traffic.js b/src/js/traffic.js
index 0e97e30..10c1af1 100644
--- a/src/js/traffic.js
+++ b/src/js/traffic.js
@@ -235,6 +235,7 @@ var onBeforeRootFrameRequest = function(details) {
     // Blocked
     var query = btoa(JSON.stringify({
         url: requestURL,
+        hn: requestHostname,
         why: result
     }));