Mirrors/uBlock
1
0
Fork 0
mirror of https://github.com/gorhill/uBlock.git synced 2024-09-15 15:32:28 +02:00
Code Issues Releases Wiki Activity

Redesign document-blocked page

Browse Source 
Related issue:
- https://github.com/uBlockOrigin/uBlock-issues/issues/1681

The redesign is inspired by Brave's corresponding document-blocked
page.
This commit is contained in:
Raymond Hill 2022-09-10 14:11:23 -04:00
parent 60d1206215
commit 3029c78a55
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
5 changed files with 83 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/_locales/en/messages.json
View File

@ -1117,6 +1117,10 @@
"message": "off", "message": "off",
"description": "Firefox-specific: appears as 'uBlock₀ (off)'" "description": "Firefox-specific: appears as 'uBlock₀ (off)'"
}, },
"docblockedTitle": {
"message": "Page blocked",
"description": "Used as a title for the document-blocked page"
},
"docblockedPrompt1": { "docblockedPrompt1": {
"message": "uBlock Origin has prevented the following page from loading:", "message": "uBlock Origin has prevented the following page from loading:",
"description": "Used in the strict-blocking page" "description": "Used in the strict-blocking page"
@ -1153,6 +1157,10 @@
"message": "Permanently", "message": "Permanently",
"description": "English: Permanently" "description": "English: Permanently"
}, },
"docblockedDisable": {
"message": "Proceed",
"description": "Button text to navigate to the blocked page"
},
"cloudPush": { "cloudPush": {
"message": "Export to cloud storage", "message": "Export to cloud storage",
"description": "tooltip" "description": "tooltip"

1
src/css/common.css
View File

@ -30,6 +30,7 @@
Ref: https://github.com/uBlockOrigin/uBlock-issues/issues/1005 Ref: https://github.com/uBlockOrigin/uBlock-issues/issues/1005
*/ */
:root { :root {
--default-gap-xxlarge: 40px;
--default-gap-xlarge: 32px; --default-gap-xlarge: 32px;
--default-gap-large: 24px; --default-gap-large: 24px;
--default-gap: 16px; --default-gap: 16px;

46
src/css/document-blocked.css
View File

@ -20,16 +20,21 @@
body { body {
display: flex; display: flex;
flex-direction: column; padding: var(--default-gap-xxlarge) var(--default-gap-small);
padding: 40px; justify-content: center;
text-align: center;
} }
body > div { :root.mobile body {
margin: 0 0 var(--default-gap-large) 0; padding: var(--default-gap-small);
} }
body > div > * {
margin: 0 0 var(--default-gap-xsmall) 0; #rootContainer {
max-width: min(100vw, 600
px);
} }
#rootContainer > * {
margin: 0 0 var(--default-gap-xxlarge) 0;
}
a { a {
text-decoration: none; text-decoration: none;
} }
@ -41,7 +46,6 @@ a {
width: 100%; width: 100%;
} }
#warningSign > a { #warningSign > a {
fill: rgb(var(--yellow-50));
font-size: 96px; font-size: 96px;
} }
#theURL { #theURL {
@ -106,25 +110,33 @@ body[dir="rtl"] #toggleParse {
#parsed span:first-of-type { #parsed span:first-of-type {
font-weight: bold; font-weight: bold;
} }
#whyex a { #whyex a {
white-space: nowrap; white-space: nowrap;
} }
#proceed { #whyex ul {
margin-bottom: var(--default-gap); display: flex;
flex-direction: column;
margin: 0;
padding-inline-start: var(--default-gap-xsmall);
} }
:root.mobile .proceedButtons {
#actionContainer {
display: flex;
justify-content: space-between;
}
:root.mobile #actionContainer {
justify-content: center; justify-content: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.proceedButtons > button { #actionContainer > button {
margin-inline-end: var(--default-gap); margin-bottom: 2rem
margin-block-end: var(--default-gap-xsmall);
} }
.filterList:first-child .filterListSeparator { .filterList {
display: none; display: flex;
} }
.filterList .filterListSupport[href=""] { .filterList .filterListSupport[href=""] {
display: none; display: none;
} }

75
src/document-blocked.html
View File

