mirror of
https://github.com/gorhill/uBlock.git
synced 2024-09-04 10:09:38 +02:00
Redesign document-blocked page
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:
parent
60d1206215
commit
3029c78a55
@ -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"
|
||||
@ -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"
|
||||
|
@ -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;
|
||||
|
@ -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);
|
||||
}
|
||||
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 {
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -41,7 +46,6 @@ a {
|
||||
width: 100%;
|
||||
}
|
||||
#warningSign > a {
|
||||
fill: rgb(var(--yellow-50));
|
||||
font-size: 96px;
|
||||
}
|
||||
#theURL {
|
||||
@ -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);
|
||||
}
|
||||
:root.mobile .proceedButtons {
|
||||
|
||||
#actionContainer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
: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;
|
||||
}
|
||||
|
@ -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>
|
||||
<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 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>
|
||||
<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>
|
||||
<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 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>
|
||||
<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 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">•</span>
|
||||
<a class="filterListSource" href="asset-viewer.html?url=" target="_blank"></a> <!--
|
||||
--><a class="fa-icon filterListSupport hidden" href="#" target="_blank" rel="noopener noreferrer">home</a>
|
||||
</span>
|
||||
<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 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;">
|
||||
<li class="filterList">
|
||||
<a class="filterListSource" href="asset-viewer.html?url=" target="_blank"></a> <!--
|
||||
--><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>
|
||||
|
@ -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);
|
||||
@ -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;
|
||||
|
||||
@ -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() {
|
||||
@ -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();
|
||||
}
|
||||
});
|
||||
|
||||
/******************************************************************************/
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user