Skip to content

Commit

Permalink
Redesign document-blocked page
Browse files Browse the repository at this point in the history 
Related issue:
- uBlockOrigin/uBlock-issues#1681

The redesign is inspired by Brave's corresponding document-blocked
page.
  • Loading branch information
@gorhill
gorhill committed Sep 10, 2022
1 parent 60d1206 commit 3029c78
Show file tree
Hide file tree
Showing 5 changed files with 80 additions and 81 deletions.
8 changes: 8 additions & 0 deletions src/_locales/en/messages.json
View file
Expand Up @@ -1117,6 +1117,10 @@
"message": "off",
"description": "Firefox-specific: appears as 'uBlock₀ (off)'"
},
"docblockedTitle": {
"message": "Page blocked",
"description": "Used as a title for the document-blocked page"
},
"docblockedPrompt1": {
"message": "uBlock Origin has prevented the following page from loading:",
"description": "Used in the strict-blocking page"
Expand Down Expand Up @@ -1153,6 +1157,10 @@
"message": "Permanently",
"description": "English: Permanently"
},
"docblockedDisable": {
"message": "Proceed",
"description": "Button text to navigate to the blocked page"
},
"cloudPush": {
"message": "Export to cloud storage",
"description": "tooltip"
Expand Down
1 change: 1 addition & 0 deletions src/css/common.css
View file
Expand Up @@ -30,6 +30,7 @@
Ref: https://github.com/uBlockOrigin/uBlock-issues/issues/1005
*/
:root {
--default-gap-xxlarge: 40px;
--default-gap-xlarge: 32px;
--default-gap-large: 24px;
--default-gap: 16px;
Expand Down
46 changes: 29 additions & 17 deletions src/css/document-blocked.css
View file
Expand Up @@ -20,16 +20,21 @@

body {
display: flex;
flex-direction: column;
padding: 40px;
text-align: center;
padding: var(--default-gap-xxlarge) var(--default-gap-small);
justify-content: center;
}
body > div {
margin: 0 0 var(--default-gap-large) 0;
:root.mobile body {
padding: var(--default-gap-small);
}

#rootContainer {
max-width: min(100vw, 600
px);
}
body > div > * {
margin: 0 0 var(--default-gap-xsmall) 0;
#rootContainer > * {
margin: 0 0 var(--default-gap-xxlarge) 0;
}

a {
text-decoration: none;
}
Expand All @@ -41,7 +46,6 @@ a {
width: 100%;
}
#warningSign > a {
fill: rgb(var(--yellow-50));
font-size: 96px;
}
#theURL {
Expand Down Expand Up @@ -106,25 +110,33 @@ body[dir="rtl"] #toggleParse {
#parsed span:first-of-type {
font-weight: bold;
}

#whyex a {
white-space: nowrap;
}
#proceed {
margin-bottom: var(--default-gap);
#whyex ul {
display: flex;
flex-direction: column;
margin: 0;
padding-inline-start: var(--default-gap-xsmall);
}

#actionContainer {
display: flex;
justify-content: space-between;
}
:root.mobile .proceedButtons {
:root.mobile #actionContainer {
justify-content: center;
display: flex;
flex-direction: column;
}
.proceedButtons > button {
margin-inline-end: var(--default-gap);
margin-block-end: var(--default-gap-xsmall);
#actionContainer > button {
margin-bottom: 2rem
}

.filterList:first-child .filterListSeparator {
display: none;
}
.filterList {
display: flex;
}
.filterList .filterListSupport[href=""] {
display: none;
}
Expand Down
69 changes: 32 additions & 37 deletions src/document-blocked.html
View file
Expand Up @@ -3,56 +3,51 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=yes">
<title></title>
<title data-i18n="docblockedTitle"></title>
<link rel="stylesheet" href="css/themes/default.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/fa-icons.css">
<link rel="stylesheet" href="css/document-blocked.css">
</head>
<body>
<div id="warningSign"><a class="fa-icon" href="https://github.com/gorhill/uBlock/wiki/Strict-blocking" target="_blank" rel="noopener noreferrer">exclamation-triangle</a></div>
<div id="rootContainer">
<div id="warningSign">
<a class="fa-icon" href="https://github.com/gorhill/uBlock/wiki/Strict-blocking" target="_blank" rel="noopener noreferrer">exclamation-triangle</a>
</div>

<div>
<p data-i18n="docblockedPrompt1"></p>
<div id="theURL" class="collapsed">
<p class="code"><span></span><span id="toggleParse" class="hidden"><span class="fa-icon">zoom-in</span><span class="fa-icon">zoom-out</span></span></p>
<ul id="parsed"></ul>
<div>
<p data-i18n="docblockedPrompt1"></p>
<div id="theURL" class="collapsed">
<p class="code"><span></span><span id="toggleParse" class="hidden"><span class="fa-icon">zoom-in</span><span class="fa-icon">zoom-out</span></span></p>
<ul id="parsed"></ul>
</div>
</div>
</div>