@ -3,56 +3,51 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=yes"> <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/themes/default.css">
<link rel="stylesheet" href="css/common.css"> <link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/fa-icons.css"> <link rel="stylesheet" href="css/fa-icons.css">
<link rel="stylesheet" href="css/document-blocked.css"> <link rel="stylesheet" href="css/document-blocked.css">
</head> </head>
<body> <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">
<div> <a class="fa-icon" href="https://github.com/gorhill/uBlock/wiki/Strict-blocking" target="_blank" rel="noopener noreferrer">exclamation-triangle</a>
<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>
<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> </div>
<div> <div>
<button id="back" class="preferred" data-i18n="docblockedBack" type="button">_<span class="hover"></span></button> <p data-i18n="docblockedPrompt1"></p>
<button id="bye" class="preferred" data-i18n="docblockedClose" type="button">_<span class="hover"></span></button> <div id="theURL" class="collapsed">
</div> <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 id="proceed"></p> <p data-i18n="docblockedPrompt2"></p>
<p class="proceedButtons"> <p id="why" class="code"></p>
<button id="proceedTemporary" data-i18n="docblockedDisableTemporary" type="button">_<span class="hover"></span></button> <div id="whyex" style="display: none;">
<button id="proceedPermanent" data-i18n="docblockedDisablePermanent" type="button">_<span class="hover"></span></button> <span data-i18n="docblockedFoundIn"></span>
</p> <ul></ul>
</div> </div>
</div>
<div id="templates" style="display: none;"> <div class="li">
<span class="proceed"> <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>
<span></span> </div>
<select>
<option class="hn" value="" selected> <div id="actionContainer">
<option class="dn" value=""> <button id="back" data-i18n="docblockedBack" type="button">_<span class="hover"></span></button>
</select> <button id="bye" data-i18n="docblockedClose" type="button">_<span class="hover"></span></button>
<span></span> <button id="proceed" class="preferred" data-i18n="docblockedDisable" type="button"><span class="hover"></span></button>
</span> </div>
<span class="filterList">
<span class="filterListSeparator">&#x2022;</span> <div id="templates" style="display: none;">
<a class="filterListSource" href="asset-viewer.html?url=" target="_blank"></a>&nbsp;<!-- <li class="filterList">
--><a class="fa-icon filterListSupport hidden" href="#" target="_blank" rel="noopener noreferrer">home</a> <a class="filterListSource" href="asset-viewer.html?url=" target="_blank"></a>&nbsp;<!--
</span> --><a class="fa-icon filterListSupport hidden" href="#" target="_blank" rel="noopener noreferrer">home</a>
</span>
</div>
</div> </div>
<script src="lib/hsluv/hsluv-0.1.0.min.js"></script> <script src="lib/hsluv/hsluv-0.1.0.min.js"></script>

37
src/js/document-blocked.js
View File

@ -58,7 +58,7 @@ let details = {};
if ( Array.isArray(lists) === false || lists.length === 0 ) { return; } 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 ) { for ( const list of lists ) {
const listElem = document.querySelector('#templates .filterList') const listElem = document.querySelector('#templates .filterList')
.cloneNode(true); .cloneNode(true);
@ -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.nodeFromSelector('#theURL > p > span:first-of-type').textContent = details.url;
uDom.nodeFromId('why').textContent = details.fs; uDom.nodeFromId('why').textContent = details.fs;
@ -217,9 +196,7 @@ if ( window.history.length > 1 ) {
/******************************************************************************/ /******************************************************************************/
const getTargetHostname = function() { const getTargetHostname = function() {
const elem = document.querySelector('#proceed select'); return details.hn;
if ( elem === null ) { return details.hn; }
return elem.value;
}; };
const proceedToURL = function() { const proceedToURL = function() {
@ -246,8 +223,14 @@ const proceedPermanent = async function() {
proceedToURL(); proceedToURL();
}; };
uDom('#proceedTemporary').attr('href', details.url).on('click', proceedTemporary); uDom('#proceed').on('click', ( ) => {
uDom('#proceedPermanent').attr('href', details.url).on('click', proceedPermanent); const input = document.querySelector('#disableWarning');
if ( input.checked ) {
proceedPermanent();
} else {
proceedTemporary();
}
});
/******************************************************************************/ /******************************************************************************/