this fixes #691

2 files changed, 156 insertions, 19 deletions

diff --git a/src/document-blocked.html b/src/document-blocked.html
index e66f7e6..a328084 100644
--- a/src/document-blocked.html
+++ b/src/document-blocked.html
@@ -5,14 +5,14 @@
 <link rel="stylesheet" href="css/common.css" type="text/css">
 <style>
 body {
-    font-family: sans-serif;
     font-size: large;
     text-align: center;
     }
 body > div {
     margin: 1.5em 0;
     }
-body > div > p {
+body > div > p,
+body > div > div {
     margin: 4px 0;
     }
 body > div > p:first-child {
@@ -21,21 +21,24 @@ body > div > p:first-child {
 a {
     text-decoration: none;
     }
+button {
+    cursor: pointer;
+    margin: 0 1em 0.25em 1em;
+    padding: 0.25em 0.5em;
+    font-size: inherit;
+    }
+select {
+    font: inherit;
+    padding: 2px;
+    }
 .code {
     background-color: rgba(0, 0, 0, 0.1);
-    display: inline-block;
     font-family: monospace;
     font-size: large;
     line-height: 1;
-    padding: 2px 4px;
+    padding: 4px;
     word-break: break-all;
     }
-button {
-    cursor: pointer;
-    margin: 0 1em 0.25em 1em;
-    padding: 0.25em 0.5em;
-    font-size: inherit;
-    }
 #warningSign {
     margin: 1e, 0;
     opacity: 1;
@@ -44,7 +47,66 @@ button {
     }
 #warningSign > span {
     color: #f2a500;
-    font-size: 180px;
+    font-size: 10em;
+    }
+#theURL {
+    padding: 0;
+    }
+#theURL > * {
+    margin: 0;
+    }
+#theURL > p {
+    position: relative;
+    z-index: 10;
+    }
+#theURL > p > span {
+    background-color: transparent;
+    top: 100%;
+    box-sizing: border-box;
+    cursor: pointer;
+    opacity: 0.5;
+    padding: 0.2em;
+    position: absolute;
+    right: 0;
+    transform: translate(0, -50%);
+    }
+#theURL > p:hover > span {
+    opacity: 1;
+    }
+#theURL > p > span:before {
+    content: '\f010';
+    }
+#theURL.collapsed > p > span:before {
+    content: '\f00e';
+    }
+#parsed {
+    background-color: #f8f8f8;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-top: none;
+    color: gray;
+    font-size: small;
+    overflow-x: hidden;
+    padding: 0 4px 4px 4px;
+    text-align: initial;
+    text-overflow: ellipsis; 
+    }
+#theURL.collapsed > #parsed {
+    display: none;
+    }
+#parsed ul, #parsed li {
+    list-style-type: none;
+    }
+#parsed li {
+    white-space: nowrap;
+    }
+#parsed span {
+    display: inline-block;
+    }
+#parsed a {
+    font-weight: bold;
+    }
+#parsed span:first-of-type {
+    font-weight: bold;
     }
 #whyex {
     font-size: smaller;
@@ -57,11 +119,7 @@ button {
     white-space: nowrap;
 }
 .proceedChoice {
-    display: inline-block;
     text-align: left;
-    vertical-align: middle;
-    }
-select {
     }
 </style>
 </head>
@@ -69,13 +127,16 @@ select {
 <div id="warningSign"><span class="fa">&#xf071;</span></div>
 <div>
     <p data-i18n="docblockedPrompt1"></p>
-    <p class="what code"></p>
+    <div id="theURL" class="collapsed">
+        <p class="code"></p>
+        <ul id="parsed"></ul>
+        </div>
     </div>
 
 <div>
     <p data-i18n="docblockedPrompt2"></p>
     <p id="why" class="code"></p><!--
- --><span id="whyex" style="display: none;"><br><span data-i18n="docblockedFoundIn"></span> <span></span></span>
+ --><span id="whyex" style="display: none;"><span data-i18n="docblockedFoundIn"></span> <span></span></span>
     </div>
 
 <div>
@@ -93,7 +154,7 @@ select {
     <span id="proceedTemplate">
         <span></span> 
         <span class="proceedChoice">
-            <select class="code">
+            <select>
                 <option class="hn" value="" selected>
                 <option class="dn" value="">
             </select> 
diff --git a/src/js/document-blocked.js b/src/js/document-blocked.js
index 956b848..a37e3d6 100644
--- a/src/js/document-blocked.js
+++ b/src/js/document-blocked.js
@@ -152,9 +152,85 @@ var proceedPermanent = function() {
 
 /******************************************************************************/
 
-uDom.nodeFromSelector('.what').textContent = details.url;
+uDom.nodeFromSelector('#theURL > p').textContent = details.url;
 uDom.nodeFromId('why').textContent = details.fs;
 
+/******************************************************************************/
+
+// https://github.com/gorhill/uBlock/issues/691
+// Parse URL to extract as much useful information as possible. This is useful
+// to assist the user in deciding whether to navigate to the web page.
+
+(function() {
+    if ( typeof URL !== 'function' ) {
+        return;
+    }
+
+    var reURL = /^https?:\/\//;
+
+    var liFromParam = function(name, value) {
+        var li = document.createElement('li');
+        var span = document.createElement('span');
+        span.textContent = name;
+        li.appendChild(span);
+        li.appendChild(document.createTextNode(' = '));
+        span = document.createElement('span');
+        if ( reURL.test(value) ) {
+            var a = document.createElement('a');
+            a.href = a.textContent = value;
+            span.appendChild(a);
+        } else {
+            span.textContent = value;
+        }
+        li.appendChild(span);
+        return li;
+    };
+
+    var renderParams = function(parentNode, rawURL) {
+        var url = null;
+        try {
+            url = new URL(rawURL);
+        } catch(ex) {
+        }
+        if ( url === null || url.search.length === 0 ) {
+            return false;
+        }
+        var params = url.search.slice(1).split('&');
+        var param, pos, name, value, li, ul;
+        for ( var i = 0; i < params.length; i++ ) {
+            param = params[i];
+            pos = param.indexOf('=');
+            if ( pos === -1 ) {
+                pos = param.length;
+            }
+            name = decodeURIComponent(param.slice(0, pos));
+            value = decodeURIComponent(param.slice(pos + 1));
+            li = liFromParam(name, value);
+            if ( reURL.test(value) ) {
+                ul = document.createElement('ul');
+                renderParams(ul, value);
+                li.appendChild(ul);
+            }
+            parentNode.appendChild(li);
+        }
+        return true;
+    };
+
+    if ( renderParams(uDom.nodeFromId('parsed'), details.url) === false ) {
+        return;
+    }
+
+    var toggler = document.createElement('span');
+    toggler.className = 'fa';
+    uDom('#theURL > p').append(toggler);
+
+    uDom(toggler).on('click', function() {
+        uDom.nodeFromId('theURL').classList.toggle('collapsed');
+    });
+})();
+
+/******************************************************************************/
+
 if ( window.history.length > 1 ) {
     uDom('#back').on('click', function() { window.history.back(); });
     uDom('#bye').css('display', 'none');