diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/document-blocked.html | 97 | ||||
| -rw-r--r-- | src/js/document-blocked.js | 78 |
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"></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'); |