<div>
<p data-i18n="docblockedPrompt2"></p>
<p id="why" class="code"></p>
<p id="whyex" style="display: none;"><span data-i18n="docblockedFoundIn"></span> <span></span></p>
<div>
<p data-i18n="docblockedPrompt2"></p>
<p id="why" class="code"></p>
<div id="whyex" style="display: none;">
<span data-i18n="docblockedFoundIn"></span>
<ul></ul>
</div>
</div>

<div>
<button id="back" class="preferred" data-i18n="docblockedBack" type="button">_<span class="hover"></span></button>
<button id="bye" class="preferred" data-i18n="docblockedClose" type="button">_<span class="hover"></span></button>
</div>
<div class="li">
<label><span class="input checkbox"><input type="checkbox" id="disableWarning"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span>Don't warn me again about this site</span></label>
</div>

<div>
<p id="proceed"></p>
<p class="proceedButtons">
<button id="proceedTemporary" data-i18n="docblockedDisableTemporary" type="button">_<span class="hover"></span></button>
<button id="proceedPermanent" data-i18n="docblockedDisablePermanent" type="button">_<span class="hover"></span></button>
</p>
</div>
<div id="actionContainer">
<button id="back" data-i18n="docblockedBack" type="button">_<span class="hover"></span></button>
<button id="bye" data-i18n="docblockedClose" type="button">_<span class="hover"></span></button>
<button id="proceed" class="preferred" data-i18n="docblockedDisable" type="button"><span class="hover"></span></button>
</div>

<div id="templates" style="display: none;">
<span class="proceed">
<span></span>
<select>
<option class="hn" value="" selected>
<option class="dn" value="">
</select>
<span></span>
</span>
<span class="filterList">
<span class="filterListSeparator">&#x2022;</span>
<a class="filterListSource" href="asset-viewer.html?url=" target="_blank"></a>&nbsp;<!--
--><a class="fa-icon filterListSupport hidden" href="#" target="_blank" rel="noopener noreferrer">home</a>
</span>
<div id="templates" style="display: none;">
<li class="filterList">
<a class="filterListSource" href="asset-viewer.html?url=" target="_blank"></a>&nbsp;<!--
--><a class="fa-icon filterListSupport hidden" href="#" target="_blank" rel="noopener noreferrer">home</a>
</span>
</div>
</div>

<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
Expand Down
37 changes: 10 additions & 27 deletions src/js/document-blocked.js
View file
Expand Up @@ -58,7 +58,7 @@ let details = {};

if ( Array.isArray(lists) === false || lists.length === 0 ) { return; }

const parent = uDom.nodeFromSelector('#whyex > span:nth-of-type(2)');
const parent = uDom.nodeFromSelector('#whyex > ul');
for ( const list of lists ) {
const listElem = document.querySelector('#templates .filterList')
.cloneNode(true);
Expand All @@ -77,27 +77,6 @@ let details = {};

/******************************************************************************/

(( ) => {
const matches = /^(.*)\{\{hostname\}\}(.*)$/.exec(vAPI.i18n('docblockedProceed'));
if ( matches === null ) { return; }
const proceed = document.querySelector('#templates .proceed').cloneNode(true);
proceed.children[0].textContent = matches[1];
proceed.children[2].textContent = matches[2];
const hnOption = proceed.querySelector('.hn');
if ( details.hn !== details.dn ) {
hnOption.textContent = details.hn;
hnOption.setAttribute('value', details.hn);
} else {
hnOption.remove();
}
const dnOption = proceed.querySelector('.dn');
dnOption.textContent = details.dn;
dnOption.setAttribute('value', details.dn);
document.getElementById('proceed').append(proceed);
})();

/******************************************************************************/

uDom.nodeFromSelector('#theURL > p > span:first-of-type').textContent = details.url;
uDom.nodeFromId('why').textContent = details.fs;

Expand Down Expand Up @@ -217,9 +196,7 @@ if ( window.history.length > 1 ) {
/******************************************************************************/

const getTargetHostname = function() {
const elem = document.querySelector('#proceed select');
if ( elem === null ) { return details.hn; }
return elem.value;
return details.hn;
};

const proceedToURL = function() {
Expand All @@ -246,8 +223,14 @@ const proceedPermanent = async function() {
proceedToURL();
};

uDom('#proceedTemporary').attr('href', details.url).on('click', proceedTemporary);
uDom('#proceedPermanent').attr('href', details.url).on('click', proceedPermanent);
uDom('#proceed').on('click', ( ) => {
const input = document.querySelector('#disableWarning');
if ( input.checked ) {
proceedPermanent();
} else {
proceedTemporary();
}
});

/******************************************************************************/

Expand Down

0 comments on commit 3029c78

Please sign in to comment.